HTML语义化标签

发表于 更新于

HTML 语义化标签

边翻文档边记录一下语义化标签，有些标签的默认样式可以直接用，不用写 CSS 实现了

a

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。

MDN 页面

1
<a href="https://dongmin.fan" target="_blank">这是一个链接</a>

这是一个链接

abbr

<abbr> HTML 元素表示一个缩写词或首字母缩略词。

MDN 页面

1
<abbr>CSS</abbr> (Cascading Style Sheets)

CSS (Cascading Style Sheets)

article

HTML <article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

给定文档中可以包含多篇文章；例如，阅读器在博客上滚动时一个接一个地显示每篇文章的文本，每个帖子将包含在 <article> 元素中，可能包含一个或多个 <section>。

MDN 页面

blockquote

HTML <blockquote> 元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注 中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。

MDN 页面

details

HTML <details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。

MDN 页面

1
2
3
4
<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>
Details Something small enough to escape casual notice.

details 元素 summary 上会默认会箭头，可以用 list-style-type: none 来去掉

1
2
3
4
<details>
  <summary style="color:red">Details</summary>
  Something small enough to escape casual notice.
</details>
Details Something small enough to escape casual notice.