Zervan的小站 Zervan的小站
首页
  • 测评

    • 蓝牙耳机测评
  • 渗透

    • 网络渗透学习指南
  • 前端

    • 学习web开发
  • 版本控制与管理

    • Github入门与实践
  • 博客开发指南

    • 利用GitHub建立博客
  • 网文梗概-序
  • 我们的文学之路
  • 《世界观体系》
  • 《人物设定集》
  • 《诗集》
  • 《素材》
  • universe

    • 新冠疫情与外星人
  • human

    • 人的自由意志论
  • social

    • 科技的未来
  • school

    • 我们的大学
  • philosophy

    • 关于虚无主义
  • 日志
  • 支持我们
  • 友情链接
about
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Zervan

天下最普通的人之一
首页
  • 测评

    • 蓝牙耳机测评
  • 渗透

    • 网络渗透学习指南
  • 前端

    • 学习web开发
  • 版本控制与管理

    • Github入门与实践
  • 博客开发指南

    • 利用GitHub建立博客
  • 网文梗概-序
  • 我们的文学之路
  • 《世界观体系》
  • 《人物设定集》
  • 《诗集》
  • 《素材》
  • universe

    • 新冠疫情与外星人
  • human

    • 人的自由意志论
  • social

    • 科技的未来
  • school

    • 我们的大学
  • philosophy

    • 关于虚无主义
  • 日志
  • 支持我们
  • 友情链接
about
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 测评

  • 渗透

  • 工具

  • 前端

    • 学习web开发的步骤
    • 命名规范
    • html标签及其作用
      • main
      • article
      • section
      • Header
      • Nav
      • audio
      • fieldset
    • html标签的嵌套
    • html断点调试和抓包
    • css的问题
    • 如何引入css
    • 理解及使用ajax
    • 技术学习路线
  • 英语考试攻略

  • 区块链投资

  • 版本控制与管理

  • code
  • 前端
Zervan
2021-12-24

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>
编辑 (opens new window)
#web
上次更新: 2022/6/28 21:52:22
命名规范
html标签的嵌套

← 命名规范 html标签的嵌套→

最近更新
01
修改nginx_conf部分配置
02-22
02
高学历宗教人士
12-04
03
理性思维
12-04
更多文章>
Zervan的小站 · VERSION: 1.0.128 · 基于vilivala构建 | pv と uv | Copyright © 2021-2023 | 鲁ICP备2021036977号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式