【技术专题】HTML5 网页技术 - HTML5 列表标签

📅 发布时间:2026/10/15 13:03:58
【技术专题】HTML5 网页技术 - HTML5 列表标签
大家好我是Java1234_小锋老师最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑感谢大家支持。本课程主要介绍和讲解 HTML5简介文档结构文本与排版标签链接与图片列表标签表格标签表单基础以及增强容器与页面结构基础语义化标签音频与视频Canvas 基础以及动画入门SVG 基础Web Storage 本地存储 文件 API拖放 API地理定位 APIWeb Workers 入门。视频教程课件源码 打包下载 链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234HTML5在第二阶段目录里HTML5 列表标签HTML5 中常用列表标签主要有三类无序列表 ul、有序列表 ol、描述/定义列表 dl其中li是列表项dt、dd用于定义列表。HTML5 强调语义化列表应表达内容之间的并列、顺序或“名称—值”关系而不是单纯用来做布局。1. 无序列表ul表示一组没有先后顺序的列表项每一项用li包裹。默认通常显示为圆点。ulli苹果/lili香蕉/lili橙子/li/ul特点ul的直接子元素通常只能是li。没有特殊 HTML 属性样式一般用 CSS 控制。常用 CSSlist-style-type: disc | circle | square | none;ul{list-style-type:square;}2. 有序列表ol表示有先后顺序的列表浏览器会自动编号。每一项同样用li。olli打开编辑器/lili编写 HTML/lili保存并预览/li/ol常用属性start5从第 5 项开始编号。reversed倒序编号。type1 | a | A | i | I编号类型但 HTML5 更推荐用 CSSlist-style-type。li的value属性可在ol中改变当前项编号。olstart3reversedli第三项/lili第二项/lili第一项/li/olollivalue10第十项/lili第十一项/li/ol3. 列表项lili表示列表中的一项通常作为ul或ol的直接子元素。ulli首页/lili关于我们/lili联系方式/li/ulli内部可以放文本、链接、图片、段落甚至嵌套新的列表。liahref/htmlHTML 教程/a/li注意不要写成ulli父项/liulli子项/li/ul/ul正确写法是把嵌套列表放在li里面。4. 定义列表dl、dt、dddl表示描述列表或定义列表。dt表示术语、名称或键。dd表示对dt的描述、定义或值。dldtHTML/dtdd超文本标记语言用于描述网页结构。/dddtCSS/dtdd层叠样式表用于控制网页表现。/dd/dl规则和特点dl里面通常放dt和dd。一个dt可以对应多个dd。多个dt也可以共享一个dd。HTML5 中dl不只用于“定义术语”也可表示名称—值对例如商品参数、用户信息等。dldt姓名/dtdd张三/dddt电话/dtdd13800000000/dd/dl一个dt对应多个dddldt水果/dtdd苹果/dddd香蕉/dddd橙子/dd/dl5. 嵌套列表列表可以嵌套用来表示多级结构例如菜单、目录、分类等。无序列表嵌套ulli前端ulliHTML/liliCSS/liliJavaScript/li/ul/lili后端olliJava/liliPython/liliNode.js/li/ol/li/ul关键点嵌套列表必须放在上一层的li内部。可以ul嵌套ul也可以ul嵌套ol或ol嵌套ul。不同层级可以用 CSS 设置不同标记样式。ul{list-style-type:disc;}ul ul{list-style-type:circle;}ul ul ul{list-style-type:square;}定义列表中的嵌套dldtWeb 前端/dtddulliHTML/liliCSS/liliJavaScript/li/ul/dd/dl6. 完整示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleHTML5 列表标签/title/headbodyh1HTML5 列表标签/h1h2无序列表 ul/h2ulli苹果/lili香蕉/lili橙子/li/ulh2有序列表 ol/h2olli打开编辑器/lili编写 HTML/lili保存并预览/li/olh2定义列表 dl、dt、dd/h2dldtHTML/dtdd超文本标记语言用于描述网页结构。/dddtCSS/dtdd层叠样式表用于控制网页表现。/dd/dlh2嵌套列表/h2ulli前端ulliHTML/liliCSS/liliJavaScript/li/ul/lili后端olliJava/liliPython/liliNode.js/li/ol/li/ul/body/html