HTML系列（六）：划分文档结构

常见的网页结构布局是酱紫的，真是美美哒^O^：

一、添加基本标题h1~h6（没什么好说的）；

二、标题分组hgroup

<hgroup>用来将标题和子标题进行分组。如果一篇文章article或一个区块section里只有一个标题，就不用分组。如果出现多个标题，可以用hgroup将标题框起来。

<section>

  <hgroup>

    <h1>金陵十三钗</h1>

    <h3>——张艺谋电影《金陵十三钗》原著同名小说</h3>

  </hgroup>

  <p>剧版史诗巨作《四十九日.祭》原著小说，严歌苓亲自操刀改编，张黎携手张嘉译，小宋佳，胡歌，文章倾情演绎，2014年12月1日重磅登陆湖南卫视，鼎力推荐！</p>

</section>

提示：<hgroup> 标签是 HTML 5 中的新标签。

三、生成节section

<section> 标签定义文档中的节（section、区段）。比如专题组、章节、页眉、页脚或文档中的其他部分；<section>还能对文档层次结构进行划分。它通常由标题head和内容content组成。它不是一般的容器元素，应该作为结构元素出现。

section不能用来包裹一段完整的独立的文章，包含独立文章用article元素实现。

提示：<section> 标签是 HTML 5 中的新标签。

四、头部header和尾部footer

header引导和统领下文，作为页面的头部使用，或放在section或article内作为区域或文章的头部。可以包含h1~h6或hgroup元素，也可以包含其他内容。

提示：H5的新标签，IE 8 以及更早的版本不支持 <header> 标签。

footer元素作为上层内容区或根区块的脚注，例如版权部分，某区域内容的相关链接或脚注等。

传统实现页脚的方法是用div:

 <div id="footer">

     <div class="wp tc clearfix">

         <div>

             <a href="http://by.cuc.edu.cn/aboutUs/" target="_blank">关于我们</a> / <a href="http://by.cuc.edu.cn/frilinks/" target="_blank">友情链接</a>

         </div>

         <div>

             版权所有 <em>©</em> <a href="http://by.cuc.edu.cn/" target="_blank">中国传媒大学</a> / 京ICP备06054859号-1 京ICP备06054859号-1

         <div>

             地址：北京市朝阳区定福庄东街一号 / 邮政编码：100024 / 技术支持：中国传媒大学计算机与网络中心 中传视友（北京）传媒科技有限公司·<a href="http://www.cuctv.com" class="style-a-red" target="_blank">视友网</a>

         </div>

     </div>

 </div>

在H5中，可以不使用div，用更加语义化的footer元素实现：

 <footer>

     <article class="wp tc clearfix">

         <div>

             <a href="http://by.cuc.edu.cn/aboutUs/" target="_blank">关于我们</a> / <a href="http://by.cuc.edu.cn/frilinks/" target="_blank">友情链接</a>

         </div>

         <div>

             版权所有 <em>©</em> <a href="http://by.cuc.edu.cn/" target="_blank">中国传媒大学</a> / 京ICP备06054859号-1 京ICP备06054859号-1

         <div>

             地址：北京市朝阳区定福庄东街一号 / 邮政编码：100024 / 技术支持：中国传媒大学计算机与网络中心 中传视友（北京）传媒科技有限公司·<a href="http://www.cuctv.com" class="style-a-red" target="_blank">视友网</a>

         </div>

     </article>

 </footer>

一个页面中可以有多个footer，既可以作为整个页面的页脚，也可以作为一个内容区块的结尾：

......

......

</footer>

</section>

提示：H5的新标签，IE 8 以及更早的版本不支持 <footer> 标签。

五、导航区nav

<nav> 标签定义导航链接的部分。布局中一般使用nav和ul、li配合使用。

传统实现导航结构的方法是使用div:

 <div class="nav">

     <ul>

         <li>

             <a href="/" class="header-link header-nav-link active">Home</a>

         </li>

         <li>

             <a href="/snippets" class="header-link header-nav-link">Code Snippets</a>

         </li>

         <li>

             <a href="/ui-kits" class="header-link header-nav-link">Interface Kits</a>

         </li>

         <li>

             <a href="/faq" class="header-link header-nav-link">FAQ</a></li>

         <li>

             <a href="/search" class="header-link header-search-link" data-toggle="search">Search</a>

         </li>

     </ul>

 </div>

使用nav标签实现效果：

 <nav class="header-nav">

     <a href="/" class="header-link header-nav-link active">Home</a>

     <a href="/snippets" class="header-link header-nav-link">Code Snippets</a>

     <a href="/ui-kits" class="header-link header-nav-link">Interface Kits</a>

     <a href="/faq" class="header-link header-nav-link">FAQ</a>

     <a href="/search" class="header-link header-search-link" data-toggle="search">Search</a>

 </nav>

提示：H5的新标签，IE 8 以及更早的版本不支持 <nav> 标签。

六、输出文章article

<article> 标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论

 <body>

 <div class="content">

 <article data-page="single" class="post">

     <header class="entry-header">

         <h1 class="entry-title">浅谈HTML5 Canvas arc() 方法</h1>

     </header>

     <!-- .entry-header -->

     <div class="entry-content">

         <p>

             我们可以使用arc()方法，在canvas中创建一个圆形，今天我们就来谈谈arc()方法。

         </p>

         <p>

             arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)

         </p>

         <p>

             <strong>代码：</strong>

         </p>

         <p>

             context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

         </p>

         <p>

         </p>

         <p>

             <a href="#"><img style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;" title="1" src="http://gtms01.alicdn.com/tps/i1/TB1zTVYHXXXXXbiaXXXyTIh.FXX-128-95.png" alt="1" width="244" height="" border="0"></a>

         </p>

         <p>

         </p>

     </div>

     <!-- .entry-content -->

 </article>

 </div>

 </body>

提示：H5的新标签，IE 8 以及更早的版本不支持 <article> 标签。

七、附注栏aside

<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。用于标记当前文章或页面的附属信息部分，比如参考资料或名词解释等内容常常作为附注出现。最典型的应用是侧边栏。可以放友情链接、相关文章、广告入口等内容。例如页面的左侧导航栏：

 <div class="content">

 <aside class="public-category">

     <h3>博客分类</h3>

     <div class="menu-cate-container">

         <ul id="menu-cate" class="menu">

             <li id="menu-item-800" class="menu-item"><a href="#">HTML5游戏开发</a>

                 <ul class="sub-menu">

                     <li id="menu-item-833" class="menu-item"><a href="#">开发技巧</a></li>

                     <li id="menu-item-834" class="menu-item"><a href="#">引擎推荐</a></li>

                 </ul>

             </li>

             <li id="menu-item-209" class="menu-item"><a href="#">移动前端开发</a>

                 <ul class="sub-menu">

                     <li id="menu-item-211" class="menu-item "><a href="#">HTML5</a></li>

                     <li id="menu-item-217" class="menu-item"><a href="#">CSS3</a></li>

                     <li id="menu-item-144" class="menu-item"><a href="#">响应式设计</a></li>

                 </ul>

             </li>

             <li id="menu-item-1212" class="menu-item"><a href="#">全栈式Javascript</a>

                 <ul class="sub-menu">

                     <li id="menu-item-1214" class="menu-item"><a href="#">jQuery</a></li>

                     <li id="menu-item-518" class="menu-item"><a href="#">NodeJS</a></li>

                     <li id="menu-item-588" class="menu-item"><a href="#">AngularJS</a></li>

                     <li id="menu-item-1213" class="menu-item"><a href="#">Acoluda</a></li>

                 </ul>

             </li>

         </ul>

     </div>

     <div class="cl">

     </div>

 </aside>

 </div>

提示：H5的新标签，IE 8 以及更早的版本不支持 <aside> 标签。

八、输出联系人信息address

<address> 标签定义文档或文章的作者/拥有者的联系信息。包括文档创建者名字、站点链接、电子邮箱、真实地址、电话号码等信息。如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息；如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

提示：<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分；<address> 元素通常连同其他信息被包含在 <footer> 元素中。

 div class="content">

 <address>

 超实用HTML代码段<br />

 <a href="mailto:us@example.org">给我发邮件</a><br />

 地址: 北京市朝阳区<br />

 电话: +010 34 56 78

 </address>

 </div>

HTML系列（六）：划分文档结构的更多相关文章

小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
10LaTeX学习系列之---Latex的文档结构
目录目录前言 (一)对于Ctex宏包中的文档结构 1.说明 2.源代码 3.输出效果 4.技巧 (二)对于ctexart的文档结构 1.说明 2.源代码 3.输出效果 (三)对于ctexbook的 ...
HTML5的文档结构和新增标签
一．HTML5 文档结构1.第一步:打开开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...
MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系
MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...
HTML5的文档结构
HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性 1. header 元素 <header> 标签定义文档或者文档 ...
Word 2010 制作文档结构之页码从正文开始设置
一般技术性文档结构划分: 第一页(首页) 第二页(修改记录页/版本记录页) 第三页(目录) 第四页(正文) 需求: 页脚编码从正文(即第四页)开始,而不是从首页开始,那么该如何实现? 前提准备: 输 ...
HTML的文档结构与语法（一）
一.走进Web开发 Web运行的原理: 二.HTML 1.1什么是html HTML是用来描述网页的一种语言 HTML指的是超文本标记语言(Hyper Text Markup Language) 超文 ...
Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构
分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...
Mongodb：修改文档结构后出现错误：Element '***' does not match any field or property of class ***.
Mongodb:修改文档结构后出现错误:Element '***' does not match any field or property of class ***. Mongodb是一种面向文档的 ...

随机推荐

C语言的本质（11）——指针与数组
1.指针数组和数组指针的内存布局初学者总是分不出指针数组与数组指针的区别.其实很好理解:指针数组:首先它是一个数组,数组的元素都是指针,数组占多少个字节由数组本身决定.它是"储存指针的数组 ...
利用margin代替小图标的绝对定位;使代码更简洁
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
oracle数据库导出并重新导入
斌斌 (给我写信) 原创博文(http://blog.csdn.net/binbinxyz),转载请注明出处! 一.导出数据库 1.将数据库TEST完全导出,用户名scott密码tiger,导出到D: ...
POJ 2774 Long Long Message&&HDU 1403 Longest Common Substring&&COJ 1203
后缀数组的买1送2题... HDU的那题数据实在是太水了,后来才发现在COJ和POJ上都是WA..原因在一点:在建立sa数组的时候里面的n应该是字符串长度+1....不懂可以去看罗大神的论文... 就 ...
update慢怎样处理？
update慢: 1.表的pctfree參数设置? 2.运行计划用索引还是全表扫? 3.SQL语句写法问题? 4.update慢还是commit慢? 5.更新多少条数据? 6.表是否频繁update造 ...
Sizzle之tokenize
在Sizzle里,大体思路,当为复合选择器时,判断是否支持querySeletorAll,如果不支持则调用自写方法select. select的功能十分冗长,下面先分析tokenize 在tokeni ...
i = i++ 在java字节码层面的分析
有这么一段代码: package zl.test; public class PcodeTest { /** * @param args */ public static void main(Stri ...
scrapy爬虫初体验
scrapy是一个python的爬虫框架,用于提取结构性数据.在这次宝贝计划1的项目中要用到一些数据.但四处联系后各方可能因为一些隐私问题不愿提供数据信息.这样我们只能自己爬取,存入数据库,再进行调用 ...
How to select a CRAN mirror in R & use repos parameter(2)
首次添加功能包需要设定CRAN镜像库: 方法是依据提示:--- Please select a CRAN mirror for use in this session ---,在弹出的窗口中选择CRA ...
使用prototype扩展的JavaScript常用函数库
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...

HTML系列（六）：划分文档结构

HTML系列（六）：划分文档结构的更多相关文章

随机推荐

热门专题