Web应用知识点

article是另一个具有语义化特性的 HTML5 新标签。article是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。

注意section和div的区别：
section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。

<div> - 内容组
<section> - 有联系的内容组
<article> - 独立完整的内容

 

header也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

与main类似，header的语义化特性也可以使辅助技术快速定位到它的内容。

注意：
header用在 HTML 文档的body标签中。这点与包含页面标题、元信息的head标签不同。

nav也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。

对于页面底部辅助性质的站点链接，不需要使用nav，用footer（在下个挑战中介绍）会更好。

与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。

audio 

HTML5 的audio标签用于呈现音频内容，它也具有语义化特性。可以在audio上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。

audio支持controls属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。controls属性是一个布尔属性，只要这个属性出现在audio标签中，浏览器就会开启播放控件。

举个例子：

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
  <source src="audio/meow.ogg" type="audio/ogg" />
</audio>

注意：
多媒体内容通常同时包含音频与视频部分，它需要同步音频与字幕，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不需要创建音频与字幕，但是需要将它们添加到多媒体中。

label标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。label标签的for属性指定了与label绑定的表单控件，并且屏幕阅读器也会读取for属性。单选按钮标签中,是将imput放到lable标签中,而for标签:

         

for属性的值必须与表达控件的id属性的值相同。举个例子：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

HTML5 引入了date类型来创建时间选择器。依赖于浏览器的支持，当点击input标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。

对于旧版本的浏览器，type属性的默认值是text。这种情况下，可以利用label标签或者占位文本来提示用户input标签的输入类型为日期。

举个例子：

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">

 

继续日期主题。HTML5 还引入了time标签与datetime属性来标准化时间。time是一个行内标签，用于在页面中呈现日期或时间，而datetime属性保存了日期的有效格式，辅助设备可以访问这个值。通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。

举个例子：

<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

 

 

HTML 提供accesskey属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加有效。

HTML5 允许在任何标签上使用这个属性。该属性对于交互类标签（如链接、按钮、表单控件等）十分有用。

举个例子：

<button accesskey="b">Important Button</button>

 

HTML 的tabindex属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。

当用户在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点。它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将tabindex属性值设为 0，来给其他标签赋予相同的功能，如：div、span、p等。举个例子：

<div tabindex="0">I need keyboard focus!</div>

注意：
tabindex属性值为负整数（通常为 -1）的标签也是有焦点的，只是不可以通过 tab 键来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：激活用于弹出框的div标签），但是它超出了当前挑战的范围。