采用类似标签闭合的写法,与HTML统一格式;注释文案两头空格,与CSS注释统一格式。
01.
<!-- 头部 -->
02.
<
div
class
=
"g-header"
>
03.
<!-- LOGO -->
04.
<
h1
class
=
"m-logo"
><
a
href
=
"#"
>LOGO</
a
></
h1
>
05.
<!-- /LOGO -->
06.
<!-- 导航 -->
07.
<
ul
class
=
"m-nav"
>
08.
<
li
><
a
href
=
"#"
>NAV1</
a
></
li
>
09.
<
li
><
a
href
=
"#"
>NAV2</
a
></
li
>
10.
</
ul
>
11.
<!-- /导航 -->
12.
</
div
>
13.
<!-- /头部 -->
单行代码的注释也保持同行,两端空格;多行代码的注释起始和结尾都另起一行并左缩进对齐。
1.
<!-- <h1 class="m-logo"><a href="#">LOGO</a></h1> -->
2.
<!--
3.
<
ul
class
=
"m-nav"
>
4.
<
li
><
a
href
=
"#"
>NAV1</
a
></
li
>
5.
<
li
><
a
href
=
"#"
>NAV2</
a
></
li
>
6.
</
ul
>
7.
-->
标签 | 语义 | 嵌套常见错误 | 常用属性(加粗的为不可缺少的或建议的) |
---|---|---|---|
<a></a> | 超链接/锚 | a不可嵌套a | href,name,title,rel,target |
<br /> | 换行 | ||
<button></button> | 按钮 | 不可嵌套表单元素 | type,disabled |
<dd></dd> | 定义列表中的定义(描述内容) | 只能以dl为父容器,对应一个dt | |
<del></del> | 文本删除 | ||
<div></div> | 块级容器 | ||
<dl></dl> | 定义列表 | 只能嵌套dt和dd | |
<dt></dt> | 定义列表中的定义术语 | 只能以dl为父容器,对应多个dd | |
<em></em> | 强调文本 | ||
<form></form> | 表单 | action,target,method,name | |
<h1></h1> | 标题 | 从h1到h6,不可嵌套块级元素 | |
<iframe></iframe> | 内嵌一个网页 | frameborder,width,height,src,scrolling,name | |
<img /> | 图像 | alt,src,width,height | |
<input /> | 各种表单控件 | type,name,value,checked,disabled,maxlength,readonly,accesskey | |
<label></label> | 标签为input元素定义标注 | for | |
<li></li> | 列表项 | 只能以ul或ol为父容器 | |
<link /> | 引用样式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文档信息 | 只用于head | content,http-equiv,name |
<ol></ol> | 有序列表 | 只能嵌套li | |
<option></option> | select中的一个选项 | 仅用于select | value,selected,disabled |
<p></p> | 段落 | 不能嵌套块级元素 | |
<script></script> | 引用脚本 | 不可嵌套任何元素 | type,src |
<select></select> | 列表框或下拉框 | 只能嵌套option或optgroup | name,disabled,multiple |
<span></span> | 内联容器 | ||
<strong></strong> | 强调文本 | ||
<style></style> | 引用样式 | 不可嵌套任何元素 | type,media |
<sub></sub> | 下标 | ||
<sup></sup> | 上标 | ||
<table></table> | 表格 | 只可嵌套表格元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主体 | 只用于table | |
<td></td> | 表格中的单元格 | 只用于tr | colspan,rowspan |
<textarea></textarea> | 多行文本输入控件 | name,accesskey,disabled,readonly,rows,cols | |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<th></th> | 表格中的标题单元格 | 只用于tr | colspan,rowspan |
<thead></thead> | 表格表头 | 只用于table | |
<title></title> | 文档标题 | 只用于head | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<ul></ul> | 无序列表 | 只能嵌套li |