第2章 HTML概述和基本标记

单击此处编辑母版标题样式,单击此处编辑母版文本样式,Neusoft Institute of Information,教育创造学生价值,第,2,章,HTML,概述和基本标记,邓敏,1.HTML,概述,最初的网页都是靠编写,HTML,代码实现的，现在有了很多功能强大的网页编辑软件，如,Dreamweaver,、,Frontpage,等，使网页制作变得很简单。但是学习,HTML,语言还是很有必要的。,1.1 HTML,简介,HTML,（,Hypertext Markup Language,）是一种,Web,网页元素的标记语言规范，称为,超文本标记语言,。所谓,“,超文本,”,，是指页面内可以包含图像、链接、多媒体对象、程序等非文本元素。所谓,“,标记,”,，是指它不是程序语言，而是由文字和标签组合而成。,HTML,文件是纯文本文件，可以由任意文本编辑器编写，文件的扩展名为,“,html,”,。,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,发布,2002.8.1,修订发布,XHTML1.1:2001.5.31,发布,XHTML2.0:,正在制定中,1.3,文档类型的声明,文档类型声明的作用是，告诉浏览器使用哪种规范来解释这个文档中的代码。,HTML4.01,和,XHTML1.0,分别对应于一种严格类型（,Strict,）和一种过渡类型（,Transitional,）。,过渡类型是 兼容以前版本定义的，而在新版本中已经废弃的标记和属性。严格类型则不兼容已经废弃的标记和属性。,1.4 HTML,的元素与标记,网页文档的结构和格式的定义是由,HTML,元素,来完成的，,HTML,元素是由单个或一对标记（标签）定义的包含范围。,在,HTML,中用于描述功能的符号称为“,标记,”，它是用来控制文字、图形等显示方式的符号，例如“,html,”、“,head,”、“,body,”等。,标记在使用时必须用“,”括起来，,开始标记,是指不以斜杠（,/,）开头的标记，其内容是一串允许的,属性,-,值,对。,结束标记,则是指以斜杠（,/,）开头的标记。,1.5,标记的属性,标记内可以包含一些属性，各属性之间无先后次序，也可以省略（即取默认值）。,其语法是：,例如：,hr,标记表示在文档当前位置画一条水平线，其中,size,属性定义线的粗细，属性值取整数，缺省值为,1,；,align,属性表示对齐方式，可取,left,（左对齐，缺省值），,center,（居中），,right,（右对齐）；,width,属性定义线的长度，可取相对值（由一对“”号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如,width=,“,300,”），缺省值是“,100%,”。,1.6 HTML,元素的四种形式,空元素（单标记）,带有属性的空元素,带有内容的元素（双标记）,首页,带有内容和属性的元素,网页设计,1.7 HTML,文档的固有格式,HTML,网页文件主要由,文件头,和,文件体,两部分内容构成。其中，文件头是对文件进行一些必要的定义，文件体是,HTML,网页的主要部分，它包括文件所有的实际内容。下面是,HTML,网页的基本结构。,.HTML,文件开始,.,文件头开始,文件头,.,文件头结束,.,文件体开始,文件体,.,文件体结束,HTML,文件结束,和,标记放在网页文档的最外层，表示这对标记间的内容是,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,的各种基本标记都是一个完整的网页必不可少的。通过它们可以了解网页的基本结构及其工作原理。,2.1,头部标记,文件头用,和,标记，该标记出现在文件的起始部分，用来说明文件的有关信息，是文件的头部信息。,定义在,HTML,语言头部的内容往往不会在网页上直接显示,，一般包含文件标题、搜索引擎可用的关键词以及不属于网页内容的其他信息。例如,、,、,、,、,等。,2.2,标题标记,在,标记内最常用的标记是网页标题标记,。,语法：,网页标题,网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能在文件的头部进行设置。,实例：,2-1 title.html,文件的标题,2.3,元信息标记,meta,元素提供的信息是用户不可见的，,它不显示在页面中,，一般用来定义页面信息的名称、关键字、作者等。,在,HTML,中，,meta,标记不需要设置结束标记，是一个单标记。在一个,HTML,头部中可以有多个,meta,元素。,Meta,元素的属性有两种：,name,和,http-equiv,，其中,name,属性主要用于描述网页，以便于搜索引擎查找、分类。其中最重要的是,description,（站点在搜索引擎上的描述）和,keywords,（关键词）。,2.3.1,设置页面关键字,设置页面关键字是为了向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类。一般可设置不止一个关键字，用逗号隔开。,语法：,实例：,2-2 keywords.html,学习元信息标记,2.3.2,设置页面描述,设置页面描述也是为了便于搜索引擎的查找，它用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示出来。,语法：,实例：,2-3 description.html,学习元信息标记,2.3.3,设置作者信息,在源代码中设置网页制作者的姓名信息。,语法：,实例：,2-4 author.html,学习元信息标记,2.3.4,设置网页文字及语言,在网页中还可以通过语句来设定语言的编码方式。这样，浏览器就可以正确地选择语言，而不需要人工选取。,语法：,在该语法中，,http-equiv,用于传送,HTTP,通信协议的标头，也就是设定标头属性的名称，在,content,中才是具体的属性值。其中,charset,设置了字符集的类型，中国内地常用的是简体中文,gb_2312,。,实例：,2-5 Content-Type.html,设定语言,2.3.5,设置网页的定时跳转,在浏览网页时经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动跳转到其他页面中。,语法：,跳转时间默认以秒为单位。,当语法中的链接地址被省略时，网页的功能就变成了刷新页面本身，这在不断更新数据的页面中常常会用到。,2.3.5,设置网页的定时跳转,实例：,2-6 refresh,跳转,.html,学习元信息标记,您好，本页在,3,秒之后将自动跳转到搜狐网站。,2.3.5,设置网页的定时跳转,实例：,2-7 refresh,刷新,.html,页面的刷新,您好，本页每隔,1,分钟自动刷新一次。,2.3.6,设置网页的过渡效果,语法：,在该语法中，过渡事件值为,page-enter,时是进入页面，值为,page-exit,时是离开页面。过渡效果持续时间默认情况下以秒为单位，过渡方式取值为,0,到,23,，分别代表盒状收缩、盒状放射等不同的过渡方式。,实例：,2-8-1.html,进入页面的过渡效果,练习一：,创建一个新页面，要求：,网页标题为“网页设计与制作”,;,关键字为“网页设计，网页制作”,;,描述为“关于网页设计的网站”,;,作者为学号和姓名,;,页面文字内容“本网页将自动跳转到东软学院,”;,自动定时,3,秒,自动跳转到学院主页。,2.4,基底网址标记,绝对路径是将服务器上磁盘驱动器名称和完整的路径写出来，同时也会表现出磁盘上的目录结构；相对路径是相对于当前,HTML,文档所在目录或站点根目录的路径。,当浏览器浏览页面时，会通过,标记将相对地址附在基底网址的后面，从而把当前页面中所有的相对,URL,转换成绝对,URL,。,例如：在头部定义基底网址如下：,在页面主体中设置的某个相对地址如下：,当使用浏览器浏览时，这个链接地址就变成如下的绝对地址：,http:/ base.html,学习元信息标记,打开一个相对地址,2.5,页面主体标记,文件主体用,和,标记，它是,HTML,文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。,在网页的主体标记中可以设置很多属性，如页面的背景、文字属性、链接属性、边距属性等。,2.5.1,设置页面背景色,bgcolor,主体标记中的,bgcolor,属性用于设置页面背景颜色，使用“,#,”加上,6,位十六进制来表现颜色。其中,#FFFFFF,为白色，,#000000,为黑色，,#FF0000,为红色，,#00FF00,为绿色，,#0000FF,为蓝色。,语法：,实例：,2-10 bgcolor.html,设置页面背景色,2.5.2,设置背景图片,background,语法：,文件链接地址可以是相对地址，也可以是绝对地址。在默认情况下，如果省略,bgproperties,属性，图片会按照水平和垂直方向不断重复出现，直到铺满整个页面。如果希望图片不重复显示，一般情况下需要借助,CSS,样式,，我们将会在以后的章节中学习。,如果将,bgproperties,属性设置为,fixed,，那么当滚动页面时，背景图像也会跟着移动。,实例：,2-11 background.htm,背景图片的设置,2.5.3,设置文字颜色,text,在没有对文字的颜色进行单独定义时，可以在主体标记中用,text,属性对页面中所有文字设置颜色。,语法：,实例：,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,像素,注释语句是用来帮助用户理解代码、维护代码的。,