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">

文档描述

为了更好让搜索引擎找到你的页面,必须写上keywordsdescription

<meta name="description" content="">
<meta name="keywords" content="">

页面title

必须给每个页面加上有意义的标题

<title>HTML5 standardization</title>

type属性:省略

将样式表和脚本中的type省略,除非你不是用的cssjavascript,在html5,该值默认是text/csstext/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字符实体(建议使用实体):

字符 名称 实体名 实体数
" 双引号 &quot; &#34;
' 撇号 &apos;(IE不支持) &#39;
& 和号 &amp; &#38;
> 右尖括号(大于号) &gt; &#62;
< 左尖括号(小于号) &lt; &#60;
  空格 &nbsp; &#160;
  中文全角空格   &#12288;

常用特殊字符实体(不建议使用实体):

字符 名称 实体名 实体数
&yen; &#165;
    断竖线 &brvbar;
© 版权 &copy; &#169;
® 注册商标R &reg; &#174;
商标TM &trade; &#8482;
间隔符 &middot; &#183;
« 左双尖括号 &laquo; &#171;
» 右双尖括号 &raquo; &#187;
° &deg; &#176;
× &times; &#215;
÷ &divide; &#247;
千分比 &permil; &#8240;

图片和颜色

  • 给图片添加widthheight,提升页面加载速度
  • 给所有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 标准规范相关推荐

  1. 前端们等了8年!HTML5标准终于完工了

    万维网联盟(W3C)今天泪流满面地宣布,经过几乎 8 年的艰辛努力,HTML5 标准规范终于最终制定完成了,并已公开发布. 在此之前的几年时间里,已经有很多开发者陆续使用了 HTML5 的部分技术,F ...

  2. 浏览器支持HTML5+标准,可达到原生的功能体验

    北京时间10月28日,在北京国家会议中心,工信部召开的<2016移动智能终端峰会>上,举办了HTML5中国产业联盟挂靠工信部信通院标准所的挂靠仪式. HTML5中国产业联盟之前是W3C指导 ...

  3. HTML5标准成形:浏览器竞争会消停吗?

    昨天,万维网联盟(W3C)宣布,经过将近8年的艰辛努力,HTML5标准规范终于最终制定完成并已公开发布. 狭义上,HTML5是HTML的第五个版本.HTML的全称是超文本标记语言(HyperText ...

  4. 兄弟割席:HTML5标准制定组织分裂

    为什么80%的码农都做不了架构师?>>>    日期:2012-7-23  来源:GBin1.com 原文来源:雷锋网 最新消息:HTML5标准制定组织WHATWG与W3C因为理念上 ...

  5. html的技术标准网站,HTML5标准最新技术预览

    已经存在近十年的HTML4已经成为不断发展的Web开发领域的瓶颈:HTML5标准在此时显得尤为重要.每天都有新颖而创新的网站出现,全方位地拓展HTML的边界.Web开发者正在寻求新的技术,提供更强大的 ...

  6. HTML5 代码规范

    HTML5 代码规范 在使用HTML5的过程中,使用规范化的代码能够更加方便你的运用与阅读,本节我们将带领你了解如何能够使得HTML5中的代码变得更加规范! HTML 代码约定 很多 Web 开发人员 ...

  7. unity3D新闻:HTML5标准最终确定 体验或将有所改变

    报道:万维网联盟(World Wide Web Consortium,简称W3C)近日发布了HTML5标准的推荐版,并将其命名为用于创建网页与应用程序的HTML5标准的终极版. HTML5的发展演化是 ...

  8. uc支持html5么,支持Html5标准 UC浏览器8.1版抢先评测

    提到UC浏览器,智能手机用户应该是最熟悉不过,这款国产手机端浏览器以速度快.省流量而著称,目前已经覆盖了iOS.Android.WP7.Symbian等多个主流智能手机平台.今天,UC优视将在iOS. ...

  9. android 8.1评测,支持Html5标准 UC浏览器8.1安卓版抢先评测

    提到UC浏览器,智能手机用户应该是最熟悉不过,这款国产手机端浏览器以速度快.省流量而著称,目前已经覆盖了iOS.Android.WP7.Symbian等多个主流智能手机平台.今天,UC优视将在iOS. ...

最新文章

  1. VS 2010中对WPF4有哪些多点触摸支持?
  2. 3 calender python_python3笔记二十一:时间操作datetime和calendar
  3. SAP RETAIL Site BP Customer 相同的code ?
  4. 请求模式解决共享资源冲突
  5. php 多个数组乘积_VLOOKUP参数使用数组
  6. 小a与204(牛客寒假算法集训营1题目B)
  7. CSS实现响应式布局(自动拆分几列)
  8. android webview设置加载进度条
  9. python 在线培训费用-在线Python编程培训哪家机构比较好?
  10. 如何使用iMazing为iPad创建配置文件
  11. 解决Ubuntu下VNC客户端无法输入s和m的方法
  12. CentOS中MySQL5.6 数据库主从(Master/Slave)同步安装与配置详解
  13. 高等数学辅导讲义_研学堂:考研数学辅导书测评
  14. 蓝牙模块 HC-06
  15. Python math.erf() 方法
  16. 用Python画填色的中国分省地图(数据+源代码)
  17. 台式计算机和台式机,台式电脑i5和i7的区别_台式机i5和i7的区别有多大
  18. 高等数学之极限的原理及易错题计算
  19. 应用场景一:西门子PLC通过桥接器连接MQTT服务器
  20. AC自动机+状压dp hdu2825 Wireless Password

热门文章

  1. 适合小白入行IT的几种编程语言
  2. Linux的ioctl和fcntl
  3. 图的广度遍历(湖北汽车工业学院数据结构实验)
  4. 华为鸿蒙在操作系统中占什么位置
  5. 咦,咋没加volatile,变量也可见的呢?
  6. python中如何控制随机的概率_Python3根据基础概率随机生成选项
  7. ASP.NET 实现flv流媒体播放
  8. Cocos Creator 3D 插件教程(一):看你骨骼惊奇,我带你上车!
  9. windows启动GrADS失败connot connect to XMing server
  10. vc++ 2005 发布程序