html标签及其作用
HTML5引入一些新元素,给予开发者更多的选择,也包含辅助功能。默认情况下,浏览器呈现这些元素的方式类似于普通的div。但是,在适合的地方使用它们会让标记文本具有更多的含义。仅标签名就可以表示它所包含的信息类型,这给内容增加了语义含义。辅助技术可以获取这种信息,为用户提供更多的页面摘要或导航选项。
# main
main标签用于呈现网页的主体内容,且每个页面应只有一个。这是为了围绕与页面中心主题相关的信息,而不应该包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。main 标签也有一个内嵌的特性,以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接,那么使用 main 标签会自动让辅助设备具有这个跳转的功能。
# article
article 是一个分段标签,用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
# section
section 元素语义与 article 略有不同。 article 用于独立且完整的内容,而 section 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子:如果一本书是一个 article 的话,那么每个章节就是 section。 当内容组之间没有联系时,我们可以使用 div。
# Header
header 是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接,适用于那些在多个页面顶部重复出现的内容。与 main 类似,header 的语义化特性也可以让辅助工具快速定位到它的内容。
# Nav
nav 可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。与 header 和 nav 类似,footer 元素也具有语义化的特性,可以让辅助工具快速定位到它。 它位于页面底部,用于呈现版权信息或者相关文档链接。
# audio
HTML5的audio标签用于呈现音频内容或音频流,它也具有语义化特性。音频内容也需要具备文本,这可以通过页面上的文字或与字母连接来实现。audio标签支持controls属性,用于显示浏览器默认播放、暂停和其他控制,以及支持键盘功能。这是一个布尔值,意味着它不需要开启一个值,它的标签上存在即开启设置。
<audio id="" controls>
<source src="audio/meow.mp3" type="audio/mpeg">
<source src="audio/meow.ogg" type="audio/ogg">
</audio>
# fieldset
fieldset
标签包裹整组单选按钮,实现这个功能。 它经常使用legend
标签来提供分组的描述,以便屏幕阅读器用户会阅读fieldset
元素中的每个选项。
<fieldset id="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>