Teilen Sie HTML-Tipps: Semantisieren Sie Ihren Code
Dieser Artikel teilt HTML-Kenntnisse: SemantisierungIhr Code
Html-Semantik scheint ein alltägliches Problem zu sein. Wenn Sie bei Google suchen, gibt es viele Artikel über Semantik Brauchen Sie semantische Tags? Ich denke so: Jedes Tag von Html hat seine spezifische Bedeutung, und die Semantik ermöglicht es uns, geeignete Tags an den entsprechenden Stellen zu verwenden, um Menschen und die Maschine besser zu verstehen (die Maschine kann als Browser und verstanden werden). die Suchmaschine) sind alle auf einen Blick klar Wenn meine Erklärung nicht klar genug ist, googlen Sie bitte.
Wie verwendet man die richtigen Tags an der richtigen Stelle? Dies ist eine einfache Verständnislogik: ul steht für ungeordnete Listen; 🎜>dl wird verwendet, um die -Liste zu definieren, starke Tags werden zur Hervorhebung verwendet ... Um es ganz klar auszudrücken: Jedes der Html-Tags bestimmt eine englische Definition seine Semantik (später in diesem Artikel werde ich eine Vergleichstabelle der englischen Definitionen häufig verwendeter HTML-Tags als Referenz bereitstellen). Was ist für Menschen und Maschinen klar? Überprüfen Sie, ob die HTML-Seite semantisch ist Der beste Weg zur Optimierung besteht darin, den Css-Link auf der Seite zu entfernen, um zu sehen, ob die Webseitenstruktur in Ordnung ist und die Seite immer noch gut lesbar ist. Warum kann man das sagen? Jeder weiß, dass es Standardbrowser gibt Stile (es wird empfohlen, das Web Developer Tools für Chrome-Plug-in von Chrome oder das Web Developer-Plug-in von Firefox zu verwenden), wie z. B. h1~h6, dort wird fett dargestellt/die Schriftgröße nimmt nacheinander ab. Die Standardformate „klein“, „oberer und unterer Rand“, „ul“, „ol“ und „dl“ verfügen alle über Standardaufzählungszeichen, und „strong“ ist standardmäßig fett gedruckt ... Daher wird auf derselben Seite Html mit guter Semantik kann entfernt werden, ohne dass das Seiten-CSS immer noch gut funktioniert.
Ein weiterer Punkt ist, dass eine gute semantische Codierung benutzerfreundlicher für Suchmaschinen ist. Der Suchspider kennt Ihr CSS nicht, kann aber das HTML-Tag erkennen.Das Folgende ist ein einfaches Beispiel: Anhand des obigen einfachen Beispiels und der Darstellung ohne CSS-Definition ist es an der Zeit, den Unterschied zwischen den beiden zu verstehen. Wenn Sie
Mr.Think的博客 专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子. Mr.Think的博客 专注Web前端技术,热爱Php,崇尚简单生活的凡夫俗子.
Kopfer, Fußzeile, Seitenleiste, Artikel und andere Elemente sind alle neu hinzugefügte semantische Tags. Die HTML-Codierungssemantik ist ein Schritt in Richtung einer qualitativ hochwertigen Front-End-Entwicklung. Sie bedeutet eine bessere Einhaltung von Webstandards und kann auch dazu führen, dass Ihre Seiten nach dem Entfernen von Stilen in Ordnung bleiben können Sie googeln oder Kapitel 3 von Adangs „The Way of Cultivation in Web Front-end Development“ lesen. Anhang: Tag-Semantik-Vergleichstabelle auf Chinesisch und Englisch (Löschen Sie die -Zeilen für Tags, die nicht unterstützt werden von HTML5)
标签名 | 英文全拼 | 中文翻译 |
---|---|---|
a | anchor | 锚 |
abbr | abbreviation | 缩写词 |
acronym | acronym | 取首字母的缩写词 |
address | address | 地址 |
b | bold | 粗体 |
big | big | 变大 |
blockquote | block quotation | 区块引用于 |
br | break | 换行 |
caption | caption | 标题 |
center | center | 居中 |
dd | definition description | 定义描述 |
del | delete | 删除 |
p | pision | 分隔 |
dl | definition list | 定义列表 |
dt | definition term | 定义术语 |
em | emphasized | 加重 |
fieldset | fieldset | 域集 |
font | font | 字体 |
h1~h6 | header1~header6 | 标题1~标题6 |
hr | horizontal rule | 水平尺 |
i | italic | 斜体 |
ins | inserted | 插入 |
legend | legend | 图标 |
li | list item | 列表项目 |
ol | ordered list | 排序列表 |
p | paragraph | 段落 |
pre | preformatted | 预定义格式 |
s | strikethrough | 删除线 |
small | small | 变小 |
span | span | 范围 |
strong | strong | 加重 |
sub | subscripted | 下表 |
sup | superscripted | 上标 |
u | underlined | 下划线 |
ul | unordered list | 不排序列表 |
var | variable | 变量 |
Das obige ist der detaillierte Inhalt vonTeilen Sie HTML-Tipps: Semantisieren Sie Ihren Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
