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

最新推荐文章于 2024-05-21 21:13:33 发布

馋雪山丘

最新推荐文章于 2024-05-21 21:13:33 发布

阅读量341

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/u011069189/article/details/78322107

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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元素

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>