了解HTML5

从以下几方面了解HTML5：

1.HTML5的优势：

- 跨平台
HTML5可以运行在PC端、IOS或Android移动设备端
- 兼容性
Web兼容性比较棘手，尤其是IE6，几乎要为每一个浏览器做兼容处理。但是HTML5的出现趋于成熟，只要浏览器支持HTML5就可以实现所预定效果，不必再为各种浏览器做判断兼容处理。
- 各大浏览器厂商的支持
大部分现代的浏览器都支持了HTML5，且已经应用到网站制作、游戏开发、移动应用开发等多个领域。

2.HTML5的新增结构元素：

元素	说明
header	定义了文档的头部区域
nav	定义导航链接的部分
section	定义文档中的节（section、区段）
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
footer	定义section或document的页脚

注：新增元素需要IE9以上或最新Chrome等浏览器支持。

下面介绍这些新增结构元素的使用：
1.header元素：
HTML5出现以前，body间可以如下书写：

<div id="header">网页头部</div>

或

<div class="header">网页头部</div>

HTML5出现以后，body双标签之间可以如下书写：

<header>网页头部</header>

这样书写就简化了代码，并且提高了可读性。
2.nav元素：
nav元素代表页面的一部分，是一个可以作为页面导航的链接组，可以转到当前页面其他部分或其他页面。
语法：

<nav>
	<ul>
		<li>博客首页</li>
		<li>心情日志</li>
		<li>我的邮箱</li>
	</ul>
</nav>

3.section元素：
section不只是一个普通的容器元素，主要用于表示一段专题性的内容，通常用于带有标题和内容的区域，如文章的章节、对话框中的标签页等。
section元素用于主体部分，语法：

<section>
	<h1>新浪微博</h1>
	<p>新浪微博APP发行于...</p>
</section>

4.article元素：
article元素是一个特殊的section元素，但无论从结构上还是内容上，article元素比section元素的独立性和完整性强。
此元素用于body主体部分，语法：

<article>
	<h1>新浪微博</h1>
	<p>新浪微博APP发行于...</p>
</article>

5.aside元素：
在网页制作中主要有以下两种使用方法：
（1）包含在article元素中作为主要内容的附属信息显示，如与当前文章有关的相关自来哦、名词解释等。

<article>
	<h1>...</h1>
	<p>...</p>
	<aside>...<aside>
</article>

（2）在article元素之外使用，作为页面或站点全局的附属信息，最典型的应用是侧边栏。

<aside>
	<h2>..</h2>
	<ul>
		<li>...</li>
		<li>...</li>
	</ul>
</aside>

6.footer元素：
此元素一般用在页面或区域底部，通常包含文档的作者、版权信息、使用条款链接等。
语法：

<footer class="yanshi">
	脚注信息
</footer>

2.HTML5的新增网页元素：

元素	说明
video	定义视频，如电影片段或其他视频流
audio	定义音频，如音乐或其他音频流
canvas	定义图形
datalist	定义可选数据的列表
time	定义日期或时间
mark	在视觉上向用户呈现那些需要突出的文字
progress	运行中的进度（进程）

注：这几个元素主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础。

下面介绍这些新增网页元素的使用：
1.datalist元素：
此元素用于为文本框提供一个可选数据的列表，用户可以直接选择预先设定好的某一项，也可以输入自己需要而列表中并不存在的内容，从而减少输入的麻烦。
datalist元素是由一个或多个option元素组成的，并且每个option都应被设置value属性。
此元素用于body主体部分，语法：

<input type="text" list="list1"/>
<datalist id="list1">
	<option value="苹果">苹果</option>
	<option value="香蕉">香蕉</option>
	<option value="橘子">橘子</option>
</datdalist>

运行结果图：

2.time元素：
此元素使用不使用没有什么区别，只是使用后容易被搜索引擎搜索到。
语法：

<p>我们在每天早上<time>9:00</time>开始营业！</p>
<p>我在<time datetime="2020-02-14">情人节</time>有个约会。</p>

3.mark元素
当文字处于mark元素之内时，页面上显示的文字会有背景，用于突出重点。
语法：

<mark>天气渐渐变暖了</mark>

4.progress元素：
此元素在页面上显示为一个进度条，value属性表示已完成进度，max属性表示总进度。
语法：

<progress value="20" max="100"></progress>

2.HTML5的新增全局属性：

属性	说明
contentEditable	是否允许用户编辑内容
designMode	整个页面是否可编辑
hidden	是否对元素进行隐藏
spellcheck	是否必须对元素进行拼写或语法检查
tabindex	规定元素的Tab键移动顺序

下面介绍这些新增网页元素的使用：
1.contentEditable元素：
contentEditable属性可以设置两个值，即true或false决定是否可被编辑，若未指定true或false，该元素的编辑状态将由父元素来决定。
在编辑完元素后，若想要保存，则只能把元素的innerHTML属性发送到服务器端进行保存。用法如下：

<ul contentEditable="true">
	<li>列表</li>
</ul>

2.designMode元素
designMode属性可以设置两个值，即on或off决定页面是否可被编辑，若可编辑，即页面内任何支持designMode属性的元素都变成了可编辑状态。使用JavaScript指定designMode属性的用法如下所示：

<script>
	document.designMode=on;
</script>

3.hidden元素
HTML5中所有的元素都允许使用hidden属性，该属性是bool类型，设为true为不可见，设为false为可见。
4.spellcheck元素
该属性是HTML5中针对单行文本框和多行文本框设置的，是bool类型，设为true进行语法检查，否则不检查，但如果元素的readOnly属性和disabled属性生效的话，spellcheck属性将失效。
4.tabindex元素
是网页开发中的一个基本概念，当不断按tab键让窗口或页面中的控件获取焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex属性表示该控件是第几个被访问到的。