HTML规范 - 整体结构

文件应以“”首行顶格开始，推荐使用“”。
必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码。
根据页面内容和需求填写适当的keywords和description。
页面title是极为重要的不可缺少的一项。

<code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html规范</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
</head>
<body>

</body>
</html><br></code>

Nach dem Login kopieren

结构顺序和视觉顺序基本保持一致

按照从上至下、从左到右的视觉顺序书写HTML结构。
有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前。
用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制。
table不建议用于布局，但表现具有明显表格形式的数据，table还是首选。

结构、表现、行为三者分离，避免内联

使用link将css文件引入，并置于head中。
使用script将js文件引入，并置于body底部。

保持良好的简洁的树形结构

每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。
使用4个空格代替1个Tab（大多数编辑器中可设置）。
对于内容较为简单的表格，建议将tr写成单行。
你也可以在大的模块之间用空行隔开，使模块更清晰。

<code><body>
<!-- 侧栏内容区 -->
<div class="m-side">
    <div class="side">
        <div class="sidein">
            <!-- 热门标签 -->
            <div class="sideblk">
                <div class="m-hd3"><h3 class="tit">热门标签</h3> </div>
                ...
            </div>

            <!-- 最热TOP5 -->
            <div class="sideblk">
                <div class="m-hd3"><h3 class="tit">最热TOP5</h3> <a href="#" class="s-fc02 f-fr">更多»</a></div>
                ...
            </div>
        </div>
    </div>
</div>
<!-- /侧栏内容区 -->
</body></code><br><br>

Nach dem Login kopieren

另外，请做到以下几点

结构上如果可以并列书写，就不要嵌套。如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>
如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。比如<div><h2></h2></div>已经能满足要求，那么就不要再写成
<div><h2></h2></div>
一个标签上引用的className不要过多，越少越好。比如不要出现这种情况：<div class="class1 class2 class3 class4"></div>
对于一个语义化的内部标签，应尽量避免使用className。比如在这样一个列表中，li标签中的itm应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

HTML规范 - 代码格式

说明文案的注释方法

采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式。

开始注释：（文案两头空格）。
结束注释：（文案前加“/”符号，类似标签的闭合）。
允许只有开始注释！

<code><!-- 头部 -->
<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>
<!-- /头部 --></code><br><br>

Nach dem Login kopieren

代码本身的注释方法

单行代码的注释也保持同行，两端空格；多行代码的注释起始和结尾都另起一行并左缩进对齐。

<code><!-- <h1 class="m-logo"><a href="#">LOGO</a></h1> -->
<!--
<ul class="m-nav">
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
</ul>
--></code>

Nach dem Login kopieren

严格的嵌套

尽可能以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。
正确闭合标签且必须闭合。

严格的属性

属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。
没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）。
可以省略style标签和script标签的type属性。

常用的标签

常见标签表

标签

Das Tag

标签

语义

嵌套常见错误

常用属性（加粗的为不可缺少的或建议的）

超链接/锚

a不可嵌套a

href,name,title,rel,target

换行

按钮

不可嵌套表单元素

type,disabled

定义列表中的定义（描述内容）

只能以dl为父容器，对应一个dt

文本删除

Container auf Blockebene

Definitionsliste

Nur dt und dd können verschachtelt werden

Definitionsbegriff in Definitionsliste

DL kann nur als übergeordneter Container verwendet werden, entsprechend mehreren dd

Hervorhebungstext

Formular

Aktion,Ziel,Methode,Name

Titel

Von h1 bis h6 können Elemente auf Blockebene nicht verschachtelt werden

Eine Webseite eingebettet

frameborder,width,height,src,scrolling,name

Bild

alt,src,width,height

Verschiedene Formularsteuerelemente

Typ,name,value,checked,disabled,maxlength,readonly,accesskey

definiert Anmerkungen für Eingabeelemente

für

Artikel auflisten

Nur ul oder ol können der übergeordnete Container sein

Zitatstil oder -symbol

Es können keine Elemente verschachtelt werden

type,rel,href

Dokumentinformationen

Nur für den Kopf

Inhalt,http-Äquivalent,Name

Geordnete Liste

Kann nur Li nisten

Eine Option in der Auswahl

Nur für ausgewählte

Wert,ausgewählt,deaktiviert

Absatz

Elemente auf Blockebene können nicht verschachtelt werden

Zitatskript

Es können keine Elemente verschachtelt werden

Typ,src

Listenfeld oder Dropdown-Feld

Nur Option oder Optgroup können verschachtelt werden

Name,deaktiviert,mehrere

Inline-Container

Hervorhebungstext

Zitatstil

Es können keine Elemente verschachtelt werden

Typ,Medien

Tiefgestellt

Hochgestellt

Formular

Nur Tabellenelemente können verschachtelt werden

Breite, Ausrichtung, Hintergrund, Zellauffüllung, Zellabstand, Zusammenfassung, Rand

Tischkörper

Nur für Tisch

Zellen in der Tabelle

Nur für tr

colspan,rowspan

Mehrzeilige Texteingabesteuerung

Name, Zugriffsschlüssel, deaktiviert, schreibgeschützt, Zeilen, Spalten

Tabellenfußzeile

Nur für Tisch

Kopfzelle in der Tabelle

Nur für tr

colspan,rowspan

Tabellenkopf

Nur für Tisch

Dokumenttitel

Nur für den Kopf

Tabellenzeile

Verschachtelt in Tabelle oder Kopf, Körper, Fuß

Ungeordnete Liste

Kann nur Li nisten

HTML规范 - 内容语义

加强“资源型”内容的可访问性和可用性

在资源型的内容上加入描述文案，比如给img添加alt属性，在audio内加入文案和链接等等。

加强“不可见”内容的可访问性

背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。

适当使用实体

常用HTML字符实体（建议使用实体）：
字符	名称	实体名	实体数
"	双引号	"	"
&	&符	&	&
<	左尖括号（小于号）	<	<
>	右尖括号（大于号）	>	>
	空格
	中文全角空格

<code> </code>

Nach dem Login kopieren

常用特殊字符实体（不建议使用实体）：
字符	名称	实体名	实体数
¥	元	¥	¥
¦	断竖线	¦	¦
©	版权	©	©
®	注册商标R	®	®
™	商标TM	™	™
·	间隔符	·	·
«	左双尖括号	«	«
»	右双尖括号	»	»
°	度	°	°
×	乘	×	×
÷	除	÷	÷
‰	千分比	‰	‰

<code> </code>

Nach dem Login kopieren

<code> </code>

Nach dem Login kopieren

Front-End-HTML-Spezifikation

HTML规范 - 整体结构

HTML规范 - 代码格式

HTML规范 - 内容语义