HTML5权威指南笔记：10-文档分节
来源：互联网 发布：阿里云dns解析故障 编辑：程序博客网 时间：2024/06/05 06:07
1 添加基本的标题（h1元素）
从hl到h6 的各级标题的习惯样式
margin-start: 0; margin-end: 0; font-weight : bold; } h2 h2 { display: block; font-size: 1.5em; margin-before: o.83em; margin-after: 0.83em;
margin-start: 0; margin-end: 0; font-weight: bold; } h3 h3 { display: block; font-size: 1.17em; margin-before: 1em; margin-after: lem;
margin-start: 0; margin-end: 0; font-weight : bold; } h4 h4 { display: block; margin -before: 1.33em; margin-after: 1.33em; margin-start: 0;
margin-end: 0; font-weight: bold; } h5 h5 { display: block; font-size:0.83em; margin-before: 1.67em; margin-after: 1.67em;
margin-start: 0; margin-end: 0; font-weight: bold; } h6 h6 { display: block; font- size:0.67em; margin-before: 2.33em; margin-after: 2.33em;
margin-start: 0; margin-end: 0; font-weight: bold; }
例子：
<!DOCTYPE HTML><html><head></head><body> <!--此例只使用了h1 、h2和h3这三级标题，这是因为除了合同和技术规范这类高度技术性和精确 的文档外，很少有什么内容有必要用到更深层次的标题。大多数内容最多只需要用到两级或三级标题--> <h1>Fruits I like</h1> I like apples and oranges. <h2>Additional fruits</h2> I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. <h3>More information</h3> You can see other fruits I like <a href="fruitlist.html">here</a>.</body></html>2 隐藏子标题（hgroup元素）
例子：
<!DOCTYPE HTML><html> <head> <style> h1, h2, h3 { background: grey; color: white; } hgroup > h1 { margin-bottom: 0px;} hgroup > h2 { background: grey; color: white; font-size: 1em; margin-top: 0px; } </style> </head> <body> <!--hgroup元素可以用来将几个标题元素作为一个整体处理， 以免搅乱HTML文档的大纲 hgroup元素在从hl到h6的标题体系中的位置取决于其第一个标题子元素。例如，这里代码清 单中h1元素是hgroup元素的第一个子元素，因此该hgroup元素的级别相当于h1元素。hgroup元素 的子元素中，只有第一个标题子元素会被列入文档的大纲。--> <hgroup> <h1>Fruits I Like</h1> <h2>How I Learned to Love Citrus</h2> </hgroup> I like apples and oranges. <h2>Additional fruits</h2> I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. <h3>More information</h3> You can see other fruits I like <a href="fruitlist.html">here</a>. </body></html>3 生成节（section元素）
例子：
<!DOCTYPE HTML><html> <head> <style> h1, h2, h3 { background: grey; color: white; } hgroup > h1 { margin-bottom: 0px; } hgroup > h2 { background: grey; color: white; font-size: 1em; margin-top: 0px;} </style> </head> <body> <!--section表示的是文档中的一节,用来包含的是那种应该列入文档大纲或目录中的内容。 section元素通常包含一个或多个段落及一个标题，不过标题并不是必需的--> <section> <hgroup> <h1>Fruits I Like</h1> <h2>How I Learned to Love Citrus</h2> </hgroup> I like apples and oranges. <section> <h1>Additional fruits</h1> I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. <section> <h1>More information</h1> You can see other fruits I like <a href="fruitlist.html">here</a>. </section> </section> </section> </body></html>4 添加首部和尾部（header和footer元素）
例子：
<!DOCTYPE HTML><html> <head> </head> <body> <!--header元素表示一节的首部。里面可以包含各种适合出现在首部的东西，包括刊头或徽标。 在内嵌的元素方面， header元素通常包含一个标题元素或一个hgroup元素，还可以包含该节的导 航元素--> <header> <hgroup> <h1>Things I like</h1> <h2>by Adam Freeman</h2> </hgroup> </header> <!--footer元素是header元素的配套元素，表示一节的尾部。footer通常包含着该节的总结信息， 还可以包含作者介绍、版权信息、到相关内容的链接、徽标及免责声明等--> <footer id="mainFooter"> ©2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a> </footer> </body></html>5 添加导航区域（nav元素）
例子：
<!DOCTYPE HTML><html><head></head><body> <!--nav元素表示文档中的一个区域，它包含着到其他页面或同一页面的其他部分的链接. 该元素的目的是规划出文档的主要导航区域--> <nav> <h1>Contents</h1> <ul> <li><a href="#fruitsilike">Fruits I Like</a></li> <ul> <li><a href="#morefruit">Additional Fruits</a></li> </ul> </ul> </nav> <h1 id="fruitsilike">Fruits I Like</h1> <h1 id="morefruit">Additional fruits</h1> <nav> More Information: <a href="http://fruit.org">Learn More About Fruit</a> <a href="http://triathlon.org">Learn More About Triathlons</a> </nav></body></html>6 使用article
例子：
<!DOCTYPE HTML><html> <head> </head> <body> <!--article元素代表HTML文档中一段独立成篇的内容，从理论上讲，可以独立于页面其余内容发布或使用.--> <article> <!--独立成篇的内容--> </article> </body></html>7 生成附注栏（aside元素）
例子：
<!DOCTYPE HTML><html><head></head><body> <!--aside元素用来表示跟周边内容稍沾一点边的内容，类似于书籍或杂志中的侧栏。其内容与 页面其他内容、article或section有点关系，但并非主体内容的一部分。它可能是一些背景信息 到相关文章的链接，诸如此类。--> <aside> </aside></body></html>8 提供联系信息（address元素）
例子：
<!DOCTYPE HTML><html><head></head><body> <!--address元素身为article元素的后代元素时，它提供的联系信息被视为该article 的。否则， 当address元素身为body元素的子元素时，它提供的联系信息被视为整个文档的。--> <address> Questions and comment? <a href="mailto:ada吨myboringblog.com">Email me</a> </address></body></html>9 生成详情区域（details元素）
例子：
<!DOCTYPE HTML><html><head></head><body> <!--details元素在文档中生成一个区域，用户可以展开它以了解关于某主题的更多详情 要让页面一打开details元素就呈展开状态， 需要使用它的open属性--> <details> <!--为该详情区域生成一个说明标签或标题--> <summary>Kinds of Triathlon</summary> There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following: <ol> <li>1.5km swim</li> <li>40km cycle</li> <li>10km run</li> </ol> </details></body></html>阅读全文
0 0
- HTML5权威指南笔记：10-文档分节
- HTML5权威指南笔记：7-创建HTML文档
- HTML5与CSS3权威指南文档分享
- HTML5权威指南笔记（一）
- HTML5权威指南笔记：8-标记文字
- HTML5权威指南笔记：9-组织内容
- HTML5权威指南笔记：11-表格元素
- HTML5权威指南笔记：12-表单
- HTML5权威指南笔记：15-嵌入内容
- HTML5权威指南笔记：21-创建布局
- HTML5权威指南笔记：34-使用多媒体
- html5权威指南1
- html5权威指南pdf
- 《Javascript权威指南》学习笔记之十九--HTML5 DOM新标准---处理文档元信息和管理交互能力
- 《HTML5与CSS3权威指南》学习笔记1
- HTML5+CSS3权威指南学习笔记（2-4章）
- HTML5权威指南笔记：13-定制input元素
- HTML5权威指南笔记：16-理解CSS（内容简介）
- Servlet详解（一）
- 2017-10-01-种树赢积分活动
- 使用wdcp问题记录
- JSTL标签库的基本教程之核心标签库(一)
- Linux入门学习——文件的压缩与传输
- HTML5权威指南笔记：10-文档分节
- 实验三 Linux文件管理
- 类文件结构
- 解决/usr/bin/python\r\n^M: bad interpreter: No such file or directory
- Rhyme/Linux /etc/fstab 配置文件解释
- WeakReference
- preg_replace()替换成preg_replace_callback() php5.5之后
- fastjson在使用hibernate关系模型转json出现$ref解决办法
- ResourceBundle missingresourceexception
