标签及属性学习
学习视频：B站小甲鱼《零基础入门学习web开发》
16. 列表元素
1.无序列表ul元素
①定义：<ul> 标签用于定义无序列表。列表内容用
- 标签包裹。列表元素左前方默认是黑色圆点。
-
2.有序列表ol元素
①定义：
<ol>标签用于定义有序列表。列表内容用<li>标签包裹。列表元素默认用阿拉伯数字排序。
②属性：
3.li元素
①定义：
<li>标签用于定义列表中的项目。列表实例
<!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 属性改变无序列表的标志，如方块、圆点、圆圈或者是隐藏。
<!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>效果图
2. list-style-type 属性可以设置有序列表的标志有：
5.list-style-image属性
list-style-image属性自定义列表的标志.
实例中应用的图片是16*16px的。<!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
<!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>标签用于定义列表中项目的描述部分。<!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>元素。
 "如何评价GPT-4o?(要点精简)")