HTML是描述网页结构的超文本标记语言，HTML规范能够使HTML代码风格保持一致，使得HTML更容易理解和维护。

整体结构

【页面头部】

　　1、文件应以“”首行顶格开始，推荐使用“”

2、必须声明文档的编码charset，且与文件本身编码保持一致，指定字符编码的meta必须是head的第一个直接子元素。推荐使用UTF-8编码

（1）网页显示字符集

（2）可选标签

公司的版权注释

网页制作者信息

网站简介

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

禁止浏览器从本地机缓存中调阅内容

用来防止别人在框架中调用你的页面

自动跳转

网页搜索机器人向导，用来告诉机器人哪些页面需要搜索，哪些页 面不需要搜索

收藏夹图标

3、根据页面内容和需求填写适当的keywords和description

4、页面title是不可缺少的一项，title必须作为head的直接子元素，并紧随charset声明之后

   

    页面标题

【资源引入】

1、保证favicon可访问

//用于显示网页导航栏上的logo

2、引入CSS和JavaScript时无须指明type属性

3、引入CSS时必须指明rel="stylesheet"

　　4、使用link将css文件引入，并置于head中；使用script将js文件引入，并置于body底部

5、移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的URL协议部分与页面相同，建议省略协议前缀。这是因为使用protocol-relative URL引入 CSS，在IE7/8下，会发两次请求。是否使用protocol-relative URL应充分考虑页面针对的环境

【结构优化】

　　1、尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度

　　2、结构顺序和视觉顺序基本保持一致，按照从上至下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取，也会将重要内容在HTML结构顺序上提前

　　3、结构、表现、行为三者分离，避免内联

　　4、每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾空格

　　5、对于内容较为简单的表格，建议将tr写成单行

　　6、可以在大的模块之间用空行隔开，使模块更清晰

【语义化】

　　浏览器会根据标签的语义给定一个默认的样式。判断网页标签语义化是否良好的一个简单方法：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性

　　1、尽可能少地使用无语义标签span和div

　　2、在语义不明显，既可以使用p也可以使用div的地方，尽量用p

　　3、在既可以使用div也可以使用section的地方，尽量用section

　　4、不要使用纯样式标签，如b、u等，而改用CSS设置

代码格式

【命名】

　　1、class 必须单词全字母小写，单词间以 - 分隔

　　2、class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名

3、同一页面，应避免使用相同的name与id。因为IE7-浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心

【标签】

　　1、标签名必须使用小写字母

　　2、对于无需自闭合的标签，不需要自闭合

3、对HTML5中规定允许省略的闭合标签，不允许省略闭合标签

4、HTML标签的使用应该遵循标签的语义，且要符合标签嵌套规则

Hello StyleGuide!

Hello StyleGuide!

【注释】

　　采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式

　　开始注释：（文案两头空格）

　　结束注释：（文案前加“/”符号，类似标签的闭合）

　　允许只有开始注释

   

LOGO

   

       

NAV1

       

NAV2

【属性】

　　1、属性和值全部小写

　　2、属性值必须用双引号包围

　　3、布尔类型的属性，建议不添加属性值

4、自定义属性建议以xxx-为前缀，推荐使用data-

　　5、可以省略style标签和script标签的type属性

...

...

【属性顺序】

　　HTML 属性应该按照特定的顺序出现以保证易读性

id

class

name

data-xxx

src, for, type, href

title, alt

aria-xxx, role

特殊元素

【图片】

1、禁止img的src取值为空，否则会导致部分浏览器重新加载一次当前页面

2、为图片添加alt属性，提高图片加载失败时的用户体验

3、避免为img添加不必要的title属性，多余的 title 影响看图体验，并且增加了页面尺寸

4、为图片添加width和height属性，以避免页面抖动

5、有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现

　　产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载

　　无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现

【表单】

1、有文本标题的控件使用label标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id

我已确认上述条款

2、使用button元素时必须指明type属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交

提交

取消