HTML网页设计基础.docx

1、HTML网页设计基础HTML网页设计基础知识目标 了解HTML的基本结构； 掌握HTML的常用标签。技能目标 熟练使用HTML中的各种标签； 能够独立编写HTML网页。HTML（hyper text mark-up language）即超文本标记语言，是构成网页最基本的要素，也是Web应用程序开发的基础。近年来，虽然随着计算机信息技术的进步，产生了DHTML和XML等语言，此外还涌现了许多功能强大的、所见即所得的网页设计工具，如FrontPage和Dreamweaver等，然而它们仍然构建在HTML基础之上。事实上，目前HTML的功能是不可替代的，网页设计和Web应用程序的开发者，应该很好地掌

2、握HTML。第一节 HTML简介HTML是一种结构化的网页内容标签语言，使用各种不同的标签符号来分别标识和设定不同的网页元素。每一个网页元素通常由开始标签、结束标签以及夹在这两个标签中的内容所组成。每个HTML元素的开始标签和结束标签的名称相同，并且都用一对尖括号“”括起来，只是在结束标签的前面多了一个“/”斜杠符号。例如：这部分内容居中显示表示将网页中的文字居中显示。其中，为开始标签，为结束标签，“这部分内容居中显示”为该元素的内容。当浏览器在显示该网页的过程中，如果遇到center元素，就将该元素的内容居中显示在浏览器的窗口中。并不是所有的网页标签都是如上例中那样成对出现的。有开始标签且一

3、定有结束标签的标签叫双边标签，而有开始标签不需要结束标签的标签为单边标签。例如，就是一个单边标签。另外，还有一些网页元素的结束标签可以自由取舍，如段落标签、选项标签等。许多元素的开始标签中还允许加入若干属性，用于进一步对该元素的特征进行说明或限定。通常用“属性名称=属性值”的方式来设定元素的属性，属性值可以用双引号引起来，也可以省略。例如，“”和“”效果相同，但如果属性值内有空格或特殊字符，则其两端双引号就不可以省略。此外，在一个元素的开始标签中各个属性设置的先后顺序是任意的。综上所述，一个HTML元素可表示为：内容第二节 HTML的结构一、网页基本结构任意打开一个网页，查看它的源代码，就可以

4、看到这个网页的HTML代码。无论该网页如何复杂，都是由一个最基本的HTML结构组成的，以下是的HTML的基本结构。【例2-1】 HTML文档的基本结构，效果如图3-1所示。 网页标题 这是显示在浏览器中的主要内容！ 图3-1 【例3-1】代码运行效果标签中的内容是HTML文档的主体元素，用于指出HTML文档的开始与结束。标签中的内容只能有、3种下属的一级元素，但其中的与元素是不能共存的。这就是说，在中最多只能有两个下属一级元素，其他的元素都包含在这两个元素之中。标签通常用于提供一些识别或补充的信息给浏览器，而浏览器不会把这些信息显示在网页中。理论上在标签中至少必须包括标签元素，但在实际上并没有

5、这么严格的限定。标签用于指定浏览器所要显示的标题文字，原则上不能省略，因为它还有其他用途，例如，作为网页的标签，或作为搜索引擎搜索时的索引。用于显示网页的主要内容，其中可以包含多种不同的元素，与之相关的各种元素将在下一节中详细说明。下面是关于书写HTML文档的几点说明。（1）HTML文档的内容不区分字母大小写，包括属性和标签名称等。（2）对于连续的空格、Tab键和Enter键，浏览器只会将其当成一个空格，除非置于预排版标签中。（3）在一个元素的开始标签中，元素名称及各个属性名称之间应该以空格、Tab键或Enter键隔开，因此某个元素的开始标签可能会跨越数行，而浏览器只认定“”记号。（4）含有空

6、格或特殊符号的属性值，需要用半角的双引号引起来。（5）HTML中采用“”进行注释，在该注释标签中的内容将不被处理和显示。（6）对于HTML文档中的错误元素及其属性，浏览器将会跳过它而不予理会。（7）各元素之间可以嵌套，但不能交错。例如：是正确的；是错误的。（8）HTML文档是一个纯文本文件，可用任何文本编辑工具（如Windows中的记事本）来创建和编辑，其扩展名为.htm或.html。二、标签标签主要用于包括该页面的一些基本描述语句。其语法格式如下： 网页标题 其中，各项的含义如下：（1）标签又称为元标签，主要功能是对网页进行定义和说明。（2）描述型标签主要负责对网页的重要内容进行定义说明，从

7、而方便搜索引擎的检索，通常不会在网页中显示。其语法格式为。其中，name属性用于对网页中的重要内容进行说明，其属性值主要有description（对当前网页的描述）、keywords（网页关键词）、author（网页作者）等。content属性用于设置与name属性值对应的内容。（3）动态控制型标签主要对网页的动态排列和动态链接进行控制。其基本格式为其中，http-equiv属性用于设置动态控制的类型，其属性值主要有两个：content-type（动态排列）、refresh（动态链接）。content属性用于对http-equiv属性值进行详细描述。【例3-2】 标签的基本结构实例，效果如图3

8、-2所示。 标签实例 请注意元标签的使用 图3-2 【例3-2】代码运行效果表示当浏览器窗口大小改变时，文字的排版也会随着窗口大小的改变而改变，以便让文字都显示在窗口中。其中，“text/html”表示当前文件为MIME类型中的text主类型下的html子类型，“charsetgb2312”表示当前文档的字符编码为国标2312，即支持简体中文。说明：MIME即多功能Internet邮件扩充服务，它是一种多用途网际邮件扩充协议，在1992年最早应用于电子邮件系统，但后来也应用到浏览器。服务器将MIME类型放入传送的数据中来告诉浏览器使用哪种插件读取相关文件，如设置为application/msw

9、ord，则浏览器将调用Word来打开相关数据文件。表示网页将动态刷新，其刷新时间设置为3秒，刷新后的链接URL为。即3秒后，该网页将自动跳转到新浪的首页。三、标签标签用于设置网页的基本样式。其语法格式如下：其中，各属性的含义如下：（1）bgcolor属性设置网页背景颜色。（2）background属性设置网页的背景图像。（3）text属性设置网页文字颜色。（4）link属性设置未访问的超链接文字颜色。（5）vlink属性设置已访问过的超链接文字颜色。（6）alink属性设置超链接被激活时的颜色，即鼠标单击链接的瞬间，链接文字的颜色。【例3-3】 标签的使用实例，效果如图3-3所示。 标签 背景

10、颜色:silver文字颜色:blue链接颜色:red已访问链接颜色:lime激活链接颜色:navy 新浪 图3-3 【例3-3】代码运行效果第三节 HTML的主要标签 下面介绍HTML中的主要标签。一、段落标签 段落标签用于设置段落文字及格式，包括标题标签、分段标签、换行标签、水平线标签和文本块标签。（一）标题标签标题标签的语法格式如下：标题内容hx中的x表示标题级别，共有h1、h2、h3、h4、h5、h6等6种，例如，h1表示一级标题。x的数值越小，字体越大。align属性用于设置标题对齐方式，可供选择的属性值有3个：left（左对齐）、center（居中对齐）、right（右对齐），默认为

11、left。标签所表示的标题在网页中均独占一行。（二）分段标签分段标签的语法格式为：段落文字中的文字将另起一行输出，而且将在两个段落之间产生一个空行。align属性用于设置段落的对齐方式，可供选择的属性值有3个：left（左对齐）、center（居中对齐）、right（右对齐），默认为left。分段结束标签可以省略。（三）换行标签换行标签用于强制中断当前文字行而从下一行开始显示，且在断行之间不产生空行（这与标签不同）。标签通常放在这一行的末尾，其语法格式如下：文字 （四）水平线标签水平线标签用于显示一条水平线。其语法格式如下：其中各属性的含义如下：（1）size属性用于设置水平线的粗细，以像素为

12、单位，默认值为2。（2）align属性用于设置水平线的对齐方式，属性值有left、center、right，默认为left。（3）width属性用于设置水平线的长度。其表示方式有两种：第一种为绝对数值，单位为像素，即水平线的长度是一个固定值。第二种为百分比，表示水平线相对于浏览器窗口的宽度，当窗口的宽度改变时，此水平线的宽度会自动改变。若没有设置宽度，则该水平线将横穿整个浏览器窗口（即默认为width= 100%）。（4）color属性用于设置水平线的颜色，默认为黑色。（五）文本块标签文本块标签用于将其包括的文本自成一段，且以缩排方式显示。其语法格式如下：文字【例3-4】段落标签综合使用实例，

13、效果如图3-4所示。 段落标签综合实例 HTML段落标签介绍 HTML文档中采用不同的标签来标识相应的HTML元素 这些标签包括段落、字体、列表、表格、表单等几大类。 段落标签 段落标签主要包括标题标签、分段标签、换行标签、水平线标签和文本块标签等几类。 图3-4 【例3-4】代码运行效果二、文字格式标签（一）字体标签字体标签可用于设置文本的字体、字型、字号和字符颜色等，是HTML文档中常用的标签。其语法格式如下：文字其中各属性的含义如下：（1）size属性用于设置字号，即文字的大小。取值范围为17，共7级字体。字号越大，文字越大。（2）face属性用于设置字体名称，双击“控制面板”中的“字体

14、”选项，可以看到可以引用字体的名称，这些字体的名称都可以给face属性赋值。（3）color属性用于设置文字颜色。color属性的颜色值可以用英文的颜色名称来表示，如red、green、blue等；也可以使用“#RRGGBB”的方式来表示，其中R代表红色、G代表绿色、B代表蓝色，RR、GG、BB的取值范围为十六进制数的00FF（相当于十进制的0255）。（二）文字效果标签1.粗体标签粗体标签有两种，其语法格式分别如下：文字文字以上两种标签均能实现文字加粗效果，在网页中的表现形式并无不同，但标签是W3C推荐使用的标签，在各种浏览器中兼容性更好。2.斜体标签斜体标签的语法格式有如下3种：文字文字文

15、字以上3种方式均能实现同样的文字斜体效果，但一般认为标签是用来对文本进行强调的，标签通常用在对文献进行引用的情况下，而标签如前面所说的粗体标签一样，都不是W3C所推荐使用的标签。3.下划线标签下划线标签用于为文本添加下划线。其语法格式如下：文字4.删除线标签删除线标签用于为文本添加删除线，其语法格式如下：文字5.上标标签上标标签用于将文本设置成上标的形式，其语法格式如下：文字6.下标标签下标标签用于将文本设置成上标的形式，其语法格式如下：文字7.文字闪烁标签文字闪烁标签用于为文本设置闪烁效果，其语法格式如下：文字说明：IE中不支持此文字闪烁效果，而Netscape支持。（三）特殊字符标签在HT

16、ML文档中，因为“”、“”、“&”等字符具有特殊意义，所以如果要在浏览器中显示这些字符本身就需要使用特殊的字符串。另外，由于HTML文档中多个空格、Tab键和Enter键均只能解释为一个空格，因此要表示多个空格，也要用到特殊的字符串。HTML常见的特殊字符及其代码见表3-1。说明：表3-1中的字符代码内容部分的分号“；”通常可以去掉，如“<”也可写为“<”；但加上分号是个好习惯，这样可以把特殊字符与其他标签或网页内容进行区分。在标签中的内容,如果出现特殊字符，可以采用表3-1中的字符代码，也可以不采用。例如【例3-2】、【例3-3】，均未使用特殊字符的字符编码仍然能正常显示“”。表3

17、-1 HTML常见的特殊字符显示结果描述字符代码空格 大于>&和&引号"镑£节§版权符号©注册商标®乘号×除号÷【例3-5】 字体格式标签综合使用实例，效果如图3-5所示。 字体格式标签综合实例 字体格式标签有很多,例如: <b>      粗体 <i>      斜体 <u>      下划线 <strike>  &n

18、bsp;   斜体 <sup>      上标字体 s=r2 <sub>      下标字体 H2O 图3-5 【例3-5】代码运行效果三、列表标签HTML文档中的列表可分为无序列表和有序列表。带有项目符号的列表为无序列表，带有编号的列表为有序列表。（一）无序列表标签无序列表标签用于创建一个无序列表，其语法格式如下： 列表项1 列表项2 列表项n其中各属性的含义如下：（1）type属性用于指定该列表中的每一个列表项的项目符号，type属性的值可以是square（）、cir

19、lce（）和disk（）等。 （2）标签表示列表中的列表项，type属性用于指定该列表项的项目符号。（二）有序列表标签标签用于创建有序列表，其语法格式如下： 列表项1 列表项2 列表项n其中各属性的含义如下：（1）标签表示有序列表，其中的type属性用于指定列表中每一个列表项的序号类型，允许的type属性值有“1”、“A”、“a”、“I”、“i”5种。其中“1”表示用数字做序号，“A”表示用大写英文字母做序号，“a”表示用小写英文字母做序号，“I”表示用大写罗马数字做序号，“i”表示用小写罗马数字做序号。（2）标签表示列表中的列表项，其中的type属性用于指定该列表项的序号类型。（3）star

20、t属性用于设置序号的开始值，不管采用哪种列表序号，start属性的值统一用数字形式来设置起始序号。【例3-6】 列表标签综合使用实例，效果如图3-6所示。 列表标签综合实例 有序列表和无序列表 HTML的重要内容: 表格 表单 框架 应具备的基本能力: 熟悉HTML基本标签 熟练编写HTML代码 图3-6 【例3-6】代码运行效果四、图像标签使用图像标签可将指定的图像添加到网页中。图像标签的语法格式如下：其中各属性的含义如下：（1）src属性的值为图像文件的URL，可以是本地文件，也可以是互联网上的文件。（2）border属性用于设置图像边框的宽度，单位为像素。（3）align属性用于设置图像

21、的对齐方式，可选值为left、center、right，默认为left。（4）alt属性用于设置图像的说明性文字（也可以使用title属性来实现同样功能）。（5）height、width分别用于设置图像的高度和宽度，可以用绝对数值表示，单位为像素。也可以使用百分比来设置，以浏览器窗口作为参照对象。通常使用前者，因为使用百分比显示图像会造成图像失真。（6）hspace、vspce分别用于设置图像与浏览器内容窗口的左边距和上边距，采用绝对数值表示，单位为像素。【例3-7】 图像标签综合使用实例，效果如图3-7所示。图像标签的综合实例图3-7 【例3-7】代码运行效果五、超链接标签HTML意为超文本标签语言，其与文本最大的区别在于链接。由此可见超链接标签是HTML文档中一个十分重要的标签，使用它可链接到文档内的某个指定段落或图像，也可以链接到本地或远程计算机上的另一个文档或Web页。超链接标签的语法格式如下：用作链接的文字或图像用做链接的文字在浏览器中通常以一种特殊的颜色并带下划线的方式显示，当鼠标指针指向超链接对象时会