【Html5+CSS3 】2.2 新增的主体 结构元素
2、新增的主体 结构元素
1）article元素
标签定义及使用说明
<article> 标签定义独立的内容。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<article> 的潜在来源：论坛帖子、博客文章、新闻故事、评论
菜鸟教程：html5_article
<article>
<header>
<h1>article元素</h1>
<p>创建时间:<time pubdate="pabdate">2019/3/15</time></p>
</header>
<p>
<b>article</b>是一个独立的区域
</p>
<section>
<h2>section:h2标题</h2>
<article>
<header>
<h3>嵌套article1中的标题</h3>
<p>
<time pubdate datetime="2019/3/15T17:00">2小时前</time>
</p>
</header>
<p>
噜啦啦噜啦啦
</p>
</article>
<article>
<header>
<h3>嵌套article2中的标题</h3>
<p>
<time pubdate datetime="2019/3/15T17:00">2小时前</time>
</p>
</header>
<p>
咕噜咕噜咕噜
</p>
</article>
</section>
<footer>
<p><small>Copyright@ZoeyZu</small></p>
</footer>
</article>
article 运行结果
2）section元素
section，顾名思义就是一个章节
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
不推荐没有标题的内容实用section元素
HTML5轮廓工具
没有标题的section结构目录显示untitled section
⚠️：
♦️section不是通用容器元素。如果仅仅是用于设置样式或脚本处理，应用div元素。
♦️只有元素内容会被列在文档大纲中时，才适合用section元素。
♦️我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器）。
特别强调：section 不是一个专用来做容器的标签，专用的是 div ，也就是说，一般情况下作为元素容器，使用div而不是section
section 里应该有 标题（h1~6），但文章中推荐用 article 来代替
<section>
<h1>这是一个section元素</h1>
<p>这里是一个内容区域</p>
<section>
<h2>这是次级section1</h2>
<p>次级section1的内容</p>
</section>
<section>
<h2>这是次级section2</h2>
<p>次级section2的内容</p>
</section>
</section>
section 运行结果
3）aside元素
<aside> 标签定义 <article> 标签外的内容。
aside 的内容应该与附近的内容相关。
<aside> 的内容可用作文章的侧栏
<header>
<h1>标题：aside元素</h1>
</header>
<article>
<h2>article标题</h2>
<p>article正文内容</p>
<aside>
<h3>aside——附加信息：aside相关</h3>
<dl>
<dt>aside</dt>
<dd>aside标签定义 article标签外的内容</dd>
<dd>aside 的内容应该与附近的内容相关</dd>
<dd>aside的内容可用作文章的侧栏</dd>
</dl>
</aside>
</article>
aside 运行结果
<aside>
<h1>aside作为全局站点附属通知</h1>
<h1>网站公告</h1>
<p>国庆节放假同知</p>
<p>中秋节放假同知</p>
</aside>
aside作为全局站点附属通知
4）nav元素
<nav> 定义导航链接
并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。
在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。
使用场合
1、传统的导航条
2、侧边栏导航
3、内页导航
4、翻页操作
<h1>nav的使用方法</h1>
<nav>
<ul>
<li>
<a href="html5_nav.html">首页</a>
</li>
<li>
<a href="html5_aside.html">aside</a>
</li>
<li>
<a href="html5_section.html">section</a>
</li>
</ul>
</nav>
<article>
<header>
<h2>
NAV-1
</h2>
<nav>
<li>
<a href="新增的主体结构元素.html">新增的主体结构元素</a>
</li>
<li>
<a href="html5_section.html">section</a>
</li>
</nav>
</header>
</article>
<article>
<header>
<h2>
NAV-2
</h2>
<nav>
<li>
<a href="新增的主体结构元素.html">新增的主体结构元素</a>
</li>
<li>
<a href="html5_section.html">section</a>
</li>
</nav>
</header>
</article>
<footer>
<p>
<a href="/">©️版权信息</a>
<a href="/">站点帮助</a>
<a href="/">联系我们</a>
</p>
</footer>
nav 运行结果
5）time元素
<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的，表示时间时允许带时差。
能够以机器可读的方式对日期和时间进行编码，如，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
可以定义的格式如下：
<time datetime="2014-9-28">2014年9月28<time>
<time datetime="2014-9-28">9月28<time>
<time datetime="2014-9-28">今天的时间<time>
<time datetime="2014-9-28T22:30">2014年9月28晚上10点<time>日期后加T表示具体时间
<time datetime="2014-9-28T22:30Z">UTC标准时间2014年9月28晚上10点<time>尾部加Z表示UTC标准时间
<time datetime="2014-9-28T22:30+8:00">中国时间2014年9月28晚上10点<time>设置时区
6）pubdate 属性
指示 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期
当页面中含有多个time元素时，含有pubdate属性的time表示当前文章的发布时间
<h1>Hello,Pubdate</h1>
<p>发布时间：<time datetime="2019/3/16" pubdate="pubdate">2019-3-16</time> </p>
