整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML5对HTML4所做的各种修改中
一个比较重大的修改就是为了使文档结构更加清晰、容易阅读，增加了很多新的结构元素。
在HTML5中，为了使文档的结构更加清晰明确
追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。
article元素
article元素表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分，
并且这部分专用于独立地分类或复用，例如聚合。
一个博客帖子、一个教程、一个新的故事、视频及其脚本，都很好地符合这一定义。
除了内容部分，一个article元素通常有它自己的标题（通常放在一个header元素里面），有时还有自己的脚注。
section元素
section元素代表文档或应用程序中一般性的“段”或者“节”。“段”
在这里的上下文中，指的是对内容按照主题的分组，通常还附带标题。
例如，书本的章节，带标签页的对话框的每个标签页，或者一篇论文的编节号。
网站的主页也可以分为不同的节，如介绍、新闻列表和联系信息。
一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；
当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
section元素的作用是对页面上的内容进行分块，
或者说对文章进行分段，但是不要与article混淆，因为article是有着自己完整、独立的内容。
nav元素
nav元素用来构建导航。导航定义为一个页面中
（例如，一篇文章顶端的一个目录，它可以链接到同一页面的锚点）
或一个站点内的链接。但是，并不是链接的每一个集合都是一个nav，
只需要将主要的、基本的链接组放进nav元素即可。
例如，在页脚中通常会有一组链接，包括服务条款、版权声明、联系方式等。
对于这些footer元素就足够放置了。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
nav元素的内容可能是链接的一个列表，标记为一个无序的列表，
或者是一个有序的列表，这里需要注意的是nav元素是一个包装器，
它不会替代<ol>或<ul>元素，但是会包围它。通过这种方式，
不能理解该元素的旧版本浏览器将会显示列表元素和列表项，并且显示效果完全正常
HTML是web开发中三大规范之一，可以参考：Web前端开发-HTML入门干货 。
HTML产生于1990年，1997年的HTML4.0成为互联网标准并广泛应用，HTML5是在HTML4.01（1999年发布）的基础上发展而来，在2008年正式发布，在2012年形成了稳定版本。
其实在HTML4.01之后，W3C组织除了HTML5之外，为了严格html编写规范，发布了XHTML。经过了跌宕起伏的分歧、融合之路，本来预计要逐步被XHTML替代的HTML5，最终成了W3C组织确认的html规范。
在HTML5规范中添加了很多新元素及功能，比如： 更好的页面结构（语义化标签）、图形的绘制（画布）、多媒体（音频、视频）内容、智能表单、地理位置、数据存储以及多线程等。
可以通过html5test.com网站，测试HTML5各标签在各类浏览器中支持程度。
html5test.com
PC浏览器各版本支持HTML5考量
移动浏览器各版本支持HTML5考量
对于IE6、7、8来讲，支持极少部分的HTML5新标签，IE9也是部分支持。
在低版本浏览器中兼容使用HTML5标签，有两种方案，一：自定义标签；二：使用第三方js插件
（1）自定义标签
可以利用添加自定义标签的方式为IE 浏览器添加 HTML5 元素。
<script>
//可以使用自定义标签
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>但是Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式，所以采用以下方式。
（2）利用第三方js插件
html5shiv.js是第三方插件，能够解决IE9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!-- 专门针对IE浏览器的语句，且只能被IE9识别，其他浏览器将以下if endif语句认为是注释 -->
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head><!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
（1）语义化标签
相对于无具体含义的div和span标签，语义化标签的优点是方便搜索引擎能识别页面结构，有利于SEO。
header：该标签定义了页面的头部区域；
nav：该标签定义了页面的导航链接区域；
footer：该标签定义了页面或section的页脚；
section：该标签定义了页面区域；
article：该标签定义了页面的内容区域；
（2）多媒体标签
1）视频标签
video：用来定义视频内容，支持多种视频格式，包括.mp4、.ogg、.webm等，最常用的是.mp4。
<body>
<!-- src属性设置视频源，
width、height设置视频大小，单位是像素，
autoplay属性设置自动播放，
对于google浏览器需要添加muted属性,表示静音播放，
controls属性设置播放控件，包括播放、暂停等，
loop属性设置视频循环播放，
poster属性设置视频封面，
-->
<video
src="media/xiaomitv.mp4"
width="300"
height="100"
autoplay="autoplay"
muted="muted"
controls="controls"
loop="loop"
poster="images/a.jpg"
></video>
</body>还可以采用如下代码，兼容多种格式的视频文件
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>2）音频标签
audio：用来定义音频内容，支持多种音频格式，包括.mp3、.wav、.ogg等，最常用的是.mp3。
音频标签的用法和视频标签的基本一样，属性及属性值含义也基本一样。
Google的chrome浏览器将音频、视频自动播放给默认禁止了，视频可以通过添加静音播放折中解决，但是音频单独通过html标签和属性是不能解决的，需要js配合使用。
（3）智能表单标签
1）新增input类型
tel：限制输入电话号码，目前只有 Safari 8 支持 tel 类型；
email：在提交时验证输入内容是否符合邮箱格式；
date：限制输入的内容为日期，浏览器会弹出日期选择器；
time：限制输入的内容为时间，浏览器会弹出日期选择器；
number：限制输入的内容仅为数字；
url：在提交时验证输入内容是否符合url格式；
<form action="">
<ul>
<li>搜索：<input type="search" name="" id="" /></li>
<li>电话：<input type="tel" /></li>
<li>邮箱：<input type="email" /></li>
<li>日期：<input type="date" /></li>
<li>时间：<input type="time" /></li>
<li>数量：<input type="number" min="1" max="5"/></li>
<li>网址：<input type="url" /></li>
<li>附件：<input type="file" /></li>
<li><input type="submit" /></li>
</ul>
</form>2）新增input的属性
min和max属性可以限制数字的最值，可以限制日期、时间类型的最值；其属性值为具体内容。
required属性表示必填项；其属性值为required。
placeholder属性表示提示信息，其属性值为提示信息。
multiple属性表示input类型为file时，可以文件多选；其属性值为multiple。
autocomplete属性表示是否显示之前提及过的文本信息；其属性值为on或者off。
TML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application，RIA)，如Adobe Flash等需求。其新增的标签有哪些呢?
<article> 标签定义外部的内容(外部内容如blog,news)。使用后感觉和P差不多，语义化的标签。
<aside >标签定义article以外的内容(可用做文章的侧栏).语义化的标签。
<audio>标签定义音乐。支持三种格式,ogg,mp3,wav。 Safari仅支持MP3 and WAV 两种格式.
<canvas>使用JavaScript在网页上绘制图形图像。学好算法JS无所不能. (浏览器说：鸭梨很大).
<command> 定义按钮用的.说实话,没用明白。
<datalist >定义选项列表.又是一个不知道咋用的标签。
<details>用于描述某个文档部分的内容。语义化的标签。
<summary >定义details元素标题。语义化的标签。
<embed>定义嵌入的内容(如插件)。必须有一个src的属性，值是URL。可以是图片，swf etc.
<figure>对元素进行组合.语义化的标签。
<figcaption>定义figure的标题.语义化的标签.
<footer>定义页脚。语义化的标签。
<header>定义页眉。语义化的标签。
<hgroup>对网页或区段(section)的标题进行组合。语义化的标签。
<keygen>定义密钥.没用明白。
<mark>定义带有记号的文本。突出显示用的，会有个背景色。
<meter>定义度量衡，用于已知最大和最小值的度量。不懂，在chrome下显示的是图像,在firefox和safari下显示的是<meter>
<nav>定义导航。语义化的标签。
<output>定义输出类型。应是和表单一块用的。
<progress>定义运行中的进度。进度条效果.
<rupy><rp><rt>定义ruby注释。
<section>定义文档中的区段。语义化的标签,自认为是<div>的替代品.
<source>定义媒介源(如<video>和<audio>)定义媒介资源的类型,让浏览器决定是否下载.
<time>定义时间。语义化的标签。
<video>定义视频。IE9和Safari支持MP4，其他主流浏览器支持Ogg。
来源：HTML5开发小赢家
*请认真填写需求信息，我们会在24小时内与您取得联系。
