H5新增元素跟文档结构新的文档结构 1. article 文章块 2. section 区块 3. nav 导航条 4. aside 辅助栏 5. main 主要区域 6. header 标(代

Posted 2020-11-25 xiaoxustudy

目录:

1. article 文章块 2. section 区块 3. nav 导航条 4. aside 辅助栏  5. main 主要区域  6. header 标题栏  7. hgroup 标题组  8. footer 页脚栏

 

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>

页面表现：

 

 

4. aside 辅助栏

语句：

 1 <header>
 2     <h1>HTML5</h1>
 3 </header>
 4 <article>
 5     <h1>HTML5历史</h1>
 6     <p>........................................................................................................................................................................................................................................
 7     </p>
 8     <aside>        
 9         <!-- aside 元素放在了 article 元素内部，因此引擎将这个 aside 内容理解为与 article 内容相关联的 -->
10         <h1>名词解释</h1>
11         <dl>
12             <dt>WHATWG</dt>
13             <dd>........................................................................................................................................................................................................................................
14             </dd>
15         </dl>
16         <dl>
17             <dt>W3C</dt>
18             <dd>........................................................................................................................................................................................................................................
19             </dd>
20         </dl>
21     </aside>
22 </article>

页面表现：

 

 

② 使用 aside 元素为个人博客添加一个友情链接辅助板块

语句：

<aside>
    <nav>
        <h2>友情链接</h2>
        <ul>
            <li><a href="#">网站1</a></li>
            <li><a href="#">网站2</a></li>
            <li><a href="#">网站3</a></li>
        </ul>
    </nav>
</aside>

页面表现：

 

 

5. main 主要区域

使用 main 包含页面主要区域，有利于网页内容的语义分区。

main不对页面内容进行分区分块。

在一个页面中，不能出现一个以上的main元素。

main元素不能被包含在article 、aside、footer、header 或 nav中。

 

6. header 标题栏

① 在一个网页内可以多次使用header元素

语句：

1 <header>
2     <h1>网页标题</h1>
3 </header>
4 <article>
5     <header>
6         <h1>文章标题</h1>
7     </header>
8     <p>文章正文</p>
9 </article>

页面表现：

 

 

 

② 个人博客头部区域。

 1 <header>
 2     <hgroup>
 3         <h1>LOGO</h1>
 4         <a href="#">[URL]</a>
 5         <a href="#">[订阅]</a>
 6         <a href="#">[手机订阅]</a>
 7     </hgroup>
 8     <nav>
 9         <ul>
10             <li>首页</li>
11             <li><a href="#">目录</a></li>
12             <li><a href="#">社区</a></li>
13             <li><a href="#">微博我</a></li>
14         </ul>
15     </nav>
16 </header>

页面表现：

 

 

 

 

7. hgroup 标题组

hgroup元素在HTML5.1版中被废除

语句：

 1 <article>
 2     <header>
 3         <hgroup>
 4             <h1>标题1 h1</h1>
 5             <h2>标题2 h2</h2>
 6             <h3>标题3 h3</h3>
 7         </hgroup>
 8     </header>
 9     <p>啥啥啥 p</p>
10     <ul>
11         <li>啥啥啥 li..............</li>
12         <li>啥啥啥 li..............</li>
13         <li>啥啥啥 li..............</li>
14         <li>啥啥啥 li..............</li>
15     </ul>
16 </article>

页面表现：

 

 

8. footer 页脚栏

通常用于包含文档的作者、版权信息、使用条款链接、联系信息等。

语句：

 1 <article>
 2     ...article...
 3 </article>
 4 <footer>
 5     <ul>
 6         <li>关于</li>
 7         <li>导航</li>
 8         <li>联系</li>
 9     </ul>
10 </footer>

页面表现：