第2章 HTML概述和基本标记

NeusoftInstituteofInformation教育创造学生价值第2章HTML概述和基本标记邓敏[e-mail]ormation教育创造学生价值1.HTML概述最初的网页都是靠编写HTML代码实现的，现在有了很多功能强大的网页编辑软件，如Dreamweaver、Frontpage等，使网页制作变得很简单。但是学习HTML语言还是很有必要的。NeusoftInstituteofInformation教育创造学生价值1.1HTML简介•HTML（HypertextMarkupLanguage）是一种Web网页元素的标记语言规范，称为超文本标记语言。所谓“超文本”，是指页面内可以包含图像、链接、多媒体对象、程序等非文本元素。所谓“标记”，是指它不是程序语言，而是由文字和标签组合而成。HTML文件是纯文本文件，可以由任意文本编辑器编写，文件的扩展名为“html”。•HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。NeusoftInstituteofInformation教育创造学生价值1.2HTML的发展历史•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:正在制定中NeusoftInstituteofInformation教育创造学生价值1.3文档类型的声明•!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN•htmlxmlns=•……•/html•文档类型声明的作用是，告诉浏览器使用哪种规范来解释这个文档中的代码。•HTML4.01和XHTML1.0分别对应于一种严格类型（Strict）和一种过渡类型（Transitional）。过渡类型是兼容以前版本定义的，而在新版本中已经废弃的标记和属性。严格类型则不兼容已经废弃的标记和属性。NeusoftInstituteofInformation教育创造学生价值1.4HTML的元素与标记•网页文档的结构和格式的定义是由HTML元素来完成的，HTML元素是由单个或一对标记（标签）定义的包含范围。•在HTML中用于描述功能的符号称为“标记”，它是用来控制文字、图形等显示方式的符号，例如“html”、“head”、“body”等。•标记在使用时必须用“”括起来，开始标记是指不以斜杠（/）开头的标记，其内容是一串允许的属性-值对。结束标记则是指以斜杠（/）开头的标记。NeusoftInstituteofInformation教育创造学生价值1.5标记的属性•标记内可以包含一些属性，各属性之间无先后次序，也可以省略（即取默认值）。•其语法是：•标记名称属性1属性2属性3…•例如：•hrsize=“3”align=“left”width=“75%”/•hr标记表示在文档当前位置画一条水平线，其中size属性定义线的粗细，属性值取整数，缺省值为1；•align属性表示对齐方式，可取left（左对齐，缺省值），center（居中），right（右对齐）；•width属性定义线的长度，可取相对值（由一对“”号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如width=“300”），缺省值是“100%”。NeusoftInstituteofInformation教育创造学生价值1.6HTML元素的四种形式•空元素（单标记）•br/•带有属性的空元素•hrcolor=“blue”/•带有内容的元素（双标记）•title首页/title•带有内容和属性的元素•fontcolor=“red”网页设计/fontNeusoftInstituteofInformation教育创造学生价值1.7HTML文档的固有格式•HTML网页文件主要由文件头和文件体两部分内容构成。其中，文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容。下面是HTML网页的基本结构。•HTML…………………………………….HTML文件开始•HEAD……………………………………..文件头开始•文件头•/HEAD..……………………………………文件头结束•BODY…………………………………….文件体开始•文件体•/BODY…………………………………….文件体结束•/HTML……………………………………HTML文件结束•HTML和/HTML标记放在网页文档的最外层，表示这对标记间的内容是HTML文档。HTML放在文件开头，/HTML放在文件结尾，中间可以加入其他标记。NeusoftInstituteofInformation教育创造学生价值1.8HTML与XHTML的重要区别1.在XHTML中标记名称必须小写2.在XHTML中属性名称必须小写3.在XHTML中标记必须严格嵌套4.在XHTML中标记必须封闭5.在XHTML中即使是空元素的标记也必须封闭6.在XHTML中属性值用双引号括起来7.在XHTML中属性值必须使用完整形式8.在XHTML中应该区分“内容标记”与“结构标记”希望大家在编写代码的过程中严格按照XHTML的规范书写。NeusoftInstituteofInformation教育创造学生价值2.HTML的基本标记HTML的各种基本标记都是一个完整的网页必不可少的。通过它们可以了解网页的基本结构及其工作原理。NeusoftInstituteofInformation教育创造学生价值2.1头部标记head•文件头用head和/head标记，该标记出现在文件的起始部分，用来说明文件的有关信息，是文件的头部信息。•定义在HTML语言头部的内容往往不会在网页上直接显示，一般包含文件标题、搜索引擎可用的关键词以及不属于网页内容的其他信息。例如title、base、meta、style、link等。NeusoftInstituteofInformation教育创造学生价值2.2标题标记title•在head标记内最常用的标记是网页标题标记title。•语法：•title网页标题/title•网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能在文件的头部进行设置。•实例：2-1title.html•head•title文件的标题/title•/headNeusoftInstituteofInformation教育创造学生价值2.3元信息标记meta•meta元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。•在HTML中，meta标记不需要设置结束标记，是一个单标记。在一个HTML头部中可以有多个meta元素。•Meta元素的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找、分类。其中最重要的是description（站点在搜索引擎上的描述）和keywords（关键词）。NeusoftInstituteofInformation教育创造学生价值2.3.1设置页面关键字•设置页面关键字是为了向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类。一般可设置不止一个关键字，用逗号隔开。•语法：•metaname=“keywords”content=“关键字1,关键字2,……”/•实例：2-2keywords.html•head•title学习元信息标记/title•metaname=keywordscontent=html,元信息,关键字/•/headNeusoftInstituteofInformation教育创造学生价值2.3.2设置页面描述•设置页面描述也是为了便于搜索引擎的查找，它用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示出来。•语法：•metaname=“description”content=“页面的描述语言”/•实例：2-3description.html•head•title学习元信息标记/title•metaname=keywordscontent=html,元信息,关键字/•metaname=descriptioncontent=关于HTML使用的网站/•/headNeusoftInstituteofInformation教育创造学生价值2.3.3设置作者信息•在源代码中设置网页制作者的姓名信息。•语法：•metaname=“author”content=“作者的姓名”/•实例：2-4author.html•head•title学习元信息标记/title•metaname=keywordscontent=html,元信息,关键字/•metaname=descriptioncontent=关于HTML使用的网站/•metaname=authorcontent=张三/•/headNeusoftInstituteofInformation教育创造学生价值2.3.4设置网页文字及语言•在网页中还可以通过语句来设定语言的编码方式。这样，浏览器就可以正确地选择语言，而不需要人工选取。•语法：•metahttp-equiv=“content-type”content=“text/html;charset=字符集类型”/•在该语法中，http-equiv用于传送HTTP通信协议的标头，也就是设定标头属性的名称，在content中才是具体的属性值。其中charset设置了字符集的类型，中国内地常用的是简体中文gb_2312。•实例：2-5Content-Type.html•head•metahttp-equiv=Content-Typecontent=text/html;charset=gb-2312•title设定语言/title•/headNeusoftInstituteofInformation教育创造学生价值2.3.5设置网页的定时跳转•在浏览网页时经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动跳转到其他页面中。•语法：•metahttp-equiv=“refresh”content=“跳转时间;url=链接地址”/•跳转时间默认以秒为单位。•当语法中的链接地址被省略时，网页的功能就变成了刷新页面本身，这在不断更新数据的页面中常常会用到。NeusoftInstituteofInformation教育创造学生价值2.3.5设置网页的定时跳转•实例：2-6refresh跳转.html•html•head•title学习元信息标记/title•metahttp-equiv=refreshcontent=3;url=•/head•body•您好，本页在3秒之后将自动跳转到搜狐网站。•/bo