新建网页 1

第九节网页制作概述

§6-9-1 HTML语言和XML语言

☆ HTML语言
   ◆HTML语言介绍：
    HTML（Hypertext Markup Language）是一种标记语言，用来创建与系统平台无关的文档。于1990年由WWW采用，至今的规格已有许多版本，如HTML2.0、HTML3.2，HTML4.0等。
    1、Web页的创建
    Web页是一些文档文件，它通过Internet向全球发布相关信息。
目前创建Web页的工具较多，如Java、JavaScript、VB Script、CGI等程序,但主要利用HTML语言来编写。
    Web页是一种纯文本文件，您可以使用任何文字处理器（如：Word、NotePad、WordPad等）来编写HTML文件，也可以用专门编写HTML的软件，如 HotDog、FrontPage2000等，编写完HTML文件后，需将文件保存为后缀名为.htm或.html的HTML文件。
    2、主页（HomePage）
    主页是启动浏览器后显示出现的第一个超文本文档，或起始页，从这份文档可以连到各个地方。
    ◆HTML页面格式
    1、HTML 文件结构(Document Structures)
    两个主要组成部分:头部(head)和主体(body)。头部一般很简单,只需作少量工作,而主体部分定义了页面的内容，在这些段中定义的项都称为元素。
例如：
<HTML>
头 <HEAD>
<TITLE>我的主页</TITLE>
部 </HEAD>

主 <BODY>
HTML 文件的正文写在这里... ...
体 </BODY>
</HTML>

图6-9-1 用记事本编写的web页

图6-9-2 在浏览器下的效果

    2、HTML元素
    HTML提供了标记和参考字符两类元素。
    标记用来定义文档中的关键元素,如段落、标题等；而参考字符则用来表示HTML文档中的特殊字符，如用&lt；表示“<”,&gt；表示“>”,以避免浏览器和其他客户程序产生误解。
(1)HTML元素的起始标记为<标记名属性>
结束标记为</标记名>
其中标记名不区分大小写。
(2)某些元素只有起始标记,没有结束标记。例:换行元素<BR>
(3)有些元素的结束标记可以省略。例:段落元素<P>
(4)HTML参考字符允许用户用一个代码来替换某个字符。例如用>替换“>”
    3.HTML的四个重要元素
(1)<HTML>元素
<HTML>位于文档的开头,通知客户端该文档是HTML文档,结束标记</HTML>位于文档结尾。
(2)<HEAD>元素
<HEAD>标记位于文档的起始部分,标明文档头部的开始，</HEAD>标志头部的结束。
(3)<TITLE>元素
<TITLE>标记用来设定文档的题目（不超过64个字）,题目在浏览器中显示在窗口顶端的标题栏内。
(4)<BODY>元素
<BODY>标记位于头部区段下面，用来标明文档主体开始，</BODY>标明主体结束。
    4.HTML注释
<!……> 浏览器不显示注释信息。
一般注释无特别意义,另一些则有特别意义。例<!DOCTYPE HTML PUBLIC“-//IETF/DTD HTML 3.0//EN”>表明文件的内容符合IETF(Internet Engineering Task Force)组织制定的DTD HTML 3.0 的规格。
    5、背景色彩和文字色彩
<body bgcolor=#RRGGBB text=#RRGGBB link=#RRGGBB alink=#RRGGBB vlink=#RRGGBB>
bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩
#RRGGBB为一个表示色彩的字符串,称之为RGB值。其中RR、GG、BB分别表示红、绿、蓝三色的十六进制数。每种颜色的十六进制数在00-FF之间,这样就有256*256*256（16万）种不同的色彩。

图6-9-3 颜色调色板

6、背景图象
<body background=“image-URL”> Non Scrolling Background < body bgproperties =FIXED>image-URL为背景图案地址，格式可为GIF或JPEG。图形大小建议尺寸为80mm*80mm至200mm*200mm，图案太大会降低HTML文件的显示速度。
GIF（Graphics Internet Format）由 CompuServe 开发完成，8位图像，只能支持256种颜色。GIF文件最适于徽标、图标和线条。
JPEG（Joint Photographic Expert's Group)支持24位颜色，应用程序可以灵活控制JPEG文件的压缩量，以改善JPEG图像在网络上的卸载性能。JPEG文件一般具有.jpg扩展名，适用于照片图像。

图6-9-4 网页实际结构并不容易

    7、页面空白(Margin)
页面左边的空白 <body leftmargin=#>
页面上方的空白 <body topmargin=#>
#为空白的像素值，可设为1、2、3...
    8、标尺线
<hr>
例：<hr>
<hr size=# color=#ffffff> size表示线段的粗细，#为1、2...,默认值为1,color设置线条的颜色。
例：<hr size=10>
<hr width=#> width表示线段的宽度,#的取值有两种：(1)绝对值：点数，如50、100等。(2)相对值：百分数，如50%、80%等。例：<hr width=50>
<hr width=50%>
<hr align=#> #=left,center,right，排列线段的位置，分别为：居左、居中、居右。
例：<hr width=50% align=left>
<hr width=50% align=right>
<hr noshade> 线段不要阴影。
例：<hr noshade>
<hr color=#>
#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
例：<hr color=“red”>

    9、段落(Paragraph) <p>
<p align=#>...</p> #=left, center, right
你好吗？<p>很好。
你好吗？
很好。
    10、换行 <br>
你好吗？<br>很好。
你好吗？
很好。

图6-9-5 <br><p>的应用实例

    11、不换行<nobr>
<nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
</nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
    12、居中
<center>...</center>
例：<center>Hello</center>
Hello
    ◆HTML字体
    1、标题字体(Header)
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
<h1>今天天气真好！</h1> 今天天气真好！
<h2>今天天气真好！</h2> 今天天气真好！
<h3>今天天气真好！</h3> 今天天气真好！
<h4>今天天气真好！</h4> 今天天气真好！
<h5>今天天气真好！</h5> 今天天气真好！
<h6>今天天气真好！</h6> 今天天气真好！
<hn>---</hn> 这些标记显示黑体字。
<hn>---</hn> 这些标记自动插入一个空行，不必用 <p> 标记再加空行。

    2、字号大小
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 或 +#, -#，默认值为3。
<basefont size=#> 设置默认字号值，#=1, 2, 3, 4, 5, 6, 7
<font size=7>今天天气真好！</font> 今天天气真好！
<font size=6>今天天气真好！</font> 今天天气真好！
<font size=5>今天天气真好！</font> 今天天气真好！
<font size=4>今天天气真好！</font> 今天天气真好！
<font size=3>今天天气真好！</font> 今天天气真好！
<font size=2>今天天气真好！</font> 今天天气真好！
<font size=1>今天天气真好！</font> 今天天气真好！
    3、物理字体(Physical Style)
黑体<b>今天天气真好！</b> 今天天气真好！
斜体<i>今天天气真好！</i> 今天天气真好！
下划线<u>今天天气真好！</u> 今天天气真好！
小字<tt>今天天气真好！</tt> 今天天气真好！
上标<sup>今天天气真好！</sup> 今天天气真好！
下标<sub>今天天气真好！</sub> 今天天气真好！
删除线<s>今天天气真好！</s> 今天天气真好！
    4、逻辑字体(Logical Style)
斜体1<em>今天天气真好！</em> 今天天气真好！
粗<strong>今天天气真好！</strong> 今天天气真好！
细体<code>今天天气真好！</code> 今天天气真好！
斜体2<var>今天天气真好！</var> 今天天气真好！
正体<dfn>今天天气真好！</dfn> 今天天气真好！
斜体3<cite>今天天气真好！</cite> 今天天气真好！
小字<small>今天天气真好！</small> 今天天气真好！
大字<big>今天天气真好！</big> 今天天气真好！
    5、字体颜色
指定颜色 <font color=#> ... </font>
#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
6、客户端字体(Font Face)
<font face=“#, #, ..., #”> ... </font>
#=客户端可获得的字体，如宋体、楷体_2312、隶书等。
〈font face=“楷体_2312” color=ff0000 size=5>楷体字</font> 楷体5号字
◆ 列表
    1、无序列表 <ul><li>...</ul>
<li type=#> #=disk, circle, square
<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>
ONE
TWO
THREE
    2、有序列表 <ol><li>...</ol>
<li type=#> #=A, a, I, i, 1
<ol><li type=A>ONE-ONE
<li>ONE-TWO</ol>
A. ONE-ONE
B. ONE-TWO
<ol><li type=a>ONE-ONE
<li>ONE-TWO</ol>
a. ONE-ONE
b. ONE-TWO
<ol><li type=I>ONE-ONE
<li>ONE-TWO</ol>
I. ONE-ONE
II. ONE-TWO
<ol><li type=i>ONE-ONE
<li>ONE-TWO</ol>
i. ONE-ONE
ii. ONE-TWO
<ol><li type=1>ONE-ONE
<li>ONE-TWO</ol>
1. ONE-ONE
2. ONE-TWO
    3、定义列表(Definition lists) <dl><dt>...<dd>...</dl>
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today will be yesterday.
Tomorrow
Tomorrow will be today.

     ◆ 表格
    1、表格的基本语法
<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
带边框的表格：
<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food	Drink	Sweet
A	B	C

不带边框的表格：
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food	Drink	Sweet
A	B	C

2、跨多行、多列的表元(Table Span)
跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Morning Menu
Food Drink Sweet
A B C
跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th>
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>

Morning Menu Food A
Drink B
Sweet C

3、表格尺寸设置
边框尺寸设置：<table border=#>
<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food Drink Sweet
A B C
表格尺寸设置： <table border width=# height=#>
<table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food Drink Sweet
A B C
◆HTML的超级链接
超级链接是一项重要技术,它的应用范围不只在WWW上，Windows在线帮助系统已在使用这项技术了，超链接可以让使用者突破传统的线性结构的阅读方式，实现跳跃式阅读。
基本语法 <a href=“URL”> ... </a>
浏览器将定位锚点描述的文字转换成带下划线的效果,当使用者将鼠标移至超文本文字上方,鼠标指针立即变成手状,当我们在超文本文字上单击，浏览器就会参考HREF属性所指定的的地址取得资源,然后经转换后显示在画面上。
资源地址有两种表示方法：绝对资源路径和相对资源路径。例：绝对路径file:///d|/resource/f1.html

图6-9-6 超链接两种使用方式

(1)链接多协议文件
<A HREF=“http://WWW.sxtu.edu.dn”>
<A HREF=“ftp://ftp.sxtu.edu.cn”>
<A HREF=“mailto:sxtu@dns.sxtu.edu.cn”>
(2)链接文件的特殊部分
链接位置:<A NAME=“链接位置名称”></A>
超文本:<A HREF=“#链接位置名称”></A>
例1：
这是一个
<a href=“samp/link.html”>链接的例子</a>。
点一下带下划线的文字!
这是一个链接的例子。点一下带下划线的文字!
例2：跳转到页面的另外一个地方
<a href=“#name”> ... </a>
<a name=“name”> ... </a>
<a href=“#jump-test”>跳转到下一个“链接点”</a><P>
<a name=“jump-test”>下一个链接点</a>
跳转到下一个“链接点”
下一个链接点
例3：跳转到另一个页面的某个地方
<a href=“URL#name”> ... </a>
<a name=“name”> ... </a>
跳转到另一个页面的<a href=“samp/link.html#jump-test”>某个地方</a>。
跳转到另一个页面的某个地方。
例4：链接多协议文件
<a href=“http://www.sxtu.edu.cn/”>山西师范大学</a> 山西师范大学
<a href=“ftp://202.207.160.9/”>文件服务器</a> 文件服务器
<a href=“mailto:sxtu@dns.sxtu.edu.cn”>sxtu@dns.sxtu.edu.cn</a> sxtu@dns.sxtu.edu.cn
◆Web页中加入图象
    链入图象的基本语法
<img SRC=“图像文件地址” ALT=“注释” WIDTH=“宽度” HEIGHT=“高度”> SRC是图象文件的 URL，ALT是在浏览器尚未完全读入图象时，在图象位置显示的文字。
<img src=“f.gif” alt=“MY FACE :-)”>

◆设计多窗口（Frames）
    1、基本语法
<frameset>
<frame src=“url”>
...
<noframes> ... </noframes>
</frameset>
在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
<FRAME SRC=“url”>
<NOFRAMES> ... </NOFRAMES>
</FRAMESET>
</HTML>
    2、各窗口的尺寸设置
<frameset cols=#>
纵向排列多个窗口：
<frameset cols=30%,20%,50%>
<frame src=“A.html”>
<frame src=“B.html”>
<frame src=“C.html”>
</frameset>

示例
A B C
<frameset rows=#>
横向排列多个窗口：
<frameset rows=25%,25%,50%>
<frame src=“A.html”>
<frame src=“B.html”>
<frame src=“C.html”>
</frameset>

示例
A
B
C
COLS & ROWS
纵横排列多个窗口：
<frameset cols=20%,*>
<frame src=“A.html”>
<frameset rows=40%,*>
<frame src=“B.html”>
<frame src=“C.html”>
</frameset>
</frameset>

示例
A B
C
◆表单（Form）

图6-9-7 表单示例

    1、基本语法
<form action=“url” method=*>
...
...
<input type=submit> <input type=reset>
</form>
*=GET, POST
    2、表单中提供给用户的输入形式
<input type=* name=该项名称 value=默认值或选择项>
*=text, password, checkbox, radio, image, hidden, submit, reset
    3、文字输入和密码输入
*=text, password
<input type=*>
<input type=* value=**>
<form action=/cgi-bin/post-query method=POST>
您的姓名:
<input type=text name=姓名><br>
您的主页的网址:
<input type=text name=网址 value=http://><br>
密码:
<input type=password name=密码><br>
<input type=submit value=“发送”><input type=reset value=“重设”>
</form>

您的姓名:
您的主页的网址:
密码:

4、复选框(Checkbox) 和 单选框(RadioButton)
复选框
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
Banana<p>
<input type=checkbox name=水果2 checked>
Apple<p>
<input type=checkbox name=水果3 value=橘子>
Orange<p>
<input type=submit><input type=reset>
</form>

Banana
Apple
Orange

单选框

<input type=radio value=**>
<input type=radio value=** checked>
<form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
Banana<p>
<input type=radio name=水果 checked>
Apple<p>
<input type=radio name=水果 value=橘子>
Orange<p>
<input type=submit><input type=reset>
</form>

Banana
Apple
Orange

5、列表框(Selectable Menu)
基本语法
<select name=*>
<option selected value=**>
<option value=**>
...
</select>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>

<select size=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
<option>Peach
</select><p>
<input type=submit><input type=reset>
</form>

<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样)
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
<option selected>Banana
<option selected>Apple
<option value=My_Favorite>Orange
<option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>

6、文本区域
<textarea name=* rows=** cols=**> ... <textarea>
<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>

☆XML语言介绍

可扩展标记语言（XML）
XML是Web上使用的最新语言。XML支持各种应用程序和将因特网推向一个全新的。功能更强大的新时代。它提供一种描述数据的通用语言。你将学习用XML创建你自己的标记集合，或者说你自己版本的HTML。