第2章Web页面制作基础

1、第第2章章 Web页面制作基础页面制作基础n2.1 HTML语言概述语言概述n2.2 文档的格式与风格文档的格式与风格n2.3 加入多媒体与超级链接加入多媒体与超级链接n2.4 制作表格制作表格n2.5 制作表单制作表单n2.6 框架结构框架结构n2.7 CSS基础基础本章学习目标本章学习目标本章将详细介绍使用本章将详细介绍使用HTML语言（语言（Hyper Text Markup Language）编辑绚丽多彩的编辑绚丽多彩的Web页面。通过本章的学习，读者应掌握以页面。通过本章的学习，读者应掌握以下内容：下内容：nWeb页面文档格式的设计方法页面文档格式的设计方法n如何加入多媒体和超级链接

2、如何加入多媒体和超级链接n表单的制作表单的制作n框架的使用框架的使用nCSS基础知识基础知识2.1 HTML语言概述语言概述n2.1.1 HTML概述概述n2.1.2 HTML文档的结构文档的结构n2.1.3 HTML标记标记n2.1.4 常用常用HTML编辑工具编辑工具返回首页2.1.1 HTML概述概述nHTML是（是（Hyper Text Markup Language，超文本标记语言）的缩写，最早源于超文本标记语言）的缩写，最早源于SGML语语言（言（Standard General Markup Language，标准通用化标记语言），是由标准通用化标记语言），是由Web页面的发页面

3、的发明者明者Tim Berners-Lee和同事和同事Daniel W.Connolly于于1990年创立的一种新颖的标年创立的一种新颖的标记式语言，它是记式语言，它是SGML的应用。到的应用。到90年代后期，年代后期，由于网络的飞速发展，使得由于网络的飞速发展，使得HTML也达到了空也达到了空前的繁荣，在前的繁荣，在WWW革命中扮演了核心技术的革命中扮演了核心技术的角色。角色。返回本节2.1.2 HTML文档的结构文档的结构HTML语言的基本结构：语言的基本结构： 头部信息头部信息 正文部分正文部分 图2-1 一个说明HTML结构的网页返回本节2.1.3 HTML标记标记1HTML文档标记格

4、式：格式：功能：标志文档开始和结尾的标记。功能：标志文档开始和结尾的标记。 2HTML文件头标记文件头标记格式：格式：功能：用于包含文件的基本信息。功能：用于包含文件的基本信息。3HTML文件主体标记文件主体标记格式：格式：功能：文件主体标记。功能：文件主体标记。返回本节2.1.4 常用常用HTML编辑工具编辑工具n使用使用HTML编辑器可以很容易的设计精彩的编辑器可以很容易的设计精彩的网页，实际上，任何一个文档编辑器都是网页，实际上，任何一个文档编辑器都是HTML编辑器，这也是网页制作之所以流行的编辑器，这也是网页制作之所以流行的一个原因。一个原因。 nHTML作为最基本的网页编辑语言，能够

5、实作为最基本的网页编辑语言，能够实现网页的各种效果。但是，它毕竟是一种语言，现网页的各种效果。但是，它毕竟是一种语言，需要记住一些标记。需要记住一些标记。 返回本节2.2 文档的格式与风格文档的格式与风格n2.2.1 设置设置的属性的属性n2.2.2 段落格式化段落格式化n2.2.3 建立列表建立列表n2.2.4 字符的格式化字符的格式化返回首页2.2.1 设置设置的属性的属性n作为网页的主体部分，作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及

6、超文本链接颜色等，主要颜色、文字颜色以及超文本链接颜色等，主要属性如表属性如表2-1所示。所示。 标记属性功能background=URL设置网页的背景图片bgcolor=colorvalue设置网页的背景颜色text=colorvalue设置文本的颜色link=colorvalue设置尚未被访问过的超文本链接的颜色，默认为蓝色vlink=colorvalue设置已被访问过的超文本链接的颜色，默认为紫色alink=colorvalue设置超文本链接在被单击的瞬间的颜色，默认为红色bgproperties =fixed设置背景是否随滚动条滚动leftmargin=size设置网页左边的空白top

7、margin=size设置网页上方的空白margingwidth=size设置网页空白的宽度marginheight =size设置网页空白的高度表2-1 BODY标记属性值返回本节2.2.2 段落格式化段落格式化1标题标记格式：格式：，功能：设置各种大小不同标题的标记。功能：设置各种大小不同标题的标记。2段落标记格式：格式：功能：设置段落标记。功能：设置段落标记。3预定义格式标记格式：格式：功能：在浏览器中浏览时，按照文档中预先排好的形功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容。式显示内容。4分区显示标记格式：格式：功能：分区显示标记。功能：分区显示标记。5换行标记格式：格式：

8、功能：强制换行。功能：强制换行。6水平线标记水平线标记格式：格式：功能：插入水平线标记。功能：插入水平线标记。7注释标记格式：格式：功能：注释标记。功能：注释标记。标题标记例例2-2： 标题示例！标题示例！ hello world!hello world!hello world!hello world!hello world!hello world!图2-2 标题的效果预定义格式标记预定义格式标记 例例2-3：显示显示<p>与与<pre>的区别的区别春晓春晓春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。夜来风雨声

9、，花落知多少。 春晓春晓春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。夜来风雨声，花落知多少。 图2-3 与的区别水平线标记水平线标记标记属性功能align=alignstyle设置对齐方式。alignstyle的取值为：left，right，centersize =size设置线条宽度（即高度）width=size设置线条长度color=colorvalue设置线条颜色，默认为黑色noshade设置线条是否有阴影表2-2 属性值 注释标记例例2-4：标记的使用标记的使用三种标记的使用！三种标记的使用！我在中间！我在中间！中间中间我在左边！我在左边！左边左边我在右边！

10、我在右边！右边右边图2-4 三种标记的使用返回本节2.2.3 建立列表建立列表1有序列表格式：格式： 功能：建立有序列表。功能：建立有序列表。2无序列表格式：格式： 功能：建立无序列表。功能：建立无序列表。例例2-5：列表示例列表示例计算机新书计算机新书ASP程序设计程序设计HTML网页设计网页设计FrontPage使用指南使用指南英语新书英语新书外经贸英语外经贸英语实用英语翻译实用英语翻译朗文英语语法朗文英语语法图2-5 有序列表与无序列表的区别3自定义列表除了上述两种列表以外，还可以根据需要自定义列表除了上述两种列表以外，还可以根据需要自定义列表样式。格式为：样式。格式为： 返回本节2.2

11、.4 字符的格式化字符的格式化1字体设置标记字体设置标记格式：格式：功能：设置字体格式标记。功能：设置字体格式标记。标记提供了几种属性，如表标记提供了几种属性，如表2-3所示，所示，使用它们可以很容易的设置字体的大小、颜色、使用它们可以很容易的设置字体的大小、颜色、字型等。字型等。标记属性功能size=size设置文字的大小face=fontstyle设置字体color=colorvalue设置文字的颜色表2-3 属性值例例2-6：字符格式设置字符格式设置我是我是<font>标记！标记！我是我是<h1>标记！标记！我是我是<

12、U>标记！标记！我是我是<S>标记！标记！我是我是<B>标记！标记！我是我是<I>标记！标记！我是我是<BLINK>标记！标记！图2-6 字符格式设置标记的使用返回本节2.3 加入多媒体与超级链接加入多媒体与超级链接n2.3.1 加入图像、视频、动画加入图像、视频、动画n2.3.2 加入超级链接加入超级链接返回首页2.3.1 加入图像、视频、动画加入图像、视频、动画n1插入图像插入图像当使用当使用插入图像时，含有的属性如表插入图像时，含有的属性如表2-5所示。所示。标记

13、属性功能src =URL通过URL给出图像来源的位置，不可缺省width=size设置图像宽度height =size设置图像高度alt= txt设置在图像未载入前图片位置显示的文字border= size设置图像边框，缺省为0align=alignstyle对齐方式。取值：top，middle，bottom，left，righthspace=size设置图片左右边沿空白vspace=size设置图片上下边沿空白2插入视频插入视频当使用当使用插入视频或插入视频或Gif动画时，含有的属性如动画时，含有的属性如表表2-6所示。所示。标记属性功能dynsrc=URL设置多媒体来源位置loop=siz

14、e设置视频播放的次数loopdelay=time设置两次播放的间隔时间start=value指定何时开始播放视频文件返回本节2.3.2 加入超级链接加入超级链接格式：格式：功能：在当前页和其他页间建立超链接。功能：在当前页和其他页间建立超链接。主要属性如表主要属性如表2-7所示。所示。标记属性功能href=URL给定链接目标的位置target=frametarget设置显示链接目标的框架accesskey=character设置快捷键tabindex=num设置Tab键的顺序rel=linktype设置到链接的关系返回本节2.4 制作表格制作表格n2.4.1 建立表格建立表格n2.4.2 定制

15、表格定制表格返回首页2.4.1 建立表格建立表格格式：格式： 功能：创建表格。功能：创建表格。在浏览器中显示时，表格的整体外观由该标记在浏览器中显示时，表格的整体外观由该标记的属性决定，主要属性如表的属性决定，主要属性如表2-8所示。所示。标记属性功能border=size设置表格边框大小width= size设置表格的宽度height=size设置表格的高度cellspacing=size设置单元格间距cellpadding =size设置单元格的填充距background =URL设置表格背景图片bgcolor =colorvalue设置表格背景色align=alignstyle设置对齐方

16、式cols =size设置表格的列数表2-8 属性值返回本节2.4.2 定制表格定制表格使用使用只是定义空表格，还需要定义只是定义空表格，还需要定义行和单元格。行和单元格。格式：格式：功能：定义表格的一行。功能：定义表格的一行。对于每一行，可以定义行属性，主要属性如表对于每一行，可以定义行属性，主要属性如表2-9所示。所示。标记属性功能bgcolor=colorvalue设置行背景颜色align=alignstyle设置行对齐方式valign=valignstyle设置单元格垂直对齐方式表2-9 中行的属性格式：格式：功能：定义表格中的单元格。功能：定义表格中的单元格。对于每一个单元格，主要属

17、性如表对于每一个单元格，主要属性如表2-10所示。所示。 标记属性功能bgcolor=colorvalue设置单元格背景颜色rowspan=num设置单元格所占的行数colspan =num设置单元格所占的列数align =alignstyle设置对齐方式valign =valignstyle设置单元格垂直对齐方式width =size设置单元格宽度height=size设置单元格高度例例2-7：多层表格嵌套实例！多层表格嵌套实例！ 跟我学网页制作跟我学网页制作 基础知识简介基础知识简介 第一讲第一讲 HTML简介简介 第二讲第二讲 HTML标记标记 第三讲第三讲 CSS基础基础 HTML最新

18、课堂最新课堂 高级应用技术高级应用技术 多层表格嵌套示例多层表格嵌套示例图2-7 表格的嵌套返回本节2.5 制作表单制作表单n2.5.1 表单的结构表单的结构n2.5.2 FORM中常用的标记中常用的标记返回首页2.5.1 表单的结构表单的结构在在Web网页上，包含各式各样的输入表单（网页上，包含各式各样的输入表单（FORM）。）。格式：格式：功能：定义表单。功能：定义表单。在在中要包含很多控件来实现整个表单的交互功中要包含很多控件来实现整个表单的交互功能，另外能，另外标记还有很多的属性来协助完成此项标记还有很多的属性来协助完成此项功能。功能。返回本节2.5.2 FORM中常用的标记中常用的标

19、记n1输入域n（1）单行输入域。）单行输入域。格式：格式：功能：单一标记，是表单中提供给用户进行输功能：单一标记，是表单中提供给用户进行输入的一种形式。入的一种形式。 标记属性功能type= inputtype设置输入域的类型name=cdata设置表项的控制名，在表单处理时起作用（适用于除submit和reset外的其他类型）size=num设置表单域的长度maxlength =num设置允许输入的最大字符数（适用于text和password类型）value=cdata设置输入域的值（适用于radio和checkbox类型）checked设置是否被选中（适用于radio，button，che

20、ckbox类型）表2-11 标记的属性值n 1）text类型。类型。n 2）password类型。类型。n 3）radio类型。类型。n 4）checkbox类型。类型。n 5）submit类型。类型。 n 6）reset类型。类型。n 7）hidden类型。类型。（2）多行输入域。）多行输入域。格式为：格式为：功能：定义多行文本输入域。主要属性如表功能：定义多行文本输入域。主要属性如表2-12所示。所示。标记属性功能name=cdata设置FORM提交的输入信息的名称rows=num设置文本域的行数cols= num设置文本域的列数tabindex=num设置tab键的次序图2-8 输入域例

21、题2按钮定义按钮时，除了可以使用定义按钮时，除了可以使用标记外，标记外，还可以使用还可以使用标记，此标记为非表标记，此标记为非表单控件的行内标记。单控件的行内标记。格式：格式：功能：定义按钮。功能：定义按钮。主要属性如表主要属性如表2-13所示。所示。 标记属性功能name=cdata设置已发送表单的关键字value=cdata设置已发送表单的值type= buttontype设置按钮的类型tabindex=num设置tab键的次序表2-13 属性值 3选择域格式：格式： 选项一选项一 选项二选项二 功能：定义选择栏。功能：定义选择栏。 标记属性功能name=cdata设置选择栏的名字size

22、=num设置在选择栏中一次可见的选项个数multiple设置选项栏是否支持多选表2-14 属性值标记属性功能value=cdata设置选项的默认值selected表示此选项为预置项表2-15 属性值例例2-9：选择域选择域! 请选择喜欢的颜色请选择喜欢的颜色: 红色红色 蓝色蓝色 绿色绿色 黑色黑色 白色白色 紫色紫色 返回本节2.6 框架结构框架结构n2.6.1 框架结构的文件格式框架结构的文件格式n2.6.2 框架结构标记的使用框架结构标记的使用n2.6.3 FRAME标记标记n2.6.4 TARGET属性的使用属性的使用返回首页2.6.1 框架结构的文件格式框架结构的文件格式框架结构有开

23、始标记和结束标记，框架所有内容都应该在框架结构有开始标记和结束标记，框架所有内容都应该在和和之间。在之间。在 标标记内使用记内使用标记来指定框架中每个小（子）窗口的内容。标记来指定框架中每个小（子）窗口的内容。其具体格式如下：其具体格式如下：返回本节2.6.2 框架结构标记的使用框架结构标记的使用格式：格式：功能：定义一个框架容器。主要属性见如功能：定义一个框架容器。主要属性见如2-16所示。所示。 标记属性功能rows=size设置多重框架的高度cols =size设置多重框架的宽度onload=script设置框架被载入的事件onunload=script 设置框架被卸载的事件返回本节2.

24、6.3 FRAME标记标记格式：格式：功能：在网页中定义框架。功能：在网页中定义框架。F R A M E 是 一 个 单 一 标 记 ， 使 用 时 放 在是 一 个 单 一 标 记 ， 使 用 时 放 在FRAMESET的开始和结束标记之间。它有的开始和结束标记之间。它有6个个属性来描述每个子窗口的风格，属性值的功能属性来描述每个子窗口的风格，属性值的功能如表如表2-17所示。所示。标记属性功能src=URL设置要链接到的HTML文件name=framename表示子窗口的名字marginheight= size用来控制显示内容和窗口上下边界的距离，默认为1scrolling=scrollingstyle指定子窗口是否使用滚动条，有YES/NO/AUTO三个值，默认为AUTO，即根据窗口内容决定是否有滚动条noresize使用该属性后，指定窗口不能调整窗口大小表2-17 主要属性值返回本节2.6.4 TARGET属性的使用属性的使用1用于用于A标记标记在在A标记中，除了指定被链接的文件之外，还可以用标记中，除了指定被链接的文件之外，还可以用TARGET属性指定被链接的文件显示在哪个子窗口。语法如下