第03章 超文本标记语言HTML

-1-第3章超文本标记语言HTMLHTML语言是网页制作的一种规范，一种标准。几乎所有的网页都是以HTML格式书写的，它通过标识符来标记网页的各个部分。本章主要介绍了HTML语言的基本概念、基本结构、语法规则以及使用HTML制作网页的各种标记符的设置方法，包括网页文字和段落的设置、网页中表格的设计、图片和超链接的设置等。通过本章的学习，用户可以使用HTML制作出精美的网页。3.1HTML概述3.1.1HTML的基本概念1.HTML概述HTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面的基本元素，它是一种规范，一种标准，几乎所有的网页都是以HTML格式书写的。HTML不是一种编程语言，而是一种描述性的标记语言，它通过标识符来标识网页内容的显示方式，比如图片的显示尺寸，文字的大小、颜色、字体等。而浏览器的功能就是对这些标记进行解释，显示出文字、图像、动画、媒体等网页内容。一个HTML文件的后缀名是.html或者是.htm，由于HTML是一个纯文本格式的ASCII文件，因此，用任何文本编辑器都可以编写HTML网页文件。HTML语言作为一种描述性的标记语言，易学易懂，能够制作出精美的网页效果，其主要功能如下：（1）格式化文本。如设置文本字体、字号、颜色以及文本段落、对齐方式等。（2）创建列表。把信息用一种易读的方式表现出来。（3）建立表格。表格为浏览者提供快速找到需要信息的显示方式，还可以用表格来布局网页。（4）插入图片。使网页图文并茂，还可设置图像的各种属性，如大小、边框、布局等。（5）加入多媒体。可在网页中加入音频、视频、动画等效果。（6）添加交互式表单等。2.标记符标记符又称标签，它是用来控制网页内容显示效果的。它在使用时必须用“”括起来。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。开始标记符和相应的结束标记符定义了标记符所影响的范围。结束标记符与开始标记符的区别在于有一个斜线。标记符是不区分大小写的，但通常约定标记符使用大写字母，这有利于HTML文档的维护。其格式为：标记符受影响的内容/标记符3.标记符的属性标识符仅仅用来标识所显示的内容，但如何控制这些内容，这就需要在标记符后面加上相关的属性来实现。属性是用来描述标识符标识对象的特征。在HTML中，所有的-2-属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔，其格式为：标记符属性1=属性值1属性2=属性值2…受影响的内容/标记符例如：FONTcolor=redsize=3属性示例/FONT表示字体标记FONT有属性color和size。属性color表示文字的颜色，属性size表示文字的大小。3.1.2HTML的基本结构HTML网页文件主要由文件头和文件体两部分内容构成。其中，文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容。下面是HTML网页的基本结构。HTMLHTML文件开始HEAD文件头开始文件头/HEAD文件头结束BODY文件体开始文件体/BODY文件体结束/HTMLHTML文件结束1.HTML文件标记符HTML和/HTML标记符放在网页文档的最外层，表示这对标记符之间的内容是HTML文件。HTML处于文件的最前端，表示HTML文件的开始，即浏览器从HTML开始解释。而/HTML则位于文件的最后一行，这表示这一整份的文档都是HTML语法的文档。2.HEAD文件头标记符HEAD和/HEAD是HTML文件头标记符，它用来说明文档的整体信息，所标记的内容并不会出现在浏览器所看到的窗体中。HEAD…/HEAD通常与某些标记符一起使用，下面是一些主要的标记符：（1）TITLE…/TITLETITLE…/TITLE标记符是用来标识网页文件的标题，它出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。（2）METAMETA标识符是用来提供文档的媒体信息，目的是便于浏览器识别网页内容或者便于搜索引擎进行查找和分类。下面介绍几种常用用法：METAhttp-equiv=“Content-Type”content=“text/html;charset=gb2312”用来标记网页的解码方式，即说明网页使用的文字和语言。METAname=keywordscontent=关键字用来标记搜索引擎在搜索你的页面时所取出的关键字。METAname=DEscriptioncontect=站点主要内容用来标记站点的主要内容。-3-METAname=authorcontent=“作者名称用来标记文档的作者名称，即告诉搜索引擎你的站点的制作的作者。3.BODY文件体标记符BODY/BODY是HTML文件的主体标记符。网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记符之间，它的格式为：BODYbgcolor=“color”backgroud=“image-url”text=“color”link=“color”vlink=“color”alink=“color”topmargin=“value”leftmargin=“value”…/BODY其主要属性含义如下：(1)bgcolor：标识HTML文档的背景颜色，默认设置为白色。(2)background：设置HTML文档的背景图片，可以使用的图片格式为GIF，JPG。(3)text：标识HTML文档的正文文字颜色，它定义的颜色将应用于整篇文档。(4)超级链接颜色：link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。(5)topmargin和leftmargin：设置网页主体内容距离网页顶端和左端的距离。4.第一个网页【实例3-1】HTML基本结构网页HTMLHEADTITLEmyfirstpage/TITLE/HEADBODYThisismyfirsthomepage!/BODY/HTML浏览器显示效果如图3-1所示。3.1.3HTML的语法规则HTML应遵循以下的语法规则。（1）HTML文件以纯文本形式存放，扩展名为“.HTM”或“.HTML”。如果系统为UNIX系统，则扩展名必须为“.HTML”。图3-1-4-（2）HTML不区分大小写，例如html和HTML是相同的。（3）多数HTML标记可以嵌套，但不可以交叉。例如：PFONTcolor=”red”face=”方正黑体”网站开发与网页设计/P/FONT将不能正确显示。（4）HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。例如：PFONTcolor=”red”face=”方正黑体”网站开发与网页设计/FONT/P和PFONTcolor=”red”face=”方正黑体”网站开发与网页设计/FONT/P都是正确的，并且显示效果相同，值得注意的是在HTML标记中的一个单词不能分两行书写。（5）HTML源文件中的换行、回车符和多个连续空格在显示效果中是无效的。显示内容如果要换行必须用BR标记，换段使用P标记，如果源文件中有多个连续空格，显示时也只显示一个。若需要多个空格，可使用多个 转义符号。例如：PFONTface=宋体回车换行符br/的使用/FONT/PFONTface=宋体段落换行符p的使用/FONTP空      格/P显示效果如下：回车换行符的使用段落换行符的使用空格（6）网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。3.2文字与段落标记3.2.1标题字标记功能：用于定义文章内章节标题的显示格式。格式：Hnalign=“对齐方式”标题文字/Hn-5-属性：n用来指定标题文字字号的大小。n可以取1～6的整数值，数字越小，字号越大。属性align用来设置标题在页面中的对齐方式，取值有：left（左对齐）、center（居中）、right（右对齐）、bottom（位于底端）和top（位于顶端）。【实例3-2】使用标题标记设置标题内容的大小与对齐方式。HTMLHEADTITLE设置标题/TITLE/HEADBODYH1第1级标题（H1）/H1H2第2级标题（H2）/H2H3第3级标题（H3）/H3H4align=left第4级标题（H4）（居左）/H4H5align=center第5级标题（H5）（居中）/H5H6align=right第6级标题（H6）（居右）/H6/BODY/HTML浏览器显示效果如图3-2所示。3.2.2文字格式标记功能：设置网页中普通文字的显示效果，如：文字大小、字体、字型、颜色等。格式：FONTface=“字体”size=“字号”color=“颜色”被设置的文字/FONT属性：face属性用来设置字体。当文字为汉字时，格式中的“字体”可以为：宋体、幼圆、隶书、楷体_GB2312、黑体、仿宋_GB2312等。当文字为英文时，字体名可以为TimesNewRoman等约50种字体。size属性用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。color属性用来设置文字的颜色，颜色的取值是十六进制的RGB颜色码或者HTML给定的颜色常量名。【实例3-3】使用FONT标记的size属性设置文字的大小；face属性设置字体。color属性设置文字颜色。图3-2-6-HTMLHEADTITLE文字格式标记/TITLE/HEADBODYH1设置文字的格式/H1FONTsize=1color=#00FFFF1号字青色/FONTPFONTsize=2color=green2号字绿色/FONTPFONTsize=3face=幼圆color=orange3号幼圆桔黄色/FONTPFONTsize=4face=隶书color=#FF00004号隶书深红色/FONTPFONTsize=5face=黑体color=greenyellow5号黑体黄绿色/FONTPFONTsize=6face=方正舒体color=dodgerblue6号方正舒体水蓝色/FONTPFONTsize=7face=Arialcolor=#000000WelcomeMyHomepage!/FONTP/BODY/HTML浏览器显示效果如图3-3所示。3.2.3字型设置标记功能：设置文字的风格，如：如加粗、斜体、带下划线、上标、下标等。格式：这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果，常用的标记格式如下：（1）B…/B:文字显示为粗体。（2）I…/I:文字显示为斜体。（3）U…/U：文字显示下划线。（4）STRIKE…/STRIKE或者S…/S:删除字效果。（5）BIG…/BIG：使文字大小相对于前面的文字增大一级。（6）SMALL…/SMALL使文字大小相对于前面的文字增大一级。（7）SUP…/SUP：下标。图3-3-7-（8）SUB…/SUB：上标。（9）BLANK…/BLANK：使文字显示闪烁效果。（10）TT…/TT：以等宽体显示西文字符。（11）CITE…/CITE：输出引用方式的字体，通常是斜体。（12）EM…/EM：强调文字，通常用斜体加黑体。（13