html5组织内容_动力节点Java学院整理

时间：2017-08-15

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

共3页:

2/3

上一篇：HTML5中input[type='date']自定义样式与日历校验功能的实现代码 下一篇：mui几种页面跳转方式对比总结概括

html5组织内容_动力节点Java学院整理

相关文章

最新文章