第 2 章 HTML 语言基础

第2章 HTML语言基础

3 4 1 2 5 6 HTML图像、声音和影像标记 HTML表格标记 HTML简介 HTML常用格式标记 HTML表单标记 HTML框架标记内容概要

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语言中具有描述功能的符号，其具体形式是用一对尖括号“＜＞”括起来的字符串指令，标记中还包括一些属性选项，用于描述标记符的具体作用。 • 标记一般由“始标记”和“尾标记”两部分构成，必须成对使用。始标记前加一个斜杠（/）即成为尾标记。 • 使用始标记就能表达指令功能而省略尾标记的标记，称为单标记。 • 属性包含在始标记内。各属性之间无先后次序，属性也可省略（即取默认值）。

<标记符 [属性1] [属性2]...>...</标记符> • 标记格式： • 属性格式：属性名=“值” • 注释语句 HTML注释语句使用“！”标记，由“”结束。注释语句可插入文档中任意位置。任何标记若在标记符前插入感叹号，即被标识为注释，不予显示。

HTML的语法规则 • 文件以纯文本形式存放，扩展名为“*.htm”或“*.html”。 • 标记不区分大小写，标记符中间不能有空格，（建议使用小写字母）。 • 多数HTML标记可以嵌套，但不可以交叉。 • 文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。 • HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。 • 网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。

HTML基本结构 注释：  HTML文本的基本结构 <html> <head> 文档头部分 </head> <body> 文档主题部分 </body> </html> • HTML的基本结构

<Head>标记 • 用于标记页面的一些说明性内容，如页面的标题、脚本语言、样式表等头部信息。 • 在HEAD标记内最常用的标记是网页标题栏标记，即TITLE标记，其格式为： • 网页标题是提示网页内容和功能的文字，显示在浏览器的标题栏中。一个网页只能有一个标题，并且只能出现在文档的头部。除了<title>标记，头部还有其他一些非必须的，如<meta>、<link>等常用标记。 <title>网页标题</title>

<Body>标记 • Body标记是HTML文档不可缺少的主体，文档中所有涉及的网页元素，包括文字、表格、图像、声音和影像等标记都包含在这对标记之间。 • 设置 <body>标记内的属性，可控制整个页面的显示方式。

颜色的设定 • 颜色值是一个关键字（颜色名），如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. 文字样式设置标记

格式：<p align=“水平对齐方式”>文本</p> 4. 段落标记功能：设置文章段落的开始和结束。 5. 换行标记功能：另起一行显示文字。 6. 文本预排格式标记功能：保留文字在纯文字编辑器中的格式，原样显示。格式：<br> 格式：<pre >文本</pre>

格式：<div align="对齐方式">...</div> 7. 文本分块标记功能：此标记对的用法与<p></p>标记对非常相似，用于排版大块HTML段落，设置多个段落的文本对齐方式，也用于格式化表格。如果多个段落有相同的对齐方式，则可以将这些段落放入<div>标记之中。 8. 插入水平线标记功能：在页面上画横线，可用于页面上内容的分割。格式：<hr width=“value1” size=“value2” align=“value3” color=“color1” noshade> 常用属性如下： align = 水平对齐方式（left/center/right） color = 线的颜色 noshade = 显示一条无阴影的实线 size = 线的宽度(以像素为单位) width = 线的长度(像素或占页面宽度的百分比) 9. 对齐标记： <center> 居中对齐 </center> <p align=“left”> 居左对齐 </p> <p align=“right”> 居右对齐 </p>

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

列表标记 • 分段排列出一组级别相同的项目称为列表。如果在每段前面加上一个相同的符号，则称为符号列表；如果每段前面加上一个序号，则称为标号列表。 • 符号列表属性： type 属性表示在每个列表项前所显示的项目符号类型，共有三种取值：”disc”时，符号为“●”（实心圆），”circle”时，符号为“○”（空心圆），”square”时，符号为“■”（实心方块）。格式： <ul type="符号类型"> <li type="符号类型">列表项1 <li type="符号类型">列表项2 …… </ul>

列表标记 格式： <ol type="标号类型"start=“起始编号”> <li type="标号类型">列表项1 <li type="标号类型">列表项2 …… </ol> • 标号列表属性：type 属性表示每个列表项前显示的标号类型，取值可以为1（阿拉伯数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）。start 用于设置标号的开始值，默认值为1。

列表标记 格式： <dl> <dt>列表条目1 <dd>列表条目1的说明 <dt>列表条目2 <dd>列表条目2的说明 …… </dl> • 说明列表说明：<dl>和</dl>标记说明列表的开始和结束，每一项列表项之前必须加上<dt>标记，用<dd>标记设置列表项说明，说明文本自动向右缩进。

HTML的超链接标记 功能：建立超链接。通过超链接打开图像、声音、影像文件等。说明：<a>标记对之间就是带超链接标识的文本或图像。超链接标识文本的颜色由<body>标记的link、alink、vlink属性设定。属性：href用于设置要链接的目标URL地址，目标可以是包含路径的图像、声音、影像文件等。target属性用于设置显示链接的页面窗口，默认是在当前窗口显示。格式： <a href="URL" target="窗口">...</a>

HTML的图像与多媒体标记

HTML的图像与多媒体标记 格式： <img src=“image-URL” alt=“简单说明” longdesc=“详细说明” width=“x” height=“y” border=“边框长度” hspace=“x” vspace=“y” align=“对齐方式”>。 1.图像标记

HTML的图像与多媒体标记 1. 在HTML中插入Gif动画 2.背景音乐标记格式：<bgsound src=“声音文件的URL地址” loop=“播放次数”>

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表格标记属性

HTML表格单元格标记属性 • TD标记常用属性 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属性定义的表单域类型

表单域对象的常用属性

列表框标记 格式：<select multiple name=" " size=" " > <option selected value=" "> ...</option> </ select> • <select>标记用来创建一个下拉列表框或可以复选的列表框；<option>标记用来指定列表框中的一个选项。 • multiple属性决定列表框是否可多选；selected用来指定默认的选项，value属性用于给<option>标记中指定的哪一个选项赋值。 • <select>标记必须放在<form></form>标记对之间，<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>标记属性 设置内容包括浏览器窗口中将要显示的框架数目、框架的大小、每一个框架中将要放置的页面等。框架排列遵循从左到右，从上到下的次序规则。

<frame>标记 格式：<frame src="url地址1" name= " " scrolling =" " noresize > <frame>标记放在<frameset>标记之间，每个框架都由对应的<frame>标记描述。框架的名称也用于超文本链接标记<a href= " " target= " ">中的target属性赋值，指定链接目标HTML文件所显示在的框架。

<noframes>标记 格式：<noframes>…</noframes> 功能：用于在不支持框架结构的浏览器中显示文本或图像信息。说明：<noframes>标记放在<frameset>标记之间。

浮动窗口<iframe> 标记 功能：在浏览器窗口中可以嵌入一个框架窗口（窗框）以显示另一个文件。格式：<iframe src=“ url地址1” name=“窗口名" align=" " width=" " height=" " marginwidth=" " marginheight=" " frameborder=" " scrolling=" "> <iframe>标记只适用於IE浏览器。在包含<iframe>标记的文档中，<body>标记中background-color 或 bgcolor 属性必须设置为 transparent。

浮动窗口<iframe>标记属性

第 2 章 HTML 语言基础