您的位置：首页 > Web前端 > HTML5

HTML5权威指南笔记：9-组织内容

2017-10-23 19:17 417 查看

1 建立段落（p元素）

p元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性无
内容短语内容
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化align属性在HTML5 中已不再使用( HTML4不赞成使用这个属性）
习惯样式p { display: block; margin-before: 1em;
margin-after: 1em; margin-start: o;
margin-end: o; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>I like apples and oranges.</p>
</body>
</html>


2 使用div 元素

div元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性无
内容流内容
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化无。不过在选择该元素之前应先考虑一下HTML5 中新增的article和section等元素
习惯样式div { display: block; }
例子：

<!DOCTYPE HTML>
<html>
<head>
<style>
.favorites {
background: grey;
color: white;
border: thin solid black;
padding: 0.2em;
}
</style>
</head>
<body>
<!--用来在文档中添加自定义的结构
它的含义是由全局属性提供的，通常用的是class或id属性-->
<div class="favorites">
<p>I like apples and oranges.</p>
</div>
</body>
</html>


3 使用预先编排好格式的内容（pre元素）

pre元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性无
内容短语内容
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化无
习惯样式pre { display: block;
font-family: monospace;
white-space: pre;
margin: lem 0; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--pre元素可以改变浏览器处理内容的方式，阻止合并空白字符，让源文档中的格式得以保留。
pre元素跟code元素搭配在一起的时候尤其有用。编程语言中的格式通常都很重要-->
<pre><code>
var fruits = ["apples", "oranges", "mangoes", "cherries"];
for (var i = 0; i < fruits.length; i++) {
document.writeln("I like " + fruits[i]);
}
</code></pre>
</body>
</html>


4 引用他处内容（blockquote元素）

blockquote元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性cite
内容流内容
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化无
习惯样式blockquote { display: block; margin-before: 1em;
margin-after: 1em; margin-start: 40px;
margin-end : 40px; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--blockquote元素表示引自他处的一片内容。该元素的用途与第8章介绍的q元素类似，但是通
常用在要引用的内容更多的情况下。
该元素的cite属性可以用来指定所引用的内容的来源，-->
<blockquote cite="http://en.wikipedia.org/wiki/Apple">
The apple forms a tree that is small and deciduous, reaching 3 to 12 metres
(9.8 to 39 ft) tall, with a broad, often densely twiggy crown.
The leaves are alternately arranged simple ovals 5 to 12 cm long and 3?
centimetres (1.2?.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole
with anacute tip, serrated margin and a slightly downy underside. Blossoms are
produced in spring simultaneously with the budding of the leaves.
The flowers are white with a pink tinge that gradually fades, five petaled,
and 2.5 to 3.5 centimetres (0.98 to 1.4 in) in diameter.
The fruit matures in autumn, and is typically 5 to 9 centimetres (
2.0 to 3.5 in) in diameter.
The center of the fruit contains five carpels arranged in a five-point star,
each carpel containing one to three seeds, called pips.</blockquote>
</body>
</html>


6 添加主题分隔（hr元素）

hr元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性无
内容无
标签用法虚元素
是否为HTML5新增否
在HTML5中的变化在HTML4中hr元素只有呈现性质的含义。在HTML5 中，其语义如前所述。其呈现性的一面已被降格为习惯样式。此外， align 、width 、noshade 、size 、color属性在HTML5 中已不再使用
习惯样式hr { display: block; margin-before: 0.5em;
margin-after: 0.5em; margin-start: auto;
margin-end: auto; border-style: inset;
border-width: 1px; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--在HTML4中， hr元素代表一条水平线（其实就是一条横贯页面的直线）。
在HTML5 中， hr元素代表着向另一个相关主题的转换，-->
<hr>
The leaves are alternately arranged simple ovals 5 to 12 cm long and 3?
centimetres (1.2?.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole
with anacute tip, serrated margin and a slightly downy underside. Blossoms are
produced in spring simultaneously with the budding of the leaves.
<hr>
The flowers are white with a pink tinge that gradually fades, five petaled,
and 2.5 to 3.5 centimetres (0.98 to 1.4 in) in diameter.
The fruit matures in autumn, and is typically 5 to 9 centimetres (
2.0 to 3.5 in) in diameter.
</body>
</html>


6 将内容组织为列表

6.1 有序列表（ol元素）

ol元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性start 、reversed 、type
内容零个或多个li元素
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化reversed属性是HTML5中新增的。HTML4不赞成使用的start和type属性在HTML5 中恢复，但却有了语义方面的（ 而不是呈现方面的）含义。compact属性不再使用
习惯样式ol { display: block; list-style-type: decimal;
margin-before: 1em; margin-after: 1em;
margin-start: 0; margin-end: 0;
padding-start: 40px; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--
start属性设定的是列表首项的编号值。如果不用这个属性，那么首项的编号为1 。
type属性用来设定显示在各列表项旁的编号的类型。

ol元素的type属性支持的值
值       说明
1       十进制数（默认）
a       小写拉丁字母
A       大写拉丁字母
i       小写罗马数字
I       大写罗马数字

如果使用了reversed属性，那么列表编号采用降序
-->
<ol>
<li>bananas</li>
<li>mangoes</li>
<li>cherries</li>
<li>plums</li>
<li>peaches</li>
<li>grapes</li>
</ol>
</body>
</html>


6.2 无序列表（ul元素）

ul元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性无
内容笭个或多个li元素
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化type和compact属性已不再使用
习惯样式ul { display: block; list-style-type: disc;
margin-before: 1em; margin-after: 1em;
margin-start: 0; margin-end : 0;
padding- start: 40px; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--无序列表的每个项目前都会显示一个项目符号。
这个符号的样式可以用css 属性list-style-type控制-->
I also like:
<ul>
<li>bananas</li>
<li>mangoes</li>
<li>cherries</li>
<li>plums</li>
<li>peaches</li>
<li>grapes</li>
</ul>
</body>
</html>


6.3 li元素

c5a2
li元素
元素类型无
允许具有的父元素ul 、ol 、menu
局部属性value (仅用千父元素为ol元素时）
内容流内容
标签用法开始标签和结束标签
是否为HTML5新增否
在HTML5中的变化HTML4不赞成使用的value属性在HTML5 中得以恢复
习惯样式li { display: list-item; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--li元素非常简单，它表示父元素中的一个列表项。
其value属性可以用来生成不连续的有序列表-->
I also like:
<ol>
<li>bananas</li>
<li value="4">mangoes</li>
<li>cherries</li>
<li value="7">plums</li>
<li>peaches</li>
<li>grapes</li>
</ol>
</body>
</html>


6.4 生成说明列表（dl 、dt和dd元素）

元素说明习惯样式
dl表示说明列表dl { display: block;
margin-before: lem;
margin-after: 1em;
margin-start: 0;
margin-end: 0; }
dt表示说明列表中的术语dt { display: block; }
dd表示说明列表中的定义dd { display: block;
margin-start: 40px; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

I like apples and oranges.

I also like:

<dl>
<dt>Apple</dt>
<dd>The apple is the pomaceous fruit of the apple tree</dd>
<dd><i>Malus domestica</i></dd>
<dt>Banana</dt>
<dd>The banana is the parthenocarpic fruit of the banana tree</dd>
<dd><i>Musa acuminata</i></dd>
<dt>Cherry</dt>
<dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd>
</dl>

You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>


6.5 生成自定义列表

<!DOCTYPE HTML>
<html>
<head>
<!--结合css 中的counter特性和： before选择器，可以用ul元素生成复杂的列表-->
<style>
body {
counter-reset: OuterItemCount 5 InnerItemCount;
}

#outerlist > li:before {
content: counter(OuterItemCount) ". ";
counter-increment: OuterItemCount 2;
}

ul.innerlist > li:before {
content: counter(InnerItemCount, lower-alpha) ". ";
counter-increment: InnerItemCount;
}
</style>
</head>
<body>
<ul id="outerlist" style="list-style-type: none">
<li>bananas</li>
<li>mangoes, including: </li>
<ul class="innerlist">
<li>Haden mangoes</li>
<li>Keitt mangoes</li>
<li>Kent mangoes</li>
</ul>
<li>cherries</li>
<li>plums, including:
<ul class="innerlist">
<li>Elephant Heart plums</li>
<li>Stanley plums</li>
<li>Seneca plums</li>
</ul>
</li>
<li>peaches</li>
<li>grapes</li>
</ul>
</body>
</html>


8 使用插图（figure元素）

figure元素
元素类型流
允许具有的父元素任何可以包含流元素的元素
局部属性无
内容流内容，还可包含一个figcaption元素
标签用法开始标签和结束标签
是否为HTML5新增是
在HTML5中的变化无
习惯样式figure { display: block; margin-before: 1em;
margin-after: lem; margin-start: 40px;
margin-end: 40px; }
figure元素可以包含一个figcaption元素，后者表示插图的标题

figcaption元素
元素类型无
允许具有的父元素figure
局部属性无
内容流内容
标签用法开始标签和结束标签
是否为HTML5新增是
在HTML5中的变化无
习惯样式figcaption { display: block; }
例子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<figure>
<figcaption>Listing 23. Using the code element</figcaption>
<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
document.writeln("I like " + fruits.length + " fruits");
</code>
</figure>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航