1、HTML+CSS+JavaScript网页设计第2章HTML 基础第1页第第2章章HTML基础基础本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第2章HTML 基础第2页本章概述本章概述l作为一种网页制作语言，作为一种网页制作语言，HTML有自己的语有自己的语法规则，本章从法规则，本章从HTML的历史变迁讲起，带的历史变迁讲起，带领读者从基本的标签和元素开始，慢慢学领读者从基本的标签和元素开始，慢慢学习习HTML的基本语法，尝试制作简单的网页的基本语法，尝试制作简单的网页。HTML+CSS+JavaScript网页设计第2章HTML 基础第3页本章的学习目标本章
2、的学习目标l了解了解HTML的历史变迁的历史变迁l了解了解HTML与与XHTML的关系的关系l掌握掌握HTML 中标签和元素的基本概念中标签和元素的基本概念l掌握掌握HTML 5的文档类型声明的文档类型声明l掌握常用的文本格式化标签掌握常用的文本格式化标签l掌握掌握HTML中列表的创建与使用中列表的创建与使用l掌握链接的创建和应用掌握链接的创建和应用l掌握表格的创建与使用掌握表格的创建与使用HTML+CSS+JavaScript网页设计第2章HTML 基础第4页主要内容主要内容2.1 HTML简介简介2.2 HTML基本语法基本语法2.3 使用表格使用表格2.4 本章小结本章小结2.5 思考和
3、练习思考和练习HTML+CSS+JavaScript网页设计第2章HTML 基础第5页2.1 HTML简介简介lHTML是目前互联网上应用最为广泛的语言是目前互联网上应用最为广泛的语言，也是构成网页文档的主要语言。，也是构成网页文档的主要语言。HTML文文档是由档是由HTML标签组成的描述性文本，标签组成的描述性文本，HTML标签可以标识文字、图形、动画、声标签可以标识文字、图形、动画、声音、视频、表格、链接等。音、视频、表格、链接等。HTML+CSS+JavaScript网页设计第2章HTML 基础第6页HTML的历史变迁的历史变迁l1982年，美国人蒂姆年，美国人蒂姆伯纳斯伯纳斯李为了方便
4、世界各李为了方便世界各地的物理学家能够进行合作研究以及信息共享，地的物理学家能够进行合作研究以及信息共享，创造了创造了HTML语言语言l1993年互联网工程工作小组年互联网工程工作小组(Internet Engineering Tast Force，IETF)工作草案发布，工作草案发布，可以算作可以算作HTML的第一个版本，但它却不是一个的第一个版本，但它却不是一个正式的版本。第一个正式版本正式的版本。第一个正式版本HTML 2.0也不是出也不是出自自W3C之手，而是由之手，而是由IETF制定的，从第三个版本制定的，从第三个版本开始，开始，W3C开始接手并负责后续版本的制定工作开始接手并负责后
5、续版本的制定工作。HTML+CSS+JavaScript网页设计第2章HTML 基础第7页HTML的历史变迁的历史变迁lHTML3.0规范是由规范是由W3C于于1995年年3月提出，提供月提出，提供了很多新的特性，例如表格、文字绕排和复杂数了很多新的特性，例如表格、文字绕排和复杂数学元素的显示。学元素的显示。l从从1997年到年到1999年，年，HTML的版本从的版本从3.2到到4.0，再到再到4.01，经历了非常快的发展。，经历了非常快的发展。l在在HTML 4.01之后，之后，W3C提出了提出了XHTML 1.0的概的概念。虽然听起来完全不同，但念。虽然听起来完全不同，但XHTML 1.0
6、和和HTML 4.01其实是一样的。唯一不同的是其实是一样的。唯一不同的是XHTML 1.0要求使用要求使用XML语法。语法。HTML+CSS+JavaScript网页设计第2章HTML 基础第8页HTML的历史变迁的历史变迁l到了到了2000年，年，Web标准项目的活动开展得标准项目的活动开展得如火如荼，开发人员对浏览器里包含的那如火如荼，开发人员对浏览器里包含的那些乱七八糟的专有特性已经忍无可忍了。些乱七八糟的专有特性已经忍无可忍了。当时当时CSS有了长足的发展，而且与有了长足的发展，而且与XHTML 1.0的结合也很紧密，的结合也很紧密，CSS+XHTML 1.0可可以算是最佳实践了。虽
7、然以算是最佳实践了。虽然HTML 4.01与与XHTML 1.0没有本质上的区别，但是大部没有本质上的区别，但是大部分开发人员接受了这种组合。分开发人员接受了这种组合。HTML+CSS+JavaScript网页设计第2章HTML 基础第9页HTML的历史变迁的历史变迁lXHTML 1.0之后是之后是XHTML 1.1，规范本身没有什，规范本身没有什么新内容，元素、属性也都相同，唯一的变化就么新内容，元素、属性也都相同，唯一的变化就是把文档标记为是把文档标记为XML文档。文档。l接下来，新的版本是接下来，新的版本是XHTML 2，但是这个版本并，但是这个版本并没有完成。没有完成。l在在2004年
8、，年，W3C成员内部的一次研讨会上，成员内部的一次研讨会上，Opera公司的代表伊恩公司的代表伊恩希克森希克森(Ian Hickson)提出提出了一个扩展和改进了一个扩展和改进HTML的建议。他建议新的任的建议。他建议新的任务组可以跟务组可以跟XHTML 2并行并行HTML+CSS+JavaScript网页设计第2章HTML 基础第10页HTML的历史变迁的历史变迁lW3C于于2007年组建了年组建了HTML5工作组，在工作组，在WHATWG工作成果的基础上继续开展工作工作成果的基础上继续开展工作，由伊恩，由伊恩希克森担任希克森担任W3C HTML5规范的规范的编辑，同时兼任编辑，同时兼任WH
9、ATWG的编辑，以方便的编辑，以方便新工作组开展工作。新工作组开展工作。l在在XHTML 2.0失败之时，失败之时，HTML5已经取得已经取得了成功，因为它在开发时考虑到了当前和了成功，因为它在开发时考虑到了当前和未来的浏览器开发，以及过去、现在和将未来的浏览器开发，以及过去、现在和将来的来的Web开发任务。开发任务。HTML+CSS+JavaScript网页设计第2章HTML 基础第11页HTML的历史变迁的历史变迁lHTML5的发展核心就在于支持所有现有内的发展核心就在于支持所有现有内容的重要性。容的重要性。HTML5是向后兼容的。它包是向后兼容的。它包含了含了HTML4规范的全部特性，并
10、包括了少规范的全部特性，并包括了少量修改和完善。基于这一思想，量修改和完善。基于这一思想，W3C指出指出：应当尽可能将现有：应当尽可能将现有HTML文档处理成文档处理成HTML5，并根据现有浏览器的行为，得到，并根据现有浏览器的行为，得到与用户和作者的当前期望相兼容的结果。与用户和作者的当前期望相兼容的结果。HTML+CSS+JavaScript网页设计第2章HTML 基础第12页XHTML 基础基础lXHTML是在是在HTML语言基础上发展而来的，但是语言基础上发展而来的，但是为了兼容数以万计的现存网页和不同浏览器，为了兼容数以万计的现存网页和不同浏览器，XHTML文档与文档与HTML文档没
11、有太大区别，只是添文档没有太大区别，只是添加了加了XML语言的基本规范和要求。语言的基本规范和要求。lXHTML是根据是根据XML语法简化而来的，因此它遵循语法简化而来的，因此它遵循XML文档规范。同时文档规范。同时XHTML又大量继承又大量继承HTML语语言的语法规范，因此与言的语法规范，因此与HTML语言非常相似，不语言非常相似，不过它对代码的要求更加严谨。过它对代码的要求更加严谨。HTML+CSS+JavaScript网页设计第2章HTML 基础第13页HTML5 l2014年年10月月29日，万维网联盟宣布，经过几乎日，万维网联盟宣布，经过几乎8年的艰辛努力，年的艰辛努力，HTML5标
12、准规范终于最终制定完标准规范终于最终制定完成并公开发布。成并公开发布。lHTML5的目标是创建更简单的的目标是创建更简单的Web程序，书写出程序，书写出更简洁的更简洁的HTML代码。例如，为了使代码。例如，为了使Web应用程应用程序的开发变得更容易，提供了很多序的开发变得更容易，提供了很多API；为了使；为了使HTML变得更简洁，开发出了新的属性、新的元变得更简洁，开发出了新的属性、新的元素，等等。总体来说，素，等等。总体来说，HTML5为下一代为下一代Web平台平台提供了许许多多新的功能。提供了许许多多新的功能。HTML+CSS+JavaScript网页设计第2章HTML 基础第14页HTM
13、L5 特点特点l虽然虽然HTML5宣称的立场是宣称的立场是“非革命性的发非革命性的发展展”，但是它所带来的功能是让人渴望的，但是它所带来的功能是让人渴望的，使用它进行设计也是简单的，因此深受，使用它进行设计也是简单的，因此深受Web设计者和设计者和Web开发者的欢迎。开发者的欢迎。l(1)兼容性兼容性(2)合理性合理性(3)效率效率(4)安全性安全性l(5)分离分离(6)简单简单(7)通用通用(8)无插件无插件HTML+CSS+JavaScript网页设计第2章HTML 基础第15页主要内容主要内容2.1 HTML简介简介2.2 HTML基本语法基本语法2.3 使用表格使用表格2.4 本章小结
14、本章小结2.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第2章HTML 基础第16页2.2 HTML基本语法基本语法lHTML是超文本标记语言，作为一种网页制是超文本标记语言，作为一种网页制作语言，它有自己的语法规则作语言，它有自己的语法规则l通常，一个通常，一个HTML文档中有很多标签，且标文档中有很多标签，且标签大都是成对出现。它们中有签大都是成对出现。它们中有“开标签开标签”和和“闭标签闭标签”。尖括号中没有斜线。尖括号中没有斜线(/)的标的标签是开标签，而尖括号中第一个字符位斜签是开标签，而尖括号中第一个字符位斜线线(/)的标签为闭标签，如的标签为闭标签，如。
15、l一对标签及二者之间包含的内容称作一个一对标签及二者之间包含的内容称作一个“元素元素”(element)。HTML+CSS+JavaScript网页设计第2章HTML 基础标签和元素标签和元素l标签通常包含左尖标签通常包含左尖括号、右尖括号以括号、右尖括号以及二者间的字母和及二者间的字母和数字，如数字，如，而元素则是指开标而元素则是指开标签、闭标签以及二签、闭标签以及二者之间的任何内容者之间的任何内容。第17页 元素 开标签 闭标签 第一个 HTML5 页面 HTML+CSS+JavaScript网页设计第2章HTML 基础核心元素核心元素l、以及以及元素构成了元素构成了一个一个HTML文档的
16、框架文档的框架它们是所有网页它们是所有网页构建的基础。构建的基础。ll看上去非常简单，而且很好记。这一文档看上去非常简单，而且很好记。这一文档类型声明也是所有类型声明也是所有HTML5页面的第一行代页面的第一行代码。码。第18页HTML+CSS+JavaScript网页设计第2章HTML 基础核心元素核心元素l元素是整个元素是整个HTML文档的包含元素，出现文档的包含元素，出现在在DOCTYPE声明之后。声明之后。l元素可以包含以下几个属性：元素可以包含以下几个属性：id、dir、lang。l元素仅仅是所有其他头部元素的容器。它元素仅仅是所有其他头部元素的容器。它是开标签是开标签后出现的第一个
17、标签。后出现的第一个标签。l通常一个通常一个元素内都包含一个元素内都包含一个元素，元素，用以指定文档的标题。不过，它还可以包含以下用以指定文档的标题。不过，它还可以包含以下元素的任意一种按任意顺序出现的组合：元素的任意一种按任意顺序出现的组合：第19页HTML+CSS+JavaScript网页设计第2章HTML 基础核心元素核心元素l元素用来为网页指定一个标题，它元素用来为网页指定一个标题，它是是元素的一个子元素。元素的一个子元素。l元素用来添加样式表。该元素可以元素用来添加样式表。该元素可以使用使用href属性指向属性指向Web上的某个资源。上的某个资源。l向页面添加脚本向页面添加脚本使用使
18、用元素，然后元素，然后添加添加src属性，指向需要使用的属性，指向需要使用的JavaScript文件的位置。文件的位置。第20页HTML+CSS+JavaScript网页设计第2章HTML 基础核心元素核心元素l元素出现在元素出现在元素之后。它包含了实际想在浏览器主窗元素之后。它包含了实际想在浏览器主窗口中显示的部分，有时也被称为口中显示的部分，有时也被称为“主体内容主体内容”。l标题的标题的6个级别：个级别：、及及。l段落段落、预格式化小节、预格式化小节、断行、断行、块引用、块引用以及地址以及地址。l分组元素：分组元素：、以及以及。l呈现性元素：呈现性元素：、以及以及。l短语元素：短语元素：
19、、kbd、以及以及。l列表：如使用列表：如使用、的无序列表；使用的无序列表；使用、的有序列表；的有序列表；以及使用以及使用、及及的定义列表。的定义列表。l编辑元素：编辑元素：和和。第21页HTML+CSS+JavaScript网页设计第2章HTML 基础HTML属性属性l属性为属性为HTML元素提供了更多的附加信息。元素提供了更多的附加信息。HTML属性通常是以名称属性通常是以名称/值对的形式出现值对的形式出现在开始标签中，例如，下面的在开始标签中，例如，下面的标签标签中的中的type属性，值为属性，值为text/css：l有些属性则只含有一个名称，如有些属性则只含有一个名称，如require
20、d或者或者checked。这些属性称作。这些属性称作“布尔属性布尔属性”。在一个标签中出现一个布尔属性，则。在一个标签中出现一个布尔属性，则代表该属性值为真。代表该属性值为真。第22页HTML+CSS+JavaScript网页设计第2章HTML 基础核心属性核心属性l可以在多数可以在多数HTML元素中元素中(尽管不是全部尽管不是全部)使用的使用的4个核心属性是：个核心属性是：id、title、class和和style。id属性用来唯一标识页面中的一个元素，或者用来指属性用来唯一标识页面中的一个元素，或者用来指定一个定一个CSS样式或一段样式或一段JavaScript应该只被应用于文应该只被应用
21、于文档中的该元素。档中的该元素。class属性指定某元素属于某一特定属性指定某元素属于某一特定“类型类型”(class)。这种用法在这种用法在CSS中运用非常普遍。中运用非常普遍。title属性为元素提供一个参考的标题属性为元素提供一个参考的标题style属性用来在元素内部指定属性用来在元素内部指定CSS规则规则第23页HTML+CSS+JavaScript网页设计第2章HTML 基础文本格式化文本格式化l几乎所有的页面都包含某种形式的文本，几乎所有的页面都包含某种形式的文本，本节将学习文本格式化相关的本节将学习文本格式化相关的HTML元素。元素。主要包括如下几个标签：主要包括如下几个标签：l
22、、以及以及l、以及以及第24页HTML+CSS+JavaScript网页设计第2章HTML 基础文本格式化文本格式化l当一段文本中的两个字之间加入多个连续的空格当一段文本中的两个字之间加入多个连续的空格，默认情况下，屏幕上只有一个空格会被显示。，默认情况下，屏幕上只有一个空格会被显示。这种处理方式被称为这种处理方式被称为“空格压缩空格压缩”。类似地，在。类似地，在HTML文档中另起一个新行，或者有多个连续的文档中另起一个新行，或者有多个连续的空行，这些都会被忽略，并会作为一个空格处理空行，这些都会被忽略，并会作为一个空格处理。l如果页面中确实需要多个连续的空格时该怎么办如果页面中确实需要多个连
23、续的空格时该怎么办呢？这时有两种方法：使用呢？这时有两种方法：使用标签标签(本节后面本节后面会介绍会介绍)或使用空格符号或使用空格符号 ， 代表一代表一个空格，需要多少个空格就添加多少个个空格，需要多少个空格就添加多少个 。第25页HTML+CSS+JavaScript网页设计第2章HTML 基础文本格式化文本格式化lHTML提供了提供了6个级别的标题，使用元素个级别的标题，使用元素、以及以及。浏览器。浏览器以以6个元素中的最大字体显示个元素中的最大字体显示，而，而则最则最小。小。标签通常表示一段文字的标题或主题，标签通常表示一段文字的标题或主题，所以不宜多用，一
24、个就足够了；所以不宜多用，一个就足够了；标签标签使用数目不限，以体现多层次的内容结构。使用数目不限，以体现多层次的内容结构。l在较长的文本片段中，标题可以帮助组织文档结在较长的文本片段中，标题可以帮助组织文档结构。如果查看一下本书的目录，就能看到不同级构。如果查看一下本书的目录，就能看到不同级别的标题是如何组织的。别的标题是如何组织的。第26页HTML+CSS+JavaScript网页设计第2章HTML 基础文本格式化文本格式化l使用段落标签使用段落标签可以分段显示网页这的文可以分段显示网页这的文本，让文章具有段落之分。合理使用本，让文章具有段落之分。合理使用元元素，不仅可以减轻阅读者的视觉疲
25、劳，而素，不仅可以减轻阅读者的视觉疲劳，而且可以让文章更有条理，也利于搜索引擎且可以让文章更有条理，也利于搜索引擎优化。优化。l在开标签在开标签与闭标签与闭标签之间的所有文本之间的所有文本都在一个段落内，如果要分成多个段落，都在一个段落内，如果要分成多个段落，则需要使用多个则需要使用多个标签。标签。第27页HTML+CSS+JavaScript网页设计第2章HTML 基础文本格式化文本格式化l使用使用元素，可以将段落文本换行显示元素，可以将段落文本换行显示。元素是一个元素是一个“空元素空元素”的例子，不的例子，不需要开闭标签对，因为二者之间不会有任需要开闭标签对，因为二者之间不会有任何内容，通
26、常直接在开标签的后面加一个何内容，通常直接在开标签的后面加一个斜线，写作斜线，写作。一个。一个代表一个换代表一个换行，多个行，多个元素可以实现多次换行。元素可以实现多次换行。l与与类似的还有一个标签，也是没有不类似的还有一个标签，也是没有不需要开闭标签对的，这就是水平线标签需要开闭标签对的，这就是水平线标签，使用该标签，将在网页中添加一条，使用该标签，将在网页中添加一条水平直线。水平直线。第28页HTML+CSS+JavaScript网页设计第2章HTML 基础文本格式化文本格式化l有时候，我们希望文本与它写在有时候，我们希望文本与它写在HTML文档文档中的格式完全保持一致，不希望文本行到中的
27、格式完全保持一致，不希望文本行到达浏览器边框时自动换行。也希望浏览器达浏览器边框时自动换行。也希望浏览器忽略多个空格，并且希望文本行能够按照忽略多个空格，并且希望文本行能够按照编写时的格式换行。这就需要使用编写时的格式换行。这就需要使用标标签了。任何位于签了。任何位于开标签和开标签和闭标闭标签之间的文本都会保持其在源文件中的格签之间的文本都会保持其在源文件中的格式。式。第29页HTML+CSS+JavaScript网页设计第2章HTML 基础字体样式标签字体样式标签l：该标签将以粗体显示文本。：该标签将以粗体显示文本。l：该标签把文本定义为强调的内容，通常将文字显：该标签把文本定义为强调的内容
28、，通常将文字显示为斜体。示为斜体。l：该标签把文本定义为语气更强的强调的内容：该标签把文本定义为语气更强的强调的内容。l：该标签显示斜体文本效果，和：该标签显示斜体文本效果，和标签类似。它告标签类似。它告诉浏览器将包含其中的文本以斜体字（诉浏览器将包含其中的文本以斜体字（italic）或者倾斜）或者倾斜（oblique）字体显示。）字体显示。l：该标签实现上标文字效果。：该标签实现上标文字效果。l：该标签实现下标文字效果。该标签实现下标文字效果。l：该标签内的文本将被添加下划线。：该标签内的文本将被添加下划线。第30页HTML+CSS+JavaScript网页设计第2章HTML 基础列表列表l
29、HTML支持如下支持如下3种类型的列表：种类型的列表：l无序列表：无序列表是一个项目的列表无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。圈）进行标记。l有序列表：有序列表也是一列项目，列有序列表：有序列表也是一列项目，列表项目使用数字进行标记。表项目使用数字进行标记。l定义列表：自定义列表不仅仅是一列项定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。目，而是项目及其注释的组合。第31页HTML+CSS+JavaScript网页设计第2章HTML 基础无序列表无序列表l在在HTML中，创建无序列表中，创建无序
30、列表的标签是的标签是(ul是是unordered list无序列表的缩无序列表的缩写写)，在，在元素中需要写下元素中需要写下的每一项或每一行都应该位的每一项或每一行都应该位于开标签于开标签和闭标签和闭标签之间之间(li是是list item列表项的缩列表项的缩写写)。和和元素可以包元素可以包含所有通用属性以及含所有通用属性以及UI事件事件属性。属性。第32页HTML+CSS+JavaScript网页设计第2章HTML 基础有序列表有序列表l有序列表使用的是有序列表使用的是标签。在标签。在有序列表中，不是在每个项目前有序列表中，不是在每个项目前放置圆点，而是可以使用数字放置圆点，而是可以使用数字
31、(1、2、3)、字母、字母(A、B、C)或罗马或罗马数字数字(i、ii、iii)来前置标识它们。来前置标识它们。l有序列表默认使用从有序列表默认使用从1开始的数开始的数字标识每个项目，如前面的无序字标识每个项目，如前面的无序列表如果改为有序列表。如果要列表如果改为有序列表。如果要使用其他序列来标识项目，可以使用其他序列来标识项目，可以使用使用type属性属性第33页HTML+CSS+JavaScript网页设计第2章HTML 基础定义列表定义列表l定义列表是一种特殊类型的定义列表是一种特殊类型的列表，它的列表项由术语和列表，它的列表项由术语和随后的简短文字定义或描述随后的简短文字定义或描述组成
32、。定义列表包含在组成。定义列表包含在元素内，之后在元素内，之后在元素内元素内部包含了交替出现的部包含了交替出现的和和元素：元素：元素的内容元素的内容是所要定义的术语；是所要定义的术语；元元素中则包含了之前素中则包含了之前中术中术语的定义。语的定义。第34页HTML+CSS+JavaScript网页设计第2章HTML 基础嵌套列表嵌套列表l可以在一个列表中嵌套另一列表。对于有可以在一个列表中嵌套另一列表。对于有序列表，除非使用序列表，除非使用start特性另行指定起始特性另行指定起始序列号，否则，每一个嵌套列表都将独立序列号，否则，每一个嵌套列表都将独立排序。排序。第35页HTML+CSS+Ja
33、vaScript网页设计第2章HTML 基础链接链接l链接是网页中极为重要的部分，单击文档中的链链接是网页中极为重要的部分，单击文档中的链接，即可跳转至相应的位置。正是因为有了链接接，即可跳转至相应的位置。正是因为有了链接，用户才可以在不同的网页中来回跳转，从而方，用户才可以在不同的网页中来回跳转，从而方便地查阅各种各样的知识，享受网络带来的无穷便地查阅各种各样的知识，享受网络带来的无穷乐趣。乐趣。l创建超链接需要使用创建超链接需要使用元素。超链接包含两部元素。超链接包含两部分内容：一是链接地址，即链接的目标，可以是分内容：一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应为某个网址
34、或文件的路径，对应为标签的标签的href属性；二是链接文本或图像，单击该文本或图像属性；二是链接文本或图像，单击该文本或图像，将跳转到，将跳转到href属性指定的链接地址属性指定的链接地址第36页HTML+CSS+JavaScript网页设计第2章HTML 基础链接链接l根据链接地址是指向站外文件还是站内文根据链接地址是指向站外文件还是站内文件，链接地址可分为绝对地址和相对地址件，链接地址可分为绝对地址和相对地址绝对地址：指向目标路径的完整描述，一般指绝对地址：指向目标路径的完整描述，一般指向本站点外的文件或向本站点外的文件或URL。如【例。如【例2-12】中】中标签的标签的href属性使用的
35、就是绝对地址。属性使用的就是绝对地址。相当地址：相对于当前页面的路径，一般指向相当地址：相对于当前页面的路径，一般指向本站点内的文件，所以一般不需要完整的本站点内的文件，所以一般不需要完整的URL地址。如【例地址。如【例2-12】中加载图片的】中加载图片的标签标签，通过，通过src属性指向一个图片文件，用的就是属性指向一个图片文件，用的就是相对地址。相对地址。第37页HTML+CSS+JavaScript网页设计第2章HTML 基础链接链接l当浏览器遇到相对当浏览器遇到相对URL地址时，会将相对地址时，会将相对URL转换为完整的绝对转换为完整的绝对URL地址。而地址。而标签可以为页面指定一个基
36、础标签可以为页面指定一个基础URL地址，该标签没有关闭标签。通过这种设地址，该标签没有关闭标签。通过这种设置，浏览器会以在相对地址前加上这个基置，浏览器会以在相对地址前加上这个基础地址的方式得到完整的绝对地址。础地址的方式得到完整的绝对地址。第38页HTML+CSS+JavaScript网页设计第2章HTML 基础链接到电子邮件地址链接到电子邮件地址l链接到电子邮件地址的链接是一种特殊的链接到电子邮件地址的链接是一种特殊的超链接。单击该链接，会启动电子邮件程超链接。单击该链接，会启动电子邮件程序并打开一个新邮件，并在序并打开一个新邮件，并在“收件人收件人”栏栏中预先填入该电子邮件地址。中预先填
37、入该电子邮件地址。l创建电子邮件地址链接的方法是在创建电子邮件地址链接的方法是在元素元素中按如下形式设置中按如下形式设置href属性：属性：联系我们.l此此href属性的值由关键字属性的值由关键字mailto起始，随后起始，随后是冒号，然后是希望发送到的电子邮件地是冒号，然后是希望发送到的电子邮件地址。址。第39页HTML+CSS+JavaScript网页设计第2章HTML 基础锚点链接锚点链接l锚点链接锚点链接(也叫书签链接也叫书签链接)常用于那些内容庞常用于那些内容庞大繁琐的网页，通过单击命名锚点，可以大繁琐的网页，通过单击命名锚点，可以跳转到页面中的特定段落。跳转到页面中的特定段落。l锚
38、点链接的创建过程分为两步：创建命名锚点链接的创建过程分为两步：创建命名锚点和链接到命名锚点。锚点和链接到命名锚点。第40页HTML+CSS+JavaScript网页设计第2章HTML 基础第41页主要内容主要内容2.1 HTML简介简介2.2 HTML基本语法基本语法2.3 使用表格使用表格2.4 本章小结本章小结2.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第2章HTML 基础第42页2.3 使用表格使用表格 l表格以行和列的形式显示信息，常用于显表格以行和列的形式显示信息，常用于显示网格结构的数据，如列车时刻表、电视示网格结构的数据，如列车时刻表、电视节目表、财
39、务报告以及体育赛事等。节目表、财务报告以及体育赛事等。l表格由行、列和单元格表格由行、列和单元格3部分组成。使用表部分组成。使用表格可以排列页面中的文本、图像等各类数格可以排列页面中的文本、图像等各类数据。表格的行贯穿表格的左右，从上到下据。表格的行贯穿表格的左右，从上到下为列，行和列交汇的部分为单元格。为列，行和列交汇的部分为单元格。HTML+CSS+JavaScript网页设计第2章HTML 基础第43页创建表格创建表格lHTML的表格通过的表格通过4个标签来创建，表格标签个标签来创建，表格标签、行标签、行标签、表头标签、表头标签和表格数据和表格数据标签标签。l整个的表格是一个整个的表格是
40、一个元素。在元素。在元素元素内，表格是以行挨着行的形式书写的。每一行包内，表格是以行挨着行的形式书写的。每一行包含在一个含在一个元素内，元素内，“tr”代表代表“表格行表格行”(table row)。第一行的单元格是表头，每个单。第一行的单元格是表头，每个单元使用元使用元素写在行元素内，元素写在行元素内，“th”代表代表“表表格头格头”(table header)；第二行开始的每个单元格；第二行开始的每个单元格是表格数据，每个单元使用是表格数据，每个单元使用元素写在行元素元素写在行元素内，内，“td”代表代表“表格数据表格数据”(table data)。HTML+CSS+JavaScript网
41、页设计第2章HTML 基础第44页表格的边框表格的边框l为了更清晰每个单元格中的数据，可以使为了更清晰每个单元格中的数据，可以使用用border属性，设置表格的边框宽度，默属性，设置表格的边框宽度，默认情况下，不指定该属性，表格边框为认情况下，不指定该属性，表格边框为0，则浏览器不显示边框，如图则浏览器不显示边框，如图2-20所示。所示。lborder属性的值是边框线的宽度，单位为属性的值是边框线的宽度，单位为像素，该属性的设置只能影响表格四周的像素，该属性的设置只能影响表格四周的边框宽度，而不影响单元格之间的边框尺边框宽度，而不影响单元格之间的边框尺寸。寸。HTML+CSS+JavaScri
42、pt网页设计第2章HTML 基础第45页为表格添加标题为表格添加标题l表格常用来显示数据，为了更好的描述表表格常用来显示数据，为了更好的描述表格中数据的来源或用途，通常每个表格都格中数据的来源或用途，通常每个表格都应该拥有一个标题。这时可以使用应该拥有一个标题。这时可以使用元素，元素，元素直接出现元素直接出现在开标签在开标签之后，并应该位于第一行之后，并应该位于第一行之前。默认情况下，多数浏览器会在表格之前。默认情况下，多数浏览器会在表格上方的中央位置显示该元素的内容。上方的中央位置显示该元素的内容。HTML+CSS+JavaScript网页设计第2章HTML 基础第46页跨行与跨列跨行与跨列
43、l跨列是指将同一行的多个单元格合并为一跨列是指将同一行的多个单元格合并为一个，这就用到了个，这就用到了或或标签的标签的colspan属性，属性，col是是column(列列)的缩写，的缩写，span是宽度，该属性的值为当前单元格跨是宽度，该属性的值为当前单元格跨越的列数。越的列数。lrowspan属性的作用与属性的作用与colspan很类似，只很类似，只是它在相反的方向上工作：是它在相反的方向上工作：rowspan使单使单元格可以纵向跨越行。元格可以纵向跨越行。HTML+CSS+JavaScript网页设计第2章HTML 基础第47页表格的结构标签表格的结构标签l为了在源代码中清楚地区分表格结
44、构，为了在源代码中清楚地区分表格结构，HTML提提供了供了、和和3个标签，分个标签，分别对应表格的表头、表体和表尾。别对应表格的表头、表体和表尾。l如果表格太长在一个屏幕中显示不全，那么表头如果表格太长在一个屏幕中显示不全，那么表头与表尾可以始终保持可见，而表体则会被给予一与表尾可以始终保持可见，而表体则会被给予一个滚动条。另外，还可以使用个滚动条。另外，还可以使用CSS为为、以及以及中的内容添加不同的样式风中的内容添加不同的样式风格。格。l这这3个标签的用法都比较简单，只需将相应的个标签的用法都比较简单，只需将相应的元素放在相应的开闭标签对之间即可，元素放在相应的开闭标签对之间即可，HTML
45、+CSS+JavaScript网页设计第2章HTML 基础第48页对表格的列分组对表格的列分组l如果两个或更多列是相互关联的，则可以如果两个或更多列是相互关联的，则可以使用使用元素解释这些列应该被归元素解释这些列应该被归到同一组中。以便通过到同一组中。以便通过CSS为不同组中的为不同组中的列应用不同的样式。列应用不同的样式。l使用使用元素时，它应该直接出现元素时，它应该直接出现在在开标签之后，并包含一个开标签之后，并包含一个span属属性，用来指定该组中包含多少列。性，用来指定该组中包含多少列。HTML+CSS+JavaScript网页设计第2章HTML 基础第49页嵌套表格嵌套表格l在表格的
46、单元中也可以包含其他在表格的单元中也可以包含其他HTML元素元素，只要该元素全部包含于单元内即可。当，只要该元素全部包含于单元内即可。当表格的单元格内是另一个表格时，就创建表格的单元格内是另一个表格时，就创建了一个了一个“嵌套表格嵌套表格”。HTML+CSS+JavaScript网页设计第2章HTML 基础第50页使用表格的建议使用表格的建议l使用使用元素为表格添加标题。标题元素为表格添加标题。标题能概括表格所描绘的内容，有了一个醒目能概括表格所描绘的内容，有了一个醒目的标题，理解表格信息就会容易得多。的标题，理解表格信息就会容易得多。l尽量使用尽量使用元素指明表头，多数浏览器元素指明表头，多
47、数浏览器会默认以粗体渲染会默认以粗体渲染元素，让读者一目元素，让读者一目了然各列数据的含义。了然各列数据的含义。l始终将表头放在第一行与第一列。始终将表头放在第一行与第一列。l避免使用嵌套表格。避免使用嵌套表格。l少用少用rowspan与与colspan属性。属性。HTML+CSS+JavaScript网页设计第2章HTML 基础第51页主要内容主要内容2.1 HTML简介简介2.2 HTML基本语法基本语法2.3 使用表格使用表格2.4 本章小结本章小结2.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第2章HTML 基础第52页2.4 本章小结本章小结 l本章讲述了
48、本章讲述了HTML的基本语法。首先，介绍了的基本语法。首先，介绍了HTML的历史变迁、的历史变迁、XHTML与与HTML的关系以及的关系以及HTML 5时代的到来。接下来，对时代的到来。接下来，对HTML中的常用中的常用标签进行了详细介绍，包括标签和元素的基本概标签进行了详细介绍，包括标签和元素的基本概念、念、HTML的属性、文本格式化标签、的属性、文本格式化标签、HTML列表列表、链接的创建与使用等。最后，学习了、链接的创建与使用等。最后，学习了HTML的的表格，表格，HTML提供了强大的表格功能，合理的利提供了强大的表格功能，合理的利用表格，对于展示页面内容有很大帮助，本章内用表格，对于展
49、示页面内容有很大帮助，本章内容是容是HTML中最基础的，也是最简单的，这是网中最基础的，也是最简单的，这是网页设计的开始，后面会有更多高级的技巧等着我页设计的开始，后面会有更多高级的技巧等着我们去尝试和挑战。们去尝试和挑战。HTML+CSS+JavaScript网页设计第2章HTML 基础第53页主要内容主要内容2.1 HTML简介简介2.2 HTML基本语法基本语法2.3 使用表格使用表格2.4 本章小结本章小结2.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第2章HTML 基础第54页2.5 思考和练习思考和练习 l1.在在HTML 4.01之后，之后，W3C提出
50、了提出了 的概念。的概念。l2.在在HTML的历史变迁中，的历史变迁中，是想作为是想作为HTML的替代者出现的，的替代者出现的，但是发展到但是发展到 的时候失败了，而的时候失败了，而HTML 5取得了成功。取得了成功。l3.在在XHTML文档的第一行新增了文档的第一行新增了 元素，该元素用来定义文档元素，该元素用来定义文档类型。类型。l4.DTD是一套关于标签的是一套关于标签的 。DTD文件是一个文件是一个 文件，后缀名文件，后缀名为为 。l5.简述简述HTML5的构成。的构成。l6.什么是什么是HTML的标签，什么是的标签，什么是HTML的元素？的元素？l7.在在元素内部，存在页面的两个主要
