目录

  • 语义化标签
  • 1.语义化标签的优点
  • 2.常用的语义化标签
  • [1]a
  • [2]img
  • [3]p
  • [4]h1-h6
  • [5]strong
  • [6]em
  • [7]ul
  • [8]ol
  • [9]table
  • [10]input
  • html5新增的语义化标签
  • [1]`header`
  • [2]`nav`
  • [3]aside
  • [4]main
  • [5]`figure标签`
  • [6]mark
  • [7]section标签
  • [8]article标签
  • [9]details标签
  • [10]time
  • [11]`footer`
  • [12]address
  • [13]small


语义化标签

1.语义化标签的优点

语义化标签就是使用正确的标签做正确的事！

  • 代码结构得到了优化，提高了代码的可读性，便于开发人员代码编写；
  • 有利于搜索引擎优化；

2.常用的语义化标签

[1]a
  • 实现超链接；
[2]img
  • 回显图片
[3]p
  • 添加段落；
[4]h1-h6
  • h1等级最高，h6等级最低；
[5]strong
  • 表示强调，字体会加粗；
[6]em
  • 表示强调，字体会倾斜；
[7]ul
  • 无序列表，里面仅能嵌套li标签；
[8]ol
  • 有序列表，里面仅能嵌套li标签；
[9]table
  • 表格
  • tr :行
  • th:表头单元格(文本会加粗)
  • td:单元格
  • caption:表标题
[10]input
  • input输入框用来进行信息交互；

html5新增的语义化标签

[1]header
  • 通常包含一组介绍或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称等；
[2]nav
  • 主要用来放一些热门的链接导航栏(很多不热门的使用footer标签)
<nav>
    <ol>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>
[3]aside
  • 一般用于侧边栏
[4]main
  • main标签主要用于文档得主体部分(一个页面中仅能使用一次)；
[5]figure标签
  • figure(/fɪɡə®/)标签为html5新增的标签；
  • 主要是用来定义独立的流内容(图文混合/图表混合/图代码段混合等)；
  • figcaption(/ˈkæpʃ(ə)n/)标签一般是充当figure标签中的第一个或最后一个子元素来为figure元素定义标题
  • 举例说明
<figure>
  <img  src='xxx'/>
  <figcaption>
      <h4>已配置：xxx</h4>
      <div>
          产品管理<i class='xxx'></i>
      </div>
  </figcaption>
</figure>
[6]mark
  • [1]用来显示有特殊意义的文本->默认样式–会黄色高亮;
[7]section标签
  • section标签为html5新增的语义化标签；
  • 主要是用来定义文档得某个区域；
  • 通常是存放存在 标题+段落 的内容；
[8]article标签
  • article标签为html5新增的标签；
  • article元素可用于表示页面上某块具有一定独立性的内容，这个内容可以是一篇文章、论坛上的一个帖子/评论、一篇博客、一个可交互的控件等
  • [1]一个article元素通常有它自己的标题–通常放在header标签中；
  • [2]article标签可以嵌套使用，内层的内容在原则上需要与外层的内容相关联；
  • 一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式
  • [3]section标签可以将文章划分article区域；
  • [4]元素的作者信息可通过标签提供，但是不适用于嵌套的<article>元素
  • [5]页脚可以使用footer标签；
[9]details标签
  • details标签为html5新增的语义化标签；
<details>
    <summary>概论</summay>
    需要展示的内容。。。。。。
</details>
[10]time
  • 存放时间
[11]footer
  • 主要使用footer标签放一些不太热门的导航栏或是标注内容；
[12]address
  • 用于存放地址信息
[13]small
  • 呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权