大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。
本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储 ，文件 API，拖放 API，地理定位 API，Web Workers 入门。
视频教程+课件+源码 打包下载 ：
链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234
提取码：1234
HTML5（在第二阶段目录里）
HTML5 列表标签
HTML5 中常用列表标签主要有三类：无序列表 ul、有序列表 ol、描述/定义列表 dl ，其中 li 是列表项，dt、dd 用于定义列表。HTML5 强调语义化，列表应表达内容之间的并列、顺序或"名称---值"关系，而不是单纯用来做布局。
1. 无序列表 ul
表示一组没有先后顺序的列表项，每一项用 li 包裹。默认通常显示为圆点。
html
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>特点：
ul的直接子元素通常只能是li。- 没有特殊 HTML 属性，样式一般用 CSS 控制。
- 常用 CSS：
list-style-type: disc | circle | square | none;
css
ul {
list-style-type: square;
}2. 有序列表 ol
表示有先后顺序的列表，浏览器会自动编号。每一项同样用 li。
html
<ol>
<li>打开编辑器</li>
<li>编写 HTML</li>
<li>保存并预览</li>
</ol>常用属性：
start="5"：从第 5 项开始编号。reversed：倒序编号。type="1 | a | A | i | I"：编号类型，但 HTML5 更推荐用 CSSlist-style-type。li的value属性可在ol中改变当前项编号。
html
<ol start="3" reversed>
<li>第三项</li>
<li>第二项</li>
<li>第一项</li>
</ol>
html
<ol>
<li value="10">第十项</li>
<li>第十一项</li>
</ol>3. 列表项 li
li 表示列表中的一项，通常作为 ul 或 ol 的直接子元素。
html
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系方式</li>
</ul>li 内部可以放文本、链接、图片、段落，甚至嵌套新的列表。
html
<li>
<a href="/html">HTML 教程</a>
</li>注意：不要写成：
html
<ul>
<li>父项</li>
<ul>
<li>子项</li>
</ul>
</ul>正确写法是把嵌套列表放在 li 里面。
4. 定义列表 dl、dt、dd
dl 表示描述列表或定义列表。
dt 表示术语、名称或键。
dd 表示对 dt 的描述、定义或值。
html
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于描述网页结构。</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于控制网页表现。</dd>
</dl>规则和特点：
dl里面通常放dt和dd。- 一个
dt可以对应多个dd。 - 多个
dt也可以共享一个dd。 - HTML5 中
dl不只用于"定义术语"，也可表示名称---值对，例如商品参数、用户信息等。
html
<dl>
<dt>姓名</dt>
<dd>张三</dd>
<dt>电话</dt>
<dd>13800000000</dd>
</dl>一个 dt 对应多个 dd：
html
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>橙子</dd>
</dl>5. 嵌套列表
列表可以嵌套，用来表示多级结构，例如菜单、目录、分类等。
无序列表嵌套
html
<ul>
<li>前端
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>后端
<ol>
<li>Java</li>
<li>Python</li>
<li>Node.js</li>
</ol>
</li>
</ul>关键点：
- 嵌套列表必须放在上一层的
li内部。 - 可以
ul嵌套ul，也可以ul嵌套ol，或ol嵌套ul。 - 不同层级可以用 CSS 设置不同标记样式。
css
ul {
list-style-type: disc;
}
ul ul {
list-style-type: circle;
}
ul ul ul {
list-style-type: square;
}定义列表中的嵌套
html
<dl>
<dt>Web 前端</dt>
<dd>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</dd>
</dl>6. 完整示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 列表标签</title>
</head>
<body>
<h1>HTML5 列表标签</h1>
<h2>无序列表 ul</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<h2>有序列表 ol</h2>
<ol>
<li>打开编辑器</li>
<li>编写 HTML</li>
<li>保存并预览</li>
</ol>
<h2>定义列表 dl、dt、dd</h2>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于描述网页结构。</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于控制网页表现。</dd>
</dl>
<h2>嵌套列表</h2>
<ul>
<li>前端
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>后端
<ol>
<li>Java</li>
<li>Python</li>
<li>Node.js</li>
</ol>
</li>
</ul>
</body>
</html>