兰州建设局网站公告,制作团体网站,seo网站推广教程,中国建设网银HTML 列表语法知识点及案例代码
一、HTML 列表类型
HTML 提供了三种列表类型#xff1a;
无序列表 (Unordered List)#xff1a;使用 ul 标签定义#xff0c;列表项使用 li 标签定义。默认情况下#xff0c;列表项前面会显示黑色圆点。有序列表 (Ordere…HTML 列表语法知识点及案例代码
一、HTML 列表类型
HTML 提供了三种列表类型
无序列表 (Unordered List)使用 ul 标签定义列表项使用 li 标签定义。默认情况下列表项前面会显示黑色圆点。有序列表 (Ordered List)使用 ol 标签定义列表项使用 li 标签定义。默认情况下列表项前面会显示数字序号。定义列表 (Definition List)使用 dl 标签定义包含术语 (dt) 和描述 (dd) 两部分。
二、列表语法知识点 基本语法 !-- 无序列表 --
ulli列表项 1/lili列表项 2/lili列表项 3/li
/ul!-- 有序列表 --
olli列表项 1/lili列表项 2/lili列表项 3/li
/ol!-- 定义列表 --
dldt术语 1/dtdd描述 1/dddt术语 2/dtdd描述 2/dd
/dl列表属性 type 属性 (仅适用于 ul 和 ol)指定列表项标记的类型。 ul 的 type 属性值 disc (默认)实心圆点circle空心圆点square实心方块 ol 的 type 属性值 1 (默认)数字 (1, 2, 3, …)A大写字母 (A, B, C, …)a小写字母 (a, b, c, …)I大写罗马数字 (I, II, III, …)i小写罗马数字 (i, ii, iii, …) start 属性 (仅适用于 ol)指定列表项序号的起始值。reversed 属性 (仅适用于 ol)指定列表项序号是否倒序排列。 嵌套列表 列表可以嵌套使用例如在 li 标签内再嵌套一个 ul 或 ol。
三、案例代码
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleHTML 列表示例/title
/head
bodyh2无序列表/h2ulli咖啡/lili茶/lili牛奶/li/ulh2有序列表/h2olli打开冰箱/lili拿出牛奶/lili关上冰箱/li/olh2定义列表/h2dldtHTML/dtdd超文本标记语言/dddtCSS/dtdd层叠样式表/dd/dlh2嵌套列表/h2ulli水果ulli苹果/lili香蕉/lili橙子/li/ul/lili蔬菜ulli菠菜/lili胡萝卜/lili西红柿/li/ul/li/ulh2列表属性/h2ul typesquareli正方形标记 1/lili正方形标记 2/li/ulol typeA start3li从 C 开始的大写字母/liliD/liliE/li/olol reversedli倒序排列 3/lili倒序排列 2/lili倒序排列 1/li/ol/body
/html四、代码注释
!DOCTYPE html声明文档类型为 HTML5。html langzh-CN定义文档语言为中文。head包含文档的元数据例如标题、字符编码等。title定义文档标题显示在浏览器标签页上。body包含文档的主体内容。h2定义二级标题。ul定义无序列表。ol定义有序列表。dl定义定义列表。li定义列表项。dt定义术语。dd定义描述。type 属性指定列表项标记的类型。start 属性指定列表项序号的起始值。reversed 属性指定列表项序号是否倒序排列。
五、总结
HTML 列表是网页中常用的元素可以有效地组织和展示信息。掌握列表的语法和属性可以帮助你创建更加清晰、易读的网页内容。
当然可以以下是一些实际开发中常见的 HTML 列表应用场景和具体案例代码 1. 导航菜单
导航菜单通常使用无序列表 (ul) 来实现结合 CSS 可以创建美观的导航栏。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title导航菜单示例/titlestyle/* 简单样式 */ul.nav {list-style-type: none; /* 去掉默认的圆点 */margin: 0;padding: 0;background-color: #333;overflow: hidden;}ul.nav li {float: left; /* 横向排列 */}ul.nav li a {display: block;color: white;text-align: center;padding: 14px 20px;text-decoration: none;}ul.nav li a:hover {background-color: #555;}/style
/head
bodyh2导航菜单/h2ul classnavlia href#home首页/a/lilia href#news新闻/a/lilia href#about关于我们/a/lilia href#contact联系我们/a/li/ul
/body
/html2. 步骤说明
有序列表 (ol) 常用于展示步骤或流程。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title步骤说明示例/titlestyleol.steps {line-height: 1.6;}ol.steps li {margin-bottom: 10px;}/style
/head
bodyh2如何煮咖啡/h2ol classstepsli准备咖啡豆和研磨机。/lili将咖啡豆研磨成适合的粗细。/lili将滤纸放入滤杯中并用热水润湿。/lili加入研磨好的咖啡粉轻轻拍平。/lili缓慢注入热水进行萃取。/lili等待萃取完成倒入杯中享用。/li/ol
/body
/html3. 常见问题解答 (FAQ)
定义列表 (dl) 非常适合用于展示问题和答案。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title常见问题解答示例/titlestyledl.faq dt {font-weight: bold;margin-top: 15px;color: #2c3e50;}dl.faq dd {margin-left: 20px;color: #34495e;}/style
/head
bodyh2常见问题解答/h2dl classfaqdtQ: 如何注册账号/dtddA: 点击首页的“注册”按钮填写相关信息即可完成注册。/dddtQ: 忘记密码怎么办/dtddA: 在登录页面点击“忘记密码”按照提示重置密码。/dddtQ: 如何联系客服/dtddA: 您可以通过邮箱 supportexample.com 或电话 123-456-7890 联系客服。/dd/dl
/body
/html4. 商品分类
无序列表 (ul) 可以用于展示商品分类或目录结构。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title商品分类示例/titlestyleul.categories {list-style-type: none;padding: 0;}ul.categories li {background-color: #f9f9f9;margin: 5px 0;padding: 10px;border-left: 5px solid #3498db;}ul.categories li:hover {background-color: #ecf0f1;}/style
/head
bodyh2商品分类/h2ul classcategoriesli电子产品/lili家用电器/lili服装鞋帽/lili食品饮料/lili图书音像/li/ul
/body
/html5. 嵌套列表
嵌套列表可以用于展示多级结构例如文件目录或组织架构。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title嵌套列表示例/titlestyleul.directory {list-style-type: none;padding-left: 20px;}ul.directory li {margin: 5px 0;}ul.directory li::before {content: ;}/style
/head
bodyh2文件目录结构/h2ul classdirectoryli项目文件夹ullicssullistyle.css/li/ul/lilijsullimain.js/li/ul/liliimages/liliindex.html/li/ul/li/ul
/body
/html6. 带图标的列表
结合 Font Awesome 或自定义图标可以创建更丰富的列表。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title带图标的列表示例/titlelink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.cssstyleul.icon-list {list-style-type: none;padding: 0;}ul.icon-list li {margin: 10px 0;}ul.icon-list li i {margin-right: 10px;color: #3498db;}/style
/head
bodyh2功能列表/h2ul classicon-listlii classfas fa-check/i支持多种文件格式/lilii classfas fa-check/i实时同步数据/lilii classfas fa-check/i跨平台支持/lilii classfas fa-check/i强大的安全保障/li/ul
/body
/html总结
以上案例展示了 HTML 列表在实际开发中的多种应用场景包括导航菜单、步骤说明、常见问题解答、商品分类、嵌套列表和带图标的列表。通过这些案例你可以更好地理解如何灵活运用 HTML 列表来构建清晰、结构化的网页内容。
