H5新增元素跟文档结构新的文档结构 1. article 文章块 2. section 区块 3. nav 导航条

Posted 2021-03-16 xiaoxustudy

1. article 文章块

article 通常包括 header 跟 footer 结构

① 用 article 设计一篇新闻稿

语句：

 1 <article>
 2     <header>
 3         <h1>文章标题</h1>
 4         <time pubdate="pubdate">2017年9月26日消息</time>
 5     </header>
 6     <p>
 7         文章内容
 8     </p>
 9     <footer>
10         <p>来自<a href="https://home.cnblogs.com/u/xiaoxuStudy/">小许学习笔记</a>></p>
11     </footer>
12 </article>

页面表现：

 

② article元素可以嵌套使用

语句:

 1 <article>
 2     <header>
 3         <h1>文章标题</h1>
 4     </header>
 5     <p>
 6         文章内容
 7     </p>
 8     <footer>
 9         <p>来自<a href="https://home.cnblogs.com/u/xiaoxuStudy/">小许学习笔记</a>></p>
10     </footer>
11     <section>    <!-- section把正文与评论部分进行了区分 -->
12         <h2>评论</h2>    
13         <article>    <!-- 每条评论相对独立，每条评论使用一个article -->
14             <header>    
15                 <h3>网友昵称1</h3>
16                 <time pubdate datetime="2020-1-12 11:00-12:00">1小时前</time>
17             </header>
18             <p>评论内容</p>
19         </article>
20         <article>[参考第一条评论的结构]</article>
21         <article>[每条评论作为一个独立的内容块]</article>
22         <article>[内层article块与外层article块相关联]</article>
23     </section>
24 </article>

页面表现：

 

 

2. section 区块

section 通常包括 标题 跟 内容

用于标识文档中的节，在页面上多对内容进行分区。

div元素也可对页面进行分区。div元素关注结构的独立性，section元素关注内容的独立性。不用 article 或 section 取代 div 布局页面。

section元素包含的内容可以单独存储到数据库中，或输出到Word文档中。

① 使用 section 元素包裹排行榜的内容

语句：

 1 <section cite="http://music.baidu.com">    <!-- 如果section摘自Web,可以设置cite属性 -->
 2     <h1>新歌榜</h1>
 3     <ol>
 4         <li><a href="#">云烟成雨<p class="ul-li-aside"></a></li>
 5         <li><a href="#">美好事物<p class="ul-li-aside"></a></li>
 6         <li><a href="#">暮阳少年<p class="ul-li-aside"></a></li>
 7         <li><a href="#">飘向北方<p class="ul-li-aside"></a></li>
 8         <li><a href="#">斑马斑马<p class="ul-li-aside"></a></li>
 9     </ol>
10 </section>

页面表现：

 

② article 跟 section 元素混用

语句：

 1 <article> <!-- 整个板块是独立的、完整的内容。用article元素标识 -->
 2     <!-- 文章分3段。浏览器能够识别第一段内容在一个section中，所以可以省略第一个section，但是如果第一个section包含section或article，则不能省略 -->
 3     <h1>W3C</h1>        
 4     <p>
 5         万维网联盟....................................................................................................................................................................
 6     </p>
 7     <section>
 8         <h2>CSS</h2>
 9         <p>
10             级联样式表....................................................................................................................................................................
11         </p>
12     </section>
13     <section>
14         <h2>html</h2>
15         <p>
16             超文本标记语言....................................................................................................................................................................
17         </p>
18     </section>
19 </article>

页面表现：

 

③ 包含 article 元素的 section 元素

语句：

 1 <section>
 2     <h1>W3C</h1>        
 3     <article>
 4         <h2>CSS</h2>
 5         <p>级联样式表.........................................................................................................................................................................................................................................
 6         </p>
 7     </article>
 8     <h2>HTML</h2>
 9     <p>超文本标记语言.........................................................................................................................................................................................................................................
10     </p>    
11 </section>

页面表现：

 

 

3. nav 导航条

一个页面可以拥有多个 nav ，作为页面整体或不同部分的导航。具体应用场景如下：

　　主菜单导航 ：一般网站都设置有不同链接的导航条，其作用是在站内快速切换，如主菜单、置顶导航条、主导航图标等

　　侧边栏导航 :  作用是讲页面从当前文章或当前商品跳转到相关文章或商品页面上去。

　　页内导航 ：就是业内锚点链接，其作用是在主页面几个主要的组成部分之间进行跳转。

　　翻页操作 ：在多个页面的前后页或博客网站的前后篇文章滚动。

并不是所有的链接组都要被放进nav里，只需要将主要的、基本的链接组放进nav元素即可。

① 创建一个可以拖动的导航区域

语句：

1 <nav draggable="true">
2         <a href="index.html">首页</a>
3         <a href="index.html">图书</a>    
4         <a href="index.html">论坛</a>    
5 </nav>

页面表现：

 

② 每部分都有链接，但是只将最主要的链接放入nav元素中

语句：

 1 <h1>技术资料</h1>
 2 <nav>    <!-- 用于页面导航，将页面跳转到其他页面上去，如跳转到博客主页或博客页面 -->
 3     <ul>
 4         <li><a href="/">主页</a></li>
 5         <li><a href="/blog">博客</a></li>
 6     </ul>
 7 </nav>
 8 <article>
 9     <header>
10         <h1>HTML5+CSS3</h1>
11         <nav>    <!-- 放在 article 元素中，表示在文章中进行导航 -->
12             <ul>
13                 <li><a href="#HTML5">HTML5</li>
14                 <li><a href="#CSS3">CSS3</li>
15             </ul>
16         </nav>
17     </header>
18     <section id="HTML5">
19         <h1>HTML5</h1>
20         <p>CSS特性说明</p>
21     </section>
22     <footer>
23         <p><a href="?edit">编辑</a>|<a href="?delete">删除|<a href="?add">添加</p>
24     </footer>
25 </article>

页面表现：