html 是描述网页结构的超文本标记语言,HTML 规范能够使 HTML 代码风格保持一致,使得 HTML 更容易理解和维护。本文将详细介绍 HTML 规范
【页面头部】
1、文件应以 "<!DOCTYPE ......>" 首行顶格开始,推荐使用 "<!DOCTYPE html>"
- <!DOCTYPE html>
2、必须声明文档的编码 charset,且与文件本身编码保持一致,指定字符编码的
必须是
- meta
的第一个直接子元素。推荐使用 UTF-8 编码
- head
- <meta charset="utf-8">
3、根据页面内容和需求填写适当的 keywords 和 description
- <meta name="description" content="不超过150个字符">
- <meta name="keywords" content="">
4、页面 title 是不可缺少的一项,
必须作为
- title
的直接子元素,并紧随
- head
声明之后
- charset
- <head>
- <meta charset="UTF-8">
- <title>
- 页面标题
- </title>
- </head>
【资源引入】
1、保证
可访问
- favicon
- <link rel="shortcut icon" href="path/to/favicon.ico">
2、引入
和
时无须指明
- JavaScript
属性
- type
3、引入
时必须指明
- CSS
- rel="stylesheet"
- <link rel="stylesheet" href="page.css">
4、使用 link 将 css 文件引入,并置于 head 中;使用 script 将 js 文件引入,并置于 body 底部
5、移动环境或只针对现代浏览器设计的 web 应用,如果引用外部资源的
协议部分与页面相同,建议省略协议前缀。这是因为使用
- URL
引入 CSS,在
- protocol-relative URL
下,会发两次请求。是否使用
- IE7/8
应充分考虑页面针对的环境
- protocol-relative URL
- <script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js">
- </script>
【结构优化】
1、尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度
2、结构顺序和视觉顺序基本保持一致,按照从上至下、从左到右的视觉顺序书写 HTML 结构。有时为了便于搜索引擎抓取,也会将重要内容在 HTML 结构顺序上提前
3、结构、表现、行为三者分离,避免内联
4、每一个块级元素都另起一行,每一行都使用 Tab 缩进对齐(head 和 body 的子元素不需要缩进)。删除冗余的行尾空格
5、对于内容较为简单的表格,建议将 tr 写成单行
6、可以在大的模块之间用空行隔开,使模块更清晰
【缩进】
使用 4 个空格代替 1 个 Tab(大多数编辑器中可设置)
- <ul>
- <li>
- first
- </li>
- <li>
- second
- </li>
- </ul>
【命名】
1、class 必须单词全字母小写,单词间以 - 分隔
2、class 必须代表相应模块或部件的内容或功能,不得以样式信息进行命名
- <!-- good -->
- <div class="sidebar">
- </div>
- <!-- bad -->
- <div class="left">
- </div>
3、同一页面,应避免使用相同的
与
- name
因为 IE7 - 浏览器会混淆元素的 id 和 name 属性, document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心
- id。
【标签】
1、标签名必须使用小写字母
2、对于无需自闭合的标签,不需要自闭合
3、对
中规定允许省略的闭合标签,不允许省略闭合标签
- HTML5
4、
标签的使用应该遵循标签的语义,且要符合标签嵌套规则
- HTML
- <!-- good -->
- <p>
- Hello StyleGuide!
- </p>
- <!-- bad -->
- <P>
- Hello StyleGuide!
- </P>
- <!-- good -->
- <input type="text" name="title">
- <!-- bad -->
- <input type="text" name="title" />
- <!-- good -->
- <ul>
- <li>
- first
- </li>
- <li>
- second
- </li>
- </ul>
- <!-- bad -->
- <ul>
- <li>
- first
- <li>
- second
- </ul>
【注释】
采用类似标签闭合的写法,与 HTML 统一格式;注释文案两头空格,与 CSS 注释统一格式
开始注释:<!-- 注释文案 -->(文案两头空格)
结束注释:<!-- / 注释文案 -->(文案前加 "/" 符号,类似标签的闭合)
允许只有开始注释
- <!-- 头部 -->
- <div class="g-hd">
- <!-- LOGO -->
- <h1 class="m-logo">
- <a href="#">
- LOGO
- </a>
- </h1>
- <!-- /LOGO -->
- <!-- 导航 -->
- <ul class="m-nav">
- <li>
- <a href="#">
- NAV1
- </a>
- </li>
- <li>
- <a href="#">
- NAV2
- </a>
- </li>
- <!-- 更多导航项 -->
- </ul>
- <!-- /导航 -->
- </div>
- <!-- /头部 -->
【属性】
1、属性和值全部小写
2、属性值必须用双引号包围
3、布尔类型的属性,建议不添加属性值
4、自定义属性建议以
为前缀,推荐使用
- xxx-
- data-
5、可以省略 style 标签和 script 标签的 type 属性
- <!-- good -->
- <table cellspacing="0">
- ...
- </table>
- <!-- bad -->
- <table cellSpacing="0">
- ...
- </table>
- <!-- good -->
- <script src="esl.js">
- </script>
- <!-- bad -->
- <script src='esl.js'>
- </script>
- <script src=esl.js>
- </script>
【属性顺序】
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
- <img src="#" alt="#" width="#" height="#">
5、有下载需求的图片采用
标签实现,无下载需求的图片采用
- img
背景图实现
- CSS
产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片,以 img 形式实现,能方便用户下载
无下载需求的图片,比如:icon、背景、代码使用的图片等,尽可能采用 css 背景图实现
【表单】
1、有文本标题的控件使用
标签将其与其标题相关联。最好将控件置于 label 内,以减少不必要的 id
- label
- <label>
- <input type="checkbox" name="confirm" value="on">
- 我已确认上述条款
- </label>
2、使用
元素时必须指明
- button
属性值。因为 button 元素的默认 type 为 submit,如果被置于 form 元素中,点击后将导致表单提交
- type
- <button type="submit">
- 提交
- </button>
- <button type="button">
- 取消
- </button>
3、在针对移动设备开发的页面时,根据内容类型指定输入框的
属性,能获得友好的输入体验
- type
- <input type="date">
【多媒体】
1、在支持
的浏览器中优先使用
- HTML5
和
- audio
标签来定义音视频元素,并使用退化到插件的方式来对多浏览器进行支持
- video
- <audio controls>
- <source src="audio.mp3" type="audio/mpeg">
- <source src="audio.ogg" type="audio/ogg">
- <object width="100" height="50" data="audio.mp3">
- <embed width="100" height="50" src="audio.swf">
- </object>
- </audio>
- <video width="100" height="50" controls>
- <source src="video.mp4" type="video/mp4">
- <source src="video.ogg" type="video/ogg">
- <object width="100" height="50" data="video.mp4">
- <embed width="100" height="50" src="video.swf">
- </object>
- </video>
2、只在必要的时候开启音视频的自动播放
来源: http://www.cnblogs.com/xiaohuochai/p/5437216.html