HTML语义化标签理解

1:语义化标签是什么?

语义化标签,目的是让标签有自己的含义

<p>语义化</p>
<span>非语义化</span>

如上代码,p标签含义就是段落,而span标签毫无意义。

2:语义化标签好处

  • 方便用户阅读,页面更加清晰。
  • 更好的SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 有利于开发维护。

3:页面结构语义化标签 

1、<header>

    <header>定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

    在一个文档中,您可以定义多个<header>元素,但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

    2、<nav>

    <nav>描述一个含有多个超链接的区域,该区域包含跳转到其他页面或页面内部其他部分的链接列表。

    在一个文档中,可定义多个<nav>元素。

    3、<main>

    <main> 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

    需要注意的是在一个文档中不能出现多个<main>标签。

    4、<article>

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

    当<article>元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

    5、<aside>

    <aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

    6、<footer>

    <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

    使用footer插入联系信息时,应在 footer 元素内使用 <address> 元素。

    注意不能包含<footer>或者<header>

    7、<section>

    <section>表示文档中的一个区域(或节),比如,内容中的一个专题组。

 4:常见语义化标签

  •  < title></title>:页面主题内容
  •  <hn></hn>:h1~h6分级标题,用于创建页面信息的层级关系。
  • <small></small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
  • <strong></strong>:表示内容重要性
  • <em></em>:标记内容着重点
  •  <mark></mark>:突出显示文本(yellow),提醒读者。
  • <figure></figure>:创建图
  • <figcaption></figcaption>:figure的标题,必须是figure内嵌的第一个或者最后一个元素
  • <cite></cite>:指明引用或参考,如图书的标题,歌曲、电影、等的名称,演唱会、音乐会、规范、报纸、或法律文件等。
  • <blockquoto></blockquoto>:引述文本,默认新的一行显示
  •  <time></time>:标记时间。datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。
  • <address></address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)  
  • <progress></progress>:完成进度

猜你喜欢

转载自blog.csdn.net/qq_30104281/article/details/89092314