第2章 HTML概述和基本标记

《第2章 HTML概述和基本标记》由会员分享，可在线阅读，更多相关《第2章 HTML概述和基本标记（33页珍藏版）》请在金锄头文库上搜索。

1、第2 章 HTML概述和基本标记,邓敏 ,1.HTML概述,最初的网页都是靠编写HTML代码实现的，现在有了很多功能强大的网页编辑软件，如Dreamweaver、Frontpage等，使网页制作变得很简单。但是学习HTML语言还是很有必要的。,1.1 HTML简介,HTML（Hypertext Markup Language）是一种Web网页元素的标记语言规范，称为超文本标记语言。所谓“超文本”，是指页面内可以包含图像、链接、多媒体对象、程序等非文本元素。所谓“标记”，是指它不是程序语言，而是由文字和标签组合而成。HTML文件是纯文本文件，可以由任意文本编辑器编写，文件的扩展名为“html”。

2、 HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。,1.2 HTML的发展历史,HTML在初期，为了它更广泛地被接受，大幅度放宽了标准的严格性，导致出现了很多混乱和不规范的代码。这显然不符合标准化的发展趋势，影响了互联网的进一步发展。 为此，相关规范的制定者W3C（全球万维网联盟）组织，一直在不断地努力，逐步推出新的版本规范。 从HTML到XHTML，大致经历了以下几个版本： HTML2.0:1995.11发布 HTML3.2:1996.1.14发布 HTML4.0:1997.12.18发布 HTML4.01:1999.12.24发布 XHTML1.0:2001.1

3、发布2002.8.1修订发布 XHTML1.1:2001.5.31发布 XHTML2.0:正在制定中,1.3 文档类型的声明, 文档类型声明的作用是，告诉浏览器使用哪种规范来解释这个文档中的代码。 HTML4.01和XHTML1.0分别对应于一种严格类型（Strict）和一种过渡类型（Transitional）。过渡类型是 兼容以前版本定义的，而在新版本中已经废弃的标记和属性。严格类型则不兼容已经废弃的标记和属性。,1.4 HTML的元素与标记,网页文档的结构和格式的定义是由HTML元素来完成的，HTML元素是由单个或一对标记（标签）定义的包含范围。 在HTML中用于描述功能的符号称为“标记”

4、，它是用来控制文字、图形等显示方式的符号，例如“html”、“head”、“body”等。 标记在使用时必须用“”括起来，开始标记是指不以斜杠 （/）开头的标记，其内容是一串允许的属性-值对。结束标记则是指以斜杠 （/）开头的标记。,1.5 标记的属性,标记内可以包含一些属性，各属性之间无先后次序，也可以省略（即取默认值）。 其语法是： 例如： hr标记表示在文档当前位置画一条水平线，其中size属性定义线的粗细，属性值取整数，缺省值为1； align属性表示对齐方式，可取left（左对齐，缺省值），center（居中），right（右对齐）； width属性定义线的长度，可取相对值（由一对“

5、”号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如width=“300”），缺省值是“100%”。,1.6 HTML元素的四种形式,空元素（单标记） 带有属性的空元素 带有内容的元素（双标记） 首页 带有内容和属性的元素 网页设计,1.7 HTML文档的固有格式,HTML网页文件主要由文件头和文件体两部分内容构成。其中，文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容。下面是HTML网页的基本结构。 .HTML文件开始 .文件头开始 文件头 .文件头结束 .文件体开始 文件体 .文件体结束 HTML文件

6、结束 和标记放在网页文档的最外层，表示这对标记间的内容是HTML文档。放在文件开头， 放在文件结尾，中间可以加入其他标记。,1.8 HTML与XHTML的重要区别,1. 在XHTML中标记名称必须小写 2. 在XHTML中属性名称必须小写 3. 在XHTML中标记必须严格嵌套 4. 在XHTML中标记必须封闭 5. 在XHTML中即使是空元素的标记也必须封闭 6. 在XHTML中属性值用双引号括起来 7. 在XHTML中属性值必须使用完整形式 8. 在XHTML中应该区分“内容标记”与“结构标记”,希望大家在编写代码的过程中严格按照XHTML的规范书写。,2.HTML的基本标记,HTML的各种

7、基本标记都是一个完整的网页必不可少的。通过它们可以了解网页的基本结构及其工作原理。,2.1 头部标记,文件头用和标记，该标记出现在文件的起始部分，用来说明文件的有关信息，是文件的头部信息。 定义在HTML语言头部的内容往往不会在网页上直接显示，一般包含文件标题、搜索引擎可用的关键词以及不属于网页内容的其他信息。例如、等。,2.2 标题标记,在标记内最常用的标记是网页标题标记。 语法： 网页标题 网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能在文件的头部进行设置。 实例：2-1 title.html 文件的标题 ,2.3 元信息标记,meta元素

8、提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。 在HTML中，meta标记不需要设置结束标记，是一个单标记。在一个HTML头部中可以有多个meta元素。 Meta元素的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找、分类。其中最重要的是description（站点在搜索引擎上的描述）和keywords（关键词）。,2.3.1 设置页面关键字,设置页面关键字是为了向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类。一般可设置不止一个关键字，用逗号隔开。 语法： 实例：2-2 keywo

9、rds.html 学习元信息标记 ,2.3.2 设置页面描述,设置页面描述也是为了便于搜索引擎的查找，它用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示出来。 语法： 实例：2-3 description.html 学习元信息标记 ,2.3.3 设置作者信息,在源代码中设置网页制作者的姓名信息。 语法： 实例：2-4 author.html 学习元信息标记 ,2.3.4 设置网页文字及语言,在网页中还可以通过语句来设定语言的编码方式。这样，浏览器就可以正确地选择语言，而不需要人工选取。 语法： 在该语法中，http-equiv用于传送HTTP通信协议的标头，也就是设定标头属

10、性的名称，在content中才是具体的属性值。其中charset设置了字符集的类型，中国内地常用的是简体中文gb_2312。 实例：2-5 Content-Type.html 设定语言 ,2.3.5 设置网页的定时跳转,在浏览网页时经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动跳转到其他页面中。 语法： 跳转时间默认以秒为单位。 当语法中的链接地址被省略时，网页的功能就变成了刷新页面本身，这在不断更新数据的页面中常常会用到。,2.3.5 设置网页的定时跳转,实例：2-6 refresh 跳转.html 学习元信息标记 您好，本页在3秒之后将自动跳转到搜狐网站。 ,2.3.5 设

11、置网页的定时跳转,实例：2-7 refresh 刷新.html 页面的刷新 您好，本页每隔1分钟自动刷新一次。 ,2.3.6 设置网页的过渡效果,语法： 在该语法中，过渡事件值为page-enter时是进入页面，值为page-exit时是离开页面。过渡效果持续时间默认情况下以秒为单位，过渡方式取值为0到23，分别代表盒状收缩、盒状放射等不同的过渡方式。 实例：2-8 enter.html 进入页面的过渡效果 ,2.4 基底网址标记,绝对路径是将服务器上磁盘驱动器名称和完整的路径写出来，同时也会表现出磁盘上的目录结构；相对路径是相对于当前HTML文档所在目录或站点根目录的路径。 当浏览器浏览页面

12、时，会通过标记将相对地址附在基底网址的后面，从而把当前页面中所有的相对URL转换成绝对URL。 例如：在头部定义基底网址如下： 在页面主体中设置的某个相对地址如下： 当使用浏览器浏览时，这个链接地址就变成如下的绝对地址： 因此，在HTML页面中设置基底标记时不应该多于一个。,2.4 基底网址标记,语法： 在该语法中，链接地址就是要设置的页面基底地址，新窗口的打开方式可以设置为不同的效果，具体取值如下： _parent 在上一级窗口打开，常用在分帧的框架页中 _blank 在新窗口打开 _self 在同一窗口打开，可以省略 _top 在浏览器的整个窗口打开，忽略任何框架,2.4 基底网址标记,实

13、例：2-9 base.html 学习元信息标记 打开一个相对地址 ,2.5 页面主体标记,文件主体用和标记，它是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。 在网页的主体标记中可以设置很多属性，如页面的背景、文字属性、链接属性、边距属性等。,2.5.1 设置页面背景色bgcolor,主体标记中的bgcolor属性用于设置页面背景颜色，使用“#”加上6位十六进制来表现颜色。其中#FFFFFF为白色，#000000为黑色，#FF0000为红色，#00FF00为绿色，#0000FF为蓝色。 语法： 实例：2-10 bgcolor.html 设

14、置页面背景色 ,2.5.2 设置背景图片background,语法： 文件链接地址可以是相对地址，也可以是绝对地址。在默认情况下，如果省略bgproperties属性，图片会按照水平和垂直方向不断重复出现，直到铺满整个页面。如果希望图片不重复显示，一般情况下需要借助CSS样式，我们将会在以后的章节中学习。 如果将bgproperties属性设置为fixed，那么当滚动页面时，背景图像也会跟着移动。 实例：2-11 background.htm 背景图片的设置 ,2.5.3 设置文字颜色text,在没有对文字的颜色进行单独定义时，可以在主体标记中用text属性对页面中所有文字设置颜色。 语法：

15、实例：2-12 text.html 设置页面文字颜色 设置页面的文字颜色 ,2.5.4 设置链接文字属性link,通常情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字则变为暗红色，用户可以在页面主体标记中对没有单独设置过颜色的链接进行颜色的设置。 语法： ,2.5.4 设置链接文字属性link,实例：2-13 link.html 设置文字的链接效果 链接文字 已经访问过的链接 ,2.5.5 设置边距margin,页面主体中的margin属性用于定义内容与浏览器边框之间的距离。其中包括上边框和左边框。 语法： 默认情况下，边距的值以像素为单位。 实例：2-14 margin.html 设置页面的上边距为60像素 设置页面的左边距为40像素 ,2.6 页面注释标记,适当的注释可以帮助用户更好地了解网页中各个模块的划分，也有助于以后对代码的检查与维护，添加注释是一种很好的编程习惯。 语法： 实例：2-15 注释.html 注释标记 设置页面的上边距为60像素 设置页面的左边距为40像素 注释语句是用来帮助用户理解代码、维护代码的。 ,