HTML5 标准规范
Posted 业余草
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 标准规范相关的知识，希望对你有一定的参考价值。
html5是HTML最新的修订版本。
HTML5相对于之前的标准添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。同时也有一些属性和元素被移除掉，一些元素被重新定义或标准化。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
HTML5标准规范文档对于如何提高浏览器兼容性和SEO，保持代码结构的整洁性，标签元素的正确嵌套，自定义属性以及字符实体的使用，进行了详细的描述，其中也对HTML5移除的一些元素和属性进行了收集整理以供参考。
1.1文档结构
文档类型
在每一个html页面的第一行添加标准模式的声明,必须使用
<!DOCTYPE html>语言属性
必须为html根元素制定lang属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等
<html lang="zh">区分浏览器
参照以下写法
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="zh"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="zh"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->这样写的好处：
可以使用class作为全局条件区分低版本的IE浏览器并进行调整，这显然要优于使用CSS Hack
可以避免IE6条件注释引起的高版本IE文件阻塞问题，原文的解决方法是在前面加一个空白的条件注释，但是这里显然将原本无用空白的条件注释变得有意义了
仍然可以通过HTML验证
与Modernizr等特征检测类库使用相同的class，更具备通用性
no-js标签是需要与Modernizr等类库配合使用的
<script ></script>viewport
必须加上viewport可以让我们开发出来的页面在不同大小的设备上都能统一友好显示
<meta name="viewport" content="width=device-width">兼容属性
IE 支持通过特定的<meta>标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则设置为edge mode，从而通知 IE 采用其所支持的最新的模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />字符编码
所有标记都应设置为utf–8，它应该同时指定在HTTP报头和文档头部
<meta charset="utf-8">文档描述
为了更好让搜索引擎找到你的页面，必须写上keywords和description
<meta name="description" content="">
<meta name="keywords" content="">页面title
必须给每个页面加上有意义的标题
<title>HTML5 standardization</title>type属性：省略
将样式表和脚本中的type省略，除非你不是用的css或javascript，在html5，该值默认是text/css和text/javascript
协议部分
<!-- Not recommended -->
<script ></script>
<!-- Recommended -->
<script ></script>关注点分离
将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护
必须将css文件引入并置于head中
必须将js文件引入并置于body底部 ###大小写：只使用小写 所有的代码都应是小写的，包括元素名称、属性，属性值（除非text或CDATA的内容）、选择器、css属性、属性值（字符串除外）
<!-- Not recommended -->
<A HREF="/">Home</A>
<!-- Recommended -->
<img alt="hengtian">
<!-- Not recommended -->
color: #E5E5E5;
<!-- Recommended -->
color: #e5e5e5;缩进
每次缩进使用4个空格不要使用Tab
.example {
color: blue;
}
<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>树形结构
针对每一个块级元素都另起一行，并在每个子元素前缩进，可提升可读性
<table>
<thead>
<tr>
<th scope="col">header 1</th>
<th scope="col">header 2</th>
<tbody>
<tr>
<td>line 1</td>
<td>line 2</td>
</table>减少嵌套
尽可能减少嵌套,减少不必要的标签，如果结构可以满足上下文要求，就不需要有冗余的结构
<!-- Not recommended -->
<div><div>test</div></div>
<!-- Recommended -->
<div>test</div>
<!-- Not recommended -->
<div><div>test</div></div>
<!-- Recommended -->
<div>test</div>标签嵌套规则
1.块级元素 address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
2.内嵌元素 a、abbr、acronym、b、bdo、big、br、cite、code、 dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、 strong、sub、sup、textarea、tt、u、var
嵌套规则
1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：
<div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错2. 块级元素不能放在<p>里面：
<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p、dt4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：
<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错1.2代码规范
注释
单行注释，需在
<!--后空一格，在-->前空一格多行注释，注释起始和结尾都另起一行，注释内容缩进4个空格，不要使用Tab
<!-- This is a one line comment -->
<p>This is a comment</p>
<!--
This comment is require more than one line, so we should use block-style indented text
-->HTML有效性验证
使用有效的html标签，并利用工具如W3C html validator进行检查
<!-- Not recommended -->
<title>Demo</title>
<article>This is a demo.
<!-- Recommended -->
<title>Demo</title>
<article>This is a demo.</article>语义性
根据标签的语义来合理使用它 如使用footer元素来定义页脚，section元素来定义文档中的章节 这对代码的执行效率和可读性都非常重要
<!-- Not recommended -->
<div>
<h1>Journey</h1>
<p>One day you finally knew what you had to do, and began.</p>
</div>
<!-- Recommended -->
<section>
<h1>Journey</h1>
<p>One day you finally knew what you had to do, and began.</p>
</section>HTML5 data-* 自定义属性
添加属性的时候需要去掉前缀data-*，-后为一个单词小写.如下<div id="J_test" data-age="24">
Click Here
</div>字符实体引用
为了良好的阅读性，不要使用实体引用的方式，除了以下几种情况：
键盘上没有该字符
在HTML中有特殊含义的字符，如：
<,>,&空格
常用HTML字符实体（建议使用实体）：
| 字符 | 名称 | 实体名 | 实体数 |
|---|---|---|---|
| " | 双引号 | " |
" |
| ' | 撇号 | '(IE不支持) |
' |
| & | 和号 | & |
& |
| > | 右尖括号（大于号） | > |
> |
| < | 左尖括号（小于号） | < |
< |
| 空格 | |
  |
|
| 中文全角空格 | 　 |
常用特殊字符实体（不建议使用实体）：
| 字符 | 名称 | 实体名 | 实体数 |
|---|---|---|---|
| ￥ | 元 | ¥ |
¥ |
| 断竖线 | ¦ |
||
| © | 版权 | © |
© |
| ® | 注册商标R | ® |
® |
| ™ | 商标TM | ™ |
™ |
| • | 间隔符 | · |
· |
| « | 左双尖括号 | « |
« |
| » | 右双尖括号 | » |
» |
| ° | 度 | ° |
° |
| × | 乘 | × |
× |
| ÷ | 除 | ÷ |
÷ |
| ‰ | 千分比 | ‰ |
‰ |
图片和颜色
给图片添加
width和height，提升页面加载速度给所有
img添加alt属性不要使用或尽量少用
gif文件
避免长句
在IDE中，需要去来回拖动滚动条来查看末尾的代码是很不方便的，所以要在合适的位置来断句。
无内容元素
无内容元素是一种不能包含任何内容的特殊元素，比较常见的无内容元素有：br,hr,img,input,link,meta 此类元素不要使用无闭合标签，且在>前无空格
<meta name="author" content="Hengtian">待定项
将未实现或待定内容用TODO标记出来，如需要可将TODO项的负责人也列出来，并可再写上需要做的内容
<!-- TODO(Jason) : add more items -->布尔属性
布尔型属性在声明时必须为其赋值
<input type="text" disabled="diabled">
<select>
<option value="1" selected="slected">1</option>
</select>1.3文档内容
展现内容分离
无论你是否使用框架，99%的展现设计应该在stylesheets中，以下几点应避免去做：
不要使用内联样式，如：
<div style="border: 1px">用
<p>来代替<br>来对内容换行不要使用
<em>和<strong>,用css来控制不要使用
<i>和<b>，HTML5不赞成使用
HTML5中移除的元素
| 元素 | 解决方法 |
|---|---|
<acronym> |
使用<abbr>标签替代 |
<applet> |
使用<object>标签替代 |
<basefont> |
使用CSS来设置大小 |
<big> |
使用CSS中font size来实现 |
<dir> |
使用<ul>标签代替 |
<font> |
使用CSS来实现 |
<frame> |
糟糕的可用性和访问性 |
<frameset> |
糟糕的可用性和访问性 |
<isindex> |
使用HTML5表单控件来替代 |
<noframes> |
糟糕的可用性和访问性 |
<s> |
使用CSS来实现 |
<strike> |
使用CSS来实现 |
<tt> |
使用CSS来实现 |
<u> |
使用CSS来实现 |
HTML5中移除的属性
| 属性 | 所属的元素 |
|---|---|
| align | caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr |
| alink | body |
| link | body |
| vlink | body |
| text | body |
| background | body |
| bgcolor | table, tr, td, th and body |
| border | table and object |
| cellpadding | table |
| cellspacing | table |
| char | col, colgroup, tbody, td, tfoot, th, thead and tr |
| charoff | col, colgroup, tbody, td, tfoot, th, thead and tr |
| clear | br |
| compact | dl, menu, ol and ul |
| frame | table |
| compact | dl, menu, ol and ul |
| frame | table |
| frameborder | iframe |
| hspace | img and object |
| vspace | img and object |
| marginheight | iframe |
| marginwidth | iframe |
| noshade | hr |
| nowrap | td and th |
| rules | table |
| scrolling | iframe |
| size | hr |
| type | li, ol and ul |
| valign | col, colgroup, tbody, td, tfoot, th, thead and tr |
| width | hr, table, td, th, col, colgroup and pre |
感谢您的关注！可加QQ1群：135430763，QQ2群：454796847，QQ3群：187424846。QQ群进群密码：xttblog，想加微信群的朋友，可以微信搜索：xmtxtt，备注：“xttblog”，添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通！
以上是关于HTML5 标准规范的主要内容，如果未能解决你的问题，请参考以下文章
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段