Heim Web-Frontend HTML-Tutorial Über die Verwendung von HTML5 und CSS-Ersatz

Über die Verwendung von HTML5 und CSS-Ersatz

Jan 17, 2017 am 09:38 AM
css css3 html html5

Jeder, der von HTML5 gehört hat, kennt seine Leistungsfähigkeit, wie z. B. aussagekräftigeres Markup, Multimedia-Unterstützung, die weniger von Plug-Ins abhängig ist, dokumentübergreifende Nachrichtenkommunikation, Web Sockets, clientseitige Speicherung, leistungsfähigere Formulare und Verbesserungen Flexibilität bei der Barrierefreiheit, erweiterte Selektoren und leistungsstarke visuelle Effekte. Gehen wir ohne Umschweife auf die Details ein

Verlassene Tags und Attribute

Verlassene Tags

Verlassen, da sie durch CSS ersetzt werden können

Basefont

große

Mitte

Schriftart

Strich

tt

u

s

Veraltet wegen Beeinträchtigung der Benutzerfreundlichkeit und Barrierefreiheit

Frame

Frameset

Noframes

wegen Verwirrung stiften, selten verwendet und aufgegeben

Akronym wird aufgegeben, weil es die Seite oft überfüllt. Sie können stattdessen abbr verwenden, da Sie stattdessen object verwenden können

dir ist veraltet, da die Verwendung von ul anstelle von

noscript-Elementen nur in HTML und nicht in XML verwendet werden kann.

Veraltete Attribute

align

Link-, Vlink-, Alink- und Textattribute im Body-Tag

bgcolor

height und width

Bildlaufattribut auf Iframe-Element

valign

hspace und vspace

Cellpadding-, Cellspacing- und Rahmenattribute auf Tabellen-Tag

Die visuellen Effekte Die oben genannten Elemente können mit CSS erreicht werden, sodass sie aufgegeben werden

Außerdem wird das Zielattribut in der Spezifikation aufgegeben

Das Profilattribut im Head-Tag wird nicht mehr unterstützt

Das longdesc-Attribut von img- und iframe-Elementen wurde ebenfalls entfernt

Es gibt Alternativen zu diesen Attributen in der HTML5-Spezifikation. Sie können HTML-Standard anzeigen

Neue Struktur-Tags und Attribute

Deklaration des Dokumenttyps

Artikelkörperteil

Jeder weiß, dass in HTML5 einfach Sie können den Dokumenttyp deklarieren.

<!doctype html><html>
  <head>
    <meta charset="UTF-8">
    <title>文章标题</title>
  </head>
  <body>
Nach dem Login kopieren
Der Validator verwendet ihn, um zu bestimmen, welche Validierungsregeln zur Überprüfung des Codes verwendet werden sollen.

Die Dokumenttypdeklaration kann IE6 erzwingen , IE7 und IE8 rendern Seiten mit Standardmodulen

hgroup kombiniert die Titel von Webseiten oder Abschnitten

Schauen Sie sich kostenlos meinen Blog an

Header-Element ist ein Element mit Leit- und Navigationsfunktionen. Der Header kann eine Vielzahl von Inhalten enthalten, vom Firmenlogo bis hin zu einem Suchfeld. Verwechseln Sie den Header also nicht mit Tags wie h1. Die gleiche Seite kann mehrere Kopfzeilenelemente enthalten und jeder unabhängige Abschnitt oder Artikelabschnitt kann eine eigene Kopfzeile haben.

Wichtige Informationen, Titel usw. auf der Seite

< ;header>

Die Titelinformationen im Artikelbereich sind tatsächlich sehr wichtig und spielen eine herausragende Rolle

Artikeltext...

Fußzeile Das Ende der Seite oder des Abschnitts

Das Fußzeilenelement wird verwendet, um das Dokument oder verwandte Elemente bereitzustellen Benachbarte Segmente definieren Schwanzinformationen. Die HTML5-Spezifikation ermöglicht die Anzeige mehrerer Fußzeilenelemente auf derselben Seite, was bedeutet, dass Fußzeilen wie Kopfzeilen normalerweise auch andere Elemente enthalten. Die Fußzeile enthält normalerweise zusätzliche Informationen zu den zugehörigen Blöcken, z. B. den Autor, Links zu verwandten Lektüren und Urheberrechtsinformationen.

Das Folgende ist meine genaue Essenz, es gibt absolut keine falsche Einführung

Ich habe mich mit einer Gruppe von Experten im Internet zusammengetan, um eine kostenlose Lerngruppe für das Programmieren zu gründen Kommen Sie zu uns. Hören Sie es sich einfach in der Gruppe an. Der erste Teil der Nummer ist Si Yi, die mittlere Nummer ist Zero Seven und die letzte Nummer ist Yi Wu 4. Hier gibt es kostenlose Lernressourcen und es werden jeden Tag Live-Kurse übertragen Sie müssen nichts bezahlen, Sie brauchen nur ein Herz zum Lernen. Wenn Sie nicht lernen möchten, nehmen Sie nicht teil.

  • Copyright-Informationen
  • Verwandte Links< >Eine Seite kann mehrere Navigationselemente enthalten. Normalerweise enthalten Kopf und Ende eine Navigation, was die Zugänglichkeit verbessert und es Besuchern ermöglicht, sie eindeutig zu identifizieren. Das Navigationselement ist eine Gruppe von Links, die als Seitennavigation verwendet werden können; die Navigationselemente verweisen auf andere Seiten oder andere Teile der aktuellen Seite.

    Logischer Bereich oder Inhaltskombination der Abschnittsseite

    Der Abschnittsabschnitt ist ein logischer Bereich auf der Seite. Bei der Beschreibung des logischen Bereichs der Seite können wir das Abschnittselement verwenden, um das zuvor missbrauchte div-Tag zu ersetzen. Tatsächlich verwenden wir das Abschnittselement, um den Inhalt sinnvoll zu kategorisieren. Im Allgemeinen enthält ein Abschnitt einen Kopf und einen Inhaltsblock.

    Das Abschnittselement ist kein allgemeines Containerelement. Wenn ein Element daher einen entsprechenden Stil oder ein entsprechendes Skript definieren muss, wird empfohlen, das div-Element zu verwenden. Die Bedingung für die Verwendung von Abschnitt besteht darin, sicherzustellen, dass der Inhalt von Dieses Element kann im Dokument in der Gliederung deutlich dargestellt werden.

    Artikeltext oder ein kompletter interner

    Das am besten geeignete Element, um den eigentlichen Inhalt einer Webseite zu beschreiben, ist der Artikel-Tag. Das Abschnitts-Tag wird als Beschreibung des logischen Teils des Dokuments betrachtet, während das Artikel-Tag als Beschreibung des spezifischen Inhalts betrachtet wird. Ein Abschnitt kann mehrere Artikel enthalten und der Artikelinhalt kann in mehrere Abschnitte unterteilt werden. Das Abschnittselement ist ein allgemeineres Element, das zum logischen Gruppieren anderer Elemente verwendet werden kann. Wenn der Inhalt des Elements zusammen angezeigt werden kann, um die entsprechende Bedeutung auszudrücken, kann es als Artikelelement definiert werden und es besteht keine Notwendigkeit, das Abschnittselement zu verwenden.

    Wir können Kopf- und Fußzeilenelemente innerhalb des Artikelelements verwenden, um bestimmte logische Bereiche bequemer zu beschreiben. Wir können das Abschnittselement auch verwenden, um das Dokument in mehrere Teile zu unterteilen.

    Artikel stellt ein unabhängiges Fragment des Dokumentinhalts dar. Artikel ist ein spezielles Abschnitts-Tag mit einer klareren Semantik als Abschnitt. Es stellt einen unabhängigen und vollständigen Block verwandter Inhalte dar. Im Allgemeinen verfügt ein Artikel über einen Titelabschnitt (normalerweise in der Kopfzeile enthalten) und manchmal auch über eine Fußzeile. Obwohl es sich bei einem Abschnitt auch um einen thematischen Inhalt handelt, ist der Artikel selbst hinsichtlich seiner Struktur und seines Inhalts unabhängig und vollständig. Wenn ein Artikel in einen Artikel eingebettet wird, bezieht sich der Inhalt des inneren Artikels grundsätzlich auf den Inhalt des äußeren Artikels.

    Ergänzende oder verwandte Inhalte beiseite

    Manchmal müssen wir dem Hauptinhalt einige zusätzliche Informationen hinzufügen, z. B. Einführungen, Diagramme, verwandte Links usw. In diesem Fall können wir die Beiseite verwenden Tag, um es zu identifizieren.

    Benutzerdefinierte Datenattribute

    Entwickler können jedes gewünschte Attribut für jedes Element definieren, solange sie ihm Daten voranstellen – um Verwechslungen mit zukünftigen HTML-Versionskonflikten zu vermeiden, jQuery-Überprüfung unter asp.net MVC verwendet diese Methode. Verwenden Sie benutzerdefinierte Datenattribute, um Client-Skripts zusätzliche Informationen bereitzustellen. Benutzerdefinierte Datenattribute verursachen keine Browserfehler und die HTML5-Dokumenttypdeklaration stellt sicher, dass das Dokument gültig ist. Da alle benutzerdefinierten Datenattribute mit dem Präfix „data-“ beginnen, ignoriert der Validator für HTML5-Dokumente dieses bei der Validierung. Sie können benutzerdefinierte Attribute in fast allen Browsern verwenden, sodass wir mit JavaScript problemlos darauf zugreifen können.

    Schauen Sie sich zum Schluss eine kleine Demo an:

    (this.href,'winName','width=500,height=500')">Mein Blog

    Wissen Sie, welche Vorteile dieser Code bietet?

    Der erste Schritt beim Aufbau einer barrierefreien Seite besteht darin, sicherzustellen, dass alle Funktionen weiterhin ordnungsgemäß funktionieren, wenn JavaScript deaktiviert ist. Es funktioniert übrigens, in HTML5 werden onclick und so weiter aufgegeben, weil das onclick-Attribut das Verhalten und den Inhalt zu eng miteinander verknüpft

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So sehen Sie das Datum der Bootstrap So sehen Sie das Datum der Bootstrap Apr 07, 2025 pm 03:03 PM

ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.

See all articles