HTML列表元素入门介绍(入门级,你值得拥有!)

列表分为三种:①有序列表②无序列表③自定义列表

一.有序列表

1.有序列表属性:

①使用数字进行标记

②开始标签:<ol> ordered  lists 的缩写

③列表项标签:<li>  list  item缩写

2.有序列表项目符号类型(Type)取值

3.有序列表元素代码示例:(项目符号数字型)

<html>

<body>

    <h2>搜索引擎排名</h2>   

    <ol type="1">     /*Type定义列表项目符号类型,可理解为项目序号类型,此处定义为数字型*/  

        <li>Google</li>       

        <li>Baidu</li>       

        <li>Bing</li>       

        <li>Sogou</li>   

    </ol>                     /*<ol>...</ol> 为有序列表开始结束标签*/

</body>

</html>

二.无序列表

1.无序列表属性:

使用圆点进行标记

开始标签: <ulunordered lists 的缩写

列表项标签: <li>  list  item 的缩写

2.无序列表项目符号类型(Type)取值:

3.无序列表代码示例:(项目符号实体圆心)

<html>

<body>

    <h2>软件编程语言</h2>   

    <ul type=”disc" /* 项目符号类型为实体圆心*/ 

        <li>Java</li>       

        <li>C++</li>       

        <li>Python</li>       

        <li>JavaScript</li>   

    </ul>                     /*<ul>...</ul> 为有序列表开始结束标签*/

</body>

</html>

三.自定义列表

1.自定义列表属性:

开始标签: <dl >    d efinition l ists 的缩写
列表项标签: < dt d efinition t erm 缩写
列表定义标签: < dd d efinition d escription 缩写

2.自定义列表代码示例:

<html>

<body>

     <h2>健康食品</h2>

    <dl>       

        <dt>水果</dt>       

            <dd>苹果</dd>       

            <dd>香蕉</dd>       

        <dt>蔬菜</dt>       

            <dd>西兰花</dd>       

            <dd>菠菜</dd>   

    </dl>

</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_53400553/article/details/117525721