Web前端开发案例教程 第2版 课件2.4 列表标签

单元二新闻页制作—HTML5常用标签软件工程技术专业SoftwareTechnologyWeb前端设计与开发

常见的网页中主要包含图片、文字、超链接。这些内容均是使用HTML5标签实现，本单元开始学习HTML的各类标签，掌握网页设计中的相关元素。主要包括：2.1文本标签2.2列表标签2.3分隔线标签2.4图片标签2.5超链接标签2.6多媒体标签-Web页面音视频播放2.7标签类型2.8meta标签课程导学知识点实战举例课程导学单元总结学习目标1.知识目标（1）掌握并熟练应用HTML文本标签；（2）掌握并熟练应用列表标签；（3）掌握并熟练应用图片标签；（4）掌握并熟练应用超链接标签；（5）掌握并熟练应用多媒体标签；（6）掌握并熟练应用头部标签。2.能力目标（1）能熟练使用HTML文本标签、列表标签、图片标签、超链接标签、多媒体标签和头部标签搭建基本静态网页；（2）能使用HTML语言设计一个网页并运行。3.素质目标（1）具有质量意识、安全意识、工匠精神和创新思维；（2）具有集体意识和团队合作精神；（3）具有界面设计审美和人文素养；（4）熟悉软件开发流程和规范，具有良好的编程习惯。课程导学知识点实战举例课程导学单元总结2.4.1有序列表

有序列表使用编号，而不是项目符号来编排项目。列表中的项目由数字或英文字母开头，通常各项目间有先后的顺序性。在有序列表中，主要使用<ol>和<li>两个标签以及type和start属性。有序列表的基本语法如下：<ol

type="列表项的标记符"

start="起始值">

<li>项目一</li>

<li>项目二</li>

<li>项目三</li>

...</ol>

在有序中列表中，使用<ol>作为有序列表的声明，使用<li>作为每一个项目的开始。start属性定义列表项开始编号的位置序号。在有序列表的默认情况下，使用数字符号作为列表的开始，但可以通过type属性将有序列表的类型设置为英文或罗马字母。Type属性各个取值的含义见下表：type值说明1默认值。数字有序列表(1、2、3、4……)a按小写字母顺序排列的有序列表(a、b、c、d……)A按大写字母顺序排列的有序列表(A、B、C、D……)ⅰ按小写罗马字母顺序排列的有序列表(ⅰ、ⅱ、ⅲ、ⅳ……)Ⅰ按大写罗马字母顺序排列的有序列表(Ⅰ、Ⅱ、Ⅲ、Ⅳ……)课程导学知识点实战举例2.4列表标签-网站导航栏单元总结课程导学知识点实战举例2.2列表标签-网站导航栏单元总结2.4.1有序列表2.4.2无序列表

在无序列表中，各个列表之间没有顺序级别之分，通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用<ul>、<li>标签和type属性，其中标签<ul>定义无序列表，<li>标签定义列表项，列表项的内容位于一对<li></li>标签之内，<ul>标签内的type属性用来定义列表项的标记符。无序列表的基本语法如下：<ul

type="列表的标记符">

<li>项目一</li>

<li>项目二</li>

<li>项目三</li>

...</ul>其中type属性的取值定义如下：disc是默认值，为实心圆。circle为空心圆。square为实心方块。在HTML页面中，列表可以使相关的内容以一种整齐划一的方式显示。列表分三种模式课程导学知识点实战举例2.4列表标签-网站导航栏单元总结2.4.3嵌套列表-网站导航栏

嵌套列表指在一个列表项的定义中嵌套另一个列表的定义。很多网站的导航栏就应用嵌套列表加上CSS样式设置完成。课程导学知识点