第 1章 HTML 基础
75
第 1 第 HTML 第第 第第第第第第第第第第第第 HTML 第第第第第 第第 HTML 第第第第第第第 第第第第 HTML 第第第第第第第第第第第 第第第第第第第第第第第第第第 第第第第第第第第第第第第第
description
第 1章 HTML 基础. 了解网页设计的基本概念及 HTML 的基本知识 掌握 HTML 文档的基本结构 熟悉常用 HTML 元素标记功能及使用方法 掌握格式化网页文本的常用方法 熟悉在网页中链接的使用方法. 教学内容. 1 HTML 概述 2 HTML 的标记 3 文字修饰 4 图像 5 列表 6 表格. 7 色彩 8 超文本链接 9 表单 10 事件 11 脚本 小结. 1.1 HTML 概述. - PowerPoint PPT Presentation
Transcript of 第 1章 HTML 基础
第 1 章 HTML 基础 了解网页设计的基本概念及 HTML 的基
本知识 掌握 HTML 文档的基本结构 熟悉常用 HTML 元素标记功能及使用方
法 掌握格式化网页文本的常用方法 熟悉在网页中链接的使用方法
教学内容
1 HTML 概述 2 HTML 的标
记 3 文字修饰 4 图像 5 列表 6 表格
7 色彩 8 超文本链接 9 表单 10 事件 11 脚本 小结
1.1 HTML 概述 HTML 是 Hyper Text Markup Language 的缩
写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是 HTML 的语句。
HTML 文档的基本结构
构成 HTML 文档基本结构的标记有：
<HTML>,<HEAD>, <BODY> 。
一个网页就是一个 HTML 文档，其基本结构如下：
1.2 如何编写一个 HTML 文件 HTML 文 件 是 一 个 扩 展 名 为 .htm
或 .html 的 ASCII 格式的文件 任何一种可以编辑 ASCII 文件的编辑器
记事本、写字板、 Word 等软件。 扩展名应为 htm 或 html 。
1.3 HTML 文件的调试
<html> <head> <title> 第一章 HTML 基
础 </title> </head> <body> HTML 是 Hyper Text
Markup Language 的缩写，意思是“超文本标识语言”。它实际上是专门用来编写网页的一种编成语言。大多数网页的构成基础就是HTML 的语句。
</body></html>
可以用网页浏览器对 HTML 文件进行调试，如 例1 ：
2.1 标记的一般特性 标记的记述形式： < 字符串 > 开始标记： < 标记名称 > 结束标记： </ 标记名称 > 属性：属性名 =“ 属性值”，包含在开始标记里，可以有多个 元素：
< 标记名称 属性名 =“ 属性值” > 内容数据 </ 标记名称>
元素包含多个属性时： < 标记名称 属性名 1=“ 属性值 1” 属性名 2=“ 属性值
2” 属性名 3=“ 属性值 3” > 内容数据 </ 标记名称 > 空元素： < 标记名称 属性名 =“ 属性值” ></ 标记名称 >
也可记为： < 标记名称 属性名 =“ 属性值” />
2.2 几个最常用的标记 1. <html> 和 </html>
在文档的最初和最后，定义一个 HTML 文档。 2. <head> 和 </head>
定义文档的头部，描述了文档的各种属性和信息，包括文档的标题 <title> 和 </title> 、在 Web 中的位置以及和其他文档的关系等。
3. <title> 和 </title> 定义文档的标题，在浏览器窗口的标题栏上显示。
4. <body> 和 </body> 定义文档的主体，包含文档的所有内容（比如文本、超链接、
图像、表格和列表等等。）
5. <hn> 和 </hn> 定义子标题。其中 n=1,2,
…,6 。 <h1> 定义最大的子标题， <h6> 定义最小的子标题。如 例2 。
6. <br/> 插入一个简单的换行符。
7.<p></p> 定义段落，前后有空行。
8. <hr/> 在页面中创建一条水平线。如 例3 。
3 文字修饰 一个网页大多由以下要素构成：
文字、图片、表格、动画及声音等。 文字是十分重要的要素。可以对文字的字号、
字体的样式及颜色等进行修饰。
3.1 字号 可以采用多种方式设置文字的大小。 不过设置文字的大小后，其效果会受到网页浏
览器中选项的影响。
1. <small> 和 </small> 显示小一号的字体。
2. <big> 和 </big> 显示大一号的字体 。
3. <font size=n> 规定 font 元素中文本的尺寸大小。 n 是从 1 到
7 的数字。 n=1 时最小， n=7 时最大。浏览器默认值是 3 。
n 也可以是带 + 号或 - 号数字，表示相对扩大或缩小字号。
4. <basefont size=n> 为文档中的所有文本定义默认字体的大小。
3.1 字号
例4 设置文字大小的例子<html> <head> <title> 设置文字的默认大小 </title> </head> <body> 显示效果正常字号 <small> 小号字 </small> <big> 大号字 </big><br> <font size=1>1 号字 </font><br/> <font size=2>2 号字 </font><br/> <font size=3>3 号字 </font><br/> <font size=4>4 号字 </font><br/> <font size=5>5 号字 </font><br/> <font size=6>6 号字 </font><br/> <font size=7>7 号字 </font><br/> <font size=-5> 相对小 5 号字 </font><font size=1>1 号字 </font><br> <font size=+2> 相对大 2 号字 </font><font size=5>5 号字 </font> </body></html>
3.2 字体式样 1. <b> 和 </b>
显示粗体字 2. <I> 和 </I>
显示斜体字 3. <u> 和 </u>
显示带下划线的字
4. <strike> 和 </strike> 显示带删除线的字
5. <sub> 和 </sub> 显示下脚标
6. <sup> 和 </sup> 显示上脚标
3.3 特殊标记 由于 < 、 > 、 & 和 “ 号是 HTML 的关键字符，要把
这些字符当作数据使用时，就必须使用与之对应的特殊标记，也叫”实体”。 < 用 < 表示 > 用 > 表示 & 用 & 表示 “ 用 " 表示
也可用“ &# 字符编码 ;”的形式显示任一字符。其中字符编码可以是 10 进制也可以是 16 进制。 16 进制要在编码前加“ x” 字符。
如“ §” 的编码是 A7 ，则可在 HTML 中用 §来表示。
例5 字体式样和特殊标记的例子<html> <head> <title> 使用字体样式和特殊标识 </title> </head> <body>
<b> 要粗体显示的文字 </b> <I> 要斜体显示的文字 </I> <u> 要下划线显示的文字 </u> <strike> 要加上删除线显示的文字 </strike><br/> 正常文字 <sub> 下标形式显示的文字 </sub><br/> 正常文字 <sup> 上标形式显示的文字 </sup><br/> 小于号 < 大于号 ><br/> 其他符号： § µ ¥
</body></html>
4. 图像
在 HTML 中，图像由 <img> 标记定义。 格式： <img src=“ 文件名” alt=“ 文件说明” width=“ 数值” height=“ 数值” /> <img> 是空标签，它只包含属性。 src 属性为必须项，其值是图像文件的路径名或网络地址。
alt 属性为图像定义一串预备的可替换的文本。 width 和 height 属性规定图像的宽度和高度（单
位为像素）
使用图像的例子<html><head><title> 使用图像的例子 </title></head><body><p>一幅图像：<img src="eg_mouse.jpg" width="128" height="128“/></p><p>一幅动画图像：<img src="eg_cute.gif" width="50"
height="50“/></p><p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。 </p>
</body></html>
5 列表 列表是一种条理化地排列信
息的方法 它把内容一条条地水平排列
显示，直观、清晰 不同于表格，一般列表没有
表格复杂。
列表标记的通用格式
< 列表标记 >
<li> 条目内容 1
<li> 条目内容 2
<li> 条目内容 3
……
</ 列表标记 >
列表标记
1. <ul> 和 </ul> ：条目前加符号 <ul type=f> ， f: disk, circle,
square
2. <ol> 和 </ol> ：条目前加序号 <ol type=f> ， f: A, a, I, i, 1 <ol start=n> ， n: 数字 ,为起始序号
例6 列表标记的使用例子<html><head>
<title> 列表标识 </title>
</head> <body> <ul type=circle> <li>李白 ----赠孟浩然 <li>杜甫 ----望岳 <li>杜牧 ----泊秦淮 </ul>
<ol start=10> <li>李白 ----赠孟浩然 <li>杜甫 ----望岳 <li>杜牧 ----泊秦淮 </ol> <ol type=i> <li>李白 ----赠孟浩然 <li>杜甫 ----望岳 <li>杜牧 ----泊秦淮 </ol> </body></html>
例7 列表的嵌套<html> <head>
<title> 列表嵌套</title>
</head> <body> <h3>唐诗选读</h3> <OL> <LI>李白 <UL> <LI>春思 <LI>月下独酌 <LI>赠孟浩然 </UL>
<LI>杜甫 <UL> <LI>望月 <LI>佳人 <LI>梦李白 </UL> <LI>杜牧 <UL> <LI>赤壁 <LI>泊秦淮 <LI>秋夕 </UL> </OL> </body></html>
6 表格 使用表格基本能实现对页面元素
在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。
表格一般由以下几部分组成：表格名称、表格栏及表中数据。这与其他软件（如 WORD ）中所说的表格十分相同。
6.1 表格的定义 表格由 <table></table> 标记来定
义。 这是一对用来指明表格范围的标记。通
常使用的格式如下：<table>
表格全部内容</table>
表格的 border 属性 使用表格的这一属性可以给表格加上框线。如
<table border> 表示表格是有表格线的， border 的线宽默认为 1 。没有写border 则表示表格是没有表格线的。
一般用 <table border=n> 来设置“有线表格”和边框宽度。 n 是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当 n 为 0 时，也没有边框
例8 设置表格边框的例子<html><head> <title> 这是有线表格和
表格边框的例子 </title></head><body><table border="2"><caption> 表格标题 </
caption><tr> <th> 栏目名称 1</th> <th> 栏目名称 2</th> <th> 栏目名称 3</th></tr>
<tr> <td> 数据 1-1</td> <td> 数据 2-1</td> <td> 数据 3-1</td></tr><tr> <td> 数据 1-2</td> <td> 数据 2-2</td> <td> 数据 3-2</td></tr></table></body></html>
表格的 width 属性 这一属性可以用来设置表格占整个页面的相对宽度，写法为： <table width=n> 。
这里的 n 是一个具体的数字，可以是一个具体的数值，单位是像素，也可以是一个百分数（如 100% ）。如： 80 表示表格占 80 个像素单位的宽度； 80% 表示表格宽度占页面宽度的 80% 。
表格的 height 属性 这一属性可以用来设置表格的高度。其
用法与 <table width=n> 相似。 使用相对方式来设置表格大小时，浏览
器窗口大小的变化会影响到表格大小的变化。表格宽度、高度设置要合理，在视觉上要有美感。
例9 表格占页面大小的例子<html><head> <title> 这是表格占页面相对大小的例子
</title></head><body><table border="5" width=80%,
height=50%><caption> 表格占页面的 80%</
caption><tr> <th> 栏目名称 1</th> <th> 栏目名称 2</th> <th> 栏目名称 3</th></tr><tr> <td> 数据 1-1</td> <td> 数据 2-1</td> <td> 数据 3-1</td></tr><tr> <td> 数据 1-2</td> <td> 数据 2-2</td> <td> 数据 3-2</td></tr></table>
<table border="5" width=70%, height=40%>
<caption> 表格占页面的 70%</caption>
<tr> <th> 栏目名称 1</th> <th> 栏目名称 2</th> <th> 栏目名称 3</th></tr><tr> <td> 数据 1-1</td> <td> 数据 2-1</td> <td> 数据 3-1</td></tr><tr> <td> 数据 1-2</td> <td> 数据 2-2</td> <td> 数据 3-2</td></tr></table></body></html>
6.2 表格的标题 用 <caption> 和 </caption> 标记来定义
表格的标题 通常使用的格式如下：
<caption>
表格标题内容</caption>
6.3 定义表格的一行 用 <tr> 和 </tr> 标记来指明表格一行的内容。这一行可
以是表格的栏目，也可以是数据。<table border=“1”>
<caption> 表格标题 </caption>
<tr><td> 数据 </td>…<td> 数据 </td></tr>
… …
<tr><td> 数据 </td>…<td> 数据 </td></tr>
</table>
6.4 表格的数据项 用 <td> 和 </td> 标记来指明表格数据行中的一项 一行可以由多项组成，它也必须嵌套在 <tr> 与 </
tr> 之中使用 <td> 的属性：
水平对齐方式 align=x, x:left, center, right 垂直对齐方式 valign=y,y:top, middle,
bottom nowrap: 超长文本不自动换行 单元格宽度width= 数值 列合并 colspan=向右合并单元格的数目 行合并 rowspan=向下合并单元格的数目
例10 单元格合并的例子<html>
<head> <title> 这是表格栏目合并的例子 </title></head><body>
<table border="2"><caption> 表格标题 </caption><tr> <td> 栏目名称 1</td> <td colspan=2> 栏目名称 2 和 3</td></tr><tr> <td rowspan=2> 数据 1-1</td> <td> 数据 2-1</td> <td> 数据 3-1</td></tr><tr> <td> 数据 2-2</td> <td> 数据 3-2</td></tr>
</table></body>
</html>
7.1 色彩的表示方法一 三原色浓度混合表示法 (RGB) 。
把三原色的浓度 (R 、 G 、 B) 分别以两位的 16
进制数表示，即 :00 ～ FF 。 再把三种颜色的浓度数值按 RGB顺序组合起来，
前面再加个“ #” 号，即 :#rrggbb 的形式表示色彩。
如：黑色为 #000000 、白色为 #ffffff 、墨绿色为 #008040 、深灰色为 #808080 等
7.1 色彩的表示方法二
颜 色 名 称 颜 色 名 称
Black 黑 Red 红
White 白 Fuchsia 洋红
Navy 深蓝 Maroon 棕
Blue 蓝 Purple 紫
Aqua 浅蓝 Green 绿
Teal 靛 Olive 橄榄色
Silver 银灰（浅灰） Lime 柠檬绿
Gray 灰 Yellow 黄
表 1 常见颜色列表
用颜色的名称 ( 英文 ) 表示法：
7.2 文本的色彩 1. 在 body 的属性中，我们可以使用以下几种属性改变文本的颜色。 (1) text 属性：设置文本的颜色
<body text=“#rrggbb”> (2) link 属性：设置超连接文字的颜色
<body link=“#rrggbb”> (3) vlink 属性：设置鼠标指向超链接文字时的颜色
<body vlink=“#rrggbb”> 2. <font> 标记的 color 属性 : 局部设置文本的颜色
<font color=“#rrggbb”>着色的文本 </font>
7.3 表格的颜色 1. 设置表格的背景色
<table bgcolor=“#rrggbb” > 2. 设置表格数据项的背景色
<td bgcolor=“#rrggbb” > 3. 设置水平线的颜色
<hr color=“#rrggbb”/>
例11 颜色设置的例子<html>
<head>
<title> 这是颜色设置的例子 </title>
</head>
<body>
颜色显示效果 <br/>
<font color=red>
<hl>问题与答案 (红色 )</hl>
<hr color=#808080/>
<font color=blue>
1 、如何改变表格的背景颜色？ (蓝色 )<br/>
<font color=olive>
这还不简单 (橄榄色 ) 。</body>
</html>
8 超文本链接 超文本链接是网页中一种非常重要的功
能，是网页中最重要、最根本的元素之一。
通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。
链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。
8.1 超文本链接的概念 所谓的超文本链接是指从一个网页指向一个目
标的连接关系。 这个目标可以是另一个网页，也可以是相同网
页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
而在一个网页中用来表示超文本链接的对象，可以是一段文本或者是一个图片。
当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
8.2 页面链接 在 HTML 中创建超文本链接需要使用 <a> 标记符
（结束标记符 </a> 不能省略），它的最基本属性是 href ，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。
在 HTML 文件中用链接指针指向一个目标。其基本格式为： <a href = “url”> 标记超文本链接信息 </a> <a href = “url”> <img src = “ 图像文件
名” /> </a>
8.3 页内链接 超文本链接可以指向自己的计算机中的某一个文件的某处，
这种链接方式叫做本地链接。 在文件中需要创建一个标签 ( 即做一个记号 )，为页面中需要跳转到的位置命名。命名时应使用 <a> 标记符的name 属性创建标签： <a name=" 标签名 ">此处创建了一个标签</a>
建立本网页内部链接： <a href=“# 标签名” > 本地链接信息 </a>
建立外部网页内部的链接： <a href=“ 网页地址# 标签名” > 链接信息 </a>
例12 超链接的例子<HTML> <HEAD><TITLE> 使用本地链接 </TITLE></HEAD> <BODY> <A HREF = #Internet>互联网 </A><BR><BR> <A HREF = #HTML>HTML 简介</A><BR><BR> <A HREF = #Consistency> 多样化和统一性 </A><BR><BR> <A name = Internet>互联网 </A><BR> <P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过 TCP/IP传输协议绑定在一起。 </P>
<A name = HTML>HTML 简介</A><BR> <P> 超文本标记语言是 Web 用来创建和识别文档的标准语言。虽然它不是标准通用标记语言
(SGML) 的子集，但与它有着某种程度上的关联。 SGML 是一种文档格式语言表示方法。 </P>
<A name = Consistency> 多样性和统一性 </A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成
一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </P><A HREF ="http://ccst.jlu.edu.cn"> 关于我们</A>
<A href="mailto:[email protected]">联系我们</A> <BR> </BODY></HTML>
8.4 电子邮件链接 如果希望用户在网页上通过链接直接打开客户端的发送邮件
的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto 值。如
<a href = mailto:[email protected] > 管理员信箱 </a>
9 表单 <form>
表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、
单选框、复选框等等）输入信息的元素。 表单用于搜集不同类型的用户输入数据，并将其传送给目
标文件（程序）。 表单使用表单标签（ <form> ）定义。
<form action=“目标文件名” method=“传输方式” >
... input 元素 ... </form>
9.1 表单的输入 : 文本域 多数情况下被用到的表单标签是输入标签（ <input> ）。输入类型是由类型属性（ type ）定义的。大多数经常被用到的输入类型如下：
文本域（ Text ）：当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname" />
<br />
Last name: <input type="text" name="lastname" />
</form>
9.1 表单的输入 : 单选按钮 单选按钮（ Radio ）：当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form> <input type="radio" name="sex" value="male"
/> Male <br /> <input type="radio" name="sex"
value="female" /> Female </form>
9.1 表单的输入 : 复选框 复选框（ Checkboxes ）：当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form> <input type="checkbox" name=“vehicle”
value="bike" /> I have a bike <br /> <input type="checkbox" name=“vehicle”
value="car" /> I have a car </form>
9.2 表单的确认按钮 当用户单击确认按钮 (submit) 时，表单的内容会被传送
到另一个文件：<input type=“submit” value=“确认按钮名
称” /> 。 <form>
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
9.3 表单的动作属性 表单的动作属性（ action ）定义了目的文件的文件名。
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。传输方式属性（ method ）规定了数据是以显式的方式（ get ）传送还是以隐式的方式（ post ）传送。
<form action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
10 脚本 向 HTML 添加脚本（ Script ），使其动态性和交互性更强。 格式：
<script type=“MIME类型” src=“URL”>
脚本</script>
其中： type 属性是必需的，指定脚本语言的种类，如：
type=“text/javascript” 表示 JavaScript 脚本 type=“text/vbscript” 表示 VBScript 脚本
src 属性是可选的，规定外部脚本文件的 URL 或文件名，如： src=”myscript.js“
例13 在 HTML 中插入脚本
<html>
<head> <title>Script Test</title> </head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
10.1 脚本放置的位置
脚本可以分别放在 HTML 文件的 head部分、 body 部分和外部。
当页面载入时，会执行位于 body 部分的脚本。
当被调用时，位于 head 部分的脚本才会被执行。
10.2 位于 head 部分的脚本 当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚
本放置到 head 部分后，就可以确保在需要使用脚本之前，它已经被载入了。
<html><head>
<script type="text/javascript">function message() {
alert("该提示框是通过 onload 事件调用的。 ")}</script>
</head><body onload="message()"></body>
</html>
10.3 位于 body 部分的脚本 在页面载入时脚本就会被执行。当你把脚本放置于 body
部分后，它就会生成页面的内容。<html>
<head></head><body>
<script type="text/javascript">document.write("该消息在页面加载时输出。 ")
</script></body>
</html>
10.4 使用外部脚本 有时，你也许希望在若干个页面中运行相同的脚本，同时不在每个页
面中写相同的脚本。为了达到这个目的，你可以将脚本写入一个外部文件之中。
<html>
<head>
</head>
<body>
<script src="/js/example_externaljs.js“ />
<p>
实际的脚本位于名为 "xxx.js" 的外部脚本中。</p>
</body>
</html>
11 HTML 的事件属性 在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的
条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。 通过使用客户端的 JavaScript ，可以将某些特定的事件处理器作为
属性添加给特定的标签，并可以在事件发生时执行一个或多个JavaScript 命令或函数。
事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。
例如，当把鼠标移动到一个超链接时，会启动一个 JavaScript 函数。 <a> 标签中的一个特殊的 onmouseover 属性就是 “ mouse over” 事件处理器，由它来完成这项工作：
<a href="/index.html" onmouseover="alert('Welcome');">aaaaaa</a>
11.1 窗口事件
仅在 body 元素中有效。
属性名 值 描述onload 脚本 当文档载入时执行脚本onunload 脚本 当文档卸载时执行脚本
11.2 键盘事件
属性名 值 描述 onkeydown 脚本 当键盘被按下时执行脚本onkeypress 脚本 当键盘被按下后又松开时
执行脚本
onkeyup 脚本 当键盘被松开时执行脚本
11.3 鼠标事件
属性名 值 描述onclick 脚本 当鼠标被单击时执行脚本ondblclick 脚本 当鼠标被双击时执行脚本onmousedown
脚本 当鼠标按钮被按下时执行脚本
onmousemove
脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本onmouseover 脚本 当鼠标指针悬停于某元素之上时执
行脚本onmouseup 脚本 当鼠标按钮被松开时执行脚本
11.4 表单元素事件
属性名 值 描述onchange
脚本 当元素改变时执行脚本
onsubmit
脚本 当表单被提交时执行脚本
onreset 脚本 当表单被重置时执行脚本onselect 脚本 当元素被选取时执行脚本onblur 脚本 当元素失去焦点时执行脚本onfocus 脚本 当元素获得焦点时执行脚本
使用事件的例子<html><head><script type="text/javascript"> function mouseOver(){ document.b1.src ="eg_mouse.jpg" } function mouseOut(){ document.b1.src ="eg_mouse2.jpg" }</script></head><body><a href="index.html" ><img border="0" src="eg_mouse2.jpg" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></body></html>
HTML 标记汇总 : 基本结构 <html> 和 </html> 定义一个 HTML 文档 <head> 和 </head> 定义文档的头部 <title> 和 </title> 定义文档的标题 <body> 和 </body> 定义文档的主体
bgcolor=“#rrggbb” 设置背景颜色 text=“#rrggbb” 设置文本的颜色 link=“#rrggbb” 设置超连接文字的颜色 vlink=“#rrggbb” 设置鼠标指向超链接时文字
的颜色 background=“file-name” 设置背景图案
HTML 标记汇总 : 文本设置 <font> 和 </font> 文本串的修饰
size=n 设置文本字体的大小 ,n 为 1 到 7 color=“#rrggbb” 设置文本字体的颜色
<basefont size=n> 设置全体文本字体的默认大小 <small> 和 </small> 显示小一号的字体 <big> 和 </big> 显示大一号的字体 <b> 和 </b> 显示粗体文字 <i> 和 </i> 显示斜体文字 <u> 和 </u> 显示带下划线的文字 <strike> 和 </strike> 显示带删除线的文字 <sub> 和 </sub> 显示下脚标文字 <sup> 和 </sup> 显示上脚标文字
HTML 标记汇总 : 图像
<img src=“ 图像文件名”
alt=“ 图像文件说明” width=“宽度” height=“高度” />
HTML 标记汇总 : 排版 <br/> 换行 <hn> 和 </hn> 定义子标题， n 为 1 到 6 <p> 和 </p> 定义段落，前后有空行 <div> 和 </div> 定义区域块 <span> 和 </span> 定义行内元素 <hr color=“#rrggbb” size=“n” width=“x”
/> 定义水平线 color: 线的颜色 size: 线的粗细 width: 线的长度
HTML 标记汇总 : 列表
<ul type=f> 和 </ul> 定义带符号的列表 f: disk, circle, square
<ol type=f start=n> 和 </ol> 定义带序号的列表 f: A, a, I, i, 1
<li> 和 </li> 定义列表条目
HTML 标记汇总 : 表格 <table> 和 </table> 定义表格
border=n 设定表格的边框 ,当 n 为 0 时没有边框 width=x, height=y 设定表格的宽度和高度
<caption> 和 </caption> 标记来定义表格的标题 <tr> 和 </tr> 定义表格的一行 <td> 和 </td> 定义表格数据行中的一项
align=x 设置水平对齐方式 ,x:left, center, right valign=y 设置垂直对齐方式 ,y: top, middle, bottom nowrap 超长文本不自动换行 width=x 设置单元格宽度 colspan=x 列合并 , x:向右合并单元格的数目 rowspan=y 行合并 , y:向下合并单元格的数目
HTML 标记汇总 : 链接
<a href=“url”></a> 建立页面链接 <a name=“label”></a> 创建页内标签 <a href=“#label”></a> 建立页内链接 <a href=“url#label”></a> 建立页内链
接 <a href=“mailto:mail-addr”></a>
建立发送邮件链接
HTML 标记汇总 : 表单<form action=“目标文件 URL” method=“传输方式” >
<input type=“输入类型” name=“ 名称” >
… …
<input type=“submit” value=“确认” >
</form>
其中：form 的 method 属性的值（传输方式）可以
是“ get” 或“ post”；input 的 type 属性的值（输入类型）可以是 text （文本框），
radio （单选按钮）， checkbox （复选框）。
HTML 标记汇总 : 脚本
<script type=“MIME类型” src=“URL”>
脚本</script> type 的值为脚本的语言类型，是必需的属性。
如 ” text/javascript”, “text/vbscript” 等。
src 的值为外部脚本文件的 URL ，也可以是脚本文件名，是可选的属性。
HTML 标记汇总 : 事件 窗口事件
onload = “ 脚本” ：加载时执行脚本 onunload =“ 脚本” ；卸载时执行脚本
鼠标事件 click =“ 脚本” ：单击时执行脚本 doubleClick =“ 脚本” ：双击时执行脚本
表单元素事件 onchange =“ 脚本” ：数据发生变化时执行脚
本 onsubmit =“ 脚本” ：表单被提交时执行脚本 onblur =“ 脚本” ：失去焦点时执行脚本
小结 HTML 是构成网页的最基本的元素。 HTML 文件是普通的文本文件，再加上一些标
记构成的。 HTML告知 WWW 浏览器有关字形的变化、
表格设置或是一些超文本链接。浏览器会自动解释这些标记的含义，并按照一定的格式在屏幕上显示这些被标记的文件。
HTML 的优点是跨平台性，不管操作系统是什么，浏览器的显示结果相同，呈现出生动、活泼的 WWW世界。
谢谢！谢谢！
