任务4.3 网页文字列表设计

模块4网页文本设计任务4.3网页文字列表设计网页设计项目教程（HTML5+CSS3+JavaScript）任务描述理解网页文字列表的作用与分类文字列表能够对相关元素进行分组，并赋予其意义和结构，让浏览者更快捷地获取信息。常见应用新闻列表活动列表导航链接列表推荐阅读书目产品特性清单三种列表无序列表<ul>—项目符号有序列表<ol>—顺序编号自定义列表<dl>—名词+解释列表的优势结构化信息呈现提升信息获取效率便于浏览与扫读代码简洁、语义清晰便于样式美化4.3知识体系概览：HTML三种列表无序列表、有序列表与自定义列表01无序列表<ul>项目排列无顺序，仅以符号标识。常见符号：●disc实心圆○circle空心圆■square小方块支持多级嵌套。02有序列表<ol>项目按顺序自动编号，支持多种编号样式：1数字A大写字母a小写字母I大写罗马数字i小写罗马数字可通过start/value控制起号。03自定义列表<dl>项目及其注释的组合，由<dt>定义名词，<dd>提供对应解释。常用于术语表、问答对、键值描述等场景。4.3.1建立无序列表<ul>与<li>实现项目符号列表基本语法<ul><li>列表项一</li><li>列表项二</li>...</ul>•<ul>标记整组无序列表•<li>标记每一个列表项•浏览器自动在每项前添加符号•列表项中可以再嵌套一个列表type属性：列表项符号type="disc"实心圆●(默认)type="circle"空心圆○type="square"小方块■使用要点：•属性写在<ul>或<li>的起始标签中•不写type时，浏览器默认使用disc•列表支持多级嵌套（子列表可再次指定符号）•实际开发中更推荐用CSS(list-style)设置符号样式嵌套列表展示三类项目符号(disc/circle/square)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>无序列表</title></head><body><ultype="disc"><li>编程语言<ultype="circle"><li>Python</li><li>JavaScript</li><li>Java</li></ul></li><li>前端技术<ultype="square"><li>HTML</li><li>CSS</li><li>React</li></ul></li></ul></body></html>图4-14无序列表浏览器运行效果案例演示4-14：无序列表4.3.2建立有序列表<ol>实现自动编号，并支持多种编号样式基本语法<ol><li>列表项一</li><li>列表项二</li>...</ol>•与<ul>类似，将标签换为<ol>•增删列表项时编号自动调整•type属性改变编号样式•start属性指定起始编号•<livalue="n">改写特定项编号表4-3<ol>的type属性type取值说明type="1"列表项目用数字标号(1,2,3…)type="A"列表项目用大写字母(A,B,C…)type="a"列表项目用小写字母(a,b,c…)type="I"列表项目用大写罗马数字(Ⅰ,Ⅱ,Ⅲ…)type="i"列表项目用小写罗马数字(i,ii,iii…)案例演示4-15：有序列表对比默认数字、大写字母、大写罗马数字三种编号样式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>有序列表</title></head><body><h3>1.默认有序列表(type="1")</h3><ol><li>准备学习资料</li><li>制定学习计划</li><li>按计划执行学习</li><li>复习并总结</li></ol><h3>2.type="A"(大写字母编号)</h3><oltype="A"><li>第一阶段：基础语法学习</li><li>第二阶段：实战案例练习</li><li>第三阶段：项目开发实践</li></ol><h3>3.type="I"(大写罗马数字编号)</h3><oltype="I"><li>预习课程内容</li><li>参与课堂讨论</li><li>完成课后作业</li><li>参加单元测试</li></ol></body></html>图4-15有序列表浏览器运行效果4.3.3建立自定义列表<dl>/<dt>/<dd>实现“名词+解释”结构基本语法<dl><dt>名词一</dt><dd>解释一</dd><dt>名词二</dt><dd>解释二</dd>...</dl>•<dl>定义一个自定义列表•<dt>定义需要解释的名词（术语）•<dd>提供对应名词的解释•一个<dl>中可包含多组dt/dd•HTML5中允许<dt>内嵌套多个<dd>适用场景术语表/名词解释问答(FAQ)对照产品参数键值对作者/作品/简介课程章节标题+内容使用要点：•<dt>与<dd>须成对出现并写在<dl>内•<dd>默认相对<dt>缩进显示•可结合CSS灵活调整排版样式•与<ul>/<ol>不可互相替代，语义不同用<dl>描述前端三大核心技术的职责<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>自定义列表</title></head><body><dl><dt>HTML</dt><dd>负责页面的结构和语义</dd><dt>CSS</dt><dd>负责页面的样式和布局</dd><dt>JavaScript</dt><dd>负责页面的交互和动态效果</dd></dl></body></html>图4-16自定义列表浏览器运行效果案例演示4-16：自定义列表任务实施&单元实训综合运用三种列表完成一个主题页面任务实施：我的爱好（示例）主题：综合标题、段落与三种列表构建一个“我的爱好”介绍页面页面要素：•<h1>标题：我的爱好介绍•<p>引言段落•<h2>分节：阅读、跑步、摄影•<ul>无序列表：书籍类型/跑步目标•<ol>有序列表：学习步骤•<dl>自定义列表：术语解释•<style>内联CSS美化样式单元实训：校园读书节通知设计一个校园读书节活动通知页面，要求：•活动标题与副标题•活动时间、地点等基本信息•活动流程安排（有序列表）•推荐阅读书目（无序/自定义列表）•参与方式及注意事项（有序列表）•联系人和联系方式（自定义列表）提示：结合CSS美化排版注意标签语义化模块小结&练习与实训巩固本章知识，提升列表设计能力模块小结•网页文本设计涵盖内容规划、字体、排版、颜色与交互。•本章学习了文本插入与特殊样式(粗体/斜体/上下标等)。•学习了段落标记<p>与标题标记<h1>–<h6>。•学习了三种文字列表的创建方法：—无序列表<ul>/<li>—有序列表<ol>/<li>—自定义列表<dl>/<dt>/<dd>•合理使用列表能让信息更清晰、更易获取。•实际开发中建议结合CSS美化列表外观。练