标签及属性学习
学习视频：B站小甲鱼《零基础入门学习web开发》
16. 列表元素
1.无序列表ul元素
①定义：<ul> 标签用于定义无序列表。列表内容用
- 标签包裹。列表元素左前方默认是黑色圆点。
2.有序列表ol元素
①定义：<ol> 标签用于定义有序列表。列表内容用<li>标签包裹。列表元素默认用阿拉伯数字排序。
②属性：
3.li元素
①定义：<li> 标签用于定义列表中的项目。
列表实例
html
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intinal-scale=1.0">
</head>
<body>
<h1>列表元素学习</h1>
<p>无序列表</p>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>草莓</li>
<li>西瓜</li>
</ul>
<p>有序列表</p>
<ol>
<li>亚洲</li>
<li>欧洲</li>
<li>非洲</li>
<li>北美洲</li>
</ol>
</body>
</html>列表实例效果图
4.list-style-type 属性
- list-style-type 属性改变无序列表的标志，如方块、圆点、圆圈或者是隐藏。
html
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intinal-scale=1.0">
<style>
ul.a{list-style-type:square}
ul.b{list-style-type:disc}
ul.c{list-style-type:circle}
ul.d{list-style-type:none}
</style>
</head>
<body>
<h1>列表css设置</h1>
<p>无序列表</p>
<ul class="a"> <!--方形-->
<li>香蕉</li>
<li>苹果</li>
</ul>
<ul class="b"> <!--圆点-->
<li>草莓</li>
<li>西瓜</li>
</ul>
<ul class="c"> <!--圆圈-->
<li>葡萄</li>
<li>菠萝</li>
</ul>
<ul class="d"> <!--隐藏-->
<li>荔枝</li>
<li>柚子</li>
<li>火龙果</li>
</ul>
</body>
</html>效果图
- list-style-type 属性可以设置有序列表的标志有：
5.list-style-image属性
list-style-image属性自定义列表的标志.
实例中应用的图片是16*16px的。
html
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intinal-scale=1.0">
<style>
ul{list-style-image:url(D:/Web_Study/image/orange.jpg)}
</style>
</head>
<body>
<ul>
<li>橙子</li>
<li>橙子</li>
<li>橙子</li>
<li>橙子</li>
</ul>
</body>
</html>效果图
6.列表嵌套
可ol中嵌套ul，也可以ul中嵌套ol
html
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intinal-scale=1.0">
</head>
<body>
<p>水果按季节分类</p>
<ol>
<li>春季水果
<ul>
<li>荔枝</li>
<li>菠萝</li>
<li>枇杷</li>
<li>青枣</li>
<li>草莓</li>
<li>橙子</li>
</ul>
</li>
<li>夏季水果
<ul>
<li>榴莲</li>
<li>山竹</li>
<li>西瓜</li>
<li>香瓜 </li>
<li>樱桃</li>
<li>百香果</li>
</ul>
</li>
</ol>
</body>
</html>效果图
7.定义列表
<dl> 标签定义了一个包含术语定义以及描述的列表。
<dt> 标签用于定义列表中的项目（即术语部分）。
<dd> 标签用于定义列表中项目的描述部分。
html
<!DOCTYPE html>
<html>
<head>
<title>HTML学习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intinal-scale=1.0">
</head>
<body>
<p>定义列表</p>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，是一种用于创建网页的标准标记语言。</dd>
<dt>CSS</dt>
<dd>层叠样式，是一种用来表现HTML或者XML文件样式的语言。</dd>
<dt>JavaScript</dt>
<dd>简称js，是一种脚本编程语言。</dd>
</dl>
</body>
</html>效果图：
17表格
1.table元素
①定义：<table> 标签用于定义 HTML 表格。
②注意：简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 标签组成。
tr 元素定义表格中的行，th 元素定义表格中的表头，td 元素定义表格中的单元格。
更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。