html规范

---

head

head基本内容：

<!--字符编码：-->
<meta charset="UTF-8">
<!--页面标题：-->
<title>青岛乘正科技有限公司</title>
<!--页面关键词：-->
<meta name="keywords" content="">
<!--页面描述内容：-->
<meta name="Description" content="不超过150个字符" />
<!--移动端及响应式网站：-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--favicon 图标：-->
<link rel="shortcut icon" href="img/favicon.ico" type="img/x-icon" />
<!--bookmark 图标：-->
<link rel="bookmark" href="img/favicon.ico" type="img/x-icon" />
<!--网页作者：-->
<meta name="author" content="">

可以选择加入的标签：

• 1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。

<meta http-equiv="expires" content="Wed, 26 Feb 1997 08：21：57 GMT">

• 2.禁止浏览器从本地机的缓存中调阅页面内容。

<meta http-equiv="Pragma" content="no-cache">

• 3.用来防止别人在框架里调用你的页面。

<meta http-equiv="Window-target" content="_top">

• 4.自动跳转(5 指时间停留 5 秒)。

<meta http-equiv="refresh" content="5;url=http://www.baidu.com">

备注
http缓存机制深入理解推荐文章：

1. 彻底弄懂HTTP缓存机制及原理
2. 浅谈浏览器http的缓存机制

body

• 1.请不要在网页中连续出现多于一个的空格，也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent padding margin实现。
• 2.a标签无文字提示时设置title属性，img标签设置alt属性。a标签默认占位符’###’。

<a href="###" title="给链接文字提示"><img src="图片.gif" alt="给图片提示"></a>

• 3.尽量遵循HTML标准和语义。基本的H5语义标签。

 `header` `nav` `section` `artical` `aside` `dialog` `footer`

• 4.标签属性定义推荐顺序依次为：

  `id class name data-*`

• 5.尽量避免多余的父节点、注释节点。例：

<div><!--多余父节点-->
<!--<span>无用注释节点</span>-->
<div class="container">...</div>
</div>

补充：

• 尽量采用外链css样式，避免内部及内联样式。
• script统一放至body标签内最后。（此引用js方式，无需document.ready检测）