Web前端开发 课件 第3章 HTML列表

第3章HTML列表主讲教师：朱铁樱《Web前端开发》3.1超链接的基本使用<a>标签定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性，它指示链接的目标。超链接的其它属性title属性：表示鼠标悬停在超链接上时显示的文本内容target属性：表示是否在新窗口打开超链接_self：

默认。在相同的窗口中打开被链接文档_blank：表示在新窗口中打开被链接文档3.2锚点在W3C标准字“Anchor”一词即为锚点，其解释为：资源中的某个区域，可以是零个、一个或多个链接的目标或源。锚点可以引用整个资源，或特定部分，或者资源的特定表现形式。锚点是一种超链接，它可以是页面内部的超链接。假如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。(例如：现在很多网站都使用的”回到顶部”按钮)页面内部的锚点如果一个a标签有name属性或者id属性，那么它是页面的一个锚点。可以让一个超链接指向页面中的锚点。锚点经常被用来快速定位到页面中的某一位置。<pid="top">顶部</p><h3>锚点的用法</h3><h3>锚点的用法</h3><h3>锚点的用法</h3>...<h3>锚点的用法</h3><h3>锚点的用法</h3><h3>锚点的用法</h3><ahref="#top">点我跳转到顶部</a>跨页面的锚点可以使用锚点实现从一个页面跳转到另一个页面的某个位置，而不是从页面顶部开始浏览。<ahref="anchors.html#bottom">跳转到anchors页面的底部</a><h3>锚点的用法</h3><h3>锚点的用法</h3><h3>锚点的用法</h3>...<h3>锚点的用法</h3><h3>锚点的用法</h3><h3>锚点的用法</h3><pid="bottom">底部</p>3.3图片与超链接结合使用在HTML页面上建立三个超链接，要求：点击第一个超链接可以跳转至百度主页，鼠标悬停时显示”百度主页“，并在新窗口中打开百度主页。点击第二个超链接可以跳转至当前页面的某一位置。点击第三个超链接可以跳转至另一页面的某一位置。<ahref="http:///"><imgsrc="img/baidu.jpg"></a>图片与超链接结合使用定义无序列表的基本语法格式<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>……</ul><ul>标签用于定义无序列表<li>标签用于描述具体的列表项每个<ul>标签中至少应包含一个<li>标签无序列表是网页中最常用的列表，之所以称为无序列表，是因为其各个列表项之间没有顺序级别之分，通常是并列的。3.4无序列表标签<ul>标签和<li>标签都拥有type属性，用于指定列表项目符号。列表项目符号是列表项前显示符号。当为type属性设置不同的属性值，可以呈现不同的符号。type属性值显示效果disc（默认值）●circle○square■3.4无序列表标签注意：1.HTML5不再支持<ul>标签的type属性，通常使用CSS样式设置。2.<ul>标签中需要嵌套<li>标签，不建议在<ul>标签中直接输入文本内容。3.4无序列表标签有序列表是指有排列顺序的列表，其各个列表项按照一定的顺序排列。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。3.5有序列表标签定义有序列表的基本语法格式<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>……</ol><ol>标签用于定义有序列表<li>标签为具体的列表项每个<ol>标签中至少应包含一个<li>标签3.5有序列表标签在有序列表中，除了type属性之外，还可以为<ol>标签定义start属性、为<li>标签定义value属性。属性属性值/属性值类型描述type1（默认）项目符号显示为数字1、2、3……a或A项目符号显示为英文字母a、b、c……或A、B、C……i或I项目符号显示为罗马数字i、ii、iii……或I、II、III……start数字规定全部列表项的初始值value数字规定当前列表项的初始值reversedreversed（可以省略）规定列表顺序为降序3.5有序列表标签案例演示3.5有序列表标签定义列表常用于对名词进行解释和描述，与无序列表和有序列表不同，定义列表的列表项前没有任何项目符号。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>……<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>……</dl><dl>标签用于指定定义列表<dd>标签用于对名词进行解释和描述一个<dt>标签可以对应多个<dd>标签<dt>标签用于指定名词3.6定义列表标签在网页设计中，定义列表常用于实现图文混排效果。其中，<dt>标签中插入图片，<dd>标签中放入对图片解释说明的文字。注意：1.<dl>、<dt>、<dd>三个标签之间不允许出现其他标签。2.<dl>标签必须与<dt>标签相邻。3.6定义列表标签商品分类子分类在网上购物商城中浏览商品时，经常会看到商品被分为若干类别，这些商品类别通常还包含若干的子类。同样，在使用列表时，列表项中也有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。列表的嵌套应用

<ul><li>列表项1</li><li>列表项2</li><li>

<ol> <li>列表项1</li