HTML5+CSS3网页设计基础-第二章-网页基本元素课件

第1页第2章网页基本元素本章概述本章的学习目标主要内容第1页第2章网页基本元素本章概述第2页本章概述随着网络技术的发展，网页内容也更加丰富多样。展示网页内容的元素包括文本、图像、列表、表格、链接等，本章将具体介绍页面上常用的各种元素的标签及其属性。第2页本章概述随着网络技术的发展，网页内容也更加丰富多样。展第3页本章的学习目标掌握文本控制标签的功能和使用方法。掌握图像标签及其各属性的功能和使用方法。掌握网页上常用超链接的设置方法。掌握列表标签及其属性的功能和使用方法。掌握表格标签及其属性的功能和使用方法。掌握页面交互元表的功能和用法。掌握综合应用各种页面元素标签及其属性制作页面的方法。第3页本章的学习目标掌握文本控制标签的功能和使用方法。第4页主要内容2.1文本控制标签2.2图像标签2.3超链接标签2.4列表2.5表格2.6页面交互标签2.7实训2.8本章小结第4页主要内容2.1文本控制标签第5页2.1文本控制标签本节主要内容：标题标签段落标签换行标签水平线标签文本格式化标签范围标签注释标签特殊符号第5页2.1文本控制标签本节主要内容：第6页2.1.1案例分析【案例展示】招商加盟-加盟中心局部页面的设计。使用标题标签、段落标签、换行标签、水平线标签、文本格式控制标签等，设计招商加盟-加盟中心局部页面，【知识要点】标题标签、段落标签、换行标签、水平线标签、文本格式控制标签等网页元素。【学习目标】掌握标题标签、段落标签、换行标签、水平线标签、文本格式控制标签的作用并灵活应用。参考代码：2-1.html第6页2.1.1案例分析【案例展示】招商加盟-加盟中心局第7页2.1.2标题标签语法格式：<hnalign="left|center|right">标题文字</hn>说明：

n的取值为1到6。align为可选属性，用来设置标题在页面的对齐方式，取值left（左对齐）、center（居中对齐）、right（右对齐），默认取值left。参考示例：2-1-1.html第7页2.1.2标题标签语法格式：<hnalign=第8页2.1.3段落标签语法格式：<palign="left|center|right">段落文字</p>说明：

参数align的取值和功能参考标题标签中说明第8页2.1.3段落标签语法格式：<palign="第9页2.1.4换行标签语法格式：文字<br/>或<br/>文字使用换行标签，可以使页面内容整齐、美观。第9页2.1.4换行标签语法格式：文字<br/>或第10页2.1.5水平线标签语法格式：<hralign="left|center|right"size="n"width="n|%"color="color"noshade="noshade"/>属性介绍：align：参考标题标签中align说明。size：设置水平线的粗细，n取正整数，默认为2像素。width：设置水平线的长度，n取正整数表示确定的像素值，也可以是浏览器窗口的百分比，默认为100%。color：设置水平线的颜色，默认黑色。可以用颜色名称、十六进制#RGB或rgb(r,g,b)来表示。noshade：设置水平线是否要阴影，默认有阴影。例：定义一条水平线，居中显示、粗5px、宽400px、红色、无阴影。代码如下。<hralign="center"size="5"width="400"color="red"noshade="noshade"/>第10页2.1.5水平线标签语法格式：<hralign第11页2.1.6文本格式化标签参考示例：2-1-2.html标签显示效果<b></b>和<strong></strong>文字以粗体方式显示，b定义文本粗体，strong定义强调文本<i></i>和<em></em>文字以斜体方式显示，i定义斜体字，em定义强调文本<s></s>和<del></del>文字以加删除线方式显示(HTML5不赞成使用s)<u></u>和<ins></ins>文字以加下划线方式显示(HTML5不赞成使用u)<mark></mark>文字高亮显示<cite></cite>创建一个引用标记，被标记的文字以斜体的方式显示第11页2.1.6文本格式化标签标签显示效果<b></b第12页2.1.7范围标签语法格式：<span>区域元素</span>说明：<span>与</span>之间只能包含文本和各种行内标签，用来定义网页中某些特殊显示的文本，配合class属性使用。它本身没有固定的格式表现，只有应用样式时，才会产生视觉上的变化。第12页2.1.7范围标签语法格式：<span>区域元素第13页2.1.8注释标签语法格式：<!--注释内容

-->说明：注释内容可以为一行，也可以为多行。并且开始标签和结束标签可以不在一行上。第13页2.1.8注释标签语法格式：<!--注释内容第14页2.1.9特殊符号特殊符号描述字符的代码

空格符

<

小于号<>大于号>&和号&￥人民币¥©版权©®注册商标®º摄氏度°±正负号±×乘号×÷除号÷第14页2.1.9特殊符号特殊符号描述字符的代码空格符2.1.10案例制作制作完成演示案例:加盟中心。参考代码2-1.html第15页2.1.10案例制作制作完成演示案例:加盟中心。第15页第16页2.2图像标签

本节主要内容：常用图像格式图像标签及其属性绝对路径与相对路径第16页2.2图像标签本节主要内容：第17页2.2.1案例分析【案例展示】新闻动态-资讯详情局部页面的设计。使用图像标签，标题标签、段落标签等，设计完成资讯详情局部页面的设计。【知识要点】图像标签的定义、图像属性设置、图文混排。【学习目标】掌握图像格式设置和图文混排技术。参考代码：2-2.html第17页2.2.1案例分析【案例展示】新闻动态-资讯详情第18页2.2.2常用图像格式网页图像有三种常用的格式：GIF、JPG和PNG。具体区别如下。（1）GIF格式GIF格式支持动画，同时GIF格式也是一种无损的图像格式。再加上GIF格式支持透明(全透明或全不通明)，因此很适合在互联网上使用。GIF格式文件最多使用256种颜色，适合显示色调不连续或具有大面积单一颜色的图像，如Logo、小图标及其他色彩相对单一的图像。（2）PNG格式PNG格式是一种替代GIF格式的无专利权限制的格式。PNG格式最大的优势是体积更小，支持alpha透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG格式不支持动画。它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。（3）JPG格式JPG格式所能显示的颜色比GIF格式和PNG格式要多得多，可以用来保存超过256种颜色的图像。JPG格式主要用于摄影或者连续色调图像。第18页2.2.2常用图像格式网页图像有三种常用的格式：2.2.3图像标签及其属性语法格式：

<imgsrc="图像URL"width="图像宽度"height="图像高度"alt="替代文字"border="边框宽度"align="对齐方式"title="文字"hspace="空白宽度"vspace="空白高度"/>第19页2.2.3图像标签及其属性语法格式：第19页2.2.3图像标签及其属性属性介绍：

src：用于指定图像文件的路径和文件名，是标签的必需属性。width：设置图像的显示宽度，单位是像素或百分比。height：设置图像的显示高度，单位是像素或百分比。alt：图像不能显示时，代替图像的说明文字。border：设置图像边框的宽度，单位是像素。align：设置图像的对齐方式，取值left、center、right。title：鼠标指向图片时，显示的提示文字。

/tags/att_img_hspace_vspace.asp：定义图像左侧和右侧的空白。vspace：定义图像顶部和底部的空白。第20页2.2.3图像标签及其属性属性介绍：第20页2.2.3图像标签及其属性指定图像大小：

用width和height属性用来定义图片的宽度和高度，其目的是通过指定图像的高度和宽度加快图像的下载速度。参考示例：2-2-1.html第21页2.2.3图像标签及其属性指定图像大小：第21页2.2.3图像标签及其属性指定图像的替换文本：alt属性指定的替换文本参考示例：2-2-2.html第22页2.2.3图像标签及其属性指定图像的替换文本：第22页2.2.3图像标签及其属性指定图像的边框：

通过border属性可以为图像添加边框，设置边框的宽度，添加边框后的图像显得更醒目、美观。边框的颜色默认黑色，不可调整。参考示例：2-2-3.html第23页2.2.3图像标签及其属性指定图像的边框：第23页2.2.3图像标签及其属性指定图像的对齐方式：

图文混排技术是指设置图像与同一行中的文本、图像、插件或其它元素的对齐方式。默认情况下图像的底部会相对于于文本的第一行文字对齐。但是在制作网页的过程中，有时需要实现图像和文字的环绕效果，这就需要使用图像的对齐属性align。参考示例：2-2-4.html第24页2.2.3图像标签及其属性指定图像的对齐方式：第24页2.2.4绝对路径与相对路径网页中路径分两种：绝对路径和相对路径。1.绝对路径

绝对路径是包括通信协议名、服务器名、路径及文件名的完整路径，是网页上的文件或目录在硬盘上的真正路径。2.相对路径

相对路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标文件的位置。第25页2.2.4绝对路径与相对路径网页中路径分两种：绝对路径和2.2.5案例制作制作完成演示案例:资讯详情局部页面。参考代码2-2.html第26页2.2.5案例制作制作完成演示案例:资讯详情局部页面。第第27页2.3超链接标签本节主要内容：超链接简介超链接的应用第27页2.3超链接标签本节主要内容：第28页2.3.1案例分析【案例展示】链接案例—网站信息页面。使用页面间链接、网站间链接、可下载文件链接等知识，制作网站信息页面。【知识要点】超链接的定义、页面间链接、网站间链接、下载文件链接等。【学习目标】掌握各种超链接

的应用场合和实现技术。参考代码：2-3.html第28页2.3.1案例分析【案例展示】链接案例—网站信息2.3.2超链接简介语法格式：<ahref="url"targrt="窗口名称">超文本</a>说明：

在上面的语法中，<a>标签用于定义超链接，href和target为其常用属性。href：用于指定链接目标的url地址。需要创建空链接时，用“#”代替URL。target：用于指定链接页面的打开方式，常用的取值有_self和_blank两种，_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。第29页2.3.2超链接简介语法格式：<ahref="url"2.3.3超链接的应用1.站内页面之间的链接

同一网站域名下的各页面之间可以用超链接实现互相链接访问。

例如，在首页以外的其他页面上，点击超链接“首页”返回网站首页。代码如下。<ahref="index.html"target="_self">首页</a><br/>4.下载链接5.图像做超链接6.锚记链接第30页2.3.3超链接的应用1.站内页面之间的链接第30页2.3.3超链接的应用2.网站之间的链接不同网站之间通过超链接实现信息和资源共享。例如，在网页上，点击超链接“163邮箱”打开163网易邮箱首页。代码如下。<ahref=""target="_blank">163邮箱</a><br/>例如，点击超链接“百度百科—超链接”打开百度百科网站上关于超链接介绍的页面。代码如下。<ahref="/item/%E8%B6%85%E9%93%BE%E6%8E%A5/97857?fr=aladdin"target="_blank">百度百科--超链接</a><br/>第31页2.3.3超链接的应用2.网站之间的链接第31页2.3.3超链接的应用3.媒体链接

超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。

例如，点击超链接“MP4视频”打开视频文件并开始播放。代码如下。<ahref="media/movie.mp4"target="_blank">MP4视频</a><br/>第32页2.3.3超链接的应用3.媒体链接第32页2.3.3超链接的应用4.下载链接如果超链接指向不是一个网页文件，而是其他文件，如doc、xls、zip、rar文件等，单击链接时就会下载相应的文件。例如，点击超链接“合作协议下载”，开始下载文件。代码如下。<ahref="datum/合作协议.zip">合作协议下载</a> <br/>注意：在项目文件夹的datum目录里，有“合作协议.zip”文件，才能点击下载。第33页2.3.3超链接的应用4.下载链接第33页2.3.3超链接的应用5.图像做超链接

为了增加页面的美观性，有时用图像代替文字做超链接。例如，超链接中的“首页”超文本，用图片替换。代码如下。<ahref="index.html"target="_self"><imgsrc="img/nav1.gif"></a><br/>

链接图像在低版本的IE浏览器中会添加边框效果，去掉链接图像的边框只需将边框定义为0即可。第34页2.3.3超链接的应用5.图像做超链接第34页2.3.3超链接的应用6.锚记链接

创建锚记链接，需要两个步骤。(1)首先定义锚记名称。

格式1：<aname="锚记名">目标附近的文本</a>

格式2：<Eid=="id名">网页内容…</E>，E代表html标签，如p、hn、div等。(2)然后，定义锚记链接。点击超文本时，跳转到锚记名或id名开始的位置。

格式：<ahref="锚记名|#id名">超文本</a>第35页2.3.3超链接的应用6.锚记链接第35页2.3.4案例制作制作完成演示案例:网站信息页面。参考代码2-3.html第36页2.3.4案例制作制作完成演示案例:网站信息页面。第36第37页2.4列表

本节主要内容：无序列表有序列表定义列表嵌套列表第37页2.4列表本节主要内容：第38页2.4.1案例分析【案例展示】招商加盟--合作方式局部页面。使用多种列表技术设计招商加盟--合作方式页面。【知识要点】无序列表、有序列表、定义列表和嵌套列表【学习目标】掌握各种列表的使用方法和列表嵌套技术。参考代码：2-4.html第38页2.4.1案例分析【案例展示】招商加盟--合作方2.4.2无序列表语法格式：

<ultype="符号类型"> <li>列表项1</li> <li>列表项2</li> ……</ul>

属性type定义无序列表的前导符号。取值circle（圆圈）、disc（圆点）和square（方块），默认disc。参考示例：2-4-1.html第39页2.4.2无序列表语法格式：第39页2.4.3有序列表语法格式：<oltype="符号类型"start="编号起始值"reversed="reversed"> <li>列表项1</li> <li>列表项2</li> ……</ol>

属性介绍：type：列表项的符号类型，取值1（阿拉伯数字）、a（小写英文字母）、A（大写英文字母）、i（小写罗马数字）、I（大写罗马数字），默认符号是阿拉伯数字。start：列表项编号的起始值，取值正整数。默认取值1，即编号从1开始。reversed：是否对列表项反向排序，当取值为“reversed”时，反向排序。参考示例：2-4-2.html第40页2.4.3有序列表语法格式：第40页2.4.4定义列表语法格式：

<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></dl>标签指定定义列表，<dt></dt>标签指定列表项的标题，<dd></dd>标签对标题进行描述。参考示例：2-4-3.html第41页2.4.4定义列表语法格式：第41页2.4.5嵌套列表所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。参考示例：2-4-4.html第42页2.4.5嵌套列表所谓嵌套列表就是无序列表与有序列表嵌套2.4.6案例制作制作完成演示案例:合作方式局部页面。参考代码2-4.html第43页2.4.6案例制作制作完成演示案例:合作方式局部页面。第2.5表格

第44页本节主要内容：

表格的结构

表格的基本语法

表格的修饰

不规范表格2.5表格第44页本节主要内容：2.5.1案例分析【案例展示】LED射灯介绍局部页面。使用表格技术，制作LED射灯介绍局部页面。【知识要点】表格元素、语法、表格修饰的设置。【学习目标】掌握设置表格属性的方法。第45页2.5.1案例分析【案例展示】LED射灯介绍局部页面。使2.5.2表格的结构表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的内容按照相应的行或列进行分类和显示。第46页2.5.2表格的结构表格是由行和列组成的二维表，而每行又2.5.3表格的基本语法<tableborder="n"width="x|%"height="y|%"cellspacing="i"cellpadding="j"><caption>表格标题</caption><tr><th>表头1</th><th>表头2</th>…<th>表头n</th></tr><tr><td>表头2-1</td><td>表头2-2</td>…<td>表头2-n</td></tr>…<tr><td>表头m-1</td><td>表头m-2</td>…<td>表头m-n</td></tr></table>第47页2.5.3表格的基本语法<tableborder="2.5.3表格的基本语法表格的整体外观由<table>标签的属性决定。border：定义表格边框的宽度，单位是像素。默认值“0”，显示为没有边框的表格。width：定义表格的宽度，单位是像素或百分比。height：定义表格的高度，单位是像素或百分比。cellspacing：定义单元格之间的空白，单位是像素，默认2px。cellpadding：定义单元格边框与内容之间的空白,单位是像素，默认1px。参考示例：2-5-1.html第48页2.5.3表格的基本语法表格的整体外观由<table>标2.5.4表格的修饰表格是网页布局中的重要元素，可以对其设置进而美化表格。设置表格大小设置表格背景设置表格的对齐方式设置表格中数据的对齐方式参考示例：2-5-3.html第49页2.5.4表格的修饰表格是网页布局中的重要元素，可以对其2.5.5不规范表格1．跨行跨行是指单元格在垂直方向上合并，语法如下：

<tdrowspan="所跨的行数">单元格内容</td>2．跨列跨列是指单元格在水平方向上合并，语法如下：

<tdcolspan="所跨的行数">单元格内容</td>3．跨行、跨列参考示例：2-5-4.html第50页2.5.5不规范表格1．跨行第50页2.5.6案例制作制作完成演示案例:LED射灯介绍局部页面。参考代码2-5.html第51页2.5.6案例制作制作完成演示案例:LED射灯介绍局部页2.6页面交互标签

第52页本节主要内容：

details和summary元素表格的基本语法

progress元素meter元素2.6页面交互标签第52页本节主要内容：2.6.1details和summary元素details元素用于显示或隐藏文档的细节信息用details和summary实现信息显示/隐藏功能的代码格式如下：

<detailsopen="open">

<summary>标题</summary>

文档详细信息</details>属性open:取值open，定义details是否显示。默认不显示。参考示例：2-6-1.html第53页2.6.1details和summary元素detail2.6.2progress元素progress元素用于显示某个特定任务的时间进度语法格式：<progress

value="value1"max="value2"></progress>属性介绍：value：定义当前已完成的工作量值。属性值value1取值在0.0和1.0之间或者是在max值以下。max:定义全部的工作量数值。属性值value2默认取值范围是从0.0-1.0，或者指定值，默认值是1.0。参考示例：2-6-2.html第54页2.6.2progress元素progress元素用于显2.6.3meter元素meter元素用于表示指定范围内的数值。语法格式：<metervalue="value1"optimum="value2"low="value3"high="value4"min="value5"max="value6"></meter>属性介绍：value：定义度量的当前值。必须。optimum：定义度量的优化值，即什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。第55页2.6.3meter元素meter元素用于表示指定范围内2.6.3meter元素low：定义度量的值位于哪个点被界定为低的值的范围。high：定义度量的值位于哪个点被界定为高的值的范围。min：定义范围的最小值，默认值是0。max：定义范围的最大值，默认值是1。参考示例：2-6-3.html第56页2.6.3meter元素low：定义度量的值位于哪2.7实训【实训任务】设计新闻动态—产品资讯局部页面。【知识要点】文本控制标签、图像标签及图文混排、列表、超链接。【实训目标】掌握用文本标签、图像标签、列表、超链接等设计页面的技术。第57页2.7实训【实训任务】设计新闻动态—产品资讯局部页面。第第58页2.8本章小结本章首先介绍了文本控制标签的功能及用法，然后介绍了图像标签、文件的路径知识和图文混排技术，还有超链接技术、列表和表格的设计技术，页面交互元素的功能，最后通过实例讲解了文本控制标签、图像标签、列表标签、超链接在页面设计中的实际应用技术。通过本章的学习，读者能掌握应用页面元素设计简单网页的技术。第58页2.8本章小结本章首先介绍了文本控制标签的功能第59页第2章网页基本元素本章概述本章的学习目标主要内容第1页第2章网页基本元素本章概述第60页本章概述随着网络技术的发展，网页内容也更加丰富多样。展示网页内容的元素包括文本、图像、列表、表格、链接等，本章将具体介绍页面上常用的各种元素的标签及其属性。第2页本章概述随着网络技术的发展，网页内容也更加丰富多样。展第61页本章的学习目标掌握文本控制标签的功能和使用方法。掌握图像标签及其各属性的功能和使用方法。掌握网页上常用超链接的设置方法。掌握列表标签及其属性的功能和使用方法。掌握表格标签及其属性的功能和使用方法。掌握页面交互元表的功能和用法。掌握综合应用各种页面元素标签及其属性制作页面的方法。第3页本章的学习目标掌握文本控制标签的功能和使用方法。第62页主要内容2.1文本控制标签2.2图像标签2.3超链接标签2.4列表2.5表格2.6页面交互标签2.7实训2.8本章小结第4页主要内容2.1文本控制标签第63页2.1文本控制标签本节主要内容：标题标签段落标签换行标签水平线标签文本格式化标签范围标签注释标签特殊符号第5页2.1文本控制标签本节主要内容：第64页2.1.1案例分析【案例展示】招商加盟-加盟中心局部页面的设计。使用标题标签、段落标签、换行标签、水平线标签、文本格式控制标签等，设计招商加盟-加盟中心局部页面，【知识要点】标题标签、段落标签、换行标签、水平线标签、文本格式控制标签等网页元素。【学习目标】掌握标题标签、段落标签、换行标签、水平线标签、文本格式控制标签的作用并灵活应用。参考代码：2-1.html第6页2.1.1案例分析【案例展示】招商加盟-加盟中心局第65页2.1.2标题标签语法格式：<hnalign="left|center|right">标题文字</hn>说明：

n的取值为1到6。align为可选属性，用来设置标题在页面的对齐方式，取值left（左对齐）、center（居中对齐）、right（右对齐），默认取值left。参考示例：2-1-1.html第7页2.1.2标题标签语法格式：<hnalign=第66页2.1.3段落标签语法格式：<palign="left|center|right">段落文字</p>说明：

参数align的取值和功能参考标题标签中说明第8页2.1.3段落标签语法格式：<palign="第67页2.1.4换行标签语法格式：文字<br/>或<br/>文字使用换行标签，可以使页面内容整齐、美观。第9页2.1.4换行标签语法格式：文字<br/>或第68页2.1.5水平线标签语法格式：<hralign="left|center|right"size="n"width="n|%"color="color"noshade="noshade"/>属性介绍：align：参考标题标签中align说明。size：设置水平线的粗细，n取正整数，默认为2像素。width：设置水平线的长度，n取正整数表示确定的像素值，也可以是浏览器窗口的百分比，默认为100%。color：设置水平线的颜色，默认黑色。可以用颜色名称、十六进制#RGB或rgb(r,g,b)来表示。noshade：设置水平线是否要阴影，默认有阴影。例：定义一条水平线，居中显示、粗5px、宽400px、红色、无阴影。代码如下。<hralign="center"size="5"width="400"color="red"noshade="noshade"/>第10页2.1.5水平线标签语法格式：<hralign第69页2.1.6文本格式化标签参考示例：2-1-2.html标签显示效果<b></b>和<strong></strong>文字以粗体方式显示，b定义文本粗体，strong定义强调文本<i></i>和<em></em>文字以斜体方式显示，i定义斜体字，em定义强调文本<s></s>和<del></del>文字以加删除线方式显示(HTML5不赞成使用s)<u></u>和<ins></ins>文字以加下划线方式显示(HTML5不赞成使用u)<mark></mark>文字高亮显示<cite></cite>创建一个引用标记，被标记的文字以斜体的方式显示第11页2.1.6文本格式化标签标签显示效果<b></b第70页2.1.7范围标签语法格式：<span>区域元素</span>说明：<span>与</span>之间只能包含文本和各种行内标签，用来定义网页中某些特殊显示的文本，配合class属性使用。它本身没有固定的格式表现，只有应用样式时，才会产生视觉上的变化。第12页2.1.7范围标签语法格式：<span>区域元素第71页2.1.8注释标签语法格式：<!--注释内容

-->说明：注释内容可以为一行，也可以为多行。并且开始标签和结束标签可以不在一行上。第13页2.1.8注释标签语法格式：<!--注释内容第72页2.1.9特殊符号特殊符号描述字符的代码

空格符

<

小于号<>大于号>&和号&￥人民币¥©版权©®注册商标®º摄氏度°±正负号±×乘号×÷除号÷第14页2.1.9特殊符号特殊符号描述字符的代码空格符2.1.10案例制作制作完成演示案例:加盟中心。参考代码2-1.html第73页2.1.10案例制作制作完成演示案例:加盟中心。第15页第74页2.2图像标签

本节主要内容：常用图像格式图像标签及其属性绝对路径与相对路径第16页2.2图像标签本节主要内容：第75页2.2.1案例分析【案例展示】新闻动态-资讯详情局部页面的设计。使用图像标签，标题标签、段落标签等，设计完成资讯详情局部页面的设计。【知识要点】图像标签的定义、图像属性设置、图文混排。【学习目标】掌握图像格式设置和图文混排技术。参考代码：2-2.html第17页2.2.1案例分析【案例展示】新闻动态-资讯详情第76页2.2.2常用图像格式网页图像有三种常用的格式：GIF、JPG和PNG。具体区别如下。（1）GIF格式GIF格式支持动画，同时GIF格式也是一种无损的图像格式。再加上GIF格式支持透明(全透明或全不通明)，因此很适合在互联网上使用。GIF格式文件最多使用256种颜色，适合显示色调不连续或具有大面积单一颜色的图像，如Logo、小图标及其他色彩相对单一的图像。（2）PNG格式PNG格式是一种替代GIF格式的无专利权限制的格式。PNG格式最大的优势是体积更小，支持alpha透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG格式不支持动画。它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。（3）JPG格式JPG格式所能显示的颜色比GIF格式和PNG格式要多得多，可以用来保存超过256种颜色的图像。JPG格式主要用于摄影或者连续色调图像。第18页2.2.2常用图像格式网页图像有三种常用的格式：2.2.3图像标签及其属性语法格式：

<imgsrc="图像URL"width="图像宽度"height="图像高度"alt="替代文字"border="边框宽度"align="对齐方式"title="文字"hspace="空白宽度"vspace="空白高度"/>第77页2.2.3图像标签及其属性语法格式：第19页2.2.3图像标签及其属性属性介绍：

src：用于指定图像文件的路径和文件名，是标签的必需属性。width：设置图像的显示宽度，单位是像素或百分比。height：设置图像的显示高度，单位是像素或百分比。alt：图像不能显示时，代替图像的说明文字。border：设置图像边框的宽度，单位是像素。align：设置图像的对齐方式，取值left、center、right。title：鼠标指向图片时，显示的提示文字。

/tags/att_img_hspace_vspace.asp：定义图像左侧和右侧的空白。vspace：定义图像顶部和底部的空白。第78页2.2.3图像标签及其属性属性介绍：第20页2.2.3图像标签及其属性指定图像大小：

用width和height属性用来定义图片的宽度和高度，其目的是通过指定图像的高度和宽度加快图像的下载速度。参考示例：2-2-1.html第79页2.2.3图像标签及其属性指定图像大小：第21页2.2.3图像标签及其属性指定图像的替换文本：alt属性指定的替换文本参考示例：2-2-2.html第80页2.2.3图像标签及其属性指定图像的替换文本：第22页2.2.3图像标签及其属性指定图像的边框：

通过border属性可以为图像添加边框，设置边框的宽度，添加边框后的图像显得更醒目、美观。边框的颜色默认黑色，不可调整。参考示例：2-2-3.html第81页2.2.3图像标签及其属性指定图像的边框：第23页2.2.3图像标签及其属性指定图像的对齐方式：

图文混排技术是指设置图像与同一行中的文本、图像、插件或其它元素的对齐方式。默认情况下图像的底部会相对于于文本的第一行文字对齐。但是在制作网页的过程中，有时需要实现图像和文字的环绕效果，这就需要使用图像的对齐属性align。参考示例：2-2-4.html第82页2.2.3图像标签及其属性指定图像的对齐方式：第24页2.2.4绝对路径与相对路径网页中路径分两种：绝对路径和相对路径。1.绝对路径

绝对路径是包括通信协议名、服务器名、路径及文件名的完整路径，是网页上的文件或目录在硬盘上的真正路径。2.相对路径

相对路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标文件的位置。第83页2.2.4绝对路径与相对路径网页中路径分两种：绝对路径和2.2.5案例制作制作完成演示案例:资讯详情局部页面。参考代码2-2.html第84页2.2.5案例制作制作完成演示案例:资讯详情局部页面。第第85页2.3超链接标签本节主要内容：超链接简介超链接的应用第27页2.3超链接标签本节主要内容：第86页2.3.1案例分析【案例展示】链接案例—网站信息页面。使用页面间链接、网站间链接、可下载文件链接等知识，制作网站信息页面。【知识要点】超链接的定义、页面间链接、网站间链接、下载文件链接等。【学习目标】掌握各种超链接

的应用场合和实现技术。参考代码：2-3.html第28页2.3.1案例分析【案例展示】链接案例—网站信息2.3.2超链接简介语法格式：<ahref="url"targrt="窗口名称">超文本</a>说明：

在上面的语法中，<a>标签用于定义超链接，href和target为其常用属性。href：用于指定链接目标的url地址。需要创建空链接时，用“#”代替URL。target：用于指定链接页面的打开方式，常用的取值有_self和_blank两种，_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。第87页2.3.2超链接简介语法格式：<ahref="url"2.3.3超链接的应用1.站内页面之间的链接

同一网站域名下的各页面之间可以用超链接实现互相链接访问。

例如，在首页以外的其他页面上，点击超链接“首页”返回网站首页。代码如下。<ahref="index.html"target="_self">首页</a><br/>4.下载链接5.图像做超链接6.锚记链接第88页2.3.3超链接的应用1.站内页面之间的链接第30页2.3.3超链接的应用2.网站之间的链接不同网站之间通过超链接实现信息和资源共享。例如，在网页上，点击超链接“163邮箱”打开163网易邮箱首页。代码如下。<ahref=""target="_blank">163邮箱</a><br/>例如，点击超链接“百度百科—超链接”打开百度百科网站上关于超链接介绍的页面。代码如下。<ahref="/item/%E8%B6%85%E9%93%BE%E6%8E%A5/97857?fr=aladdin"target="_blank">百度百科--超链接</a><br/>第89页2.3.3超链接的应用2.网站之间的链接第31页2.3.3超链接的应用3.媒体链接

超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。

例如，点击超链接“MP4视频”打开视频文件并开始播放。代码如下。<ahref="media/movie.mp4"target="_blank">MP4视频</a><br/>第90页2.3.3超链接的应用3.媒体链接第32页2.3.3超链接的应用4.下载链接如果超链接指向不是一个网页文件，而是其他文件，如doc、xls、zip、rar文件等，单击链接时就会下载相应的文件。例如，点击超链接“合作协议下载”，开始下载文件。代码如下。<ahref="datum/合作协议.zip">合作协议下载</a> <br/>注意：在项目文件夹的datum目录里，有“合作协议.zip”文件，才能点击下载。第91页2.3.3超链接的应用4.下载链接第33页2.3.3超链接的应用5.图像做超链接

为了增加页面的美观性，有时用图像代替文字做超链接。例如，超链接中的“首页”超文本，用图片替换。代码如下。<ahref="index.html"target="_self"><imgsrc="img/nav1.gif"></a><br/>

链接图像在低版本的IE浏览器中会添加边框效果，去掉链接图像的边框只需将边框定义为0即可。第92页2.3.3超链接的应用5.图像做超链接第34页2.3.3超链接的应用6.锚记链接

创建锚记链接，需要两个步骤。(1)首先定义锚记名称。

格式1：<aname="锚记名">目标附近的文本</a>

格式2：<Eid=="id名">网页内容…</E>，E代表html标签，如p、hn、div等。(2)然后，定义锚记链接。点击超文本时，跳转到锚记名或id名开始的位置。

格式：<ahref="锚记名|#id名">超文本</a>第93页2.3.3超链接的应用6.锚记链接第35页2.3.4案例制作制作完成演示案例:网站信息页面。参考代码2-3.html第94页2.3.4案例制作制作完成演示案例:网站信息页面。第36第95页2.4列表

本节主要内容：无序列表有序列表定义列表嵌套列表第37页2.4列表本节主要内容：第96页2.4.1案例分析【案例展示】招商加盟--合作方式局部页面。使用多种列表技术设计招商加盟--合作方式页面。【知识要点】无序列表、有序列表、定义列表和嵌套列表【学习目标】掌握各种列表的使用方法和列表嵌套技术。参考代码：2-4.html第38页2.4.1案例分析【案例展示】招商加盟--合作方2.4.2无序列表语法格式：

<ultype="符号类型"> <li>列表项1</li> <li>列表项2</li> ……</ul>

属性type定义无序列表的前导符号。取值circle（圆圈）、disc（圆点）和square（方块），默认disc。参考示例：2-4-1.html第97页2.4.2无序列表语法格式：第39页2.4.3有序列表语法格式：<oltype="符号类型"start="编号起始值"reversed="reversed"> <li>列表项1</li> <li>列表项2</li> ……</ol>

属性介绍：type：列表项的符号类型，取值1（阿拉伯数字）、a（小写英文字母）、A（大写英文字母）、i（小写罗马数字）、I（大写罗马数字），默认符号是阿拉伯数字。start：列表项编号的起始值，取值正整数。默认取值1，即编号从1开始。reversed：是否对列表项反向排序，当取值为“reversed”时，反向排序。参考示例：2-4-2.html第98页2.4.3有序列表语法格式：第40页2.4.4定义列表语法格式：

<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></dl>标签指定定义列表，<dt></dt>标签指定列表项的标题，<dd></dd>标签对标题进行描述。参考示例：2-4-3.html第99页2.4.4定义列表语法格式：第41页2.4.5嵌套列表所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。参考示例：2-4-4.html第100页2.4.5嵌套列表所谓嵌套列表就是无序列表与有序列表嵌套2.4.6案例制作制作完成演示案例:合作方式局部页面。参考代码2-4.html第101页2.4.6案例制作制作完成演示案例:合作方式局部页面。第2.5表格

第102页本节主要内容：

表格的结构

表格的基本语法

表格的修饰

不规范表格2.5表格第44页本节主要内容：2.5.1案例分析【案例展示】LED射灯介绍局部页面。使用表格技术，制作LED射灯介绍局部页面。【知识要点】表格元素、语法、表格修饰的设置。【学习目标】掌握设置表格属性的方法。第103页2.5.1案例分析【案例展示】LED射灯介绍局部页面。使2.5.2表格的结构表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的内容按照相应的行或列进行分类和显示。第104页2.5.2表格的结构表格是由行和列组成的二维表，而每行又2.5.3表格的基本语法<tableborder="n"width="x|%"height="y|%"cellspacing="i"cellpadding="j"><caption>表格标题</caption><tr><th>表头1</th><th>表头2</th>…<th>表头n</th></tr><tr><td>表头2-1</td><td>表头2-2</td>…<td>表头2-n</td></tr>…<tr><td>表头m-1</td><td>表头m-2</td>…<td>表头m-n</td>