HTML基本语法

1、Page 1第第2章章 HTML基本语法基本语法 HTML语言与企业网站语言与企业网站Page 2学习目标学习目标v掌握文本格式标签掌握文本格式标签v了解字体标签了解字体标签v了解了解HTML的颜色机制的颜色机制v掌握图形链接、内部链接和外部链接掌握图形链接、内部链接和外部链接v掌握列表标签掌握列表标签Page 32.1 文本文本2.1.1 文本格式文本格式2.1.2 字体字体2.1.3 颜色颜色Page 42.1.1 文本格式文本格式 很多标签都可以用来改变文本的外观，并为文很多标签都可以用来改变文本的外观，并为文本关联其隐藏的含义。总地来说，这些标签可以本关联其隐藏的含义。总地来说，这些标

2、签可以分成两类：基于内容的样式（分成两类：基于内容的样式（content-based style）和物理样式（）和物理样式（physical style）。）。Page 52.1.1 文本格式文本格式v 基于内容的样式基于内容的样式 基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。然后浏览器就会把与该含义、上下文或者义、上下文或者用法。然后浏览器就会把与该含义、上下文或者用法一致的格式应用在文本上。请注意这里面的区别。基于内容用法一致的格式应用在文本上。请注意这里面的区别。基于内容的标签赋予含义，而不是格式化。

3、因此，它们对于自动处理来说的标签赋予含义，而不是格式化。因此，它们对于自动处理来说非常重要；计算机并不关心文档的外观如何。非常重要；计算机并不关心文档的外观如何。 因为字体样式是通过语义线索来指定的，因此浏览器可以为用户因为字体样式是通过语义线索来指定的，因此浏览器可以为用户选择一种合适的显示样式。由于不同地点的样式各种各样，所以选择一种合适的显示样式。由于不同地点的样式各种各样，所以使用基于内容的样式可以帮助你确保自己的文档对广大范围的读使用基于内容的样式可以帮助你确保自己的文档对广大范围的读者来说都是有意义的。这一点在专门供那些盲人和残疾人所使用者来说都是有意义的。这一点在专门供那些盲人和

4、残疾人所使用的浏览器上显得尤其重要，因为他们的显示选项可能和我们传统的浏览器上显得尤其重要，因为他们的显示选项可能和我们传统的文本根本不同，或者在某方面具有非常大的局限性。的文本根本不同，或者在某方面具有非常大的局限性。Page 62.1.1 文本格式文本格式v 基于内容的样式基于内容的样式 当前的当前的 HTML 和和 XHTML 标准并没有为每一个基于内容的标签都标准并没有为每一个基于内容的标签都定义一种格式；它们仅仅规定必须用与文档中普通文本不同的方定义一种格式；它们仅仅规定必须用与文档中普通文本不同的方式来显示基于内容的样式。标准甚至没有要求这些基于内容的样式来显示基于内容的样式。标准

5、甚至没有要求这些基于内容的样式彼此之间都要用不同的方式显示。在实际应用中，你可能会发式彼此之间都要用不同的方式显示。在实际应用中，你可能会发现很多这样的标签和传统的印刷有着非常明显的关系，它们有着现很多这样的标签和传统的印刷有着非常明显的关系，它们有着相似的含义和显示样式，而且在多数浏览器中都以相同的样式和相似的含义和显示样式，而且在多数浏览器中都以相同的样式和字体来显示。字体来显示。 使用使用 HTML/XHTML 基于内容的样式标签时要遵从一些规则，因基于内容的样式标签时要遵从一些规则，因为仅仅是简单地想想文本该如何显示，而不必知道这些文本的含为仅仅是简单地想想文本该如何显示，而不必知道这

6、些文本的含义是什么，是十分容易的。一旦你开始使用基于内容的样式之后，义是什么，是十分容易的。一旦你开始使用基于内容的样式之后，文档将会更加一致，而且可以更好地帮助执行自动搜索和内容编文档将会更加一致，而且可以更好地帮助执行自动搜索和内容编辑。辑。 Page 72.1.1 文本格式文本格式v基于内容的样式基于内容的样式 Page 82.1.1 文本格式文本格式v 物理样式物理样式 在讨论基于内容的样式标签时，我们经常用到在讨论基于内容的样式标签时，我们经常用到“意图意图”这个词。这个词。这是因为由标签传达的含义比浏览器显示文本的方式更为重要。这是因为由标签传达的含义比浏览器显示文本的方式更为重要

7、。然而，在某些情况下，可能是出于合法性或者版权等方面的原因然而，在某些情况下，可能是出于合法性或者版权等方面的原因的考虑，你希望文本以某种特殊的方式来显示（例如斜体或加的考虑，你希望文本以某种特殊的方式来显示（例如斜体或加粗）。在这种情况下，就可以对文本使用物理样式。粗）。在这种情况下，就可以对文本使用物理样式。 虽然其他文字处理系统的趋势是精确地控制样式和外观，但是在虽然其他文字处理系统的趋势是精确地控制样式和外观，但是在使用使用 HTML 或或 XHTML 时，除非极少情况下，都应该避免使用物时，除非极少情况下，都应该避免使用物理标签。应当尽可能地向浏览器提供上下文信息，并使用基于内理标签

8、。应当尽可能地向浏览器提供上下文信息，并使用基于内容的样式。尽管现在浏览器不过是以斜体或者粗体字来显示这些容的样式。尽管现在浏览器不过是以斜体或者粗体字来显示这些文本，但是将来的浏览器和各种文档生成工具可能会以非常有创文本，但是将来的浏览器和各种文档生成工具可能会以非常有创建的方式来利用这些基于内容的样式。建的方式来利用这些基于内容的样式。Page 92.1.1 文本格式文本格式v物理样式物理样式 当前的当前的 HTML/XHTML 标准一共提供了标准一共提供了 9 种物理样式，种物理样式，包括粗体（包括粗体（bold）、斜体（）、斜体（italic）、等宽）、等宽（monospaced）、下

9、划线（）、下划线（underlined）、删除线）、删除线（strikethrough）、放大（）、放大（larger）、缩小）、缩小（smaller）、上标（）、上标（superscripted）和下标）和下标（subscripted）文本。）文本。 Page 102.1.1 文本格式文本格式v物理样式物理样式 Page 112.1.1 文本格式文本格式v拓展标签拓展标签 Page 122.1.1 文本格式文本格式 从它们的适用的场合来看，又可以分为从它们的适用的场合来看，又可以分为“文本文本格式化格式化”、“计算机输出计算机输出”、“引用和术语定义引用和术语定义”三类标签。三类标签。Pag

10、e 132.1.1 文本格式文本格式v 文本格式化标签文本格式化标签标签标签描述描述定义粗体文本。定义大号字。定义着重文字。定义斜体字。定义小号字。定义加重语气。定义下标字。定义上标字。定义插入字。定义删除字。Page 142.1.1 文本格式文本格式v 计算机输出标签计算机输出标签标签标签描述描述定义计算机代码。定义键盘码。定义计算机代码样本。定义打字机代码。定义变量。定义预格式文本。Page 152.1.1 文本格式文本格式v 引用和术语定义标签引用和术语定义标签标签标签描述描述定义缩写。定义首字母缩写。定义地址。定义文字方向。定义长的引用。定义短的引用语。定义引用、引证。定义一个定义项目

11、。Page 162.1.1 文本格式文本格式v文本格式化实例文本格式化实例 详见教材。详见教材。Page 172.1.1 文本格式文本格式v预格式文本实例预格式文本实例 详见教材详见教材Page 182.1.1 文本格式文本格式v“计算机输出计算机输出”标签实例标签实例 详见教材。详见教材。Page 192.1.1 文本格式文本格式v地址实例地址实例 详见教材。详见教材。Page 202.1.1 文本格式文本格式v缩写和首字母缩写实例缩写和首字母缩写实例 详见教材。详见教材。Page 212.1.1 文本格式文本格式v文字方向实例文字方向实例 详见教材。详见教材。Page 222.1.1 文本

12、格式文本格式v块引用实例块引用实例 详见教材。详见教材。Page 232.1.1 文本格式文本格式v删除字效果和插入字效果实例删除字效果和插入字效果实例 详见教材。详见教材。Page 242.1.1 文本格式文本格式v实践案例实践案例 为个人主页添加格式化标签。为个人主页添加格式化标签。Page 252.1.2 字体字体v 字体标签字体标签font属性属性例子例子作用作用size=numbersize=2定义字体大小。size=+numbersize=+1增加字体的大小。size=-numbersize=-1减少字体的大小。face=face-nameface=Times定义字体名称。colo

13、r=color-valuecolor=#eeff00定义字体颜色。color=color-namecolor=red定义字体颜色。Page 262.1.2 字体字体v请不要使用字体标签请不要使用字体标签 在最新的在最新的 HTML 版本（版本（HTML 4 和和 XHTML）中，字体）中，字体标签已被废弃。标签已被废弃。 万维网联盟已从其标准中删除了字体标签，在未来，万维网联盟已从其标准中删除了字体标签，在未来，样式表（样式表（CSS）将用来定义布局，以及显示）将用来定义布局，以及显示 HTML 元元素的属性。素的属性。Page 272.1.2 字体字体v实例：实例：A headingA pa

14、ragraph.Page 282.1.2 字体字体Page 292.1.2 字体字体v实践案例实践案例 为个人主页添加字体标签。为个人主页添加字体标签。Page 302.1.3 颜色颜色v颜色值颜色值 颜色由一个十六进制符号来定义，这个符号由红色、颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（绿色和蓝色的值组成（RGB）。）。 每种颜色的最小值是每种颜色的最小值是0（十六进制：（十六进制：#00）。最大值是）。最大值是255（十六进制：（十六进制：#FF）。）。Page 312.1.3 颜色颜色Color HEXColor RGB#000000 rgb(0,0,0)#FF0

15、000 rgb(255,0,0)#00FF00 rgb(0,255,0)#0000FF rgb(0,0,255)#FFFF00 rgb(255,255,0)#00FFFF rgb(0,255,255)#FF00FF rgb(255,0,255)#C0C0C0 rgb(192,192,192)#FFFFFF rgb(255,255,255)Page 322.1.3 颜色颜色v颜色名颜色名 大多数的浏览器都支持颜色名集合。大多数的浏览器都支持颜色名集合。 提示：仅仅有提示：仅仅有 16 种颜色名被种颜色名被 W3C 的的 HTML4.0 标准标准所支持。它们是：所支持。它们是：aqua, blac

16、k, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。 如果需要使用其它的颜色，需要使用十六进制的颜色如果需要使用其它的颜色，需要使用十六进制的颜色值。值。Page 332.2 链接链接2.2.1 图形链接图形链接2.2.2 文档内链接文档内链接2.2.3 文档外链接文档外链接Page 342.2.1 图形链接图形链接v 锚标签和锚标签和 Href 属性属性 HTML 使用使用 （锚）标签来创建连接另一个文档的链接。（锚）标签来创建连接另一个文档的链接

17、。 锚可以指向网络上的任何资源：一张锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一页面，一幅图像，一个声音或视频文件等等。个声音或视频文件等等。 创建锚的语法：创建锚的语法：Text to be displayed 用来创建锚。用来创建锚。href 属性用于定位需要链接的文档，锚的开始属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。标签和结束标签之间的文字被作为超级链接来显示。 这个锚定义了指向这个锚定义了指向 www.js- 的链接：的链接：js-btesting!上面的这行在浏览器中显示为这样：上面的这行在浏览器中显示为这样：js-btes

18、ting!Page 352.2.1 图形链接图形链接实例：实例： 你可以使用图像来作链接：你可以使用图像来作链接： Page 362.2.1 图形链接图形链接Page 372.2.1 图形链接图形链接v实践案例实践案例 为个人主页添加图形链接。为个人主页添加图形链接。Page 382.2.2 文档内链接文档内链接v 锚标签和锚标签和 Name 属性属性 Name 属性用于创建被命名的锚（属性用于创建被命名的锚（named anchors）。当使用命）。当使用命名锚（名锚（named anchors）时，我们可以创建直接跳至页面中某个）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需

19、不停的滚动页面来寻找他们需要的节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。信息。 以下是命名锚的语法：以下是命名锚的语法：Text to be displayed name 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。 下面这行定义了命名锚：下面这行定义了命名锚：Useful Tips Section 你会注意到，命名锚会以特殊的方式来显示。你会注意到，命名锚会以特殊的方式来显示。Page 392.2.2 文档内链接文档内链接v锚标签和锚标签和 Name 属性属性 将将 # 符号和锚名称添加到符号和锚名称添加到 UR

20、L 的末端，就可以直接链的末端，就可以直接链接到接到 tips 这个节，就像这样：这个节，就像这样： Jump to the Useful Tips SectionPage 402.2.2 文档内链接文档内链接Page 412.2.2 文档内链接文档内链接v有用的提示有用的提示 总是将正斜杠添加到子文件夹。总是将正斜杠添加到子文件夹。假如你这样书写链接的话：假如你这样书写链接的话：href=http:/www.js- HTTP 请请求。这是因为服务器会添加正斜杠到这个地址，然后求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：创建一个新的请求，就像这样：href=htt

21、p:/ 命名锚经常被用在长的文档中创建目录。可以为每个命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚，然后连接到这些锚的链接被置章节赋予一个命名锚，然后连接到这些锚的链接被置于文档的上部。于文档的上部。 假如浏览器找不到已定义的命名锚，那么就会定位到假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。文档的顶端。不会有错误发生。Page 422.2.2 文档内链接文档内链接v文档内链接实例文档内链接实例 详见教材。详见教材。Page 432.2.2 文档内链接文档内链接v实践案例实践案例 为个人主页添加文档内链接。为个人主页添加文档内链接。Page 44

22、2.2.3 文档外链接文档外链接vTarget 属性属性 使用使用 Target 属性，你可以定义被链接的文档在何处显属性，你可以定义被链接的文档在何处显示。示。 下面的这行会在新窗口打开文档：下面的这行会在新窗口打开文档：js-btesting!Page 452.2.3 文档外链接文档外链接v文档外链接实例文档外链接实例 详见教材。详见教材。Page 462.2.3 文档外链接文档外链接v实践案例实践案例 为个人主页添加文档外链接和为个人主页添加文档外链接和mailto功能。功能。Page 472.3 列表列表2.3.1 无序号无序号2.3.2 有序号有序号Page 482.3.1 无序号无序号 无序列表是一个项目的列表，此列项目使用粗体圆点无序列表是一个项目的列表，此列项