《HTML+CSS+JavaScript》之第5章列表

最新推荐文章于 2024-07-12 20:49:16 发布

mali378287007

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量83

点赞数

分类专栏：整理 html 学习文章标签： html

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125592558

版权

整理同时被 3 个专栏收录

181 篇文章 11 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

《HTML+CSS+JavaScript》之第5章列表

5.1 列表简介

网页中最常用的一种数据排列方式。

5.2 有序列表

各个列表项有顺序。

<ol> <!--ordered list-->
	<li>列表项</li> <!--list-->
	<li>列表项</li>
	<li>列表项</li>
</ol>

<!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>
        <li>Vue.js</li>
    </ol>
</body>
</html>

5.2.2 type属性

<ol type="属性值">
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ol>

属性值	列表项符号
1	阿拉伯数字：1、2、3…，默认
a	小写英文字母：a、b、c…
A	大写英文字母：A、B、C…
i	小写罗马数字：i、ii、iii…
I	大写罗马数字：I、II、III…

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>type属性 </title>
</head>
<body>
    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

CSS中使用list-style-type属性代替。

5.3 无序列表

5.3.1 无序列表简介

列表项没有顺序。

<ul> <!--unordered list-->
	<li>列表项</li> <!--list-->
	<li>列表项</li>
	<li>列表项</li>
</ul>

<html>
<head>
    <meta charset="utf-8" />
    <title>无序列表</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

5.3.2 type属性

<ul type="属性值">
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ul>

属性值	列表项符号
disc	实心圆，默认
circle	空心圆
square	正方形

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>type属性</title>
</head>
<body>
    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

CSS中使用list-style-type属性代替。

5.3.3 深入无序列表

一般使用无序列表，很少用到有序列表。

ul子元素只能是li。
ul内部文本只能在li元素内部添加。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>前端最核心3个技术：</div>
    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

5.4 定义列表

<dl> <!--definition list-->
	<dt>名词，要解释的名词</dt> <!--definition term-->
	<dd>描述，名词的具体解释</dd> <!--definition description-->
</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>JavaScript</dt>
        <dd>脚本语言，控制网页的行为</dd>
    </dl>
</body>
</html>