HTML学习之html列表介绍(代码实例)


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>html 列表</title></head><body>    <!--无序列表-->    <h4>An Unordered list</h4>    <ul>        <li>Cofferr</li>        <li>tea</li>        <li>Mide</li>    </ul>    <!--有序列表-->    <ol start="50">        <li>Cooffee</li>        <li>Tea</li>        <li>Mike</li>    </ol>    <!--自定义列表-->    <dl>        <dt>Coffer</dt>        <dd>--black hot drink</dd>        <dt>mike</dt>        <dd>--white cold drink</dd>    </dl>    <!--不同类型的有序列表-->    <h4>Numbered list:</h4>    <ol>        <li>apples</li>        <li>bananas</li>        <li>lemons</li>        <li>orange</li>    </ol>    <h4>letters list:</h4>    <ol type="A">        <li>apples</li>        <li>bananas</li>        <li>lemons</li>        <li>orange</li>    </ol>

    <h4>Lowercase  letters list:</h4>

    <ol type="a">

        <li>apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ol>

    <h4>Roman numbers list:</h4>

    <ol type="I">

        <li>apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ol>

    <h4>lowercase Roman numbers list:</h4>

    <ol type="i">

        <li>apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ol>

    <!--不同类型的无序列表-->

    <p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>

    <h4>disc bullets list:</h4>

    <ul style="list-style-type:disc">

        <li>Apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ul>

    <h4>circle bullets list:</h4>

    <ul style="list-style-type:circle">

        <li>Apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ul>

    <h4>square bullets list:</h4>

    <ul style="list-style-type:square">

        <li>Apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ul>

    <!--嵌套列表-->

    <h4>A list inside a list:</h4>

    <ul>

        <li>Coffee</li>

        <li>Tea</li>

        <ul>

            <li>black tea</li>

            <li>green tea</li>

        </ul>

        <li>Mike</li>

    </ul>

    <!--嵌套列表2-->

    <h4>lists inside a list</h4>

    <ul>

        <li>coffee</li>

        <li>tea

            <ul>

                <li>black tea</li>

                <li>green tea

                    <ul>

                        <li>china</li>

                        <li>africa</li>

                    </ul>

                </li>

            </ul>

        </li>

        <li>mick</li>

    </ul>

    <!--自定义列表-->

    <h4>A definition List</h4>

    <dl>

        <dt>coffee</dt>

        <dd>-black hot drink</dd>

        <dt>mike</dt>

        <dd>-white cold drink</dd>

</body>

 

</html>

参考资料:《菜鸟教程》

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 HTML视频教程,Html5视频教程,bootstrap视频教程!

以上就是HTML学习之html列表介绍(代码实例)的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

怎样给Html元素设置焦点

Html里formdata对象的详细介绍

Html列表快速预览

如何给Html中的pre标签中的文字换行?Html pre标签的使用实例

Html阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解

Html怎么设置select的值

Html如何设置首行缩进

Html a标签是怎么使用的?Html a标签的使用总结

如何使用Html制作一个简洁的提交表单(代码详解)

Html怎么下载

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...