HTML5编码标准
标准目的
本文档的目标是使HTML5代码风格保持一致，容易被理解、维护和升级，提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。
基本准则
符合web标准, 语义化html, 结构表现行为别离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.
文件标准
1、 html, css, js, images文件均归档至约定的目录中。
2、html文件命名: 必须单词全字母小写，单词间以-分隔，依实际模块命名，如果同一模块以_& title& _ 来组合命名, 以方便添加功能时查对应页面，团结里的相互理解。
HTML5代码标准
1. 代码风格
1.1 缩进与换行
[建议]使用4个空格作为一个缩进层级。
[建议]模板代码的缩进优先保证 HTML 代码的缩进规则。
1.2 命名规则
[强制]class：必须单词全字母小写，单词间以-分隔，且必须代表相应的模块或部件的内容或功能，不得以html内置样式进行命名，命名应该具有明确的语义。
[强制]id：必须保持在页面中的唯一性，命名应该具有明确的语义。
1.3 标签
[强制]Html中的标签名必须使用小写字母。
[强制]标签的闭合要符合html5的规定。
[强制]标签的使用必须符合标签的嵌套规则，例：div不得置于p中，tbody必须置于table中。
[建议]标签的使用必须遵循标签的语义，
例： p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义列表
[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。
1.4 属性
[强制]属性必须使用小写字母，其属性值必须用双引号包围。
[建议]布尔类型的建议不添加属性值。
自定义属性建议以 xxx- 为前缀，推荐使用data-
1.5所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等;
属性值必须用双引号包括;
目的:更加符合web标准(w3c),也有利于seo。
1.6语义化html,
如 标题根据重要性用h*(同一页面只能有一个h1),
段落标记用p,
列表用ul,
内联元素中不可嵌套块级元素;
目的：减少代码量，
1.7尽可能减少div嵌套, 如
<div class=”box”>
<div class=”welcome”>欢送访问XXX, 您的用户名是
<div class=”name”>用户名</div>
</div>
</div>
完全可以用以下代码替代:
<div class=”box”>
<p>欢送访问XXX, 您的用户名是
<span>用户名
</span>
</p>
< /div>;
目的：减少代码量，
1.8引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比方jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比方kie.js;
1.9书写链接地址时, 必须防止重定向，例如：href=”    ://    haogu    /”, 即须在URL地址后面加上“/”；
2.0在页面中尽量防止使用style属性,即style=”„”除非考虑网站    请求，网站响
应速度等因素比重情况具体分析; 
2. 页面头部
2.1 DOCTYPE
[强制]使用doctype 来启用标准模式，建议使用大写的 DOCTYPE
2.2 语言编码
[建议]有助于提高页面的可访问性，必须设置正确的lang属性，例：<html lang="zh-CN">
[强制]页面必须指定字符编码的meta，且必须是 head 的第一个直接子元素，例：<meta charset="UTF-8">。
Meta 标记用于定义页面的相关信息，为非成对标记，位于<head>标记之间。可以有三部分，name      -equiv  content
    -equiv属性值可以是：
html5颜代码refresh(页面刷新)      -equiv=“refresh” content=“5；url=    ://    baidu    ”
reply-to(页面回复信息)
keywords(页面关键字)  用于某些搜索引擎
content-type(页面内容格式)    content-type:text/html
author(页面作者)
description(页面内容摘要)
注：如果没有name属性，那么名称/值对中的名称会采用    -equiv属性的值。
Base 页面中的所有标签在新窗口中打开，target值有_blank,_parent,_self,_top。对应的是连接，href的值可以确定。
Title 定义文档的标题
Link 用于样式的连接
Style 用于直接写样式
Script 定义用户客户端脚本文件
2.3 CSS和JavaScript引入
[强制]引入css时必须指明rel="stylesheet"，在引入css和javascript时必须指明type属性。
[建议]Javascript代码必须放在页面末尾或采用异步加载。
2.4 Head内容
[强制]Title标签必须设置为head的直接子元素，并紧随charset声明之后。
[强制]Favicon保证可访问，例：<link rel="shortcut icon" href="path /favicon.ico">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。