22 Grundlegende Tipps zu HTML5 (Bild- und Text -Tutorial)

Die Web -Technologie entwickelt sich zu schnell, und wenn Sie nicht mit der Zeit Schritt halten, werden Sie eliminiert. Um sich mit dem bevorstehenden HTML5 zu befassen, fasst dieser Artikel 22 grundlegende Fähigkeiten von HTML5 zusammen und hoffe, dass es für Sie hilfreich ist, HTML5 weiter zu lernen.

Die XHTML-Erklärung ist zu lang, und ich glaube, es gibt nur wenige Front-End-Entwickler, die diese docType-Erklärung von Hand geschrieben haben.

<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en"

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

Die DocType -Erklärung von HTML5 ist sehr kurz. Ich glaube, Sie können sich sofort daran erinnern, nachdem Sie diese Aussage gesehen haben. Sie müssen keine Gehirnzellen verschwenden, um sich an die leicht perverse DocType -Erklärung von XHTML zu erinnern.

<! DocType html>

Die kurze DOCTYPE-Erklärung von HTML5 besteht darin, moderne Browser wie Firefox und Chrom und Browser wie IE6/7/8 (Quasi-) Standardmodus einzugeben. Sie fragen sich vielleicht, dass IE6/7 auch HTML5 docType unterstützen kann. Tatsächlich wird der IE den Standardmodus eingeben, solange der docType dieses Format entspricht.

Schauen Sie sich den folgenden einfachen Code an:

<img src = "path/to/image">

<h6> Bild des Mars. </h6>

Leider scheint das H6 -Tag hier nichts mit dem IMG -Tag zu tun zu haben, und die Semantik ist nicht klar genug. HTML5 erkannte dies und übernahm das <Figure> -Tag. Wenn die <Abus> kombiniert mit dem <FigCaption> -Tag, kann das H6 -Tag und das IMG -Tag kombiniert werden, und der Code ist semantischer.

<Abus>

<img src = "path/to/image">

<Figcaption>

<h6> Dies ist ein Bild von etwas Interessantem. </h6>

</figcaption>

</figur>

Vor nicht allzu langer Zeit habe ich das <Small> -Tag verwendet, um Untertitel im Zusammenhang mit dem Logo zu erstellen. Das <Small> -Tag ist jedoch in HTML5 neu definiert, um es semantischer zu gestalten, und die Schriftgröße von <klein> wird kleiner. Denken Sie darüber nach, es ist immer noch eine gute Idee, dieses Tag für Urheberrechtsinformationen am Ende der Website zu verwenden.

Normalerweise fügen Sie Typ -Attribute zu <Link> und <Script> hinzu:

<link rel = "stylesheet" type = text/css href = "path/to/stylesheet.css">

<script type = "text/javaScript" src = "path/to/script.js"> </script>

In HTML5 wird das Typattribut nicht mehr benötigt, da dies etwas überflüssig erscheint und den Code nach dem Entfernen prägnanter gestaltet wird.

<link href = "path/to/stylesheet.css">

<script src = "path/to/script.js"> </script>

Dies ist etwas verwirrend, HTML5 ist nicht xthml, Sie können die Doppelzitate in den Tags speichern. Ich glaube, die meisten Kameraden, einschließlich mir, sind es gewohnt, doppelte Zitate hinzuzufügen, da der Code standardmäßiger aussieht. Dies kann jedoch anhand Ihrer persönlichen Vorlieben bestimmt werden, ob Doppelzitate verwendet werden sollen.

<H6 ID = "EinigeID"> Starten Sie den Reaktor. </h6>

HMTL5 wurde ein neues E -Mail -Attribut eines Eingabefeldes hinzugefügt, mit dem festgestellt werden kann, ob der Eingabinhalt dem Schreibformat der E -Mail erfüllt. Die Funktion wird immer mächtiger. Vor HTML5 können Sie sich nur auf JS verlassen, um es zu erkennen. Obwohl die integrierte Form-Überprüfungsfunktion bald Wirklichkeit werden wird, unterstützen viele Browser diese Eigenschaft nicht und werden nur als normales Texteingangsfeld behandelt.

<Formmethode = get>

<Label für = "E -Mail"> E -Mail: </label>

<Eingabe id = "E -Mail" type = "E -Mail" name = "E -Mail">

<Schaltfläche Typ = "Senden"> Formular Senden </button>

</form>

Bisher wird dieses Attribut nicht unterstützt, einschließlich moderner Browser, sodass dieses Attribut vorerst immer noch unzuverlässig ist.

Der Platzhalter im Textfeld (siehe den Suchfeld dieses Blogs) fördert die Verbesserung der Benutzererfahrung. Zuvor konnten wir uns nur auf JS verlassen, um die Auswirkungen von Platzhaltern zu erreichen, und fügte einen Platzhalter -Platzhalter in HTML5 hinzu.

<Eingabe type = "E -Mail" name = "E -Mail" placeholder = "[email protected]">

In ähnlicher Weise unterstützen die aktuellen modernen Mainstream -Browser diese Eigenschaft nicht sehr gut. Derzeit unterstützen nur Chrome und Safari diese Eigenschaft, und Firefox und Opera unterstützen diese Eigenschaft nicht.

Die lokale Speicherfunktion von HTML5 ermöglicht es modernen Browsern, sich daran zu erinnern, was wir tippt, und selbst wenn der Browser geschlossen und aktualisiert ist, wird er nicht betroffen. Obwohl einige Browser diese Funktion nicht unterstützen, können Sie diese Funktion immer noch unterstützen, IE8, Safari 4 und Firefox 3.5, aber Sie können sie testen.

Der folgende Code wird in HTML5 nicht mehr existieren

<div id = header>

...

</div>

<div id = footer>

...

</div>

Normalerweise definieren wir eine DIV für Header und Fußzeile und fügen dann eine ID hinzu, aber in HTML5 können Sie die Tags <Header> und <fouts> direkt verwenden, sodass der obige Code als:

<Header>

...

</header>

<fouter>

...

</footer>

Achten Sie darauf, diese beiden Tags nicht mit der Header und Fußzeile der Website zu verwechseln. Sie sind nur Container, die sie repräsentieren.

Der IE -Browser unterstützt derzeit nicht HTML5, was auch eine große Stolperfestung der schnelleren Popularisierung von HTML5 ist. Die Unterstützung von IE9 für HTML5 ist jedoch immer noch sehr gut.

Dh alle neu hinzugefügten Tags von HTML5 in Inline-Elemente analysiert, aber tatsächlich sind sie Elemente auf Blockebene. Daher ist es notwendig, einen Stil für sie zu definieren:

Header, Fußzeile, Artikel, Abschnitt, NAV, Menü, Hgroup {

Anzeige: Block;

}

Trotzdem kann der IE diese neu hinzugefügten HTML5 -Tags immer noch nicht analysieren. Zu diesem Zeitpunkt muss JavaScript verwendet werden, um dieses Problem zu lösen:

document.createelement ("article");

Dokument.Createelement ("Fußzeile");

document.createelement ("Header");

document.createelement ("hGroup");

document.createelement ("nav");

document.createelement ("Menü");

Sie können diesen JavaScript -Code verwenden, um den IE zu beheben, das HTML5 besser analysiert

<script mce_src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>

Dies ähnelt dem zweiten Trick. Wenn die H1- und H2 -Tags verwendet werden, um den Namen und den Untertitel der Website darzustellen, bezieht sich nicht auf die beiden Titel, die eng mit ihrer ursprünglichen Bedeutung verwandt sind. Zu diesem Zeitpunkt können Sie das <hGroup> -Tag verwenden, um sie zu kombinieren, damit der Code semantischer ist.

<Header>

<hgroup>

<h1> Rückruf -Fanseite </h1>

<h2> Nur für Menschen, die die Erinnerung an ein Leben lang wollen. </h2>

</hgroup>

</header>

Das Front-End-Personal muss viele Formularverifizierungsprojekte durchgeführt haben. Einer der wichtigen Punkte ist, dass einige Eingabefelder ausgefüllt werden müssen, sodass JavaScript hier überprüft werden muss. In HTML5 wird ein neues Attribut hinzugefügt, das ausgefüllt werden muss: Erforderlich. Es gibt zwei Möglichkeiten, das erforderliche Attribut zu verwenden. Die zweite Methode erscheint struktureller, während die erste Methode einfacher ist.

<Eingabe type = "text" name = "einigeInput" erforderlich>

<Eingabe type = "text" name = "einigeInput" erforderlich = "Erforderlich">

Mit dieser Eigenschaft erleichtert die Überprüfung des Formulars Einreichung und schauen Sie sich das folgende einfache Beispiel an:

<Formmethode = post>

<Label für = einigeInput> Ihr Name: </label>

<Eingabe -ID = SOMEILPUT TYPE = Textname = SOMENPUT -Platzhalter = "Douglas quaid" fordert = "fordert">

<button type = "enden"> go </button>

</form>

Wenn das Eingabefeld leer ist, wird das Formular nicht erfolgreich eingereicht.

In ähnlicher Weise benötigt HTML5 kein JavaScript mehr, um die automatische Fokusserfassung von Eingabefelden zu lösen. Wenn ein Eingabefeld ausgewählt werden oder der Eingangsfokus erhalten wird, hat HTML5 den automatischen Autofokus der Fokus -Erfassungseigenschaft hinzugefügt:

<Eingabe type = "text" name = "smilinput" placeholder = "douglas quaid" benötigt = "Erforderlich" Autofocus = "Autofocus">

Autofokus kann auch als autofocus = autofocus geschrieben werden, das je nach Ihrer persönlichen Präferenz standardmäßiger aussieht.

HTML5 bietet ein <DIO> -TAG, das das Problem löst, dass Sie sich in der Vergangenheit auf Plug-Ins von Drittanbietern verlassen mussten, um Audiodateien abzuspielen. Bisher unterstützen nur wenige neueste Browser dieses Tag.

<Audio Controls = "Controls" autoplay = "autoplay">

<source src = "file.ogg" _fcksvedurl = "" Datei.ogg "" />

<source src = "file.mp3" />

<a href = "file.mp3"> Diese Datei herunterladen. </a>

</audio>

Warum gibt es zwei Formate von Audiodateien? Da es Unterschiede in den Formaten gibt, die von Firefox- und Webkit -Browsern unterstützt werden, kann Firefox nur .OGG -Dateien unterstützen, während Webkit nur .mp3 -Dateien unterstützt. Die Lösung besteht darin, zwei Versionen von Audiodateien zu erstellen, damit sie mit Firefox- und Webkit -Browsern kompatibel sein können. Es sollte beachtet werden, dass der IE dieses Tag nicht unterstützt.

Wie das <DIO> -TAG bietet HTML5 auch Unterstützung beim Abspielen von Videodateien nach dem <video> -Tag. YouTube hat auch eine neue HTML5 -Video -Einbettung angekündigt. Es ist jedoch ein bisschen bedauerlich, dass die HTML5 -Spezifikation keinen bestimmten Video -Decoder angibt, aber den Browser selbst entscheiden lässt. Dies erzeugt ein Browserkompatibilitätsproblem. Obwohl Safari und IE9 beide H.264 -Videos (Flash -Player spielen können), unterstützen Firefox und Opera die Open -Source -Theora- und Vorbis -Formate. Bei der Anzeige von HTML5 -Videos müssen Sie daher auch zwei Formate vorbereiten.

<Video steuert Vorlast>

<Source src = "cohagenphonecall.ogv" Typ = "Video/ogg"; codecs = 'vorbis, theora' " />

<Source src = "cohagenphonecall.mp4" type = "Video /mp4; 'Codecs =' AVC1.42E01E, MP4A.40.2 '" />

<Div> Ihr Browser ist alt. <a href = "cohagenphonecall.mp4"> Den Video herunterladen. </a> </div>

</Video>

Es ist zu beachten, dass der Browser, obwohl das Typattribut, falls hinzugefügt werden kann, die Videodatei schneller und genau analysieren kann. Nicht alle Browser unterstützen HTML5 -Videos, daher müssen Sie stattdessen die Flash -Version verwenden. Natürlich liegt die Entscheidung bei Ihnen.

Vorspannungsattribut: Vorlast, zuallererst müssen Sie feststellen, ob das Video vorinstalliert werden muss. Wenn ein Besucher eine Seite mit vielen Videos besucht, muss ein Video vorgeladen werden, mit dem die Wartezeit der Besucher speichern und die Benutzererfahrung verbessern kann. Sie können dem <video> -Tag eine Voroasteigenschaft hinzufügen, um Vorspannungsfunktionen zu implementieren.

<Video preload = preload>

...

</Video>

[/Code]

Die Anzeigesteuerungseigenschaften können dem Video eine Playback -Pause -Steuerung hinzufügen. Es ist zu beachten, dass der von jedem Browser angezeigte Effekt möglicherweise etwas anders ist.

<Video Controls = "Controls" Preload = "Preload">

...

</Video>

In HTML5 können wir reguläre Ausdrücke direkt verwenden.

<formmethode = post action =>

<Label für = Benutzername> Erstellen Sie einen Benutzernamen: </label>

<Eingabe-ID = Benutzername Typ = Textname = Benutzername Platzhalter = 4 <> 10 Erforderlich = Erforderlich Autofocus = Autofocus muster = [a-za-z] {4,10}>

<Schaltfläche Typ = Senden> Go </button>

</form>

Da jeder Browser für HTML5 -Attribute unterschiedlich unterstützt wird, werden einige Kompatibilitätsprobleme erzeugt. Methoden können jedoch verwendet werden, um festzustellen, ob der Browser diese Eigenschaften unterstützt. Wenn der Code im obigen Beispiel erkennen möchte, ob das Musterattribut vom Browser erkannt wird, kann er verwendet werden, um es mit JavaScript -Code zu erkennen.

alert ('muster' in document.createelement ('Eingabe')) // boolean;

Tatsächlich ist dies eine häufig verwendete Methode zur Bestimmung der Browserkompatibilität, und die JQuery -Bibliothek verwendet diese Methode häufig. Im obigen Code wird ein Eingabetag erstellt und prüft, ob das Musterattribut vom Browser unterstützt wird. Wenn es unterstützt werden kann, unterstützt der Browser diese Funktion, sonst wird er nicht unterstützt.

<Script>

if (! 'Muster' in document.createelement ('Eingabe')) {

// Client/Server -Seitenvalidierung durchführen

}

</script>

Mit dem <mark> -Tag wird Text verwendet, der seine Bedeutung für den Benutzer visuell hervorhebt. Die in diesem Tag eingewickelte Zeichenfolge muss mit dem aktuellen Verhalten des Benutzers zusammenhängen. Wenn ich beispielsweise in einigen Blogs nach offener Geist suche, kann ich jede Aktion mit JavaScript im <mark> -Tag einwickeln.

<h3> Suchergebnisse </h3>

<h6> Sie wurden unterbrochen, kurz nachdem Quato gesagt hatte, <Mark> "öffnen Sie Ihren Geist" </mark>. </h6>

Einige Leute können Fragen haben. Funktioniert das <Div> -Tag mit Tags wie <Header> und <fouter> in HTML5 noch? Die Antwort lautet ja. Wenn Sie beispielsweise einen Container erstellen möchten, der spezielle Inhalte einwickeln kann, ist die kostenlose und flexible <div> definitiv die erste Wahl. Wenn Sie einen Artikel oder ein Navigationsmenü erstellen möchten, wird empfohlen, dass Sie mehr semantische <Aktion> und <nav> -Tags verwenden.

Viele Leute denken, dass HTML5 noch eine lange Zeit sein kann, also ignorieren sie es direkt. Tatsächlich haben viele Websites jetzt HTML5 verwendet. In der Tat sollen einige neue Attribute und Funktionen von HTML5 den Code präzise machen. Dies ist immer eine gute Sache und sollte unseres Lob verdienen. Vielen Dank, dass Sie diesen Einstiegsartikel auf HTML5 gelesen haben, in der Hoffnung, Ihnen Hilfe zu leisten, um HTML5 weiter zu lernen.