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

来源：互联网发布：金灿荣奚落公知视频编辑：程序博客网时间：2024/05/16 14:42

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>

阅读全文

0 0