章节
body
代表HTML文档的内容。在文档中只能有一个body元素。
- body元素必须是html元素的直接子元素
- 对应的DOM接口是HTMLBodyElement
- 可以通过document.body直接访问body元素
属性:
有一系列在HTML5中添加的和事件有关的属性,其中比较常用的几个:
- onblur:DOM失去焦点时的回调函数
- onerror:DOM加载失败的回调函数
- onfocus:DOM接收到焦点focus的回调函数
- onload:DOM完成加载的回调函数
- onunload:文档已经被关闭时的回调函数
section(HTML5、块级)
HTML Section 元素表示文档中的一个章节。
一般来说会包含一个标题。一般通过是否包含一个标题 (< h1>-< h6> ) 作为子节点来辨识每一个< section>。
- 如果元素内容可以分为几个部分的话,应该使用 < article> 而不是 < section>。
- 不要把 < section> 元素作为一个普通的容器来使用,这是本应该是< div>的用法。 一般来说,一个 < section> 应该出现在文档大纲中。
<section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
nav(HTML5)
HTML导航栏 (< nav>) ,描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表.
- 并不是所有的链接都必须使用< nav>元素,它只用来将一些热门的链接放入导航栏,例如< footer>元素就常用来在页面底部包含一个不常用到,没必要加入< nav>的链接列表.
- 一个网页也可能含有多个< nav>元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表.
- 对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
article(HTML5、块级)
< article>元素表示文档、页面、网站中的独立结构,是可以独立于内容其余部分的完整独立内容块。
<article class="film_review">
<header>
<h2>Jurassic Park</h2>
</header>
<section class="main_review">
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<article class="user_review">
<p>Way too scary for me.</p>
<footer>
<p>
Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
</p>
</footer>
</article>
aside(HTML5、块级)
< aside> 元素表示一个和其余页面内容几乎无关的部分,与周围的文本没有密切关系。
其通常表现为侧边栏、嵌入内容等,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接等等。
<article>
<p>
The Disney movie <em>The Little Mermaid</em> was
first released to theatres in 1989.
</p>
<aside>
The movie earned $87 million during its initial release.
</aside>
<p>
More info about the movie...
</p>
</article>
h1~h6(块级)
标题元素实现了六层文档标题,< h1> 是最大的标题,< h6> 是最小的标题。标题元素简要地描述章节的主题。
hgroup(HTML5)
代表一个标题组。
一般可以将主标题和副标题包装在一个标题组hgroup中,但是这里面除了h1~h6不要放其他元素。
<hgroup>
<h1>Main title</h1>
<h2>Secondary title</h2>
</hgroup>
hgroup一般只关注顶级标题,也就是这里的h1,其他标题也会显示在浏览器中,但不会被列入文档纲要。因此这里的h2只表示副标题,不表示小节的开始。
header(HTML5、块级)
定义页面或章节的头部。它经常包含 logo、页面标题等。
一般如果文章开头的内容很多,除了主标题之外,还有其他内容,如内容照耀、发表日期、作者署名、图片或小标题等,都应该把它们放在一个header元素中。
<header>
<hgroup>
<h1>Main title</h1>
<h2>Secondary title</h2>
</hgroup>
<p>bu Ran N.</p>
</header>
footer(HTML5、块级)
定义页面或章节的尾部(页脚),它经常包含版权信息、法律信息链接和反馈建议用的地址。
- 注意< footer>元素必须不能是 < address>, < header> 或者另一个< footer> 元素的后代元素。
address(块级)
HTML 的< address>元素可以让作者为它最近的< article>或者< body>祖先元素提供联系信息。在后一种情况下,它应用于整个文档。
- 当表示一个和联系信息无关的任意的地址时,使用< p>元素而不是< address>元素。
- 这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在< time>元素中)。
- 通常,< address>元素可以放在当前section的< footer>元素中,如果存在的话。
- 不能包含的元素:
- 标题内容(hgroup,h1~h6)
- 章节内容(article、aside、section、nav)
- header或footer元素
<address>
You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
Mountain View, CA 94043-0801<br>
USA
</address>
像图中展示的那样,< address>元素使用< i>或者< em>元素的默认样式渲染文本。
main
HTML Main 元素呈现了文档< body>或应用的主体部分。
主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的,不包含任何在一系列文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。
- 在一个文档只能出现一个 < main>标签
- 父元素不能是< article>, < aside>, < footer>, < header>, 或< nav>
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for
apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>
组织内容
p(块级)
HTML < p>元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。
hr(块级)
HTML < hr> 元素表示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)。
在HTML的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但目前被定义为语义上的,而不是表现层面上。
<p>This is the first paragraph of text. This is the first paragraph of text.
This is the first paragraph of text. This is the first paragraph of text.</p>
<hr>
<p>This is second paragraph of text. This is second paragraph of text.
This is second paragraph of text. This is second paragraph of text.</p>
pre(块级)
HTML < pre> 元素代表其内容已经预先排版过,格式应当保留。
在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。
blockquote(块级)
HTML中的< blockquote>元素,代表其中的文字是引用内容。
通常在渲染时,这部分的内容会有一定的缩进。
属性:
- cite:标注引用信息的来源文档或者相关信息的URL。
<blockquote cite="http://developer.mozilla.org">
<p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>
- 可以使用margin属性来改变blockquote的缩进。
- 如果想使用行内引用,可以使用q标签
ol(块级)
定义一个有序列表
在网页的 HTML 描述中并没有定义编号的样式,但可以使用 list-style-type 属性来设置。
属性:
- reversed(HTML5):这个布尔属性规定了列表的条目采用倒序,即最不重要的条目放在列表第一个位置。
- start(HTML5):设定列表项开始的序号
- type:定义了列表项序号的类型:
- a:小写字母
- A:大写字母
- i:小写罗马数字
- I:大写罗马数字
- 1:数字(默认值)
<ol start="7">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<!--嵌套列表 -->
<ol>
<li>first item</li>
<li>second item <!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li> <!-- Here is the closing </li> tag -->
<li>third item</li>
</ol>
<!--混合使用ol与ul -->
<ol>
<li>first item</li>
<li>second item <!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ul>
</li> <!-- Here is the closing </li> tag -->
<li>third item</li>
</ol>
ul(块级)
定义一个无序列表
无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的HTML描述定义, 但在其相关的CSS 可以用 list-style-type 属性设置
<ul>
<li>first item</li>
<li>second item <!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li> <!-- Here is the closing </li> tag -->
<li>third item</li>
</ul>
<ul>
<li>first item</li>
<li>second item <!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem <!-- Same for the second nested unordered list! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li> <!-- Closing </li> tag for the li that contains the third unordered list -->
<li>second item third subitem</li>
</ul>
</li> <!-- Here is the closing </li> tag -->
<li>third item</li>
</ul>
li(块级)
表示列表里的条目。
必须被包含在一个父元素里:一个有顺序的列表(< ol>),一个无顺序的列表(< ul>),或者一个菜单 (< menu>)。在菜单或者无顺序的列表里,列表条目通常用点排列显示。在有顺序的列表里,列表条目通常是在左边有按升序排列计数的显示,例如数字或者字母。
属性:
- value:只允许值为数字,表示当前列表项的序号。对于ul和menu来说不起作用。
<ol type="I">
<li value="3">third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
- type:和ol的type属性作用相同,会覆盖ol元素定义的type
dl(块级)
定义列表。
在HTML5中,描述其为一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。
dt(块级)
用于在一个定义列表中声明一个术语。
该元素仅能作为 < dl> 的子元素出现。
通常在该元素后面会跟着 < dd> 元素, 然而,多个连续出现的 < dt> 元素都将由出现在它们后面的第一个 < dd> 元素定义。
dd(块级)
用来指明一个描述列表 (< dl>) 元素中一个术语的描述
这个元素只能作为描述列表元素的子元素出现,并且必须跟着一个 < dt> 元素。
下面看有关dl,dt,dd的几个例子
- 单条术语与描述
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<!-- other terms and definitions -->
</dl>
- 多条术语,单条描述
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<!-- other terms and definitions -->
</dl>这里写代码片
- 单条术语,多条描述
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
is a mostly herbivorous mammal, slightly larger than a domestic cat
(60 cm long).</dd>
<!-- other terms and definitions -->
</dl>
- 元数据
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
小技巧:通过 CSS3 ,我们可以很容易的在术语后面添加一个与内容无关的分隔符号,比如:
dt:after {
content: ": ";
}
figure(HTML5、块级)
代表一个和文档有关的插图。
这个标签经常是在主文中引用的图片,插图,表格,代码段等等
figcaption(HTML5、块级)
代表一个图例的图题。
< figcaption> 在< figure> 块里是第一个或最后一个。
如果没有该元素,这个父节点的图片会没有说明/标题。
<!-- Just a figure -->
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption>Fig1. MDN Logo</figcaption>
</figure>
<figure>
<p>
Depression is running through my head,<br>
These thoughts make me think of death,<br>
A darkness which blanks my mind,<br>
A walk through the graveyard, what can I find?....
</p>
<figcaption><cite>Depression</cite>. By: Darren Harris</figcaption>
</figure>
div(块级)
代表一个通用的容器,没有特殊含义
它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang),它应该在没有任何其它语义元素可用是才使用