首页 > Web开发 > 详细

HTML列表的学习

时间:2019-07-29 12:51:13      阅读:102      评论:0      收藏:0      [点我收藏+]

主要学习三种1)有序列表2)无序列表3)定义列表

1.有序列表

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>

<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
</body>
</html>

网页显示:技术分享图片

 

有序列表的type语法

        <ol type="符号类型">

                <li>列表项1</li>

                <li>列表项2</li>

有序列表的type值技术分享图片

2.无序列表

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>

<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
</body>
</html>

页面展示

技术分享图片

无序列表语法:

        <ul type="符号类型">

                <li>列表项1</li>

                <li>列表项2</li>

                ...

   </ul>

无序列表的type值:技术分享图片

3.定义列表

语法:

   <dl>

      <dt>定义名词</dt>

      <dd>定义描述</dd>

   </dl>

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定义列表</title>
</head>

<body>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JS</dt>
        <dd>JavaScript脚本语言</dd>
    </dl>
</body>
</html>

页面展示:

技术分享图片

HTML列表的学习

原文:https://www.cnblogs.com/z617182272/p/11263131.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!