HTML列表标签

站长

2022年09月10日 03:38 · 阅读数 28

HTML列表简介

在许多网页中都有列表的影子，比如洛谷的题目列表， HTML列表标签学习通的课程列表在html中有三种列表：有序列表、无序列表和定义列表。

HTML有序列表ol

有序列表就是前面有按照某个顺序标明的数字，字母或者阿拉伯数字等的一列数据。语法：

<ol>
  <li>C++</li>
  <li>JAVA</li>
  <li>JavaScript</li>
  <li>jQuery</li>
  <li>Vue.js</li>
</ol>

理解：ol，ordered list（有序列表），li，list（列表项）。

示例

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML有序列表</title>
</head>
<body>
    <ol>
        <li>C++</li>
        <li>JAVA</li>
        <li>HTML</li>
        <li>Python</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

实现的效果： HTML列表标签

高级语法：利用type属性

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML有序列表</title>
</head>
<body>
    <ol type="I">
        <li>C++</li>
        <li>JAVA</li>
        <li>HTML</li>
        <li>Python</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

实现效果： HTML列表标签 type属性有好几种：

属性值	含义
a	表示小写字母
A	表示大写字母
i	表示小写罗马数字
I	表示大写罗马数字
1	表示数字（默认）

是不是感觉很简单，虽然是第一次学，但是很容易就上手，我了解到，等后面学到CSS，会有一种更好的方式来实现列表list。

HTML无序列表ul

这是最常用的一种列表形式，语法：

<ul>
  <li>C++</li>
  <li>JAVA</li>
  <li>JavaScript</li>
  <li>jQuery</li>
  <li>Vue.js</li>
</ul>

理解：ul，unordered list（有序列表），li，list（列表项）。

示例

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML无序列表</title>
</head>
<body>
    <ul>
        <li>C++</li>
        <li>JAVA</li>
        <li>HTML</li>
        <li>Python</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

实现的效果： HTML列表标签

高级语法：利用type属性

这里和有序列表一样，都有type属性。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML无序列表</title>
</head>
<body>
    <ul type="square">
        <li>C++</li>
        <li>JAVA</li>
        <li>HTML</li>
        <li>Python</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

实现效果： HTML列表标签 square代表方框。

属性值	含义
circle	空心圆○
disc	实心圆●（默认值）
square	正方形■

注意点

在<ol></ol>这一对标签里面，有两点要注意：1、该标签子元素只能是li，不能加上其他标签。错误示例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML无序列表</title>
</head>
<body>
    <ul type="square">
        <p>所有学习到的技术</p>
        <li>C++</li>
        <li>JAVA</li>
        <li>HTML</li>
        <li>Python</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

实现的效果： HTML列表标签这个是错误的，要把<p></p>放在ul外面才是正确的。2、该标签子元素只能是li，也不能直接写上其他的文字或字母。错误示例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML无序列表</title>
</head>
<body>
    <ul type="square">
        所有学习到的技术
        <li>C++</li>
        <li>JAVA</li>
        <li>HTML</li>
        <li>Python</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

实现的效果： HTML列表标签也是错误的。

HTML定义列表dl

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" /><!--charset 字符集，即编码形式-->>
    <title>HTML定义列表</title>
</head>
<body>
    <dl>
        <dt>C++</dt>
        <dd>C plus plus</dd>
    </dl>
</body>
</html>

实现效果： HTML列表标签只需要了解就可以了。