HTML——＞列表

最新推荐文章于 2023-09-27 15:32:20 发布

省级干饭王

最新推荐文章于 2023-09-27 15:32:20 发布

阅读量832

点赞数 1

分类专栏：笔记 html

本文链接：https://blog.csdn.net/qq_55016379/article/details/116301282

版权

笔记同时被 2 个专栏收录

94 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

列表

列表介绍

在HTML中列表可以分为三类：有序列表，无序列表，定义列表

有序列表:列表项之间有先后顺序之分
无序列表：列表项之间没有先后顺序之分
定义列表：是一组带有特殊含义的列表，一个列表项包含“条件”和‘’列表“两个部分

有序列表

有序列表的简介

有序列表从< ol >开始到< /ol >结束。

在有序列表中一般采用数字或字母作为顺序，默认采用数字顺序

语法结构：

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

ol，即ordered list（有序列表）。li，即list（）列表项

在该语法中

< ol >< /ol >表示有序列表ed开始和结束
< li >< li >表示一个列表项的开始和结束

注意：

ol标签和li标签需要配合一起使用，不可以单独使用，而且< ol >标签的子标签只能是li标签，不能是其他标签

代码实例：

<!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>

有序列表

HTML
CSS
JavaScript
jQuery
Vue.js

type属性

在HTML中可以通过type属性来改变列表项符号。在默认情况先，有序列表以数字作为序号

语法结构：

<ol type="属性值">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>jQuery</li>
   <li>Vue.js</li>
</ol>

type属性取值表：

属性值	列表符号
1	阿拉伯数字
a	小写英语
A	大写英语
i	小写罗马数字
I	大写罗马数字

<!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>

type属性

HTML
CSS
JavaScript
jQuery
## 无序列表

无序列表简介

无序列表的列表项没有顺序，在默认情况下无序列表的列表符号是实心黑圆

语法结构：

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

ul即unordered list（无序列表），li即list（列表项）

在该语法中

< ul >< /ul >标志着一个无序列表的开始和结束
< li >< li >表示一个列表项的开始和结束

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

无序列表

HTML
CSS
JavaScript
jQuery
Vue.js

type属性

语法结构：

<ol type="属性值">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>jQuery</li>
   <li>Vue.js</li>
</ol>

type属性取值：

属性值	列表符号
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>
	</body>
</html>

type属性

HTML
CSS
JavaScript
jQuery
Vue.js

深入无序列表

ul标签和li标签需要配合一起使用，不可以单独使用，而且< ul >标签的子标签只能是li标签，不能是其他标签

定义列表

在HTML中，定义列表由两部分组成：名词和描述

语法结构：

<dl>
    <dt>名词</dt>
    <dd>描述</dd>

</dl>

名词

描述

dl即definition list（定义列表），dt即definition term（定义名词），dd即definition description（定义描述）

在该语法中：

< dl >< /dl >代表了定义列表的开始和结束
< dt >< /dt >用于添加要解释的名词
< dd >< /dd >用于添加对名词的解释

代码实例：

<!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>

定义列表

HTML

制作网页的标准语言，控制网页结构

CSS

层叠样式表，控制网页的样式

JavaScript

脚本语言，控制网页行为

HTML语义化

在列表中，有很多代码可以被一些基础代码代替，但虽然书写时简单，当要写的代码数量庞大时，会降低代码的可读性。因此，养好使用规范格式代码的习惯

省级干饭王

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
HTML——＞列表

列表列表介绍在HTML中列表可以分为三类：有序列表，无序列表，定义列表有序列表:列表项之间有先后顺序之分无序列表：列表项之间没有先后顺序之分定义列表：是一组带有特殊含义的列表，一个列表项包含“条件”和‘’列表“两个部分有序列表有序列表的简介有序列表从< ol >开始到< /ol >结束。在有序列表中一般采用数字或字母作为顺序，默认采用数字顺序语法结构：<ol> <li>列表项</li> <li>
复制链接

扫一扫