HTML-Kenntnisse: Semantisieren Sie Ihren Code _HTML/Xhtml_Webseitenproduktion

HTML-Semantik scheint ein alltägliches Thema zu sein. Warum gibt es semantische Tags? Wir verwenden entsprechende Tags an den entsprechenden Stellen, um sowohl Menschen als auch Maschinen besser zu verstehen (Maschinen können es als Browser und als Suchmaschine verstehen). Wenn meine Erklärung nicht klar genug ist, googlen Sie bitte

Wie verwende ich die richtigen Tags an der richtigen Stelle?

Dies ist eine einfache Verständnislogik: h1~h6-Tags stehen für ungeordnete Listen wird für ausgefüllte Listen verwendet; dl wird zum Definieren von Listen verwendet; em, starke Tags werden zur Hervorhebung verwendet ... Um es ganz klar auszudrücken: Jede englische Interpretation des HTML-Tags bestimmt seine Semantik (später in diesem Artikel werde ich eine Vergleichstabelle erstellen).
Was ist sowohl für Menschen als auch für Maschinen klar?
Der beste Weg, um zu überprüfen, ob eine HTML-Seite semantisch ist, besteht darin, das Css-Link auf der Seite und prüfen Sie, ob die Webseitenstruktur in Ordnung ist und die Seite noch gut lesbar ist. Warum kann man das sagen? Jeder weiß, dass Browser Standardstile haben (es wird empfohlen, Chrome zu verwenden). Web Developer Tools für Chrome
Plug-in oder Firefox's Web Developer Plug-in), wie z. B. h1~h6, werden fett gedruckt Die Schriftgröße nimmt sequentiell ab, und die Standardstile für den oberen und unteren Rand, ul, ol und dl verfügen alle über Standardaufzählungszeichen, und Strong hat standardmäßig einen fetten Stil ... Daher kann auf derselben Seite HTML mit guter Semantik sein Von der Seite entfernt Css Es funktioniert immer noch gut Ein weiterer Punkt ist, dass Suchmaschinen Ihr Css nicht kennen, aber sie können HTML-Tags erkennen ist ein einfaches Beispiel:


Kopieren Sie den Code

Der Code lautet wie folgt:

Mr ;/div>

Ein gewöhnlicher Mann, der sich auf Web-Frontend-Technologie konzentriert, PHP liebt und ein einfaches Leben befürwortet.

;

Gewöhnliche Menschen, die sich auf Web-Frontend-Technologie konzentrieren, PHP lieben und ein einfaches Leben befürworten.

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 HTML5 lernen, sind Kopfzeile, Fußzeile, Seitenleiste, Artikel und andere Elemente alle neue semantische Tags hinzugefügt.
HTML-Codierungssemantik ist ein Schritt in Richtung hochwertiger Front-End-Entwicklung. Sie bedeutet eine bessere Einhaltung von Webstandards und kann Ihre Seiten auch nach dem Entfernen von Stilen in Ordnung halten. Weitere Informationen zur Semantik finden Sie bei Google oder lesen Sie Adangs „The Way of Web Front-End Development“ Kapitel 3.
Anhang: Vergleichstabelle der Tag-Semantik in Chinesisch und Englisch

标签名	英文全拼	中文翻译
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	删除
div	division	分隔
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	变量