Heute werde ich einen neuen HTML5/"> HTML5 -Serienkurs starten, nämlich meine Studiennotizen zu" Der endgültige Leitfaden für HTML5 ". Ich werde die Kapitel oder sinnvollen Inhalte organisieren, die ich für gut oder sinnvoll halte, damit jeder lernen kann.
Ein Element kann seine eigenen Attribute definieren, wie das A -Tag, um das HREF -Attribut zu definieren, das als lokales Attribut bezeichnet wird. Entsprechend können wir durch globale Attribute gemeinsame Verhaltensweisen für alle Elemente festlegen. Natürlich können Sie auch globale Attribute für einzelne Elemente festlegen, aber es macht nicht viel Sinn, dies zu tun. Im Folgenden werde ich diese globalen Attribute nacheinander einführen.
Das folgende Beispiel läuft normal im Chrombrowser. Einige Beispiele für Firefox können nicht ausgeführt werden, und ich habe andere Browser nicht getestet, daher wird empfohlen, Chrome Browser als bevorzugten HTML5 -Browser zu verwenden. Ich habe mich nicht auf Probleme mit dem Browser -Kompatibilität konzentriert, sondern auf Lernen und Implementierung. HTML5 wird noch verbessert. Mit seiner Popularität glaube ich, dass Mainstream -Browser es immer besser unterstützen und das Browser -Kompatibilitätsproblem zu dieser Zeit viel besser sein wird.
1. AccesskeyMit der AccessKey -Eigenschaft können Sie eine oder mehrere Tastaturverknüpfungen festlegen, damit Sie Elemente auf der Seite auswählen können. Schauen wir uns das folgende Beispiel an:
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
</head>
<body>
<form>
Name: <Eingabe type = "text" name = "name" accessKey = "n"/>
<p/>
Passwort: <Eingabe type = "Passwort" name = "password" accessKey = "p"/>
<p/>
<input type = "sure" value = "log" accessKey = "s"/> an.
</form>
</body>
</html>
In diesem Beispiel können Sie wichtige Kombinationen verwenden, um Elemente auf der Seite auszuwählen. Beispielsweise können Sie unter dem Windows -Betriebssystem Alt+XXX verwenden, um ein Element auszuwählen.
Laufeffekt:
2. KlasseIch möchte nichts mehr über dieses Attribut sagen. Es ist eine Funktion der Gruppierungselemente. Meistens wird es in Kombination mit CSS verwendet, um unterschiedliche Anzeigeeffekte für Elemente in verschiedenen Gruppen festzulegen.
3.KontabierbarDies ist ein neues Attribut, das zu HTML5 hinzugefügt wurde. Fügen Sie HTML -Elementen intierbares Attribut hinzu, setzen Sie es auf true fest, sodass Benutzer Elementinhalte bearbeiten können. Setzen Sie auf False und erlauben Sie den Benutzern nicht zu bearbeiten.
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
</head>
<body>
<p intdlichtitable = "true"> Es regnet im Moment </p> </p>
</body>
</html>
4.ContextMenuMit ContextMenu können Benutzer das Rechtsklickmenü des HTML-Elements festlegen. Das Menü wird angezeigt, wenn der Benutzer es auslöst. Kein Browser unterstützt diese Immobilie bisher.
5.Dir Das DIR -Attribut definiert die Ausrichtung von HTML -Elementliteralen und unterstützt zwei Werte, LTR (von links nach rechts) und RTL (von rechts nach links).<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
</head>
<body>
<P Dir = "rtl"> Dies ist rechts nach links </p> </p>
<P Dir = "LTR"> Dies ist links nach rechts </p>
</body>
</html>
6.ArggierbarDraggable ist ein Attribut, das die Drag & Drop -Funktion von HTML -Elementen in HTML5 implementiert, die wir in den folgenden Kursen ausführlich vorstellen werden.
7.DropzoneDropzone ist auch ein Attribut, das die HTML -Element -Drag -Funktion in HTML5 implementiert. Wir werden es im späteren Kurs ausführlich vorstellen.
8.HIDDENJeder sollte mit diesem Attribut vertraut sein, nämlich ein HTML -Element zu verbergen.
9.IdJeder sollte dieses Attribut kennen. Es legt eine eindeutige Kennung für das HTML -Element fest, und auf einer HTML -Seite sind keine Elemente mit einer beträchtlichen ID zulässig.
10.langLang gibt die Sprache an, die für den Inhalt des HTML -Elements verwendet wird. Der Wert von Lang muss ein gültiger ISO -Sprachcode sein. Weitere Informationen finden Sie unter http://tools.ietf.org/html/bcp47. Es ist zu beachten, dass der Umgang mit Sprache eine sehr komplexe und technische Angelegenheit ist.
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
</head>
<body>
<p Lang = "en"> Hallo - wie geht es dir? </p>
<P Lang = "FR"> Bonjour - Kommentar êtes -vous? </>
<p lang = "es"> Hola - ¿Cómo estás? </p>
</body>
</html>
11.Spellcheck Bei Verwendung des Rechtschreibprüfungsattributs hilft Ihnen der Browser, zu überprüfen, ob der Inhalt des HTML -Elements des Inhalts des HTML ordnungsgemäß geschrieben ist. Nur wenn das HTML -Element bearbeitbar ist, kann das Rechtschreibprüfungsattribut sinnvoll sein.<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
</head>
<body>
<textarea bellscheck = "true"> Dies ist ein falscher Texte </textArea>
</body>
</html>
Effekt: (Ich habe den gewünschten Effekt mit Chrome nicht ausgeführt, ich weiß nicht warum)
12.StyleEs ist nicht erforderlich, dieses Attribut zu sehr vorzustellen und den CSS -Stil für das HTML -Element festzulegen.
13.TabindexMit Tabindex können Sie die Reihenfolge definieren, in der auf HTML -Elemente zugegriffen werden, wenn Sie die Registerkartenschlüssel verwenden. Wenn Tabindex auf -1 gesetzt ist, wird das HTML -Element nicht mit der Registerkartenschlüssel ausgewählt.
<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
</head>
<body>
<form>
<Label> Name: <Eingabe type = "text" name = "name" tabindex = "1"/> </label>
<p/>
<Label> Stadt: <Eingabe type = "text" name = "city" tabindex = "-1"/> </label>
</p>
<Label> Land: <Eingabe type = "text" name = "land" tabindex = "2"/> </label>
</p>
<Eingabe type = "subine" tabindex = "3"/>
</form>
</body>
</html>
Wirkung:
14.Title Der Titel kann zusätzliche Informationen für das HTML -Element liefern, mit dem häufig Eingabeaufforderungsinformationen angezeigt werden.<! DocType html>
<html>
<kopf>
<title> Beispiel </title>
</head>
<body>
<a href = "http://apress.com"> Besuchen Sie die Apress -Site </a>
</body>
</html>
Wirkung:
Das ist alles für den heutigen Kurs. Ich hoffe, dass diese Inhalte für alle hilfreich sein werden.
Demo -Download -Adresse: html5guide.rar