第4章 HTML语言,4.1 HTML编程技术 4.2 HTML简介 4.3 HTML基本语法和结构 4.4 HTML常用标记,4.1 HTML编程技术,HTML（Hypertext Markup Language，超文本标记语言）是用于创建Web文档的编辑语言。HTML编程语言不像其他高级程序语言（如C，VB，C+，Java）需要编译连接后运行，它由客户端的浏览器解释执行，是一个简单易学的网络编辑语言。自从1990年首次用于网页编辑后，由于其编写制作的简单性，HTML迅速成为网页编程的主流语言。几乎所有的网页都是由HTML或以其他程序语言嵌套在HTML语言中编写，所以也有人称HTML是网页的本质，希望初学者能够熟练掌握。,下一页,返回,4.1 HTML编程技术,当浏览者在浏览器中任意打开一个网页，然后在窗口中不是图像的任意位置上单击鼠标右键后，在弹出的快捷菜单中选择“查看原文件”选项（也可以选择菜单栏中“查看”“源文件”选项），系统会启动记事本程序，打开网页的原程序，如图4-1所示。,上一页,返回,下一页,图4-1,返回,4.1 HTML编程技术,这些文本其实就是HTML源代码，从图4-1可以看出HTML语言格式简单又严明，现在看不懂没关系，我们将在下面章节进行详细的讲解，采取循序渐进、步步深入的方法，把你带进HTML的世界。通过学习这章的内容我们就可以在网上建立自己的网站了。,上一页,返回,4.2 HTML简介,HTML是在万维网上建立超文本文件的语言。HTML源于SGML（Standard Generalize Markup Language，标准通用标记语言）的设计概念，SGML的目的是为了使网络上文档格式统一，易于交流。SGML标记的英文称作tag，就是在文档需要的地方插入特定记号，以控制文档内容的显示，这就是文档格式定义。HTML采用SGML的“文档格式定义”概念，通过标记与属性对一段文本的语义进行描述，并提供由一个文件到另一个文件，或在一个文件内部不同部分之间的链接。,返回,下一页,4.2 HTML简介,HTML标记是区分文本各个部分的分界符，用于将HTML文档划分成不同的逻辑部分（如段落、标题等），它描述了文档的结构，与属性一起向浏览器提供该文档的格式化信息以传递文档的外观特征。 HTML文件是标准的ASCII文本文件，与平台无关，可被任何文本编辑器编辑。文件的扩展名为.html或.htm。,上一页,返回,4.3 HTML基本语法和结构,HTML文件由两部分组成：头部和体部，每一部分均由特定的标记指出。其结构如下：,返回,下一页, 文档标题 ,：文本头部,：文本体部,HTML文档,4.3 HTML基本语法和结构,从上面可以看出以下事项。 （1）HTML文档包括3个主要标记，文档标记、头部标记、体部标记。 （2）标记不区分大小写。 （3）标记名与“”之间不能有空格。 在内称为文件的头部，这部分信息在浏览器的窗口中显示出来。通常包括标题（）、头元素（）、代码()等。 在内称为文件体部，在浏览器中显示的内容和显示内容的格式标记都放在这里。,上一页,返回,4.4 HTML常用标记,4.4.1 HTML字体标记 字体标记分标题字体标记和字符格式化标记。 1. 标题字体标记 标题字体通过标记实现，在和中间的文字为加粗、加黑、加大显示。标题元素共有6种，分别为h1，h2h6，用于表示文档中的各级标题。标题号x越小，则表示的标题字体就越大。默认情况下，浏览器对各级标题做如下解释。,返回,下一页,4.4 HTML常用标记,（1）h1：黑体，特大字体，上下各有两行空行。 （2）h2：黑体，大字体，上下各有12行空行。 （3）h3：黑体，斜体，大字体，左端稍缩进，上下各空一行。 （4）h4：黑体，普通字体，比h3更多缩进，上空一行。 （5）h5：黑体，斜体，与h4缩进相同，上空一行。 （6）h6：黑体，与正文缩进相同，上空一行。,上一页,返回,下一页,4.4 HTML常用标记,其语法格式为： x为1，2，3，4，5，6；参数align表示标题文本的对齐方式（Left是左对齐，Right是右对齐，Center是居中对齐）。 例：标题字体。,上一页,返回,下一页,4.4 HTML常用标记, 标题字体标记演示 标题字体标记演示 标题字体标记演示 标题字体标记演示,上一页,返回,下一页,4.4 HTML常用标记,标题字体标记演示 标题字体标记演示 标题字体标记演示 程序运行结果如图4-2所示。,上一页,返回,下一页,图4-2,返回,4.4 HTML常用标记,2. 字符格式化标记 文字字体、大小、颜色标记 在Web页面中，标记用来格式化文本，使浏览器按照指定的字体类型、字号大小及字体颜色来显示文本。 语法格式为： ,上一页,返回,下一页,4.4 HTML常用标记,（1）face：指定相应字体，#为宋体、隶书、楷体等。 （2）size：指定字号大小，#为0，1，2或 +#、-#。 （3）Color：指定字体色彩，#为red，blue，#000000等。 HTML文件中许多都有颜色控制，颜色值在HTML中有两种表示法。 （1）RGB值表示：颜色的16进制RGB值为“RRGGBB”，例如“#ff0000”表示红色，“#0000ff”表示蓝色。,上一页,返回,下一页,4.4 HTML常用标记,（2）英文单词表示，如red表示红色；blue表示蓝色。 在HTML文件中，可以使显示的文本为黑体、斜体或下划线格式。 （1）加粗显示文本。 （2）以斜体显示文本。 （3）以下划线体显示文本。 例：文字显示。,上一页,返回,下一页,4.4 HTML常用标记, 格式化文字显示 文字显示 文字显示,上一页,返回,下一页,4.4 HTML常用标记,文字显示 文字显示 文字显示 文字显示 程序运行结果如图4-3所示。 上例中的标记的作用是换行，它和其他标记有所不同，是一个非对称标记，不像其他标记都是成双出现。标记的作用是居中显示。,上一页,返回,下一页,图4-3,返回,4.4 HTML常用标记,4.4.2 HTML表格标记 表格是最常用的页面元素，在页面中用表格来表示数据，直观、清晰。而且HTML的表格使用非常灵活，许多较复杂的页面布局也可利用表格来完成。在Internet上浏览到的许多页面都大量使用了表格。在HTML中，表格是由一个表格名称（标题）再加上一行或多行表格内容所构成的块状结构。,上一页,返回,下一页,4.4 HTML常用标记,1. 表格的定义 表格定义的语法结构如下： 标题内容 表格内容 表格内容 ,上一页,返回,下一页,4.4 HTML常用标记,和标记对标记表格结构的起始和结束；和标记是可选项，该标记中的内容是表格的标题；和标记一个表格行的开始和结束；一个表格行中可以包含多个表格项，每个表格项的内容和显示特性由标记对和来定义。,上一页,返回,下一页,4.4 HTML常用标记,2. 表格属性 标记、和的属性用来定义表格的显示特性，其中的各属性描述整个表格的显示特性，行控制标记的各属性定义该行的显示特性，表格项控制标记的各属性定义该项的显示特性。利用它们丰富的属性可以设计出各种复杂的表格。这些属性分别列于表4-1、表4-2、表4-3中。,上一页,返回,下一页,表4-1,返回,表4-2,返回,表4-3,返回,4.4 HTML常用标记,例：一个表格简单示例。 表格示例 成绩表 ,上一页,返回,下一页,4.4 HTML常用标记, 学号 姓名 课名 分数 03552301 王二 数学 80 ,上一页,返回,下一页,4.4 HTML常用标记, 03552302 张三 数学 70 ,上一页,返回,下一页,4.4 HTML常用标记, 03552303 李四 数学 90 该文件在浏览器中显示的结果如图4-4所示。,上一页,返回,下一页,图4-4,返回,4.4 HTML常用标记, 例：以下是一个比较复杂的表格例子。每行列数及每列行数不相同，利用td标记的colspan和rowspan属性可以对表格的单元格进行灵活的控制。 复杂表格的设计 ,上一页,返回,下一页,4.4 HTML常用标记, 专业设置及在校人数 系名 专业及人数 ,上一页,返回,下一页,4.4 HTML常用标记, 计算机与科学系 计算机及应用专业 ,上一页,返回,下一页,4.4 HTML常用标记, 99级 98级 97级 96级 ,上一页,返回,下一页,4.4 HTML常用标记, 300人 200人 200人 150人 ,上一页,返回,下一页,4.4 HTML常用标记, 信息工程专业 99级 98级 97级 96级 ,上一页,返回,下一页,4.4 HTML常用标记, 400人 300人 250人 250人 ,上一页,返回,下一页,4.4 HTML常用标记, 英语系 英语专业 99级 98级 97级 96级 ,上一页,返回,下一页,4.4 HTML常用标记, 200人 150人 102人 100人 该文件在浏览器中显示的结果如图4-5所示。,上一页,返回,下一页,图4-5,返回,4.4 HTML常用标记,4.4.3 HTML标记 标示标记包括列表标记和预定格式标记。列表标记也是HTML的一个基本结构，有3种类型列表如下所示。 （1）无序列表。 一般以圆点或正方形显示（依浏览器不同，系统自定）列表符。 其语法格式为： 列表项 ,上一页,返回,下一页,4.4 HTML常用标记,（2）有序列表。 标记中type属性用来定义列表符的显示形式，它的值可以为数字、字符和阿拉伯字符。 其语法格式为： 列表项 ,上一页,返回,下一页,4.4 HTML常用标记,（3）定义列表。 用于对列表的条目简短说明，包括一系列名词及解释，名词比解释部分凸出，独站一行，解释部分被视为一长串文字自动换行。 其语法格式为： 列表条目 列表说明 ,上一页,返回,下一页,4.4 HTML常用标记,在HTML文档中空格将被忽略，也就是说HTML文档中出现多个空格的时候只会显示一个空格，如果想同时显示多个空格应该怎么办？预定格式（Preformatted）标记能够轻松地解决上述问题，预定格式（Preformatted）标记可以使信息完全按照HTML文件中编排的格式原样显示于浏览器中，该标记的格式为：。在此标记对中不必担心信息在浏览器中的显示会出现偏差，下面给出具体示例。,上一页,返回,下一页,4.4 HTML常用标记, 例：列表标记的使用。 标示标记的使用 ,上一页,返回,下一页,4.4 HTML常用标记, 今天上午课程安排 数学语文物理化学 今天上午课程安排,上一页,返回,下一页,4.4 HTML常用标记, 数学 语文 物理 化学 ,上一页,返回,下一页,4.4 HTML常用标记,数学 语文 物理 化学 数学语文物理 化学 ,上一页,返回,下一页,4.4 HTML常用标记,该文件在浏览器中显示的结果如图4-6所示。 从上面可以明显看出标记的作用，不加标记空格被忽略成一个空格，加标记后空格原样显示。标记是头部标记，用于指定该HTML文档的一些特殊属性，从功能上完善网页。使用标记可以包含自定义文本，用来指定文档作者、检索的关键字及创建日期等信息，这样在网上使用搜索引擎搜索时就可以显示出它的信息。 标记包含以下3个属性。,上一页,返回,下一页,图4-6,返回,4.4 HTML常用标记,（1）Name（声明版权）。 （2）HTTP-Equiv（绑定HTTP的响应元素）：说明content属性内容的类别。例如http-equiv=“refresh“，则content中是页面刷新的时间；http-equiv=“content-language“，则content中是页面语言；http-equiv=“PICS-Label“，则content中是页面内容的等级；http-equiv=“expires“，则content中是页面过期的日期。 （3）Content(为声明的