HTML5 -Tipps 1: Die heutige Geschwindigkeit der Technologieentwicklung ist erstaunlich. Wenn Sie nicht vorsichtig sind, können Sie möglicherweise nicht mithalten. Die Entwicklung der neuen Generation von HTML-HTML5 bringt uns weiterhin neue Überraschungen. In diesem Artikel werden wir Ihnen einige HTML -Techniken vorstellen.
1. neuer Dokumenttyp (docType)
<! DocType html public -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
Verwenden Sie immer noch den oben genannten XHTML -Dokumenttyp, der sowohl problematisch als auch schwer zu erinnern ist? Wenn dies noch der Fall ist, ist es Zeit, zum neuen HTML5 -Dokumenttyp zu wechseln.
<! DocType html>
Jetzt dauert es nur noch 15 Charaktere so einfach. (Hinweis: Ihre DocType -Erklärung muss in der ersten Zeile Ihrer HTML -Datei angezeigt werden.)
2. Grafik (Abbildung) Elemente
Überlegen Sie immer noch, ob Sie den folgenden Code verwenden, um Bilder zu markieren?
<mg src = path/to/bild alt = über Bild/>
<p> Bild des Mars. </p>
Der obige Code kann nicht einfach und semantisch mit dem Titel des Diagramms zugeordnet werden, da er einfach mit Absatzmarken und Bildelementen verpackt ist, und HTML5 verbessert dies durch Einführung von <Abus> Elementen. In Verbindung mit dem <FigCaption> -Element können wir den Grafik -Titel mit der Grafik kombinieren. Der Code ist wie folgt:
<Abus>
<img src = path/to/bild alt = über Bild/>
<Figcaption>
<p> Dies ist ein Bild von etwas Interessantem. </p>
</figcaption>
</figur>
3. Definieren Sie <klein>
Es stellt sich heraus, dass Sie das <Small> Element verwenden können, um Untertitel zu erstellen, die eng mit dem Logo zusammenhängen. Jetzt hat HTML5 diese Verwendung jedoch geändert, und das <kleine> Element wurde neu definiert oder angemessener, es wird jetzt verwendet, um kleine Wörter oder andere Seitennotizen darzustellen (z. B. eine Bekanntmachung des Urheberrechts am Ende der Website).
4.. Es werden keine Skripte oder Link -Typen mehr benötigt
Höchstwahrscheinlich fügen Sie Ihren Links und Skript -Tags wie dem folgenden Code immer noch Eigenschaften vom Typ hinzu.
<link rel = styleSheet href = path/to/stylesheet.css type = text/CSS/>
<script type = text/javaScript src = path/to/script.js> </script>
In HTML5 wird dies nicht mehr benötigt. Dies bedeutet, dass diese beiden Labels Stile bzw. Skripte darstellen. Daher können wir alle ihre Typattribute löschen. Der Code ist wie folgt:
<link rel = stylesheet href = path/to/stilesheet.css/>
<script src = path/to/script.js> </script>
5. Verwenden oder nicht Zitate verwenden
Denken Sie daran, dass HTML5 sich von XHTML unterscheidet, und Sie müssen die Attribute nicht in Zitate einwickeln, wenn es Ihnen nicht gefällt. Wenn Sie jedoch der Meinung sind, dass Sie Zitate verwenden, werden Sie sich wohler fühlen, natürlich gibt es keine Probleme.
<p class = MyClass id = einige ID> Starten Sie den Reaktor.
6. Machen Sie Ihren Inhalt bearbeitbar
Eine der sehr leistungsstarken Funktionen von HTML5 ist zufrieden, dass der Benutzer, wie der Name schon sagt, alle in einem Element enthaltenen Textinhalte (einschließlich seiner untergeordneten Elemente) bearbeiten können. Es verfügt über eine Vielzahl von Verwendungsmöglichkeiten, wie einfache Aufgabenlisten oder Wiki-basierte Websites, und einer seiner Vorteile besteht darin, dass es den lokalen Speicher verwendet.
<! DocType html>
<html lang = en>
<kopf>
<meta charset = utf-8 ″>
<title> unititled </title>
</head>
<body>
<h2> To-Do-Liste </h2>
<ul inhaltlich = true>
<li> Mechanischer Taxifahrer brechen. </li>
<li> Fahren zur verlassenen Fabrik
<li> Video von sich selbst ansehen </li>
</ul>
</body>
</html>
Oder, wie der fünfte Trick sagt, können Sie auch den Code in Zeile neun wie diesen schreiben (ohne Zitate):
<ul inhaltlich = true>
7. E -Mail -Eingabe
Wenn wir den E -Mail -Typ anwenden, um die Form der Eingabe anzugeben, können wir den Browser befehlen, um nur eine Zeichenfolgeeingabe zuzulassen, die der gültigen E -Mail -Adressstruktur entspricht. Obwohl in Kürze eingebautes Formularverifizierung eintreffen wird, können wir uns nicht ganz darauf verlassen. Ältere Browser verstehen diesen E -Mail -Typ nicht, sie kehren einfach zum normalen Textfeld zurück.
<! DocType html>
<html lang = en>
<kopf>
<meta charset = utf-8 ″>
<title> unititled </title>
</head>
<body>
<form action = method = get>
<Label für = E -Mail> E -Mail: </label>
<Eingabe -ID = E -Mail -Name = E -Mail -Typ = E -Mail />
<Schaltfläche Typ = Senden> Formular Senden </button>
</form>
</body>
</html>
Wenn es um Elemente und Attribute geht, die der Browser unterstützt und nicht unterstützt, müssen Sie wissen, dass alle Browser derzeit nicht so zuverlässig sind. Beispielsweise unterstützt die Opera nur die E -Mail -Überprüfung, wenn Sie das Namensattribut festlegen. Es unterstützt jedoch nicht das Platzhalterattribut (wie unten erläutert wird). Während Sie diese Form der Überprüfung verwenden können, verlassen Sie sich zwar nicht zu sehr darauf.