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
[Seitenkopf]
1. Die Datei sollte mit „“ Beginnend am Anfang der ersten Zeile wird empfohlen, „<!DOCTYPE html>“ zu verwenden
<!DOCTYPE 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 charset="utf-8">
3. Geben Sie die entsprechenden Schlüsselwörter und Beschreibungen entsprechend dem Seiteninhalt ein Bedarf
<meta name="description" content="不超过150个字符"><meta name="keywords" content="">
4. Der Seitentitel ist ein unverzichtbares Element title muss als direktes untergeordnetes Element von head und unmittelbar nach der charset-Deklaration
<head><meta charset="UTF-8"><title>页面标题</title></head>
zugänglich ist favicon
<link rel="shortcut icon" href="path/to/favicon.ico">
und CSS ein. Es ist nicht erforderlich, das JavaScript-Attribut type
müssen Sie CSSrel="stylesheet"
<link rel="stylesheet" href="page.css?1.1.11">
-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 src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js?1.1.11"></script>
<ul><li>first</li><li>second</li></ul>
<!-- good --><div class="sidebar"></div><!-- bad --><div class="left"></div>
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。
weggelassen werden dürfen, ist das Weglassen von schließenden Tags nicht zulässig HTML5
-Tags sollte der Semantik der Tags folgen und den Tag-Verschachtelungsregeln HTML
Hello StyleGuide!
Hello StyleGuide!
<ul><li>first</li><li>second</li></ul>
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 class="g-hd"><!-- LOGO --><h1 class="m-logo"><a href="#">LOGO</a></h1><!-- /LOGO --><!-- 导航 --><ul class="m-nav"><li><a href="#">NAV1</a></li><li><a href="#">NAV2</a></li><!-- 更多导航项 --></ul><!-- /导航 --></div><!-- /头部 -->
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 vonxxx-data- empfohlen. 5. Sie können das Typattribut des Style-Tags und des Skript-Tags
<!-- good --><table cellspacing="0">...</table><!-- bad --><table cellSpacing="0">...</table><!-- good --><script src="esl.js?1.1.11"></script><!-- bad --><script src='esl.js'></script><script src=esl.js></script>
【图片】
1、禁止 img 的 src 取值为空，否则会导致部分浏览器重新加载一次当前页面
2、为图片添加 alt 属性，提高图片加载失败时的用户体验
3、避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页面尺寸
4、为图片添加 width 和 height 属性，以避免页面抖动
<img src="#" alt="#" width="#" height="#">
5、有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现
产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载
无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现
【表单】
1、有文本标题的控件使用 label 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交
<button type="submit">提交</button><button type="button">取消</button>
3、在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性，能获得友好的输入体验
<input type="date">
【多媒体】
1、在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素，并使用退化到插件的方式来对多浏览器进行支持
<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"><object width="100" height="50" data="audio.mp3"><embed width="100" height="50" src="audio.swf"></object></audio><video width="100" height="50" controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg"><object width="100" height="50" data="video.mp4"><embed width="100" height="50" src="video.swf"></object></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!
