参考Web页面制作基础

《参考Web页面制作基础》由会员分享，可在线阅读，更多相关《参考Web页面制作基础（36页珍藏版）》请在金锄头文库上搜索。

1、第2章 Web页面制作基础本章要点： HTML网页格式 文字及段落标记 超级链接 加入多媒体 制作表格 制作表单 CSS2.1 一个简单的HTML程序页面例2-1（CH1-1.htm）：ASP动态网页设计一个简单HTML程序页面这个程序页面包含了基本 的HTML程序结构。图2-1 一个简单的HTML页面2.2 HTML网页格式HTML语言是一种页面描述性的语言，它使用一些约定的符号对各种 文件进行标注，标注过的文件就是一个个的HTML网页。每个网页一般都 包括标题、段落、列表、表格、图像等基本成分。 2.2.1 HTML标记的语法HTML的标记字符均取自ISO 646:1983字符集IRV，数

2、字字符则取 自SGML中规定的文档字符集Lation-1（ISO-8859-1）。 1字符实体除了通常的ASCII字符外，引入字符实体就可以在HTML文档中使用 拉丁字母、希腊字母和某些特殊符号等非ASCII字符。字符实体的引用格 式为“”和 “”都可以代表字符“中的background是标记的背 景属性，属性值back1.gif是一幅背景动画，需要注意的是，属性值 必须用双引号或者单引号标注。 4注释 HTML中的注释以“”结束，需要注释的内容放 置于其中。对某部分文档进行必要的解释，便于阅读源代码，注释部 分的内容并不会被Web浏览器显示出来。2.2.2 HTML文件基本架构HTML文档的

3、基本结构可以表示如下：标题文字文本、图像、动画、HTML指令等与标记是用来说明该文档是由HTML标记语言描 述的，文档中的所有其他标记和内容都包括在这对标记之中。2.2.3 文件主体标记1标记 标记是全部文档内容的容器，是处在最外层的标记，说 明这个文件的内容是用HTML语言实现的。是开始标记， 是结束标记，它们分别是网页的第一个标记和最后一个标 记，其他所有HTML代码都位于这两个标记之间。标记告诉 浏览器或其他程序，这是一个Web文档，应该按照HTML语言规则对 文内的标记进行解释。.标记是可选的，但最好 不要省略这两个标记，以保持Web文档结构的完整性。 2标记 首部标记用于提供与Web

4、页有关的各种信息。在首部标记中，可 以使用和标记来指定网页的标题，网页的标题显 示在浏览器窗口的标题栏中，一个网页仅能有一个标题。还可以在首 部标记中使用和标记来定义CSS样式表，使用 和标记来插入脚本等。3标记 该标记用来标注HTML文档的正文部分，正文 标记内包含了文档的内容、文字、图像、动画、超 链接以及其他HTML元素，标记属性及功能见表2- 1。 在上述属性中，各个颜色属性的值有两种表示 方法：使用颜色名称来指定，例如红色、绿色和蓝 色分别用red、green和blue表示；使用十六进制 格式数值#RRGGBB来表示，其中的RR、GG和BB 分别表示颜色中的红、绿、蓝三基色的两位十六

5、进 制数据，数值越大亮度越高，例如，#000000表 示黑色，#FFFFFF表示白色，#FF0000表示红色 。 例如，就是一个浅 黑色背景、浅灰色文本、白色超链接效果的页面。表2-1 标记的属性及说明 2.3 文字及段落标记 2.3.1 文字标记 1标题标记 标题标记用于设置文档正文的标题和副标题，其中n的取值是16， 定义了6个级别的子标题，.标记表示字体最大的标题， .标记表示字体最小的标题。 2标记 标记，设置缺省字体的大小，也作为字体标记设置 相对字体大小的基准值。其一般格式为： ,标记属性及功能见表2-2。表2-2 标记属性及说明3字体标记 用来设置文本的字符格式，为此可以将文本置

6、于 和标记之间，并通过其face、size和color属性来 设置文本的字体、字号和颜色。face属性指定一种字体，或者给出一 个字体列表，各种字体名称用逗号来分隔，可以按照作者的喜好程度 来排列。size属性指定字体的大小（即字号），其取值可以从1到7， 默认值为3。size属性值越大，显示的字号就越大。相对于基本字体（ BASEFONT）的大小，也可使用“”或“”符号来指定相对字号。例 如：超文本标记语言 ASP动态网页设计 color属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制RGB 格式表示。例如： 超文本标记语言 ASP动态网页设计4字符样式标记 字符样式标记均无属性，可

7、以为某些字符设置特殊格式，例如粗 体、斜体、下划线、删除线、上标、下标等。常用的设置字符样式的 标记及说明见表2-3。表2-3 字符样式的标记2.3.2 段落标记分段标记定义了一个段落，可将文本内容分为几个小 的段落。浏览器遇到该标记时，将先插入一个空行，然后在下 一行显示其后的文本，也就是说段落与段落之间有一个空行。 若同时使用和，则将段落包围起来，表示一个分段 的块；若省略结束标记，可以将开始标记放在段尾 。 在HTML文档中无须在意每一行的长度，浏览器会根据显示 窗口的宽度自动换行的。 分段标记的常用属性是align=“left“或“center“或“right“ ，用于设置段落的水平对

8、齐方式。其中，left为默认值，表示 段落文本在Web页面中按左边界对齐；center表示居中对齐； right表示按右边界对齐。需要注意的是，有的浏览器不支持右 对齐。2.3.3 换行标记换行标记强行加入一个换行动作，使后续内容在下 一行显示。它与标记不同，仅仅是换行，并不插入新空行 。 换行标记的属性clear=“left“或“all“或“right“或“none“， 为可选属性，该属性通常与文本中所嵌入的内联图像标记 一起使用。其中，left表示换行标记后的文本换 行至浏览器窗口左边界不被图像占用的地方显示；all表示换行 标记后的文本在浏览器窗口的左右边界均不被图像占用 的地方显示；r

9、ight表示换行标记后的文本换行至浏览器 窗口的右边界不被图像占用的地方显示；none为默认值，表示 仅仅换行而已。2.3.4 格式化列表1创建有序列表有序列表是在各列表项前面显示数字或字母的缩排列表，可以使用有序列表标记 和列表项标记来创建，语法格式如下：列表项1 列表项2 列表项n标记有两个常用属性：start和type。start属性用于设置各列表项的起始值，取正整数 值，默认值为1；type属性用于设置各列表项的序号样式，其取值有5类。 （1）1：用阿拉伯数字1、2、3等表示各列表项序号，此为默认值。 （2）A：用大写字母A、B、C等表示各列表项序号。 （3）a：用小写字母a、b、c等

10、表示各列表项序号。 （4）I：用大写罗马数字I、II、III、IV等表示各列表项序号。 （5）i：用小写罗马数字i、ii、iii、iv等表示各列表项序号。当位于和标记之间时，标记也有两个常用属性：type和value。 type属性指定各列表项的序号样式，其取值与的type属性相同；value属性指定 一个列表项序号的新的起始值，以获得非连续性的数字序列。2创建无序列表 序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可 以使用无序列表标记和列表项标记来创建，其语法格式 如下：列表项1 列表项2 列表项n标记的value属性用于指定列表项前面显示的项目符号，其取值可 以是disc、cir

11、cle或square。其中，disc为默认值，用实心圆作为项 目符号；circle用空心圆作为项目符号；square用方块作为项目符号 。 需要注意的是，在IE浏览器中，type属性的值是区分大小写的。2.4 加入超级链接 超链接一般可分为外部链接(External Link)与内部链接(Internal Link)。单击外部链接时，浏览器窗口将显示其他文档的内容。单击内 部链接时，访问者将看到本网页的其他部分内容。另外，HTML还可以 创建指向邮件地址的链接，单击该链接之后便可通过电子邮件软件给指 定的地址发送邮件。2.4.1 超级链接的概念超级链接是由源端点到目标端点的一种跳转。源端点可以

12、是网页中 的一段文本或一幅图像等。目标端点可以是任意类型的网络资源，例如 可以是一个网页、一幅图像、一首歌曲、一段动画或一个程序等。2.4.2 绝对地址与相对地址如果要链接的文件位于不同的目录，在链接时就必须指明文件 的地址，文件地址分为相对地址和绝对地址。相对地址是以当前 文件所在的地址和目录为起点的进行文件查找的。绝对地址是从 根目录开始的地址进行文件查找的，绝对路径中的盘符后用“|”替 代“：”。表2-4列出了相对地址和绝对地址的写法与含义。表2-4 相对地址和绝对地址的写法及含义2.4.3 内部链接与外部链接1内部链接所谓内部链接，就是网页内部不同位置之间的链接。在内容较多的网页内建立

13、 内部链接时，它的链接目标不是其他文档，而是本网页内的其他位置。在使用内部 链接之前，须要在网页内确定目标地点的位置，并使用标记的Name属性来确 定目标地点位置名称。 定义目标地点的一般格式为： 希望看到的目的内容 目标地点位置名称使用简短、有意义的字符串代替。为了使Web浏览器易于区分“目标地 点位置名称”与文档内容，在引用时，“目标地点位置名称”前面需要添加符号“#”。 一般格式为： 希望跳转到的目标起始位置内容 相关的提示信息 2外部链接 外部链接就是本网页和其他类型的网络资源之间的链接。一个超链接通常由以 下三部分构成：首先是超链接标记，表示这是一个链接；然后是其属 性href及其值

14、，这就定义了超链接所指的目标；最后是在超链接中显示在网页上作 为链接的提示文字。超链接的一般格式为：提示文字 单击外部链接时，需要链接的目标文档可能保存在其他站点内，也可能保存在 本机站点内，为了便于区分这两种情况，可将指向其他站点文档的链接称为URL链 接，而将指向同一站点内文档的链接称为本地链接。3邮件链接 邮件链接可使访问者在浏览页面时，只须单击电子邮件链接就 能够打开默认的邮件编辑软件，向指定的地址发送邮件。 电子邮件链接的应用格式为： 提示文本 其中，“E-mail 地址”是用户在Internet上的电子邮件地址，而“提示 文本”是访问者单击的文本。 访问者单击电子邮件链接时，将打开

15、默认的电子邮件编辑软件 。例如，使用Office系列的Outlook Express作为默认的邮件编 辑器时，单击电子邮件链接时将打开Outlook Express窗口，“收 件人”一栏将出现链接设定的“E-mail 地址”。2.5 加入多媒体2.5.1 插入图片 1src连接源src连接源，用于指出一个图像文件名，或给出一个图像的文件的URL地 址，图像可以是JPEG文件、GIF文件或PNG文件。 （1）“alt=text”用于设置图像的替换文本。只需给出图像的简单文本说明， 这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先 显示出来。当浏览器正常显示出图像后，把鼠标移到图像上

16、，稍作停留 ，也会紧跟着鼠标显示出这段替换文本。 （2）height属性用来设置图像在网页中的高度，单位是像素或百分数。 （3）width属性用来设置图像在网页中的宽度，单位是像素或百分数。 2border属性 标记的border属性可以给图像添加边框效果，该属性的取 值为正整数，单位为像素，用来定义图像边框的宽度。若不设置border 属性或取值为0时，图像没有边框。 3标记的使用 如果希望将插入的图像在页面上与文本同占一行，则可以将IMG标 记置于和标记之间。4align属性 当在页面中进行图文混排时，有时一个图像会占据一行以上 的空间，此时，可以使用标记的align属性来设置图像 与文本在垂直方向的对齐方式，此时align属性的取值与含义见 表2-5。 5hspace和vspace属性 标记的hspace和vspace属性可以设置图像与文本