Slide 1

第二章 HTML基础

教学内容
2.1

HTML文档的结构

2.2

设置文本格式首 页

2.3

使用图像

2.4

字幕和背景音乐

2.5

使用表格

2.6

使用超链接 退 出

2.7

使用表单
退

网页设计与制作

出

上 页
下 页


Slide 2

知识要点：
• 基本的HTML语法结构
• 常用的HTML 标记的使用

首 页
上 页
下 页
退 出


Slide 3

2.1 HTML文档的结构
2.1.1 标记基础
• 1. 基本的HTML语法
• (1) 在HTML语言中，所有的标记都必须用尖括号
（即小于号“<”和大于号“>”）括起来。例如，
、、等。
• (2) 大部分标记都是成对出现的，包括开始标记和
结束标记，开始标记和相应的结束标记定义了标记
所影响的范围；结束标记与开始标记名称相同，但
结束标记总是以一个斜线符号开头的。例如，
和、和等。
• (3) HTML标记不区分大小写，但通常约定使用大
写字母来表示，以利于HTML文档的维护。

首 页
上 页
下 页
退 出


Slide 4

•
•

2. 标记符的属性
大多数标记都拥有一个属性集，通
过这些属性可以对作用的内容进行
更多的控制。在HTML语言中，所有
属性都放置在开始标记的尖括号内。
"2">心想事成。

首 页
上 页
下 页
退 出


Slide 5

2.1.2 HTML文档的基本结构
•
•
•
•
•
• 文本、图像、动画、HTML其它元素等
•
•

首 页
上 页
下 页
退 出


Slide 6

• 实例2.1利用HTML标记、首部标记和正文标记，在记事本
（或在DeamweaverMX2004的代码编写窗口）中编写一个简
单的HTML文档，将文件名指定为2-01.htm，并保存在CH1
目录下。图2-2 第一个网页的效果
• ------2-01.htm-----•
•
•
•
•
• 万丈高楼平地起，制作网页刚开始。
•
•

首 页
上 页
下 页
退 出


Slide 7

2.2 设置文本格式
2.2.1 分段与换行
1.
分段标记

2.
换行标记

实例2.2 显示分段标记和换行标记的用法以及它们的区别，源代码如下：图2-3
分段标记的效果
•
------ 2-02.htm -----•

•

•

•

•

•

高楼万丈平地起，

•

蟠龙卧虎高山顶，

•
边区的太阳红又红，

•
边区的太阳红又红。
•

•


首 页
上 页
下 页
退 出


Slide 8

3. 标题标记
其中n的取值是1－6
实例2.3 演示各种标题标记的使用方法，源代码如下：图2-4 各种标题标记效果
• ------ 2-03.htm -----•
•
•
•
•
•

这是一级标题（最大）

•

这是二级标题

•

这是三级标题

•

这是四级标题

•

这是五级标题

•

这是六级标题（最小）

•

这是普通文字。

•
•

首 页
上 页
下 页
退 出


Slide 9

4. 水平线标记

---

•

---

标记用于在文档中添加一条水平线，以分
开文档的两个部分。该标记有以下属性：
•
(1) ALIGN：指定线的对齐方式，取值为left（左
对齐）、center（居中对齐）或right（右对齐），
默认值为center。
•
(2) COLOR：指定线的颜色。
•
(3) NOSHADE：若指定该项，则显示一条无阴影
的实线。
•
(4) SIZE：指定线的宽度，以像素为单位。
•
(5) WIDTH：指定线的长度，单位可以是像素或
百分比（占页面宽度的百分比）。

首 页
上 页
下 页
退 出


Slide 10

图2-5 插入水平线效果
实例2.4 在网页中通过

---

标记的各种属性来控制水平线的显示效果，源代码如下所示：
•
------ 2-04.htm -----•

•

•

•

•

•
以下是默认的水平线：
•

---

•
以下是SIZE为6、WIDTH为300像素的水平线：
•

---

•
以下是SIZE为1、WIDTH为页面宽度80%的实线水平线：
•

---

•
以下是WIDTH = 90%的红色水平线：
•

---

•

•


首 页
上 页
下 页
退 出


Slide 11

2.2.2 设置段落对齐方式
• 在网页中有四种段落对齐方式：左对齐、右对齐、
居中对齐和两端对齐。在HTML语言中，可以使
用ALIGN属性来设置段落的对齐方式。
• ALIGN属性可以应用于多种标记，例如：分段标
记

…

、标题标记…以及水平线
标记

---

等。
• ALIGN属性的取值可以是：left（左对齐）、
center（居中对齐）、right（右对齐）以及justify
（两边对齐）。两边对齐是指将一行中的文本在排
满的情况下向左右两页边对齐，以避免在左、右两
边处出现锯齿状。

首 页
上 页
下 页
退 出


Slide 12

实例2.5 使用ALIGN属性来控制段落的对齐方式，源代码如下所示：
•
------ 2-05.htm -----•

•

•

•

•

•

•

这是左对齐的效果。

•

这是居中对齐的效果。

•

这是右对齐的效果。

•

春夜喜雨

•
图2-6 段落对齐效果
•

•

•

春眠不觉晓，处处闻啼鸟。

•

夜来风雨声，花落知多少。

•

•

•


首 页
上 页
下 页
退 出


Slide 13

2.2.3 设置字体、字号和颜色
• 在HTML语言中，可以使用字体标记…来设置文本的字
符格式，为此可以将文本置于和标记之间，并通过FACE、
SIZE和COLOR属性来设置文本的字体、字号和颜色。FACE属性指定一种
字体，例如：
• 超文本标记语言
• ASP动态网页设计
• COLOR属性指定文本的颜色，可以用颜色名称表示，也可以用十六进制
RGB格式表示。例如：
• 超文本标记语言
• 电子商务网页设计

首 页
上 页
下 页
退 出


Slide 14

实例2.6 使用字体标记来设置文本的字体、字号和颜色，源代码如下所示------ 2-06.htm -----

设置字体、字号和颜色

---

电子商务网页设计

电子商务网页设计

电子商务网页设计

电子商务网页设计

首 页
上 页
下 页
退 出


Slide 15

•
•
•
•
•
•
•
•
•
•
•
•

2.2.4 设置字符样式
通过设置字符样式可以为某些字符设置特殊格式，例如粗体、斜体、
下划线、删除线、上标、下标等。常用的设置字符样式的标记如下：
…
粗体
…
大字体
…
斜体
…
删除线
… 小字体
… 删除线
^…
上标
_…
下标
…
固定宽度字体
…
下划线

首 页
上 页
下 页
退 出


Slide 16

实例2.7 使用各种标记来设置字符的样式，源代码如下所示：
-- 2-07.htm -----•
•
•
•

粗体字：电子商务网页设计

•

大字体：电子商务网页设计

•

斜体字：电子商务网页设计

•

上标示例：
• a²+b²=c²

•

下标示例：H₂SO₄

•
•

首 页
上 页
下 页
退 出


Slide 17

2.3 使用图像
2.3.1插入图像标记
1. 标记格式:
• 其中: 图片可以是*.gif；*.jpg格式的图片，地址可以是相对地
址或绝对的地址。
• 主要属性有：
• Alt： 用于设置鼠标移上去显示的文本信息。
• Hight和Width：用于设置图片的高度或宽度。如width=200。
• Borter：用于设置图象边框的宽度。如Borter=4。
• Hspace和Vspace：用于设置图片与文本之间的距离。
• Align：用于设置图文混排时的对齐方式。如align=“right”。

首 页
上 页
下 页
退 出


Slide 18

2. 实例2.8 使用IMG标记在网页中插入一个图像，源代码如下所示：图
2-9 插入图像效果
• ------ 2-8.htm -----•
•
•
•
•
• 美丽的海滨城市---青
岛
•

---

•
•
•

首 页
上 页
下 页
退 出


Slide 19

2.3.2 播放多媒体文件
• 标记不仅用于在网页中插入图像，也可以用于播
放Video for Windows的多媒体文件（*.avi）。若要
在网页中播放多媒体文件，应在标记中设置以下
属性：
• (1) CONTROLS：显示一套视频控件。
• (2) DYNSRC：指定要播放的多媒体文件的URL。
• (3) START：指定何时开始播放多媒体文件，其取值可
以是fileopen或mouseover。
• (4) LOOP：整数，指定多媒体文件的播放次数。如果
不限播放次数，则应将该属性设置为关键字infinite。
• (6) LOOPDELAY：整数，指定两次播放之间的延迟，以
毫秒为单位。

首 页
上 页
下 页
退 出


Slide 20

•
•
•
•
•
•
•
•
•
•

实例2.10 在网页中播放多媒体文件，源代码如下所示：
------ 2-10.htm -----

播放多媒体文件

---

"infinite" START = "fileopen">
•
•

首 页
上 页
下 页
退 出


Slide 21

2.4 使用字幕和背景音乐
•
•
•
•
•
•
•

•
•
•
•
•

2.4.1滚动字幕标记
标记格式：要滚动显示的文本信息
MARQUEE标记的主要属性有：
(1) ALIGN：指定字幕与周围文本的对齐方式，其取值可以是top、middle
或bottom。
(2) BEHAVIOR：指定文本动画的类型，其取值可以是scroll、slide或
alternate。
(3) BGCOLOR：指定字幕的背景颜色。
(4) DIRECTION：指定文本的移动方向，其取值可以是down、left、right
或up。
(5) HEIGHT：指定字幕的高度，以像素或百分比为单位。
(6) HSPACE：整数，指定字幕的外部边缘与浏览器窗口之间的左右边距
（像素）。
(7) LOOP：指定字幕的滚动次数。
(8) SCROLLAMOUNT：整数，指定字幕文本每次移动的距离，以像素为
单位。
(9) SCROLLDEALY：整数，指定与前段字幕文本延迟多少ms后重新开始
移动文本。

首 页
上 页
下 页
退 出


Slide 22

2. 实例2.11 在网页中插入一个字幕，源代码如下所示：图2-11 滚动字幕效果
•
•
•
•
•
•
•

在网页中插入一个自下而上移动的字幕

•

---

• = "2" SCROLLDELAY="100" WIDTH = "236" HEIGHT = "180">
•
• 月落乌啼霜满天，
江枫渔火对愁眠。
姑苏城外寒山寺，

夜半钟声到客船。
•
•
•
•

首 页
上 页
下 页
退 出


Slide 23

2.4.2背景音乐标记
• 1. 标记格式：
•
• ＝值>
• ……
•

首 页
上 页
下 页
退 出


Slide 24

实例2.12 在网页中插入背景音乐。源代码如下所示：
• ------ 2-12.htm -----•
•
•
•
•
•
•

当页面被打开时，你将会听到美妙的背景音乐。

•
•

首 页
上 页
下 页
退 出


Slide 25

2.5 使用表格
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

1. 格式：


…


…


…

……

…

表格标题文字

标题1	标题2	标题n
数据11	数据12	数据1n
数据21	数据22	数据2n
数据n1	数据n2	数据nn

首 页
上 页
下 页
退 出


Slide 26

实例2.13 使用HTML语言创建一个基本表格，源代码如下所示：
•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

创建基本表格

第1列标题	第2列标题	第3列标题	第4列标 题
春游芳草地	夏赏绿河池	秋饮黄花酒	冬听 白雪诗/TD>
春游芳草地	夏赏绿河池	秋饮黄花酒	冬听白雪 诗
春游芳草地	夏赏绿河池	秋饮黄花酒	冬听白雪 诗

首 页
上 页
下 页
退 出


Slide 27

2.6 使用超链接
• 2.6.1 什么是超链接
• 超链接是由源端点到目标端点的一种
跳转。源端点可以是网页中的一段文
本或一幅图像或一个按钮等。目标端
点可以是任意类型的网络资源，例如
可以是一个网页、一幅图像、一首歌
曲、一段动画或一个程序等。

首 页
上 页
下 页
退 出


Slide 28

• 2.6.2 超链接标记
• 在HTML语言中，可以使用标记来创建超链接，标记格
式如下：
• 示文本”>文本
• 标记的属性有：
• (1) HREF：该属性是必选项，用于指定目标端点的URL地址，
可以包含一个或多个参数。
• (2) TITLE：该属性也是可选项，用于指定指向超链接时所显
示的标题文字。
• (3) TARGET：该属性是可选项，用于指定一个窗口或框架的
名称，目标文档将在该窗口或框架中打开。TARGET属性的
取值 ：

首 页
上 页
下 页
退 出


Slide 29

• “_blank” 指定将链接的目标文件加载到未命
名的新浏览器窗口中；
• “_parent” 指定将链接的目标文件加载到包
含链接的父框架页或窗口中，如果包含链
接的框架不是嵌套的，则链接的目标文件
加载到整个浏览器窗口中；
• “_self” 指定将链接的目标文件加载到链接
所在的同一框架或窗口中；
• “_top” 指定将链接的目标文件加载到整个
浏览器窗口中，并由此删除所有框架。

首 页
上 页
下 页
退 出


Slide 30

•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

实例2.15 使用标记创建超链接，源代码如下所示：
------ 2-15.htm -----




创建超链接示例


图2-14 创建超链接效果

---

查看图文绕排效果

美丽的海边风光

首 页
上 页
下 页
退 出


Slide 31

2.7 使用表单
什么是表单？表单是用来收集访问者信
息的域集。表单用于用户收集信息，
然后将这些信息提交给服务器进行处
理。表单可以包含允许用户进行交互
的各种控件，例如文本框、列表框、
复选框和单选按钮等。

首 页
上 页
下 页
退 出


Slide 32

•
•
•
•
•
•
•
•
•
•
•
•

…

FORM标记的常用属性有：
(1) NAME：指定表单的名称，以标识表单。如：NAME = “biao1" 。
命名表单后，可以使用脚本语言（如VBScript或JScript）来引用或
控制该表单。
(2) METHOD：指定将表单数据传输到服务器的方法，其取值可以
是：
post：在HTTP请求中嵌入表单数据。
get：将表单数据附加到请求该页的URL中。
如：METHOD = "post“ （或者 methot=“get”）
(3) ACTION：指定将要接收表单数据的服务器端程序或动态网页的
网址。
如：ACTION = "字符串"
(4) onSubmit：指定提交表单时调用的事件处理程序。
(5) onReset：指定重置表单时调用的事件处理程序。
(6) TARGET：指定一个目标窗口

首 页
上 页
下 页
退 出


Slide 33

•
•

•
•
•
•
•
•

2.7.2 使用输入型表单控件
为了让用户通过表单输入数据，可以使用标记创建各种输
入型表单控件。通过将标记的TYPE属性设置为不同的值，
可以创建不同类型的输入型表单控件，包括单行文本框、密码框、
复选框、单选按钮、文件域以及按钮等。
1. 在表单中添加单行文本框
在

...

之间添加一个标记，并将其TYPE
属性指定为“text”。
其标记格式为：
= “宽度” MAXLENGTH = “字符数”>
2. 在表单中添加密码域
在

...

之间添加一个标记，并将其TYPE
属性指定为“password”。

首 页
上 页
下 页
退 出


Slide 34

• 3. 在表单中添加按钮
• 使用标记可以在表单中添加三种类型的按钮：即提
交按钮、重置按钮和自定义按钮。
• 其标记格式为：
• VALUE = "字符串" OnClick = "过程">
• 对该标记的属性说明如下：
• (1) TYPE：指定按钮的类型，取值可以是：
• submit：创建一个提交按钮。
• reset：创建一个重置按钮。
• button：创建一个自定义按钮。
• (2) NAME：指定按钮的名称。
• (3) VALUE：指定显示在按钮上的标题文本。

首 页
上 页
下 页
退 出


Slide 35

•

•
•
•
•
•
•
•
•
•
•
•
•
•

实例2.16 创建一个登录表单，其中包含有文本框、密码框、提交按钮和重置
按钮，源代码如下所示： 图2-15 登录表单效果

BGCOLOR="#D6D3CE" WIDTH="368">








首 页
上 页
下 页
退 出


Slide 36

•
•
•
•
•
•
•
•
•
•
•
•
•

登录表单

用户名：

SIZE = "20">

密码：

NAME = "T2" SIZE = "20">

首 页
上 页
下 页
退 出


Slide 37

首 页

谢

谢！

上 页
下 页
退 出



Directory

×