HTML编码规范

[h1]排版规则[/h1][h2]缩进[/h2]使用2个空格缩进

  Fantastic
  Great
.example {
  color: blue;
}[h2]大小写[/h2]只允许使用小写。
所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和

CDATA

复制代码

），选择器，特性，特性值（除了字符串）。

Home
[h2]行尾空格[/h2]建议删除行尾白空格。

What?
Yes please.[h1]常规Meta规则[/h1][h2]编码[/h2]如果没有特殊需求，一般采用

utf-8

复制代码

编码。如果是cms站点，则遵守该站点的编码规则。

[h2]注释[/h2]尽可能的去解释你写的代码。说明该代码包括什么、目的是什么、能做什么、为什么使用它等。
注释是否需要详尽，取决于项目的复杂程度。
一般单行注释：
模块间注释：

  News
  ...

循环注释：


  new's title 1
  new's title 2
  new's title 3
  new's title 4
  new's title 5

cms输出注释：

  new's title 1
  new's title 2
  new's title 3
  new's title 4
  new's title 5

Tab选项卡内容注释：

[h1]常规HTML设计规则[/h1][h2]文档类型[/h2]使用html5文档声明，不再使用XHTML（

application/xhtml+xml

复制代码

）。
HTML5是目前所有HTML文档类型中的首选：
[h2]HTML 的正确性[/h2]编写有效、正确的HTML代码，否则很难达到性能上的提升。
可以使用一些工具验证你的代码，如 W3C HTML validator
[h2]HTML 的语义性[/h2]根据HTML各个元素的用途而去使用它们。

  news
  list1
  list2
  list3

  news
  list1
  list2
  list3
部分标签说明：

1. div
复制代码
主要用于布局，分割页面的结构;
1. ul
复制代码
/
1. ol
复制代码
主要用于无序/有序列表;
1. dl
复制代码
/
1. dt
复制代码
/
1. dd
复制代码
当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签;
1. span
复制代码
没有特殊的意义，可以用作排版的辅助，然后在css中定义
1. span
复制代码
;
1. h1
复制代码
-
1. h6
复制代码
标题, 根据重要性依次递减;
1. h1
复制代码
最重要的标题;
1. label
复制代码
使表单更有亲和力而且能辅助表单排版;

不推荐使用的标签：

1. font
复制代码
文字的外观，大小和颜色;
1. u
复制代码
文本下划线;
1. center
复制代码
居中对齐;
1. s
复制代码
删除线;
1. strike
复制代码
删除线;
1. noframes
复制代码
无视框时的内容;
1. iframe
复制代码
定义嵌入视图;
1. isindex
复制代码
不建议使用（可搜寻，使用
1. input
复制代码
代替）;
1. dir
复制代码
目录式列举;
1. menu
复制代码
菜单列表;
1. basefont
复制代码
定义基本字体;
1. applet
复制代码
定义java程序;
1. frame
复制代码
定义个别视框;
1. frameset
复制代码
视框格式总定义;

[h2]多媒体元素降级处理[/h2]给多媒体元素，比如

canvas

复制代码

、

videos

复制代码

、

images

复制代码

增加

alt

复制代码

属性，提高可用性（特别是常用的

img

复制代码

标签，尽可量得加上

alt

复制代码

属性，提供图片的描述信息）。

[h2]type属性[/h2]在样式表和脚本的标签中忽略

type

复制代码

属性。
HTML5默认

type

复制代码

为

text/css

复制代码

和

text/javascript

复制代码

类型，所以没必要指定。即便是老浏览器也是支持的。

[h1]HTML代码格式规则[/h1]每个块元素、列表元素或表格元素都独占一行，每个子元素都相对于父元素进行缩进。按设计稿划分模块，尽量使页面模块化，模块与模块之前要有清晰的注释。

如上面页面框架，推荐写法：

header

nav




   news
   ...




  sidebar


footer
[h1]HTML与SEO[/h1][h2]页面良好层次[/h2]保证整个页面在未加载样式表时仍有较好的层次清晰的页面结构。

My Site

  Home
  News
  Mobile

  News
  news list 1
  news list 2
  news list 3

My Site

  Home
  News
  Mobile

  News

news list 1
news list 2
news list 3

[h2]权重标签使用[/h2]H标签使用

1. h1
复制代码
权重高，体现当前网页中相对比较重要的信息，但不宜过多，建议一个页面只放一个;
1. h2
复制代码
可以做副标题;
1. h3
复制代码
可以做新闻列表;
1. h4
复制代码
-
1. h6
复制代码
可做相关新闻的列表标签属性完整;

strong

复制代码

、

b

复制代码

使用
将需要加粗的文字使用

b

复制代码

标签来显示。
将需要强调的文字（主要指包含关键词的信息）使用

strong

复制代码

标签来强调主要内容。
注：

b

复制代码

是粗体标签，属于实体标签，它所包围的字符将被设为

bold

复制代码

（粗体）；

strong

复制代码

是加重语气标签，属于逻辑标签，它的作用是加强字符语气。
[h2]标签属性使用[/h2]在很多情况下，

a

复制代码

都要使用

title

复制代码

来说明该链接的相关说明或目的意义。
例如：当使用

overflow

复制代码

隐藏掉a中的溢出文字时，该

a

复制代码

中的

title

复制代码

是必不可少的，它可以告诉用户被隐藏掉的文字内容是什么；又或者当一个图片型链接出现时，该

a

复制代码

中的

title

复制代码

同样是必不可少的，它可以告诉用户这个图片链接是做什么用的。
注：仅在

img

复制代码

里添加

alt

复制代码

标签在火狐提示文字是出不来的，

alt

复制代码

是图片加载失败或未加载完全时显示出来的提示文字，要想鼠标移上去显示提示信息应该用

title

复制代码

，严谨的写法是

img

复制代码

里加入

alt

复制代码

和

title

复制代码

这两个标签。
[h2]精简代码[/h2]代码保持精简，最优化，这样搜索引擎才更喜欢。

HTML编码规范

浏览过的版块