第 2 章 html 语言基础

第 2 章 HTML 语言基础

内容概要

HTML 图像、声音和影像标记3

HTML 表格标记4

HTML 简介1

HTML 常用格式标记2

HTML 表单标记5

HTML 框架标记6

HTML 语言简介基本内容和要求了解 HTML 文档基本语法和基本结构；掌握 HTML 常用标记的使用；标题、段落、文本等格式标记的应用；超级链接标

记的使用；水平线、图像、声音和视频等网页元素的插入标记；表格标记的使用。

了解 HTML 框架标记、表单标记的使用。

HTML 概述 1. 什么是 HTML?

HTML 是 Hyper Text Markup Language （超文本标记语言）的缩写，它是构成 Web 页面（ Page ）的主要工具，是用来表示网上信息的符号标记语言。 HTML 是一种用于网页制作的排版语言，是 Web 最基本的构成元素。HTML 并非一种编程语言。其通过标记（ Tags ）指令，将文字、图像、声音和影像等元素连接起来，构成超文本的网页。用 HTML 标记文档或给文档添加标记，使文档可在 WWW 上发布。用HTML 准备的文档包含引用图形和格式标记。用 Web 浏览器可以查看这些HTML 文档。用 HTML 的语法规则建立的文档可以运行在不同操作系统的平台上。因此， HTML 文档属于纯文本文件（它能用任意的文本编写器书写）。用 HTML 语言编写的文档称为 HTML 文件，其扩展名必须为 htm 或 html ，才能通过 Web 浏览器解释后以网页方式显示在浏览器窗口中，呈现出丰富多彩的页面。

2. HTML 的作用 HTML 语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其作用如下： ① 格式化文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。 ② 建立超链接。通过超链接检索在线的信息，只需用鼠标单击，就可以到达任何一处。 ③ 创建列表。把信息用一种易读的方式表现出来。 ④ 插入图像。使网页图文并茂，还可以设置图像的各种属性，如大小、边框、布局等。 ⑤ 建立表格。表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。 ⑥ 加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。 ⑦ 交互式窗体、计数器等。为获取远程服务而设计窗体，可用于检索信息、定购产品等。 HTML 是最基本的网页制作语言，其他的专用网页编辑器（如 FrontPage ， Dreamweaver 等）都是以 HTML 为基础的。

3. HTML 的编辑环境 HTML 的编辑环境很简单，任何一台计算机都可以编辑网页。但要看到用户自己设计的网页效果，就需要安装一个浏览器，如Internet Explorer ， Netscape Navigator 等。因此，只要计算机能运行某个浏览器，就具备了网页制作的硬件环境。 HTML 要求的软件环境更为简单，任何文本编辑器都可以用来制作网页，包括记事本、写字板、 Word 、 WPS 等编辑程序。不过在保存时，一定要用纯文本方式存盘。 HTML 文件的设计制作与一般程序设计语言之间最大的不同在于， HTML 具有跨平台的处理能力。也就是说，只要有适当的浏览器，不管使用何种操作系统，都能阅读制作的 HTML 文件。

4. 几种网页编辑器 HTML 作为最基本的网页编辑语言，能实现制作网页的各种效果。为使设计网页更加简单方便，人们设计了专用的网页编辑器。主要分为三大类。 ① 所见即所得工具：即在编辑网页时看到的效果，与使用浏览器时看到的效果基本一致。如果希望建立一个美观而又不复杂的站点，这种工具非常适合，可以很轻松地制作想要的效果。典型的工具有Drumbeat 、 NetobjectFusion 。 ② HTML 代码编辑工具：用纯粹的 HTML代码编辑工具，用户使用这些工具时，直接编辑原始的 HTML代码。这些工具通常带有许多辅助工具，可以帮助用户创建表格、表单，以及其他复杂的结构，并对创建的页面进行预览。这些工具最大要求是必须会 HTML 语言。典型的有 HomeSite 、 HotDogProfessional 、 HTMLedPro 、 WebEditPro 。

③ 混合型工具：介于上面两种工具之间，混合型工具在所见即所得的工作环境下可以完成主要的工作，同时也能切换到一个文本编辑器，对 HTML源代码进行直接地调整。像所见即所得的工具一样，混合型的创作工具通常也不能完全控制 HTML 页的代码。但 Macromedia Dreamweaver 在对已有的 HTML 页进行编辑时，会严格保持原有代码的格式。典型的混合型工具还有 Adobe

PageMill 、 FrontPage 、 CutePage 、 QuickSite 等。 FrontPage 是较好的所见即所得的网页编辑工具，也是常用的网页编辑器。它对一个 Web站点有很强的控制能力，可以统一 Web站点内页面的外观和风格。它的 Web管理功能也很强大，用户可以通过图形的方式观察和调整站点的结构。

Dreamweaver 的最佳特性就是它的 “ 往返式（ Roundtrip ） HTML” 编辑能力，这种特性使图形编辑工具和代码编辑工具输出同样的 HTML代码。 Dreamweaver 是图形化HTML 编辑工具中惟一不干扰原有 HTML代码的工具，所以用Dreamweaver 编辑后，仍然可以转回到原来的代码中用编辑工具进行修改。用其他工具修改后， Dreamweaver 能自动更新相应的页面。它能很方便地产生动画，嵌入 JavaApplet 、 ActiveX

控件，以及 Netscape 插件，并对用户的动作作出反应。此外， Dreamweaver 在 Internet Explorer 和 Netscape Navigator 两种浏览器之间的兼容性问题上处理得也很好。

HTML 文档的编写方法在文本编辑器中直接编写

由记事本、书写器等文本编辑器编辑，生成 .htm 、 .html 格式文件。

使用可视化 HTML 编辑器 Frontpage 、 Dreamweaver 等

由 Web 服务器（或称 HTTP 服务器）一方实时动态地生成。

HTML 的基本概念标记和属性标记是 HTML 语言中具有描述功能的符号，其具体形式是

用一对尖括号“＜＞”括起来的字符串指令，标记中还包括一些属性选项，用于描述标记符的具体作用。

标记一般由“始标记”和“尾标记”两部分构成，必须成对使用。始标记前加一个斜杠（ / ）即成为尾标记。

使用始标记就能表达指令功能而省略尾标记的标记，称为单标记。

属性包含在始标记内。各属性之间无先后次序，属性也可省略（即取默认值）。

标记格式：

属性格式：属性名 =“ 值” 注释语句 HTML注释语句使用“！”标记，由“ ” 结束。注释语句可插入文档中任意位置。任何标记若在标记

符前插入感叹号，即被标识为注释，不予显示。

< 标记符 [ 属性 1] [ 属性 2]...>...</ 标记符 >

HTML 的语法规则

文件以纯文本形式存放，扩展名为“ *.htm” 或“ *.html” 。标记不区分大小写，标记符中间不能有空格，（建议使用

小写字母）。多数 HTML 标记可以嵌套，但不可以交叉。文件一行可以写多个标记，一个标记也可以分多行书写，

不用任何续行符号。 HTML源文件中的换行、回车符和多个连续空格在显示效

果中是无效的。网页中所有的显示内容都应该受限于一个或多个标记，不

应有游离于标记之外的文字或图像等，以免产生错误。

HTML 基本结构

HTML 的基本结构注释： HTML 文本的基本结构<html><head>

文档头部分</head><body>

文档主题部分</body></html>

<Head> 标记用于标记页面的一些说明性内容，如页面的标题、脚

本语言、样式表等头部信息。在 HEAD 标记内最常用的标记是网页标题栏标记，

即 TITLE 标记，其格式为：

网页标题是提示网页内容和功能的文字，显示在浏览器的标题栏中。一个网页只能有一个标题，并且只能出现在文档的头部。除了 <title> 标记，头部还有其他一些非必须的，如 <meta> 、 <link> 等常用标记。

<title> 网页标题 </title>

<Body> 标记 Body 标记是 HTML 文档不可缺少的主体，文档中所有涉及的网页元素，包括文字、表格、图像、声音和影像等标记都包含在这对标记之间。

设置 <body> 标记内的属性，可控制整个页面的显示方式。

属　性描　　述link 设定页面默认的连接颜色alink 设定鼠标正在单击时的连接颜色vlink 设定访问后连接文字的颜色background 设定页面背景图像bgcolor 设定页面背景颜色

bgproperties设定页面背景图像为固定，不随页面的滚动而滚动

text 设定页面文字的颜色

颜色的设定颜色值是一个关键字（颜色名），如 blue （蓝）；或一

个 RGB 格式的数字， 6位十六进制颜色代码，如#0000FF （蓝）。

常用的 RGB 颜色表示： #rrggbb

如， bjcolor=“#0000FF” rgb(x,x,x) x 是一个介乎 0 到 255之间的整数如， bjcolor=rgb(0,0,255) 关键字（颜色名）如， bjcolor=blue

HTML 常用格式标记1 标题格式标记功能：用于定义文章内章节标题的显示格式。

格式： <hn align=“ 对齐方式” > 标题内容 </hn>

(1) 设置标题：一共有 6 种格式的标题，各自显示不同大小的标题文字，格式如下：　　 <h1 属性 = 值… > … </h1>　　 <h2 属性 = 值… > … </h2>

….　　 <h6 属性 = 值… > … </h6>常用属性： align = 水平对齐方式对齐方式如下：left: 左对齐（默认值）center: 居中right: 右对齐

HTML 常用格式标记

2. 文字格式标记功能：设置网页中普通文字的显示效果。

(1) 设置字体：<font face=? size=? color=? > … </font>

注： face- 字体， size- 大小， color- 颜色(2) 固定字体标记： <b> 加粗 </b>

<i> 斜体 </i>

<strong> 加强显示 </strong>

<em> 倾斜 </em>

<big> 放大显示 </big>

<small> 缩小显示 </small>

格式： <font face=“ 字体” size=“ 字号” color=“ 颜色” > 文字 </font>

HTML 常用格式标记3. 文字样式设置标记

标记功能<b> ...</b> 文字以粗体显示。

<i>...</i> 文字以斜体显示。

<u>...</u> 显示下划线。

<strike>...</ strike> 中心线贯穿文字。

<big>...</ big> 使文字大小相对于前面的文字增大一级。

<small>...</ small > 使文字大小相对于前面的文字减小一级。

<sup>...</sup> 使文字成为前一个字符的上标。

<sub>...</sub> 使文字成为前一个字符的下标。

<blink>...</ blink> 使文字显示为闪烁效果。

<tt>...</tt> 以等宽体显示西文字符。

<cite>.../cite> 输出引用方式的字体，默认是斜体。

<em>...</em> 强调文字，默认斜体加黑体。

<strong>...</strong >

特别强调的文字，默认是斜体加粗。

4. 段落标记

功能：设置文章段落的开始和结束。

5. 换行标记功能：另起一行显示文字。

6. 文本预排格式标记

功能：保留文字在纯文字编辑器中的格式，原样显示。

格式： <p align=“ 水平对齐方式” > 文本 </p>

格式： <br>

格式： <pre > 文本 </pre>

7. 文本分块标记功能：此标记对的用法与 <p></p> 标记对非常相似，用于排版大块

HTML 段落，设置多个段落的文本对齐方式，也用于格式化表格。

如果多个段落有相同的对齐方式，则可以将这些段落放入 <div> 标记之中。

8. 插入水平线标记功能：在页面上画横线，可用于页面上内容的分割。

格式： <div align=" 对齐方式 ">...</div>

格式： <hr width=“value1” size=“value2” align=“value3” color=“color1” noshade>

9. 对齐标记：<center> 居中对齐 </center><p align=“left”> 居左对齐 </p><p align=“right”> 居右对齐 </p>

常用属性如下：align = 水平对齐方式（ left/center/right ） color = 线的颜色noshade = 显示一条无阴影的实线 size = 线的宽度 ( 以像素为单位 )width = 线的长度 ( 像素或占页面宽度的百分比 )

10. 转义字符在 HTML 语言中，一些已被标记或标记属性使用的特殊字符，当网页需要显示这些字符时，必须使用以“ &”开始“ ;” 结束的转义字符表示。

特殊或专用字符字符代码特殊或专用字符字符代码

< < © ©

> > × ×

& & ® ®

" " 空格

列表标记分段排列出一组级别相同的项目称为列表。如果在每段前面加上一个相同的符号，则称为符号列表；如果每段前面加上一个序号，则称为标号列表。符号列表

属性： type 属性表示在每个列表项前所显示的项目符号类型，共有三种取值：” disc” 时，符号为“●”（实心圆），” circle” 时，符号为“○”（空心圆），” square”时，符号为“■”（实心方块）。

格式：<ul type=" 符号类型 "> <li type=" 符号类型 "> 列表项 1 <li type=" 符号类型 "> 列表项 2 …… </ul>

列表标记标号列表

属性： type 属性表示每个列表项前显示的标号类型，取值可以为 1 （阿拉伯数字）、 A （大写英文字母）、 a （小写英文字母）、 I （大写罗马字母）、 i （小写罗马字母）。 start 用于设置标号的开始值，默认值为 1 。

格式：<ol type=" 标号类型 "start=“ 起始编号” > <li type=" 标号类型 "> 列表项 1 <li type=" 标号类型 "> 列表项 2 …… </ol>

列表标记说明列表

说明： <dl> 和 </dl> 标记说明列表的开始和结束，每一项列

表项之前必须加上 <dt> 标记，用 <dd> 标记设置列表项说明，说明文本自动向右缩进。

格式：<dl> <dt> 列表条目 1 <dd> 列表条目 1 的说明 <dt> 列表条目 2 <dd> 列表条目 2 的说明 …… </dl>

功能：建立超链接。通过超链接打开图像、声音、影像文件等。

说明： <a> 标记对之间就是带超链接标识的文本或图像。超链接标识文本的颜色由 <body> 标记的 link 、 alink 、 vlink 属性设定。

属性： href 用于设置要链接的目标 URL地址，目标可以是包含路径的图像、声音、影像文件等。 target 属性用于设置显示链接的页面窗口，默认是在当前窗口显示。

HTML 的超链接标记

格式：<a href="URL" target=" 窗口 ">...</a>

HTML 的图像与多媒体标记

HTML 的图像与多媒体标记1. 图像标记

格式： <img src=“image-URL” alt=“ 简单说明” longdesc=“ 详细说明” width=“x” height=“y” border=“ 边框长度” hspace=“x” vspace=“y” align=“ 对齐方式” > 。

属性作用src 设置要加入图像文件的 URL地址。

alt 设置图像文件的替代文字。

longdesc 设置图像的详细说明。

width 设置图像的宽度。

height 设置图像的高度。

border 设置图像外围边框宽度，其值为正整数。

hspace 设置水平方向空白。

vspace 设置垂直方向空白。

align 设置图像与文字的相对位置。

HTML 的图像与多媒体标记

2.背景音乐标记

格式： <bgsound src=“ 声音文件的 URL地址” loop=“ 播放次数” >

1. 在 HTML 中插入 Gif 动画

HTML 的图像与多媒体标记3. 视频标记

格式： <img src=“image-URL” dynsrc=“avi-URL” loop=“n” start=“ 播放方式” controls loopdelay=“ 时间间隔” >

HTML 表格标记格式： <html> <head> <title> 表格结构示例 </title> </head> <body> <center><caption><b> 一个简

单的表格 </b></caption> <table border="1"> <tr><th> 标题单元格 1</th><th>

标题单元格 2 </th><th> 标题单元格3</th><tr>

<tr><td> 单元格 11</td><td> 单元格 12</td><td> 单元格 13</td></tr>

<tr><td> 单元格 21</td><td> 单元格 22</td><td> 单元格 23</td></tr>

</table> </center> </body></html>

HTML 表格标记属性属性作用summary 对表格的简要说明，不在网页上显示，相当于表格的注释。bgcolor 设置表格的背景颜色，取值同 BODY 标记中同名属性。background 设置表格的背景图像，取值为图像的 URL 地址。border 设置表格线的宽度（粗细），取整数，单位为像素数， n=0表示

无线。bordercolor 设置表格线的颜色，取值同 bgcolor 。width 设置表格宽度，取值为像素点数或百分比，默认值为自动匹配。height 设置表格高度，取值为像素点数或百分比，默认值为自动匹配。align 设置表格在页面中的相对位置，取值同 BODY标记中同名属性。bordercolorlight 设置表格亮边框颜色，取值同 bgcolor。bordercolordark 设置表格暗边框颜色，取值同 bgcolor。cellspacing 设置单元格间距，取值为像素点数，默认值为 1。cellpadding 设置表格数据与边框间距，取值为像素点数，默认值为 1。

HTML 表格单元格标记属性

TD 标记常用属性

属性作用colspan 设置单元格向右合并单元格个数。rowspan 设置单元格向下合并单元格个数。valign 设置单元格内容垂直对齐方式。nowrap 设置单元格内容不换行。

Table 标记中的bgcolor 、 background 、 bordercolor 、 align 、 height 、 width 等属性可以作为单元格的属性放在 TD 标记中。

HTML 表单标记表单标记作用与浏览器端实现交互的重要手段，利用表单可以收集客户端提交的有关信息。格式 <form 属性 = 值 > 子标记 </form>

标记对之间的一切都属于表单的内容。action 属性指定表单处理程序的程序名 ( 包括网络路径 ) 。method 属性定义处理程序从表单中获得信息的方式，其取值为 get 或 post ，默认值为 get 。target 属性用来指定目标窗口或目标框架。

格式： <form action=" " method=" " target=" " >...</ form >

HTML 表单标记

写入标记

type= 定义一个用于输入信息的表单域类型， <input type=" " > 标记必须放在 <form > 标记之间。

格式： <input type=“ 表单域类型 " 表单域属性 =" ">

type 属性定义的表单域类型 type属性取值表单域类型表单域属性<input type="text" > 单行文本输入框 name 、 value 、 size 、 maxlength

<input type="submit"> 提交按钮 name 、 value 、 onclick 、 onfocus。<input type="reset"> 重置按钮 , 单击该按钮可将表单内容全部清

除。<input type="checkbox" > 复选框 name 、 value 、 checked 、 onclic

k 、 onfocus。<input type="hidden"> 隐藏区域 ,用户不能在其中

输入 ,用来预设某些要传送的信息。

name 、 value

<input type="image" > 使用图像来代替 submit按钮

name 、 src

<input type="passward"> 输入密码的区域 ,掩码显示。 name 、 value 、 size 、 maxlegnth。<input type="radio"> 单选按钮 name 、 value 、 checked 、 onclic

k 、 onfocus。

表单域对象的常用属性表单域属性作用name 指定表单域对象名称value 指定表单域对象默认值。size 指定输入框所显示的大小。maxlength 指定输入框允许输入的最大字符数。checked 设置该复选框缺省时是否被选中。onchang 当文本改变时要执行的函数onselect 当表单域对象被选中时要执行的函数onfocus 当文本接受焦点时要执行的函数

列表框标记

<select> 标记用来创建一个下拉列表框或可以复选的列表框； <option> 标记用来指定列表框中的一个选项。

multiple 属性决定列表框是否可多选； selected 用来指定默认的选项， value 属性用于给 <option> 标记中指定的哪一个选项赋值。

<select> 标记必须放在 <form></form> 标记对之间， <option> 标记必须放在 <select> 标记之间。

格式： <select multiple name=" " size=" " > <option selected value=" "> ...</option> </ select>

多行文本框标记功能：创建一个可以输入多行的文本框。

cols 和 rows 属性分别用来设置文本框的列数和行数，列与行是以字符数为单位。

<textarea> 标记必须放在 <form></form> 标记对之间。

格式： <textarea name=" " cols=" " rows=" ">...</ textarea>

HTML 框架标记

框架结构用于网页布局，其特征是将浏览器页面分为数个大小不一的区域，每个区域就是一个框架，每个框架显示一个独立网页，框架集并不在浏览器中显示，而是定义了框架的大小分布和个数。

HTML 框架标记

框架的基本结构

<html> <head> …</head> <frameset> ‘ 框架集定义标记 <frame src=“url地址 1”> ‘ 框架定义标记 <frame src="url地址 2"> ...... <frameset> </html>

框架结构用于网页布局，其特征是将浏览器页面分为数个大小不一的区域，每个区域就是一个框架，每个框架显示一个独立网页，框架集并不在浏览器中显示，而是定义了框架的大小分布和个数。

<frameset> 标记属性

属性功能border 设置边框粗细 ,默认是 5像素。 .

bordercolor 设置边框颜色。frameborder 指定是否显示边框，取值：“ 0”不显示边框，“ 1”显示

边框。

cols 用像素或 "%"分割左右窗口， "*"表示剩余部分。rows 用像素或 "%"分割上下窗口， "*"表示剩余部分。framespacing="5" 设置框架与框架间的留空距离。noresize 设定框架不能够调节，只要设定了前面的，后面的将

继承。

设置内容包括浏览器窗口中将要显示的框架数目、框架的大小、每一个框架中将要放置的页面等。框架排列遵循从左到右，从上到下的次序规则。

<frame> 标记

<frame> 标记放在 <frameset> 标记之间，每个框架都由对应的 <frame> 标记描述。

框架的名称也用于超文本链接标记 <a href= " " target= " ">中的 target 属性赋值，指定链接目标 HTML 文件所显示在的框架。

格式： <frame src="url 地址 1" name= " " scrolling =" " noresize >

<noframes> 标记

功能：用于在不支持框架结构的浏览器中显示文本或图像信息。

说明： <noframes> 标记放在 <frameset> 标记之间。

格式： <noframes>…</noframes>

浮动窗口 <iframe> 标记

功能：在浏览器窗口中可以嵌入一个框架窗口（窗框）以显示另一个文件。

格式： <iframe src=“ url 地址 1 ” name=“ 窗口名 " align=" " width=" " height=" " marginwidth=" " marginheight=" " frameborder=" " scrolling=" ">

<iframe> 标记只适用於 IE 浏览器。在包含 <iframe> 标记的文档中， <body> 标记中 background-color 或 bgcolor 属性必须设置为 transparent 。

浮动窗口 <iframe> 标记属性

属性含义

src浮动窗口中的要显示的页面文件的路径，可以是相对或绝对。

name 此框窗名称，这是链接标记的 target 参数所要的。align 可选值为 left, right, top, middle, bottom ，作用不大 height 浮动窗框的高，以 pixels 为单位。width 浮动窗框的宽，以 pixels 为单位。marginwidth 该插入的文件与框边所保留的空间。marginheight 该插入的文件与框边所保留的空间。

frameborder使用 1 显示边框， 0 则不显示。（可以是 yes 或 no ）

scrolling 使用 Yes 表示允许滚动（默认）， No 则不允许。

第 2 章 html 语言基础

Documents