freeCodeCamp/guide/chinese/html/semantic-html-elements/index.md

2.9 KiB
Raw Blame History

title localeTitle
Semantic HTML Elements 语义HTML元素

语义HTML元素

<em>元素将文本标记为在其周围的文本上方强调。通常浏览器以_斜体显示_ 但您可以使用CSS添加其他样式。

语义HTML元素为浏览器开发人员和站点用户提供了意义。与<div><span>等元素相比, <header><footer>等语义元素更清楚地解释了网站每个部分的用途。

为什么要使用语义元素?

开发人员使用语义元素来增强以下内容:

  • 辅助功能:帮助辅助技术读取和解释您的网页
  • 可搜索性:帮助计算机理解您的内容
  • 国际化世界上只有13的人是英语母语人士
  • 互操作性帮助其他程序员了解您的网页结构1

有用的语义元素

  • <header>定义文档或节的标题
  • <footer>定义文档或节的页脚
  • <nav>定义文档中的导航链接
  • <main>定义文档的主要内容
  • <section>定义了文档中的一个部分 - 规范将其定义为“内容的主题分组,通常带有标题”,因此您可以将其视为一个章节
  • <article>定义了文档中的一篇文章
  • <aside>定义除页面内容之外的内容
  • <address>定义文档或文章的作者/所有者的联系信息
  • <figure>定义自包含的内容如插图图表照片代码块等2

鲜为人知的语义元素

  • <bdi>定义了一段文本,其格式可能与其他文本的方向不同(例如,希伯来语中的引文或其他英文文章中的阿拉伯语)
  • <details>定义了人们可以查看或隐藏的其他详细信息(如工具提示)
  • <dialog>定义一个对话框或窗口
  • <figcaption>定义了字幕要<figure>
  • <mark>定义标记或突出显示的文本
  • <menuitem>定义用户可以从弹出菜单中选择的命令/菜单项
  • <meter>定义已知范围内的标量测量(仪表)
  • <progress>定义任务的进度
  • <rp>定义在不支持ruby注释的浏览器中显示的内容
  • <rt>定义字符的解释/发音(东亚排版)
  • <ruby>定义ruby注释用于东亚排版
  • <summary>定义<details>元素的可见标题
  • <time>定义日期/时间
  • <wbr>定义了一个可能的换行符2

来源

  1. 李,米歇尔。 “HTML5语义概述。” CodePen 。 2016年2月16日。访问时间2017年10月24日
  2. BidauxVincent。 “HTML5语义元素和Webflow必不可少的指南。” Webflow 。 2016年12月16日。访问时间2017年10月24日

更多信息:

有关更多信息https//codepen.io/mi-lee/post/an-overview-of-html5-semantics

请参阅MDN Web Docs文章