html_语义化标签

语义化标签

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="#">Bikesa>li>
          <li class="crumb"><a href="#">BMXa>li>
          <li class="crumb">Jump Bike 3000li>
      ol>
  nav>
  1
  2
  3
  4
  5
  6
  7

[3]aside

• 一般用于侧边栏

[4]main

• main标签主要用于文档得主体部分(一个页面中仅能使用一次)；

[5]figure标签

• figure(/fɪɡə®/)标签为html5新增的标签；

• 主要是用来定义独立的流内容(图文混合/图表混合/图代码段混合等)；

• figcaption(/ˈkæpʃ(ə)n/)标签一般是充当figure标签中的第一个或最后一个子元素来为figure元素定义标题

• 举例说明

  • <figure>
      <img  src='xxx'/>
      <figcaption>
          <h4>已配置：xxxh4>
          <div>
              产品管理<i class='xxx'>i>
          div>
      figcaption>
    figure>
    1
    2
    3
    4
    5
    6
    7
    8
    9

[6]mark

• [1]用来显示有特殊意义的文本->默认样式–会黄色高亮;

[7]section标签

• section标签为html5新增的语义化标签；
• 主要是用来定义文档得某个区域；
  • 通常是存放存在 标题+段落 的内容；

[8]article标签

• article标签为html5新增的标签；
• article元素可用于表示页面上某块具有一定独立性的内容，这个内容可以是一篇文章、论坛上的一个帖子/评论、一篇博客、一个可交互的控件等
• [1]一个article元素通常有它自己的标题–通常放在header标签中；
• [2]article标签可以嵌套使用，内层的内容在原则上需要与外层的内容相关联；
  • 一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式
• [3]section标签可以将文章划分article区域；
• [4]元素的作者信息可通过
  标签提供，但是不适用于嵌套的

  元素
• [5]页脚可以使用footer标签；

[9]details标签

• details标签为html5新增的语义化标签；

• <details>
      <summary>概论summay>
      需要展示的内容。。。。。。
  details>
  1
  2
  3
  4

[10]time

• 存放时间

[11]footer

• 主要使用footer标签放一些不太热门的导航栏或是标注内容；

[12]address

• 用于存放地址信息

[13]small

• 呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权