HTML相关规范学习

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

【页面头部】

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

 !DOCTYPE html 

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

 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、引入 CSS 和 JavaScript 时无须指明 type 属性

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

 link rel= stylesheet href= page.css?1.1.11 

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

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

 script src= //s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js?1.1.11 /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 >
 3、同一页面，应避免使用相同的 name 与 id。因为IE7-浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心
【标签】
 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 >
【属性】
 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?1.1.11 /script !-- bad -- script src= esl.js /script script src=esl.js /script 
【属性顺序】
 HTML 属性应该按照特定的顺序出现以保证易读性
idclassdata-xxxsrc, for, type, hreftitle, altaria-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 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id
 label input type= checkbox name= confirm value= on 我已确认上述条款 /label 
 2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交
 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、只在必要的时候开启音视频的自动播放
以上就是HTML相关规范学习的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。