1 添加基本的标题(h1元素)
h1 ~ h6元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | hgroup元素或其他任何可以包含流元素的元素。这些元素不能是address元素的后代元素 |
局部属性 | 无 |
内容 | 流内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | 无 |
习惯样式 | 参见下表 |
从hl到h6 的各级标题的习惯样式
元素 | 习惯样式 |
---|---|
h1 | hl { display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em; 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元素)
hgroup元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素 |
局部属性 | 无 |
内容 | 一个或多个标题元素( h1~h6 ) |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | hgroup { display: block; } |
例子:
<!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元素)
section元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素,但section元素不能是address元素的后代元素 |
局部属性 | 无 |
内容 | style元素和流内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | section { display: block; } |
例子:
<!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元素)
header元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素。header元素不能是address 、footer元素和其他header元素的后代元素 |
局部属性 | 无 |
内容 | 流内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | header { display: block; } |
footer元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素。footer元素不能是address 、footer元素和其他footer元素的后代元素 |
局部属性 | 无 |
内容 | 流内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | footer { display: block; } |
例子:
<!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元素)
nav元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素。但是该元素不能是address元素的后代元素 |
局部属性 | 无 |
内容 | 流内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | nav { display: block; } |
例子:
<!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
article元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素,但该元素不能是address元素的后代元素 |
局部属性 | 无 |
内容 | style元素和流内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | article { display: block; } |
例子:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--article元素代表HTML文档中一段独立成篇的内容,从理论上讲,可以独立于页面其余内容发布或使用.-->
<article>
<!--独立成篇的内容-->
</article>
</body>
</html>
7 生成附注栏(aside元素)
aside元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素,但该元素不能是address元素的后代元素 |
局部属性 | 无 |
内容 | style元素和流内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | aside { display: block; } |
例子:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--aside元素用来表示跟周边内容稍沾一点边的内容,类似于书籍或杂志中的侧栏。其内容与
页面其他内容、article或section有点关系,但并非主体内容的一部分。它可能是一些背景信息
到相关文章的链接,诸如此类。-->
<aside>
</aside>
</body>
</html>
8 提供联系信息(address元素)
address元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素 |
局部属性 | 无 |
内容 | 流内容。但是标题元素h1 ~ h6 、section 、header 、footer 、nav 、article和aside元素不能用做该元素的后带代元素 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | address { display: block; font-style: italic; } |
例子:
<!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元素)
details元素 | |
---|---|
元素类型 | 流 |
允许具有的父元素 | 任何可以包含流元素的元素 |
局部属性 | open |
内容 | 流内容及一个可有可无的summary元素 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | details { display: block; } |
summary元素 | |
---|---|
元素类型 | 无 |
允许具有的父元素 | details元素 |
局部属性 | 无 |
内容 | 短语内容 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 是 |
在HTML5中的变化 | 无 |
习惯样式 | summary{ display: block; } |
例子:
<!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>