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 src="js/libs/modernizr-2.5.0.min.js"></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
协议部分
在指向图片或其他媒体文件、样式表和脚本的URL地址中省略http:
https:
协议部分,除非已知相应文件不能同时兼容2个协议
<!-- Not recommended -->
<script src="http://www.hengtiansoft.com/js/demo.js"></script>
<!-- Recommended -->
<script src="//www.hengtiansoft.com/js/demo.js"></script>
关注点分离
将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护
- 必须将css文件引入并置于head中
- 必须将js文件引入并置于body底部 ###大小写:只使用小写 所有的代码都应是小写的,包括元素名称、属性,属性值(除非text或CDATA的内容)、选择器、css属性、属性值(字符串除外)
<!-- Not recommended -->
<A HREF="/">Home</A>
<!-- Recommended -->
<img src="hengtian.png" 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、dt
4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列:
<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 |
HTML5 标准规范相关推荐
- 前端们等了8年!HTML5标准终于完工了
万维网联盟(W3C)今天泪流满面地宣布,经过几乎 8 年的艰辛努力,HTML5 标准规范终于最终制定完成了,并已公开发布. 在此之前的几年时间里,已经有很多开发者陆续使用了 HTML5 的部分技术,F ...
- 浏览器支持HTML5+标准,可达到原生的功能体验
北京时间10月28日,在北京国家会议中心,工信部召开的<2016移动智能终端峰会>上,举办了HTML5中国产业联盟挂靠工信部信通院标准所的挂靠仪式. HTML5中国产业联盟之前是W3C指导 ...
- HTML5标准成形:浏览器竞争会消停吗?
昨天,万维网联盟(W3C)宣布,经过将近8年的艰辛努力,HTML5标准规范终于最终制定完成并已公开发布. 狭义上,HTML5是HTML的第五个版本.HTML的全称是超文本标记语言(HyperText ...
- 兄弟割席:HTML5标准制定组织分裂
为什么80%的码农都做不了架构师?>>> 日期:2012-7-23 来源:GBin1.com 原文来源:雷锋网 最新消息:HTML5标准制定组织WHATWG与W3C因为理念上 ...
- html的技术标准网站,HTML5标准最新技术预览
已经存在近十年的HTML4已经成为不断发展的Web开发领域的瓶颈:HTML5标准在此时显得尤为重要.每天都有新颖而创新的网站出现,全方位地拓展HTML的边界.Web开发者正在寻求新的技术,提供更强大的 ...
- HTML5 代码规范
HTML5 代码规范 在使用HTML5的过程中,使用规范化的代码能够更加方便你的运用与阅读,本节我们将带领你了解如何能够使得HTML5中的代码变得更加规范! HTML 代码约定 很多 Web 开发人员 ...
- unity3D新闻:HTML5标准最终确定 体验或将有所改变
报道:万维网联盟(World Wide Web Consortium,简称W3C)近日发布了HTML5标准的推荐版,并将其命名为用于创建网页与应用程序的HTML5标准的终极版. HTML5的发展演化是 ...
- uc支持html5么,支持Html5标准 UC浏览器8.1版抢先评测
提到UC浏览器,智能手机用户应该是最熟悉不过,这款国产手机端浏览器以速度快.省流量而著称,目前已经覆盖了iOS.Android.WP7.Symbian等多个主流智能手机平台.今天,UC优视将在iOS. ...
- android 8.1评测,支持Html5标准 UC浏览器8.1安卓版抢先评测
提到UC浏览器,智能手机用户应该是最熟悉不过,这款国产手机端浏览器以速度快.省流量而著称,目前已经覆盖了iOS.Android.WP7.Symbian等多个主流智能手机平台.今天,UC优视将在iOS. ...
最新文章
- VS 2010中对WPF4有哪些多点触摸支持?
- 3 calender python_python3笔记二十一:时间操作datetime和calendar
- SAP RETAIL Site BP Customer 相同的code ?
- 请求模式解决共享资源冲突
- php 多个数组乘积_VLOOKUP参数使用数组
- 小a与204(牛客寒假算法集训营1题目B)
- CSS实现响应式布局(自动拆分几列)
- android webview设置加载进度条
- python 在线培训费用-在线Python编程培训哪家机构比较好?
- 如何使用iMazing为iPad创建配置文件
- 解决Ubuntu下VNC客户端无法输入s和m的方法
- CentOS中MySQL5.6 数据库主从(Master/Slave)同步安装与配置详解
- 高等数学辅导讲义_研学堂:考研数学辅导书测评
- 蓝牙模块 HC-06
- Python math.erf() 方法
- 用Python画填色的中国分省地图(数据+源代码)
- 台式计算机和台式机,台式电脑i5和i7的区别_台式机i5和i7的区别有多大
- 高等数学之极限的原理及易错题计算
- 应用场景一:西门子PLC通过桥接器连接MQTT服务器
- AC自动机+状压dp hdu2825 Wireless Password