html书写规范

时间 2019-12-04

标签 html 书写规范栏目 HTML 繁體版

原文原文链接

文件及格式化

文件编码为 utf-8

更多UTF-8内容: http://zh.wikipedia.org/zh/UTF-8javascript

使用 Tab 进行缩进, 使用正确的缩进来代表嵌套层次
网页大小

“网页大小”定义为网页的全部文件大小的总和，包括HTML文件和全部的嵌入的对象。用户喜欢快的而不是新奇的站点。网页主体加载速度控制在 3S 之内html

命名规则

写法技巧

DOCTYPE

页面文档类型统一使用HTML5 DOCTYPE.html5

<!doctype html>

兼容性

代码使用html5标准代码编写文档, 而且ie6, 7, 8, 9, ff, chrome作到兼容, 禁止使用不兼容的标签,附录中包含了html5不支持的代码和新增的代码,这些标签禁止使用. 禁止使用特殊的标签,禁止使用JS对IE6中不支持的标签进行兼容, 禁止使用HTML5 Shiv 对浏览器进行兼容java

Meta字符集设置

声明方法遵循HTML5的规范, Meta文件使用 "UTF-8" 浏览器显示编码指定.web

<meta charset="utf-8">

注释

逻辑注释为了可以和程序注释进行统一和文件的无差别性修改. 而且注释不会在前台代码实现, 这个也不会影响服务器对编译过的模版的解析, 注释示例:

<!--{* 这里是注释的内容, 这里在html源码项目中不会显示, 这里的注释仅仅用于数据逻辑调用 增长新模块 (User)[2014-05-06] *}-->
<div>
</div>

模块注释建议对超过一屏的代码页面模块进行注释, 以下降开发人员的嵌套成本和后期的维护成本.

<div id="sample">
    <div class="someCategory">
        ...
</div><!--  .someCategory End -->
</div><!--  #sample End -->

协议

若是连接和当前页面一致则忽略连接的协议部分, 建议在指向图片或其余媒体文件、样式表和脚本的URL地址中省略http:, https:协议部分chrome

<script src="//www.taobao.com/fp.js">

语义

使用符合语义的标签书写 HTML 文档, 选择恰当的元素表达所需的含义;浏览器

<a href="recommendations/">
    All recommendations
</a>

大小写元素的标签和属性名必须小写, 属性值必须加双引号;

<a href="/">Home</a>

缩进

使用tab来表示缩进，不要使用空格; 在块状元素，列表，表格元素后面使用新行，而且对它的子元素进行缩进.服务器

<ul>
    <li><a href="someCategory/" title="someTitle" >someTitle</a></li>
</ul>

空格

去除没必要要的空格优化

# Bad    
<p>test                  </p>    
# Good
<p>test</p>

嵌套和闭合

元素嵌套遵循 (X)HTML Strict 嵌套规则, 推荐使用Firefox插件 HTML Validator 进行检查; 正确区分自闭合元素和非自闭合元素. 非法闭合包括：<br>..</br>、<script />、<iframe />, 非法闭合会致使页面嵌套错误问题自闭和标签: 如下元素不要求闭合, 缘由见: HTML(5) 不要求标签自闭合非闭合标签:this

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

- 引号
使用双引号来标识 html 的属性

Bad

<a class='maia-button maia-button-secondary'> Sign in </a> # Good <a class="maia-button maia-button-secondary"> Sign in </a> ```

自定义javascript属性经过给元素设置自定义属性来存放与 JavaScript 交互的数据, 属性名格式为 data-xx (例如：data-lazyload-url)

<div class="bg bg-4"  data-load="false"></div>

目的是使用js调用时候对元素进行识别使用.

TODO

使用 TODO 来标记待作事情，便于后期搜索. 在 TODO 后添加 (姓名或邮件) 来表示分类

<!-- TODO(Mark Zhao): remove duplicate tag -->
<p><span>2</span></p>

焦点分离

将表现，行为和结构分离：不要在 html 和模板中加入除告终构之外的东西.例如内联样式, center等标记. 在文档中引入尽量少的样式和脚本

# Bad
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I've read about this on a few sites but now I'm sure:<u>HTML is stupid!!1</u><center>I can't believe there's no way to control the styling of  my website without doing everything all over again!</center><p>
# 
# Good
<h1>My first CSS-only redesign</h1>
<p>I've read about this on a few sites but today I'm actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>

block,list或table元素

针对每一个block,list或table元素另起一行，并在每一个子元素前缩进。这样可读性好

<ul>
    <li>some list file</li>
    ...
</ul>
# ~
<table></table>

Table的写法

</td> 结束标记应该与 <td> 处于同一行，不要换行, 若是换行,浏览器将会解析内容为内容+半角空格.

不容许任何没有内容的空单元格存在,空单元格中必须存在

表格高度和宽度的控制, 不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化

通常状况下只有一列的表格，width 写在 <table> 的标签内

只有一行的表格，height 写在 <table> 的标签内

多行多列的表格，width 和height 写在第一行或者第一列的 <td> 标签内

尽可能避免 colspan, rowspan 两个属性

html标签<, >、空格、特殊符号须要使用html实体

优化技巧

a 元素必须加 title="" ，img元素必须加 alt = ""
[ie7] button 参数必须带有type="submit" , 不然表单不会提交