现在是晚上12点，以后会坚持在这个时候日更博客
这一次要讲的是主体结构元素和非主体结构元素
老实说有点不想写这两个内容的，因为没出这个内容展示出来的效果没有那么“明显”
话先说在前面，下面红字是想说的，随笔最后面会梅开二度
这个也没啥明显效果的，所以可能你看了半天有种白看的感觉
但是多少还是有点用的，知道有这么个东西就行，可能最主要目的是为了规范开发过程中的编排规则吧
废话不多说，开始正文
Part 1 主体结构元素
主体结构元素，是为了语义可以结构化
其实说的通俗易懂点就是容易更被爬，就是为了浏览器更好抓数据
包含的元素：article、section、nav、aside、time
1、<article> 标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，
或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
详细参见（https://www.w3school.com.cn/html5/html5_article.asp）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html5的article元素</title> 6 </head> 7 <body> 8 <article> 9 <header> 10 <h1>这是一个被用于内嵌的页面</h1> 11 <p>hello world</p> 12 </header> 13 <!-- 内嵌开始 --> 14 <article> 15 <header>作者：yu</header> 16 <p>评论：.......</p> 17 <footer> 18 time:2020/04/26 19 </footer> 20 </article> 21 <!-- 内嵌结束 --> 22 <footer> 23 <p>底部</p> 24 </footer> 25 </article> 26 <article> 27 <h1>这是一个内嵌页面</h1> 28 <object> 29 <!-- <embed> 标签是 HTML 5 中的新标签，用来定义嵌入的内容 --> 30 <!-- object定义定义一个嵌入的对象，用于包含对象，比如图像、音频、视频、以及 Flash --> 31 <embed src="#" width="600" height="400"> 32 </object> 33 </article> 34 </body> 35 </html>
这个代码的大概思路是先创建一个被用于内嵌的页面，再新建一个内嵌页面，内嵌前面那个被用于内嵌的页面
打开网页时的效果如下
从上面的效果图我们可以发现图片的前六行文本被成功嵌入，因为规定了页面的尺寸，
所以在页面的原来尺寸大于规定尺寸时，会出现滚动条
2、<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
详细参见（https://www.w3school.com.cn/html5/html5_section.asp）
什么意思呢，就是section可以拥有自己的<header>和<footer>
section的作用是对页面上的内容进行分块，参照（https://www.php.cn/html5-tutorial-409199.html）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html5的section元素</title> 6 </head> 7 <body> 8 <section> 9 <h1>PPAP</h1> 10 <p>黄猿</p> 11 </section> 12 13 <article> 14 <h1>Pen</h1> 15 <p>I have a pen</p> 16 <section> 17 <h2>Apple</h2> 18 <p>I have an apple</p> 19 </section> 20 <section> 21 <h2>A~</h2> 22 <p>Apple pen</p> 23 </section> 24 </article> 25 26 <section> 27 <h1>背包</h1> 28 <p>I have a 背包</p> 29 <article> 30 <h2>弹夹</h2> 31 <p>I have 一个弹夹</p> 32 </article> 33 <article> 34 <h2>嘻嘻</h2> 35 <p>（猿叫声）</p> 36 </article> 37 <article> 38 <h2>lbwnb</h2> 39 <p>卢本伟牛逼</p> 40 </article> 41 </section> 42 </body> 43 </html> 44 45 <!-- section元素用于对网站或应用程序中页面上的内容进行分块，通常由内容和标题组成 -->
打开网页时的效果如下
上面也看不出什么效果的，只是看代码知道哪里到哪里是一个section，这样做的好处就是方便被爬 （￣.￣）
3、<nav> 标签定义导航链接的部分。
详细参见（https://www.w3school.com.cn/html5/html5_nav.asp）
Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，
点击每个链接可以链接到其他页面或者当前页面的其他部分，
并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要的、基本的、重要的放在nav元素里面即可。
参照（https://www.cnblogs.com/space007/p/6210632.html）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html5的nav元素</title> 6 </head> 7 <body> 8 <nav> 9 <ul> 10 <li><a href="#">主页</a></li> 11 <li><a href="#">开发文档</a></li> 12 </ul> 13 </nav> 14 <article> 15 <header> 16 <h1>HTML5与CSS3的历史</h1> 17 <nav> 18 <ul> 19 <li><a href="#">HTML5历史</a></li> 20 <li><a href="#">CSS3历史</a></li> 21 </ul> 22 </nav> 23 </header> 24 <section> 25 <h1>HTML5的历史</h1> 26 <p>...</p> 27 </section> 28 29 <section> 30 <h1>CSS3历史</h1> 31 <p>...</p> 32 </section> 33 34 <footer> 35 <a href="#">删除</a> 36 <a href="#">修改</a> 37 </footer> 38 </article> 39 <footer> 40 <p><small>版权声明：也没啥版权啦~</small></p> 41 </footer> 42 </body> 43 </html> 44 <!-- nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分 -->
打开网页时的效果如下
4、<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
<aside> 的内容可用作文章的侧栏。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html5的aside元素</title> 6 </head> 7 <body> 8 <header> 9 <h1>js入门</h1> 10 </header> 11 <article> 12 <h1>语法</h1> 13 <p>文章的正文</p> 14 <aside> 15 <h1>名词解释</h1> 16 <p>语法：这是一个对语言来说很重要的内容体</p> 17 </aside> 18 </article> 19 <aside> 20 <nav> 21 <h2>评论</h2> 22 <ul> 23 <li><a href="#">2020-04-27</a></li> 24 <li><a href="#"> 25 yu：今天天气不错 26 yu：九万！ 27 yu：啊~ 28 </a></li> 29 </ul> 30 </nav> 31 </aside> 32 </body> 33 </html> 34 <!-- aside元素用来表示当前页面或文章的附属信息部分 -->
打开网页时的效果如下
5、<time> 标签定义日期或时间，或者两者。
详细参见（https://www.w3school.com.cn/html5/html5_time.asp）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html5的time元素</title> 6 </head> 7 <body> 8 <article> 9 <header> 10 <h1>yu</h1> 11 <p>发布日期 12 <time datetime="2020-04-27" pubdate>2020-04-27</time> 13 </p> 14 <p> 15 <time datetime="2020-04-29">两天后是2020-04-29</time> 16 </p> 17 </header> 18 </article> 19 </body> 20 </html>
打开网页时的效果如下
Part 2 非主体结构元素
html5的非主体结构元素包括header、footer、hgroup、address元素
1、header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，
但是也可以包含其他内容，列如数据表格、搜索表单或相关的logo图片（注意： header元素可以出现多次）
2、footer元素可以作为其上层父级内容区块或是一个根区块的脚注。
footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等
3、hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，
譬如一个内容区块的标题及其子元素算一组
4、address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。
address应该不知用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息
上面知识点就不分别展示代码了（也没啥效果），后面来个汇总，先讲下html5的网页编排规则
0、网页编排规则：
- 显示编排内容区域块
- 隐示编排内容区域块
- 标题分级
- 不同区域块可以使用相同级别的标题
以上内容具体参照（https://www.cnblogs.com/gxqq/p/5335227.html）
一下下是前面知识的汇总代码，也没啥明显效果的其实
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html5网页编排规则</title> 6 </head> 7 <body> 8 <header> 9 <hgroup> 10 <h1>这是文章的开头</h1> 11 <h2>这个程序用于规范网页的编写</h2> 12 <h3>包括header、footer、hgroup、address</h3> 13 </hgroup> 14 </header> 15 16 <section> 17 <h1>Part1:关于header</h1> 18 <header> 19 <h2>百度一下</h2> 20 <a href="http://www.baidu.com">百度以下</a> 21 <nav> 22 <ul> 23 <li><a href="#">遇到困难</a></li> 24 <li><a href="#">不要怕</a></li> 25 <li><a href="#">百度一下</a></li> 26 </ul> 27 </nav> 28 </header> 29 </section> 30 31 <section> 32 <h1>Part2:关于footer</h1> 33 <footer> 34 <ul> 35 <li><a href="#">微笑着面对他</a></li> 36 <li><a href="#">消除恐惧的最好方法</a></li> 37 <li><a href="#">就是面对恐惧</a></li> 38 </ul> 39 </footer> 40 </section> 41 42 <section> 43 <h1>Part3:关于hgroup</h1> 44 <h2>见"body"里面的"header部分"</h2> 45 </section> 46 47 <section> 48 <h1>Part4:关于address</h1> 49 <a href="#">yu</a> 50 广州大学物电学院学院XX专业 51 </section> 52 53 <footer> 54 这是一个文章的底部 55 <small>坚持，才是胜利，加油，奥里给！</small> 56 </footer> 57 </body> 58 </html>
打开网页时的效果如下
总结
总算写完了，当了一个多小时的搬运工是真的累
其实也只是搬运一些概念的讲解，代码还是自己学习时敲的
其实我也不想当搬运工的，主要是想用更加易懂，相对准确的说法讲解主体结构元素和非主体结构元素
这个也没啥明显效果的，所以可能你看了半天有种白看的感觉
但是多少还是有点用的，知道有这么个东西就行，可能最主要目的是为了规范开发过程中的编排规则吧
最后希望这篇简单的随笔能对你们有所帮助吧（=￣ω￣=）
没用就当看着玩啦[狗头]