HTLM5基础元素，属性

HTLM5（元素，属性）

1.标题标签（包括 h1 到 h6）有很高的使用率，它们用于描述内容的主题。 在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。 这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。
2.header 元素来让屏幕阅读器更容易进行导航，header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容。
注意：header 应当在 HTML 文档的 body 标签内使用。 它与包含页面标题、元信息的 head 标签不同。

3.nav 元素使屏幕阅读器更容易导航，nav 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。对于在多个页面底部出现的站点链接，我们不需要使用 nav 标签。 我们将会在下个挑战中学习 footer 标签的使用。

4.footer 元素来让屏幕阅读器更容易进行导航，与 header 和 nav 类似，footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。

5.audio 元素提高音频内容的可访问性，HTML5 的 audio 标签用于呈现音频内容或音频流，它也具有语义化特性。 音频内容也需要备用文本，供聋哑人或听力困难的人使用。 这可以通过页面上的文本或与字幕链接来实现。audio 标签支持 controls 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。

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

6.figure 元素提高图表的可访问性
HTML5 引入了 figure 标签以及与之相关的 figcaption 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。 但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。
注意 figcaption 包含在 figure 标签中，并且可以与其他标签组合使用：

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

7.label 元素提高表单的可访问性
合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。 在接下来的挑战中，你将会看到在表单中使用属性的场景。label 标签的文本内容通常会是表单组件的名称或标签。 这些文本表明了组件的意义，也提升了表单的可访问性。 label 标签的 for 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 for 属性的属性值。标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 label 标签里面。 另外一种实现这个功能的方法，那就是使用 for 属性。
for 的属性值必须与表单组件的 id 属性值相同。 举个例子：

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

8.fieldset 标签包裹整组单选按钮，实现这个功能。 它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。 这时，使用包含 for 属性的 label 标签就足够了。

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

9.添加可访问的日期选择器
表单中经常出现 input 标签，它可以用来创建多种表单控件。 它的 type 属性指定了所要创建的 input 标签类型。
见过 text 与 submit 类型的 input 标签。 HTML5 规范添加了 date 类型来创建日期选择器。 如果浏览器支持，在点击 input 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。
对于较老的浏览器，类型将默认为 text， 这样它可以通过 label 或 placeholder 文本向用户显示预期的日期格式。
HTML5 的 datetime 属性标准化时间
继续日期主题。 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>

10.自定义 CSS 让元素仅对屏幕阅读器可见到目前为止，所有关于可访问性的挑战都没有使用 CSS。 这是为了在介绍视觉设计方面之前强调使用逻辑结构和有语义意义的标签的重要性。
但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。 当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下， 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}