HTML语义化标签总结

HTML语义化标签总结

语义化的好处

HTML5可以让很多具有语义化、结构化的代码标签,代替大量无意义的 div 标签。

这种语义化的特性提升了网页的质量和语义,对搜索引擎更加的友好。

特点:它们这些标签功能就是代替 div 功能中的一部分,它们没有任何的默认样式,除了会让文本另起一行外。

hgroup标签

代表网页或 section 的标题,当元素有多个层级时,该元素可以将 h1h6 的元素放在其内。

例如文章的主题和副标题的组合。

注意事项:

  1. 如果只需要一个 h1 - h6 标签就不需要使用 hgroup
  2. 如果有连续多个 h1 - h6 标签就用 hgroup
  3. 如果有连续多个标题和其他文章数据,h1 - h6 标签就用 hgroup 包住,和其他文章元素一起放在 header 标签中。
<hgroup>
  <h1>主标题h1>
  <h2>副标题h2>
hgroup>

header标签

代表网页或 section 的页眉,通常包含 h1 - h6 标签或 hgroup

注意事项:

  1. 通常写在网页或 section 的头部部分。
  2. 没有个数限制。
  3. 如果 hgrouph1 - h6 自己就能工作的很好,那就不需要使用 header 标签。
<header>
  <hgroup>
    <h1>主标题h1>
    <h2>副标题h2>
  hgroup>
header>

nav标签

代表网页的导航栏区域,用来定义页面的主要导航部分。

注意事项:

  1. 主要用于页面的导航部分,不适合就不要使用 nav 标签。
<nav>
  <ul>
    <li>导航一li>
    <li>导航二li>
    <li>导航三li>
  ul>
nav>

section标签

代表文章中的节或段。

段可以是指一篇文章里按照主题的分段。

节可以是指一个页面中的分组。

注意事项:

  1. section 不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以使用 div
  2. articlenavaside 可以理解为特殊的 section
  3. 所以如果可以用 articlenavaside 就不要用 section,没实际意义的就用 div
<section>
  <h1>section标题h1>
  <article>
    <h2>文章标题h2>
    <p>文章介绍p>
    <section>
      <h3>段落标题h3>
      <p>段落内容p>
    section>
  article>
section>

article标签

最容易跟 sectiondiv 混淆。

其实 article 代表一个在文档、页面或者网站中自成一体的内容。

注意事项:

  1. 独立文章:使用 article
  2. 单独的模块:使用 section
  3. 没有语义的:使用 div
<article>
  <h1>文章标题h1>
  <p>文章内容p>
  <footer>
    <p>
      <small>版权:article,作者:articlesmall>
    p>
  footer>
article>

aside标签

被包含在 article 标签中作为主要内容的附属信息部分,其中的内容是与当前文章有关的相关资料、标签、解释等。

注意事项:

  1. asidearticle 内表示主要内容的附属信息。
  2. article 内,可用于侧边栏标签。
  3. 如果是广告,其他日志链接或者其他分类导航也可以使用。
<article>
  <h1>文章标题h1>
  <aside>
    <h1>作者简介h1>
    <p>大前端p>
  aside>
article>

footer标签

定义文档或者文档的一部分区域的页脚。

<section>
  <p>内容p>
  <footer>注释footer>
section>

details标签

规定了用户可见的或者隐藏的需求的补充细节。

注意事项:

  1. details 标签必须和 summary 标签一起使用。
<details>
  <summary>更多summary>
  <p>详情一p>
  <p>详情二p>
  <p>详情三p>
details>

datalist标签

规定了 input 标签可能的选项列表,并带有模糊查询的功能。

注意事项:

  1. input 的 list 属性必须和 datalist 的 id 一样。
<input list="users" type="text">
<datalist id="users">
  <option>姓名一option>
  <option>姓名二option>
  <option>姓名三option>
datalist>

progress标签

显示任务的进度条。

标签属性:

  1. value:表示当前进程的值。
  2. max:表示需要完成的值。
<progress value="30" max="100">progress>

time标签

用来设置时间,便于搜索引擎搜索。

<p>我们每天早上<time>9:00time>开始营业p>
<p>我在<time datetime="2021-02-14">情人节time>那天有个约会p>

mark标签

用于文本高亮显示。

<mark>高亮显示mark>

meter标签

用来定义度量衡,仅用于已知最大和最小的度量。

标签属性:

  1. max:范围最大值。
  2. min:范围最小值。
  3. high:界定为高的值的范围。
  4. low:界定为低的值的范围。
  5. optimum:度量的最优值。
  6. value:度量的当前值。
<meter max="3000" min="10" high="2000" low="1000" optimum="2001" value="99">
  您的浏览器不支持meter标签,请升级。
meter>

ruby标签

用来展示东亚文字以及发音。

注意事项:

  1. ruby 标签要和 rt 标签或者 rp 标签结合使用。
  2. rt :展示文字注音或字符注释。
  3. rp :注释。(支持 ruby 标签的浏览器,不会显示 rp 标签中的内容)
<ruby>
  <span>span>
  <rt>qianrt>
  <span>span>
  <rt>duanrt>
  <rp>大前端时代rp>
ruby>

你可能感兴趣的:(html5,html5,前端)