华山资源网

html5组织内容_动力节点Java学院整理
网页制作 2024/11/18 佚名
3 1

默认情况下，HTML文档的格式与文档内容在浏览器窗口中显示的格式是不相关的，例如：浏览器会将连在一起的几个空白字符折算为一个空格，并且会忽略换行符。HTML提供了组织内容的方式，将显示的内容分段，预先编排内容的格式等。

建立段落

HTML会忽略你在文本中输入的回车符和其他额外的空格，网页中的新的段落使用p元素标识，一个段落包含一个或多个相关句子，通常围绕的是一个观点或论点，或者多个论点间有一些共同的主题。

<body>  
    <h1>Antoni Gaudí</h1>  
    <p>Many tourists are drawn to Barcelona  
       to see Antoni Gaudí's incredible  
       architecture.</p>  
    <p>Barcelona celebrated the 150th  
       anniversary of Gaudí's birth in  
       2002.</p>  
</body>

可以为段落添加样式，包括字体、字号、颜色等。

div元素

div元素没有具体的含义，如果没有恰当的元素可用时可以使用这个元素为内容建立结构并赋予其含义，它的含义通常通过class或id属性指定。

但是注意不在万不得已的情况下最好不要使用div元素，应该优先考虑那些具有语义重要性的元素。

预先编排内容格式

浏览器会将所有额外的回车和空格压缩，并根据窗口的大小自动换行。pre元素可以改变浏览器处理内容的方式，阻止合并空白字符，让源文档中的格式得以保留。但注意除非有必要保留文档原始格式，否则最好不要使用该元素，因为它削弱了通过使用元素和样式来控制呈现结果这一机制的灵活性。

pre元素通常和code元素搭配使用，用于展示代码示例，因为编程语言中的格式通常都很重要。

<p>Add this to your style sheet if you want  
  to display a dotted border underneath the  
  <code>abbr</code> element whenever it has  
  a <code>title</code> attribute.</p>  
<pre>  
    <code>  
        abbr[title] {  
            border-bottom: 1px dotted #000;  
        }  
    </code>  
</pre>

引用他处内容

blockquote元素表示引自他处的一片内容，与q元素类似（用于短的引述，不能跨行），但通常用在要引用的内容较多的场景。该元素的cite属性可以用来指定所引用的内容的来源。


复制代码代码如下:<blockquote cite="<a href="http://en.wikipedia.org/wiki/Apple">The">http://en.wikipedia.org/wiki/Apple">The</a> apple forms a tree that is small and deciduous, ......</blockquote>

注意浏览器会忽略blockquote元素中的内容的格式，默认对blockquote文本进行缩进。要在引用中建立结构，可以使用一些组织元素，例如p或hr。

浏览器应对q元素中的文本会自动加上特定语言的引号，但不同的浏览器的效果会有差异。下面是使用q元素的一个例子。

<p>She tried again, this time in French:  
<q lang="fr">Avez-vous lu le livre 
<cite lang="en">High Tide in Tucson</cite> 
de Kingsolver? C'est inspirational.</q></p>

添加主题分隔

hr元素代表段落级别的主题分隔。在HTML5中，hr元素代表着向另一个相关主题的转换，习惯样式是一条横贯页面的直线。

<blockquote cite="http://en.wikipedia.org/wiki/Apple">  
主题1  
<hr>  
主题2  
<hr>  
......  
</blockquote>

上例在blockquote元素中加入了一些hr元素，形成一定的结构。

将内容组织为列表

HTML中列表的类型有有序列表、无序列表和描述列表。

1）有序列表，ol为父元素，li为列表项；

2）无序列表，ul为父元素，li为列表项；

3）描述列表，dl为父元素，dt和dd分别代表dl中的术语和描述。

在此之外，用户还可以定义自己的列表。

有序列表

ol元素表示有序列表，列表项用li元素表示。

<body>  
    I like apples and oranges.  
    I also like:  
    <ol>  
        <li>bananas</li>  
        <li>mangoes</li>  
        <li>cherries</li>  
        <li>plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ol>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

ol元素支持属性如下：

1）start：设置列表首项的编号值，默认首项的编号为1；

2）type：设置显示在各列表项旁的编号的类型，包括：

l：十进制数（默认），1,2,3,4 

a：小写拉丁字母，a,b,c,d 

A：大写拉丁字母，A,B,C,D

i：小写罗马数字，i,ii,iii,iv

I：大写罗马数字，I,II,III,IV

3）reversed：列表编号采用降序，部分浏览器支持

无序列表

ul元素表示无序列表，用li元素表示列表项。

<body>  
    I like apples and oranges.  
    I also like:  
    <ul>  
        <li>bananas</li>  
        <li>mangoes</li>  
        <li>cherries</li>  
        <li>plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ul>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

无序列表的每个项目前都会显示一个项目符号，符号的样式可以用CSS属性list-style-type控制。

li元素的属性

li元素表示列表中的项目，它可以与ul、ol搭配使用，可以包含value属性，表示列表项的序号。

<body>  
    I like apples and oranges.  
    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>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

描述列表

定义说明列表需要用到三个元素：dl、dt和dd元素，这些元素没有局部属性：

1）dl：表示说明列表；

2）dt：表示说明列表中的术语；

3）dd：表示说明列表中的定义。

<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中的ul元素结合CSS中的counter特性和:before选择器，可以生成复杂的列表。下面是一个例子：

<head>  
    ......  
    <style>  
        body{  
            counter-reset: OuterItemCount 5 InnerItemCount;  
        }  
        #outerlist > li:before {  
         content: counter(OuterItemCount)". ";  
            counter-increment: OuterItemCount 2;  
        }  
        ulinnerlist > li:before {  
            content: counter(InnerItemCount, lower-alpha) ". ";  
            counter-increment: InnerItemCount;  
        }  
    </style>  
</head>  
<body>  
    I like apples and oranges.  
    I also like:  
    <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>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

使用插图

HTML5对插图的定义为：一个独立的内容单元，可带标题，通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的含义。

HTML使用figure元素插入图表、照片、图形、插图、代码片段等，figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。

<body>  
    I like apples and oranges.  
    <figure>  
        <figcaption>Listing 23. Using the code element</figcaption>  
        <code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>document.writen("I like " + fruits.length + " fruits");  
        </code>  
    </figure>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

figure元素生成了一个将code元素裹在其中的插图，并用figcaption元素为其添加了一个标题。注意figcaption元素必须是figure元素的第一个或最后一个子元素。

figure元素可以包含多个内容块，但只能包含一个figcaption。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com