58 lines
2.9 KiB
Markdown
58 lines
2.9 KiB
Markdown
|
---
|
|||
|
title: Semantic HTML Elements
|
|||
|
localeTitle: 语义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日](https://codepen.io/mi-lee/post/an-overview-of-html5-semantics)
|
|||
|
2. [Bidaux,Vincent。 “HTML5语义元素和Webflow:必不可少的指南。” _Webflow_ 。 2016年12月16日。访问时间:2017年10月24日](https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide)
|
|||
|
|
|||
|
#### 更多信息:
|
|||
|
|
|||
|
有关更多信息:https://codepen.io/mi-lee/post/an-overview-of-html5-semantics
|
|||
|
|
|||
|
请参阅[MDN Web Docs文章](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) 。
|