Erlernen von HTML-bezogenen Spezifikationen

Vorherige Wörter

HTML ist eine Hypertext-Markup-Sprache, die die Struktur von Webseiten beschreibt. HTML-Spezifikationen können HTML-Codestile konsistent machen, wodurch HTML einfacher zu verstehen und zu pflegen ist. In diesem Artikel wird die HTML-Spezifikation im Detail vorgestellt

Gesamtstruktur

[Seitenkopf]

1. Die Datei sollte mit „“ Beginnend am Anfang der ersten Zeile wird empfohlen, „“ zu verwenden

nbsp;html>

2. Die Der Zeichensatz für die Kodierung des Dokuments muss deklariert werden und mit der Datei selbst kodiert werden. Um konsistent zu sein, muss der meta, der die Zeichenkodierung angibt, das erste direkte untergeordnete Element von head sein. Es wird empfohlen, die UTF-8-Kodierung zu verwenden.

<meta>

　3. Geben Sie die entsprechenden Schlüsselwörter und Beschreibungen entsprechend dem Seiteninhalt ein Bedarf

<meta><meta>

4. Der Seitentitel ist ein unverzichtbares Element title muss als direktes untergeordnetes Element von head und unmittelbar nach der charset-Deklaration

<meta>

【Ressourceneinführung】

1. Stellen Sie sicher, dass

zugänglich ist favicon

<link>

2. Führen Sie

und CSS ein. Es ist nicht erforderlich, das JavaScript-Attribut type

anzugeben. 3. Bei der Einführung von

müssen Sie CSSrel="stylesheet"

<link>

angeben

4. Verwenden Sie den Link, um die CSS-Datei zu importieren und im Kopf zu platzieren. Verwenden Sie ein Skript, um die JS-Datei einzuführen und am unteren Rand des Körpers zu platzieren.

5. Für mobile Umgebungen oder Webanwendungen Nur für moderne Browser konzipiert. Wenn auf den

-Protokollteil der externen Ressource verwiesen wird und die Seiten gleich sind, wird empfohlen, das Protokollpräfix wegzulassen. Dies liegt daran, dass bei Verwendung von URL zur Einführung von CSS unter protocol-relative URL zwei Anfragen gesendet werden. Bei der Verwendung von IE7/8 sollte die Umgebung, für die die Seite gedacht ist, vollständig berücksichtigt werden protocol-relative URL

<script></script>

[Strukturoptimierung]

　1. Versuchen Sie, HTML-Standards zu befolgen und Semantik, aber opfern Sie nicht auf Kosten der Praktikabilität. Versuchen Sie, die wenigsten Tags zu verwenden und jederzeit die minimale Komplexität beizubehalten

2. Die strukturelle Reihenfolge und die visuelle Reihenfolge sollten grundsätzlich konsistent sein und die HTML-Struktur sollte in der visuellen Reihenfolge von oben nach unten und von oben geschrieben werden von links nach rechts. Um das Crawlen durch Suchmaschinen zu erleichtern, werden manchmal wichtige Inhalte vorzeitig in der Reihenfolge der HTML-Struktur verschoben

3. Struktur, Leistung und Verhalten trennen und Inlining vermeiden

4. Die Level-Elemente jedes Blocks beginnen in einer neuen Zeile und jede Zeile wird mithilfe der Tab-Einrückung ausgerichtet (untergeordnete Elemente von Kopf und Körper müssen nicht eingerückt werden). Löschen Sie überflüssige Leerzeichen am Zeilenende

5. Bei Tabellen mit relativ einfachem Inhalt empfiehlt es sich, tr in einer einzigen Zeile zu schreiben

6. Große Module können Sie durch Leerzeilen trennen Machen Sie die Module klarer

Codeformat

[Einrückung]

Verwenden Sie 4 Leerzeichen statt 1 Tabulator (kann in den meisten Editoren eingestellt werden)

• first
• second

【Name】

1. Die Klasse muss ausschließlich aus Kleinbuchstaben bestehen, getrennt durch - zwischen den Wörtern

2. Die Klasse muss das entsprechende darstellen Modul Oder der Inhalt oder die Funktion der Komponente darf nicht mit Stilinformationen benannt werden

<!-- good --><div></div><!-- bad --><div></div>

3. Vermeiden Sie auf derselben Seite die Verwendung derselben

und name, weil IE7-Browser Es verwechselt die ID- und Namensattribute des Elements und document.getElementById erhält möglicherweise unerwartete Elemente. Daher müssen Sie bei der Benennung der ID- und Namensattribute des Elements id。

[Label]

sehr vorsichtig sein. 1. Der Labelname muss aus Kleinbuchstaben bestehen

2. Für Elemente, die nicht selbstschließend sein müssen, müssen Tags nicht selbstschließend sein

3. Für schließende Tags, die in

weggelassen werden dürfen, ist das Weglassen von schließenden Tags nicht zulässig HTML5

4. Die Verwendung von

-Tags sollte der Semantik der Tags folgen und den Tag-Verschachtelungsregeln HTML

<!-- good --><p>Hello StyleGuide!</p><!-- bad --><p>Hello StyleGuide!</p><!-- good --><input><!-- bad --><input><!-- good -->

• first
• second

• first
• second

[Kommentar]

Verwenden Sie eine Schreibmethode ähnlich dem Tag-Abschluss und verwenden Sie dasselbe Format wie HTML. Lassen Sie an beiden Enden der Kommentarkopie Leerzeichen. CSS-Kommentare haben ein einheitliches Format.

Kommentar starten: (Leerzeichen an beiden Enden der Kopie)

Kommentar beenden: (Fügen Sie ein „/“-Symbol vor der Kopie hinzu, ähnlich zum Schließen eines Labels)

Es sind nur öffnende Kommentare erlaubt

<!-- 头部 --><div>
<!-- LOGO --><h1 id="a-LOGO-a"><a>LOGO</a></h1>
<!-- /LOGO --><!-- 导航 --><ul>
<li><a>NAV1</a></li>
<li><a>NAV2</a></li>
<!-- 更多导航项 -->
</ul>
<!-- /导航 -->
</div><!-- /头部 -->

[Attribute]

1. Attribute und Werte müssen Seien Sie alle Kleinbuchstaben

2. Attributwerte müssen in doppelte Anführungszeichen gesetzt werden

3. Für Attribute vom Typ Boolean wird empfohlen, keine Attributwerte hinzuzufügen

4. Empfehlungen für benutzerdefinierte Attribute Mit

als Präfix wird die Verwendung von

xxx-data- empfohlen. 5. Sie können das Typattribut des Style-Tags und des Skript-Tags

[Attributreihenfolge]

<!-- good -->

... ... <!-- good --><script></script><script></script><script></script>

HTML-Attribute sollten in einer bestimmten Reihenfolge erscheinen, um die Lesbarkeit zu gewährleisten

 

特殊元素

【图片】

　　1、禁止 img 的 src 取值为空，否则会导致部分浏览器重新加载一次当前页面

　　2、为图片添加 alt 属性，提高图片加载失败时的用户体验

　　3、避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页面尺寸

　　4、为图片添加 width 和 height 属性，以避免页面抖动

<img  src="/static/imghwm/default1.png" data-src="#" class="lazy" alt="Erlernen von HTML-bezogenen Spezifikationen" >

　　5、有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现

　　产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载

　　无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现

【表单】

　　1、有文本标题的控件使用 label 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id

<label><input> 我已确认上述条款</label>

　　2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交

<button>提交</button><button>取消</button>

　　3、在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性，能获得友好的输入体验

<input>

【多媒体】

　　1、在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素，并使用退化到插件的方式来对多浏览器进行支持

<audio><source><source><object><embed></embed></object></source></source></audio><video><source><source><object><embed></embed></object></source></source></video>

　　2、只在必要的时候开启音视频的自动播放

 

Das obige ist der detaillierte Inhalt vonErlernen von HTML-bezogenen Spezifikationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!