当前位置：文档库 › HTML语言基础

HTML语言基础

第1讲 HTML语言基础

第1讲 HTML语言基础
＝＝＝＝＝＝＝＝＝＝＝＝＝
·了解HTML的一些背景知识
－·什么是HTML和网页文件

https://www.wendangku.net/doc/b05284153.html,

1）HTML是英文HyperText Markup Lanuage（超文本标记语言）的缩写。
2）以“<标签名>”表示标签的开始，以“”表示标签的结束。
3）成对标签又称为容器，一对标签中还可以嵌套其他的标签。
4）单独标签不需要与之配对的结束标签，又称之为空标签，例如：
。
5）一个HTML标签及标签中嵌套的内容就是网页中的一个“HTML元素”。
6）属性设置的一般格式为：属性名＝属性值，属性值部分可以用英文的双
引号（"）或单引号（'）引起来，也可以不使用任何引号。

－·HTML规范与版本
1）不同的浏览器之间的不兼容问题。
2）为了兼容问题，制定了规范。
最初又IETF组织制定规范，后来它转交给了W3C。
最新的也是最终的版本：HTML 4.01，不会再有新的版本了，因为将由XHTML
来取代，不过过渡时间会很长。

－·IETF与W3C组织
1）IETF
Internet Engineering Task Force（Internet工程任务组），由网络设计人员、
操作员、厂商、专家组成的民间组织，主要负责有关Internet的各种技术标准及
接口规范的制定，其网址为https://www.wendangku.net/doc/b05284153.html,。IETF以RFC（Request for
Comments，请求注释文档）定名所有发布的各类标准与协议，例如：RFC2616
（HTTP/1.1）、RFC（MIME）。
2）W3C
World Wide Web Consorttium（习惯称之为WWW联盟）于1994年成立，是
与WEB有关的企业机构成立的业界同盟，其网址为https://www.wendangku.net/doc/b05284153.html,。W3C
目前的成员仅限于团体和组织，只要缴纳一定的费用，并签署一份保证遵守规则
的成员协议，任何公司均可加入。W3C对WEB的便准握有生杀大权，负责研究、
审定、发布、管理有关WEB的标准，例如，HTML、CSS等。

·文档类型定义（Document Type Definition，DTD），也是指定XML制定的DTD文件的。
语法：
－·HTML：指定文档类型的名字。
－·PUBLIC：表明所依据的DTD文件可对任何人公开访问，而不是某个公司内部的规
范文件。
－·"version name"：指定HTML版本的标识名称。
例如：HTML 4.0 的标识名称为"-//W3C//DTD HTML 4.01 Transitional//EN"。对
于ISO标准的DTD以“ISO”开头；被改进的非ISO标准的DTD以加号“+”开头；未
被改进的非ISO标准的DTD以减号“-”开头。
－·url：指定该HTML语言的定义规范文件在Internet上的位置。
例如：https://www.wendangku.net/doc/b05284153.html,/TR/html4/loose.dtd
loose.dtd：包含HTML 4.01要求的以及不包含的元素。

strict.dtd：严格按HTML 4.01要求使用的元素。
frameset.dtd：严格按HTML 4.01要求使用的元素，以及frameset（框架）和连接目
标的元素。

·注释与特殊字符：
－·用
－·特殊字符可以用“数值码”和“引用实体”两种方式表示。例如：©、©
『< < | > > |& & | " " | ® 注册 | © 版权
| ™ TM | 空格』
quot;的使用情况：
注意：如何显示上面的特殊字符呢：&< ＝》通过&显示出了<

·一些标签的介绍：
注意：在标签中不能使用注释，因为注释的右尖括号会被认为是标签的结束符。
1）段落：

2）换行：
（根据规范应该使用
）
3）不换行：
4）缩进显示文本：

，可嵌套实现缩进再缩进
5）居中显示：
6）移动显示：
它有两个属性behavior（值slide、scroll、alternate），direction（值up、down、
left、right）
7）定义列表：

软件产品: windows; linux
硬件产品: CPU; 内存

8）无序列表

以及有序列表

9）预格式化

10）标题标签：

……

11）粗体：、斜体：下划线：
12）上标：、下标：
13）打印机风格：、引用：、强调：、
加重：
14）字体相关设置：
被设置的文本

·超连接标签：
1）超链接文本包含超链接的文件叫“超链接源”，href所指定
的网页文件叫“超链接目标”。
2）邮件的连接：
CaoChangBo
3）指定目标打开方式：target属性，值：_blank、_parent、_self
4）定义“锚点”(好像应该加上“/”结尾)，通过
 to Mark连接次锚点
5）一个连接自己的超链接：自己，其实它指向了文档的开头
6）一个连接为空超链接：空
本地：将打开目录；
WWW上：将打开目录默认页面；

·URL（Uniform Resource Locator）统一资源定位符
1）指向目录、对象……
2）组成：协议、主机名、端口号、资源名
3）相对URL，只包括资源（/index.html、../style.css父目录……../../父目录的父目
录），需要基准URL 的路径
4）为URL指定参数：https://www.wendangku.net/doc/b05284153.html,/get.html?name=ccb&age=24，
参数开头用“?”，之间用“&”隔开
5）带有定位标记的URL：例如：https://www.wendangku.net/doc/b05284153.html,/index.html#secti

on2，
连接网页的锚点
6）URL编码：使用的协议……后面讲解
7）mailto URL：例如：mailto:fantasyccb@https://www.wendangku.net/doc/b05284153.html,?subject=主题&body=主体
20%内容(空格必须使用20%)

·URL编码：
－·规则：
1）将空格转换为加号（+）
2）对0-9,a-z,A-Z之间的字符保持不变
3）对于所有其他的字符，用整个字符的当前字符集编码在内存中的十六进制格
式表示，并在每个字节前加上
一个百分号(%)。如字符“+”用%2B表示，字符“=”用%3D表示，字符“&”
用%26表示，每个中文字符在内存
中占两个字节，字符“中”用%D6%D0表示，字符“国”用%B9%FA表示。
4）对于空格也可以直接使用其十六进制编码方式，即用%20表示，而不是将它转
换成加号（+）。
－·说明：
1）如果确信URL串的特殊字符没有引起使用上的歧义或冲突，你也可以对这些字
符不进行编码，而是直接传递
给服务器。例如：
https://www.wendangku.net/doc/b05284153.html,/index.html?name=中国&area=960
2）如果URL串中的特殊字符可能会产生歧义或冲突，则必须对这些特殊字符进行
URL编码。例如，服务器会将
不编码的“中+国”当作“中国”处理。还例如，当name参数值为“中&国”，
如果不对其中的“&”编码，
URL字符串有如下形式：
https://www.wendangku.net/doc/b05284153.html,/index.html?name=中&国&area=960
上面的“国”作为了另一个参数！应编码为：
https://www.wendangku.net/doc/b05284153.html,/index.html?name=中%26国&area=960
“&”对应的编码为“%26”。
3）https://www.wendangku.net/doc/b05284153.html,/blog/index.html#section2中
“blog/index.html#section2”是传递给服务器的参数，只需给它编码就可
以，可以写成：
https://www.wendangku.net/doc/b05284153.html,/blog%2Findex.html%23section2"。
！对于服务器端的程序需要考虑编码问题，而前端网页设计人员一般不给服务
器传递参数，不用考虑URL编码。

·图象标签：
1）标签，src属性指定图象的（相对或绝对URL），还可以设置alt气球信息、
align格式、border边框、……
例如：
可以用于通过第三方提供的站点访问计数器功能的计数图片显示功能：

2）

不现实阴影
属性：noshade

·图象地图：(热点)
－·图象超链接：

－·解释：把一个图象分成多个区域，实现区域图象的多个超链接（多个热点）。
－·实现：
1）创建图象热点映射：通过
2）划分热点区域：(nohref为不连接) target="目标打开方式" />。
通过手动来实现不方便，一般都通过IDE环境来创建，如Dream

waver、https://www.wendangku.net/doc/b05284153.html,
3）指定图象：定义好图象热点映射后，然后在中添加“usemap”属性来
指向被调用的“图象映射地图”名称，
名称前也加“#”，例如：
完整例子：
-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------
其中热点形状有：
1）rect矩形 coords设置左上角、右下角坐标（4个参数）。
2）poly多边形 coords设置各个顶点的坐标（n个左边）。
3）circle圆形 coords设置圆心坐标、半径（3个参数）。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝===
完 2006-12-23 16:37:53

第2讲 HTML语言高级

第2讲 HTML语言高级
＝＝＝＝＝＝＝＝＝＝＝＝＝
一、【表格标签】：
1、表格：

属性：背景颜色：bgcolor、边框宽度：border、边框颜色：bordercolor、
边框明亮部分的颜色：bordercolorlight、边框灰暗部分颜色：bordercolordark、
各个单元格之间的大小：cellspacing、单元格边框与内容间隔大小：cellpadding、
表格宽度：width、表格高度：height（高和宽可设置为px象素和%百分比）、
水平格式：align（left、center、right）。

2、表格－行：
属性：水平格式：align（left、center、right）、
垂直格式：valign（top、middle、bottom）、
行背景颜色：bgcolor。（覆盖table同类属性“局部变量有效”）

3、表格－一行种的一列：（单元格）
属性：单元格宽度：width（如果各单元格百分比之和大于100，那么多于的百分比
将平均分配给每个单元格，height类似）、单元格高度：height、水平格式：align、
垂直格式：valign、单元格占的列数：colspan、单元格占的行数：rowspan、
禁止单元格中过长内容的换行显示（它没有值，写上就生效）：nowrap（单元格内
容过长，会以“-”、空格“ ”、中文等特殊字符进行换行，通过上面的属性可以
禁止这一效果）。
！！一个问题：当单元格内容过长，会使表格撑大！（后面讲解的CSS来解决！）

4、和功能相同，只是它显示为“粗体”！
5、用于像是表格的标题！它必须放在后面紧接着！

*************************************************************************************************

二、【分帧的作用】
就是通过框架标签frame显示多个窗口，每个窗口中都可以显示一个独立的网页文件。
1、举例：
主文件：index.html
框架集： 1）上面框架：top.html
2）下面框架－左：left.html(连接right两个网页文件)
3）下面框架－右：right1.html、right2.html
源码：
1）index.html：
-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------
2）top.html：
-------------------------------------------------------------------------------------------------

这是顶部的网页文件
-------------------------------------------------------------------------------------------------
3）left.html：
-------------------------------------------------------------------------------------------------

这是左边的网页文件

显示右边的第一个文档

显示右边的第二个文档

-------------------------------------------------------------------------------------------------
4）right1.html：
-------------------------------------------------------------------------------------------------
这是第一个右边的网页文件！
-------------------------------------------------------------------------------------------------
5）right2.html：
-------------------------------------------------------------------------------------------------
这是第二个右边的网页文件！
-------------------------------------------------------------------------------------------------

2、框架集：frameset标签中不能潜入body对等其他标签中，否则框架不能显示；
而且它也不能潜入到body标签对中，是无效的！
frameset的属性：行分割：rows，列分割：cols
1）它们的取值为象素、百分比、*（剩余大小为一个帧，如果多个*，那么将剩余
大小平均分配给这几个*指定的帧），用“逗号”分割。
2）同时设置这两个属性：将按照从左到右，从上到下的顺序分割！rows X cols
个窗口。
3）还有属性：border（设置边框宽度）、frameborder（边框是否显示，默认
为1：显示，还有 0：不显示，也可以使用yes和no来代替1和0）。
3、帧（窗口）frame标签：
属性： src：显示的网页文件URL；
name：帧窗口命名，用户指定target；
scrolling：指定帧窗口带滚动条；
noresize：指定帧窗口不能手动改变大小；

4、的target属性：
指定“帧窗口名称”或是“内定的名称：_blank

、_parent、_self、_top“。
1）_blank：在一个新窗口打开连接。
2）_parent：在当前帧的直接帧父窗口（它的框架集）打开连接。（在帧窗口
才有效）
3）_self：在自身窗口打开连接（不指定target属性时的默认值）。
4）_top：在当前帧的顶部窗口（所有帧的父框架集）打开连接。（在帧窗口才
有效）
！！要注意的是，带有框架集的网页显示在一个帧窗口中时，_parent和_top就
不是上面的样子了！这个框架集的_parent是那个显示它的帧frame了！

5、

HTML语言 基础

HTML语言基础