结构标签

# 结构标签

# 1. 语义化结构标签

之前都是用没有语义的div标签

为什么要有语义化标签？因为根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更⾼的代码结构，同时能够让机器更好地解析。

使用语义化前都用div标签，不太好读~~

<header> /*头部标签, 页眉*/
<nav>  /*导航标签*/
<main> /* 主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。*/
<section> /*定义文档某个区域*/
<aside> /*侧边栏标签*/
<footer> /*尾部标签*/

# 4.1 区块

<header>

展现介绍性信息
通常包含⼀组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等
不能放在<footer>、<address> 或者另⼀个<header> 元素内部

<header>
    <h1>YK菌写的博客真的很不错</h1>
    <p><time pubdate datetime="2021-08-20"></p>
</header>

<nav>

在当前⽂档或其他⽂档中提供导航链接，如菜单、目录、索引等
⽤来放置⼀些热⻔的链接，不常⽤的链接通常放到<footer>里置于底部

<nav> 
    <ol> 
        <li><a href="#"> YK菌 </a></li> 
        <li><a href="#"> 月影 </a></li> 
        <li><a href="#"> 李松峰 </a></li> 
    </ol> 
</nav>

<article>

独⽴的⽂档、⻚⾯、应⽤、站点
可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提交的评论、交互式组件等

<article class="yk">
    
    <h1>YK菌的博客</h1>
    
    <article class="markdown">
        <h2>【青训营】HTML基础</h2>
        <p>此博客点赞超过一百，我就倒立洗头</p>
    </article>
    
    <article class="markdown">
        <h2>【青训营】CSS基础</h2>
        <p>此博客评论超过一百，我就坚持早起</p>
    </article>
    
</article>

<section>

按主题将内容分组，通常会有标题
<section> 通常出现在⽂档的⼤纲中
不要把<section>作为普通容器来使⽤，⽐如说⽤于美化⽚段样式，此时⽤<div>更合适
如果元素⾥边是独⽴的整块的内容，可以单发布，则更适合⽤<article>

<h1>【青训营】HTML基础</h1>

<section>
    <h2>介绍</h2>
    <p>这个文档将提供一个引导，欢迎您阅读YK菌的博客，这是HTML基础笔记系列......</p>
</section>

<section>
    <h2>起步</h2>
    <p>我们先来看看HTML的发展历史吧~.....</p>
</section>

<aside>

表示⼀个和其余⻚⾯内容⼏乎⽆关的部分，或者说单独拆出来不会影响整体的内容
通常放在侧边栏，⽤于展示⼴告、tips、引⽤内容等

<p>我今天一定要把这个笔记写完！！</p>

<aside>
    <h4>笔记</h4>
    <p>是青训营上课的笔记，里面老师都很厉害...</p>
</aside>

<footer>

表示最近⼀个章节的⻚脚
通常包含该章节作者、版权数据或者⽂档链接等信息
<footer>内的元素不属于章节内容，不包含在⼤纲中

<footer>
    <h1>别忘了一键三连哦~【YK菌】</h1>
    <p><time pubdate datetime="2021-08-20"></time></p>
</footer>

# 4.2 分组

<figure>/<figcaption>

<figure> 包裹被独⽴引⽤的内容：图表、插图、代码等，通常会有⼀个标题
<figcaption> 与其相关联的图表的说明/标题，通常位于<figure>的第⼀个或最后⼀个

<figure>
    <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38c860bc30174872adccbe9c7c04e4c7~tplv-k3u1fbpfcp-zoom-1.image" 
         alt="这是YK菌放在轻服务中的头像">
    <figcaption>YK菌 logo</figcaption>
</figure>

<blockquote>

块级引⽤元素
cite属性表示该来源的url

<figure>
    <blockquote cite="https://www.huxley.net/bnw/one.html">
        <p>Words can be X-rays, if you use them properly - they'll go through anything.</p>
    </blockquote>
    <figcaption>-Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

这是效果：

Words can be X-rays, if you use them properly - they'll go through anything.

-Aldous Huxley, Brave New World

# 4.3 文本

<cite>

<cite>元素通常⽤于引⽤作品标题
包括论⽂、⽂件、书籍、电影等的引⽤

<time>

机器可读的时间和⽇期
datetime表示此元素关联的时间⽇期，若不指定则该元素不会被解析为⽇期

<p>这个博客写于<time datetime="2021-08-20 12:00">Aug 20</time>.</p>

<address> 某个⼈或组织的联系信息

<mark> 在引⽤中使⽤，表示需要引起注意

<code> 代码⽚段

<small> 免责声明、注意事项等

高阶文本表单标签