A第1章 HTML超文本标记语言120OK.docx

1、A第1章 HTML超文本标记语言120OK第一篇 HTMLHTML语言是网页设计的通用语言。本章将简要介绍HTML语言的结构和各种标记的功能和用法。学习本章以后，应能熟练地完成HTML文档的建立、保存和打开操作，能运用HTML设计简单的网页。1.1 HTML文档的建立、保存与打开HTML（Hypertext Markup Language，即超文本标记语言），是用于描述网页文档的通用语言。本节将介绍HTML文档的建立、保存、打开与浏览的方法。1.1.1 HTML的功能和特点1HTML文档的功能HTML目前被广泛用于网页设计中。用其他网页设计语言编写的网页文件，都转换为HTML程序以后，浏览器才

2、能识别，才能还原成在浏览器上看到的网页。HTML语言作为一种网页编辑语言，易学易懂。其主要功能如下： (1)格式化文本。如设置标题、字体、字号、颜色，设置文本的段落、对齐方式等。 (2)建立列表。把信息用一种易读的方式表现出来。 (3)建立超链接。只需用鼠标单击，就可转到指定的目标。 (4)建立表格。表格提供了信息的简捷明了的显示方式，还可以设定整个网页的布局。 (5)加入多媒体。可在网页中加入图像、音频、视频、动画，并设定播放的时间和次数。(6)添加交互式表单。2HTML文档的组成HTML文件是用于显示网页的，它由内容和标记两部分组成。内容就是要在网页上显示的字符、图片、视频、声音、超链接等

3、，标记（Tag）用来规定这些内容显示方式和布局，它告诉浏览器如何显示网页中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。网页显示的过程是浏览器接收到HTML文件中，按顺序阅读HTML文件，然后解释标记符，并按标记符规定的显示方式在浏览器上显示网页的内容。不同的浏览器，对同一标记符可能会有不完全相同的解释，因而同一个HTML文件在不同的浏览器上可能会有不同的显示效果。 1.1.2 HTML的建立HTML之所以称为超文本标记语言，是因为文本中包含了“超级链接”点。超级链接是一种URL指针，通过点击它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。 HTML

4、文件既然是文本文件，那么任何文本编辑器都可以用作编辑HTML的工具。HTML常用的编辑器大体可以分为两种， 1基本文本编辑软件。使用WINDOWS自带的记事本或写字版都可以编写。不过存盘必须使用.htm或.html作为扩展名，表明建立的是HTML文件。 2所见即所得软件。他们的典型代表就是FrontPage和Dreamweaver,p 这也是当前使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，因为网页的HTML代码是自动产生的。 1.1.3 HTML文件的结构以下是一个简单的HIML文件。文件名为HT1-1-1_strc，运行结果如图1.1.1所示。 欢迎 欢迎进入天天音乐网

5、我们以这个HIML文档为例说明HTML中的标记、属性和HIML文档的基本结构。1HIML文档的结构（1）整个HIML文档都以开始，并以结束。标记处于文档的最前面，表示HTML文档的开始，即浏览器从开始解释，直到遇到为止。（2）HIML文档由头和体两部分组成。头部分以标记开始，以标记结束。体部分由标记开始，以标记结束。（3头部分包含文档的标题，标题以开始，以绪束。“标题”内容显示的，多页的上端。标题为搜索提供了关键字。头部分在HTML文件中不是必需的。（4体部分是网页的正文，包含需要在网页中显示的文本、图形、链接、表格和表单等。2HTML文件主体 HTML文件主体是网页的核心，网页中真正显示的内

6、容都包含在主体中。 基本语法： 网页的内容 有很多属性，可以定义页面的背景图像、背景颜色、文字颜色、超文本链接的颜色，这些属性用于设定网页的总体风格。简介如下： HTML的颜色表示分为两种： (1)以命名方式定义常用颜色，如red、black等。 HTML中定义常用的16种颜色名字是：aqua（水绿）、black（黑）、blue（蓝）、fuchsia(紫红)、gray（灰）、green（绿）、lime（浅绿）、maroon（褐）、navy（深蓝）、olive（橄榄）、purple(紫)、red(红)、silver(银)、teal(深青)、white(白)和yellow(黄)。 (2)以RGB值

7、表示，用“#RRGGBB”表示。其中，RRGGBB都代表达式位十六进制，RR、GG、BB分别表示红、绿、蓝三元色，每种颜色由00ffaqw 都有256种彩度，故三原色可以混合成256256256=1670万种颜色。例如：白色的组成是ffffff、红色是ff0000，绿色是green=00ff00，蓝色是 0000ff。1.1.4 关于HTML文档的格式约定1标记与属性（1）标记的格式 被作用的对象 标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同；例如,都是标记。（2）标记中的属性属性用来说明被

8、标记作用的对象的特征。加入属性以后，标记的格式应是：例如： 欢迎进入天天音乐网 中的属性size=“7” color=“red”用来定义字符的大小和颜色。各个属性项的次序不限，属性间用空格分开，属性值用引号括起来。2关于HTML文档的格式约定(1) 文本标记语言源程序的文件扩展名默认使用htm或html。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 (2) HTML源程序为文本文件，其列宽可不受限制，即多个标记可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号“ ”

9、 表示 (字母必须小写)；表示文件路径时使用符号“/”分隔。 (3)通常在书写HIML文档语句前添加若干个空格，成锯齿形书写语句，以使文档结构清晰，便于阅读。(4) 标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 (5) HTML注释由惊叹号表示，注释内容由符号结束。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。1.1.5 HTML文件的保存保存HTML文件的步骤如下： 文件编辑完成以后，选菜单命令“文件另存为”，则弹出“另存为”对话框,如图1.1.1所示。 在对话框中输入文件名，在文件名后加上扩展名“.html”或

10、“htm”。保存类型为文本文件。 按“确定”钮，则所编文档以指定文件名存盘。1.1.6 HTML文件的打开打开HIML文档有两种方式，一是打开为网页，即运行网页；二是打开为文本文件，供编辑用。1打开为网页，打开资源管理器，找到网页文件名后，右击文件名，在弹出的快捷菜单中选“打开”，则所选文件以网页形式打开。2打开为文本文件打开资源管理器，找到网页文件名后，右击文件名，在弹出的快捷菜单中选“打开方式写字板”或选“打开方式写字板”，则所选文件以文本形式打开。1.2 分隔标签分隔标签用于实现网页对象的分隔。分隔标答有换行标记，段落标记，水平线标记.1.2.1换行标记要让文字换行，可以使用换行标记，换

11、行标记是单标记。【例1.2.1】换行标记的例 。文件名为HT1-2-1_br)。运行结果如图1.2.1所示。1 2 换行_HT1-2-1 3 4 5 黄鹤楼送孟浩然之广陵 6 唐.李白 7 8 故人西辞黄鹤楼, 烟花三月下杨州。 9 孤帆远影碧空尽， 唯见长江天际流。10 青山横北郭, 白水绕东城， 11 此地一为别，孤蓬万里征。12 浮云游子意，落日故人情 13 挥手自去，萧萧斑马鸣。14 15 由本例可见，第8、9行虽然写成一行，但仍在加了标记的位置换行；第1013行，既使分行写，但由于没有标记，所以仍然显示为一行。1.2.2 段落标记 段落标记,除了实现换行外还在标记处添加一个空行。段落

12、标记是单标记。基本语法： 段落内容【例1.2.2】换段的例。文件名为HT1-2-2_p，运行结果如图1.2.2所示。 换行HT1-2-2 大江东去，浪淘尽千古风流人物。 故垒西边，人道是三国周郎赤壁。 乱石穿空，惊涛拍岸，卷起千堆雪。 江山如画，一时多少豪杰。 例中，各行间添加了一个空行。1.2.3水平线标记（hr） 水平线用于段落与段落之间的分隔，可使文档结构清晰，层次分明，排版整齐，便于阅读。水平线自身有很多属性，如宽度、高度、颜色等。水平线标记属于单标记。 基本语法： align:可以设置水平线居中、居左和居右对齐，默认为居中对齐。【例1.2.3】添加水平线。文件名为HT1-2-3_hr

13、，运行结果如图1.2.3所示。 画线_HT1-2-3 黄鹤楼送孟浩然之广陵 唐.李白 故人西辞黄鹤楼, 烟花三月下杨州。 孤帆远影碧空尽， 唯见长江天际流。例中，第8语句行用于画一条长350，宽4，绿色的水平线。1.3 排版与列表标记排版标签用于控制网页对象的布局。常用标记有预格式化标记 缩排标记和居中标记等。1.3.1预格式化标记 所谓预格式化，就是保留文字在源代码中的格式。浏览器在显示标注的内容时，会完全按照原来的文本格式显示。例如，原封不动地保留文档中的空白、空格、换行、对齐、制表符等。 基本语法：文字内容【例1.3.1】保留原排版格式。文件名为HT1-3-1_pre，运行结果如图1.3

14、.1所示。1 2 保留原格式_HT1-3-1_pre 3 4 5 相 思6 王维7 红豆生南国， 8 春来发几枝？9 愿君多采撷，10 此物最相思。11 12 网页中保留了第510语句原有的格式。1.3.2居中标记 要使段落或文字居中对齐，除了可以使用align属性中的center之外，还可以使用专门的居中标记。 基本语法： 文字内容1.3.3 缩排标记功能：设定某段落是否要缩排。【例1.3.2】 缩排的例。文件名为HT1.3.2_ blockquote，运行结果如图1.3.2所示。 缩排 HT1.3.2_ blockquote 王小红订购了三本书：Dreamweaver 8Flash 8 A

15、SPNET程序设计1.3.4 列表标记列表分为两种类型：一种是有序列表，用编号来标记项目的顺序；另一种是无序列表，用项目符号来标记项目。 1有序列表 有序列表中的项目采用数字或英文字母开头，通常各个项目之间有先后顺序，主要使用和两个标记以及type和start两个属性；使用作为有序列表的声明，作为每个项目的开始。 基本语法： 项目1 项目2 type：定义有序列表序号类型，默认使用数字序号。可以定义的属性值有：1、a、A、i和I。例如type=“A”，则序号按大写字母A、B、C排列。 start：定义序号计数的起始值。例如数字默认起始值从1开始，小写罗马数字默认起始值从i开始。若start=“

16、f”，则小写字母序号从f开始。 2无序列表 在无序列表中，通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用、几个标记和type属性。 在无序列表中，使用作为无序列表的声明作为每个项目的开始。 基本语法： 项目l 项目2 type定义了无序列表的项目符号，属性值可以定义为disc、circle和square，在IE浏览器中显示的项目符号效果分别为 、和口。默认情况使用disc项目符号。3定义列表定义列表标记是一种两个层次的列表，常用于解释名词的定义。名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典有相同的格式。每个列表项带有一个缩进的定义字段，就

17、好像字典对文字进行解释一样。基本语法： 名词l解释1 名词2解释2 ：定义列表的声明。 ：作为名词的标题。：用来解释名词。【例1.3.3】有序列表的例。在要显示编号的表列前加上标记,可自动将表列加入编号。如果将换成则项目符号用“.”表示。文件名为HT1.3.3_ ol，运行结果如图1.3.3（左）所示。 列表标记 HT1-3-3_OL HTML程序设计分为四部分 第一部分 介绍了HTML的基础知识 第二部分 介绍了常用标记 第三部分 介绍了表格生成标记 第三部分 介绍超链接 1.4 文字标记1.4.1文字标记 标记用来设置或更改页面中的字体、字号、字型和颜色。 基本语法： 文字内容 Face：

18、字体的属性，指字体名。 size：文字的字号，即文字的大小。其属性值是17，数字大字就大。也可以用+n、-n表示从当前字号增大n级或缩小n级 。color:文字的颜色，其值为“#RRGGBB”,RR、GG、BB都是16进制数。 【例1.4.1】标记的应用。文件名为HT1.4.1_ FONT，运行结果如图1.4.1所示。 定义字号_HT1.4.1_ Fomt 这是一本HTMI肥榧_谢谢购买！【例1.4.2】字号定义(HT1-4-2_size) 文件名为HT1-4-2_size，运行结果如图1.4.2所示 字号HT1-4-1_size size=l 大江东去 size=2 大江东去 size=3

19、大江东去 size=4 大江东去 size=5 大江东去 ize=6 大江东去 size=7 大江东去 【例1.4.3】设置字符的颜色。文件名为HT1-4-3_fontcolor，运行结果如图1.4.3所示。 Font的字体颜色属性_HT1-4-3_fontcolor 才饮长沙水 又食武昌鱼 万里长江横渡 极目楚天舒 【例1.4.4】设置字型，设置标记是粗体、斜体及下划线标记。文件名为HT1.4.4_BIU，运行结果如图1.4.4所示。 Font的字型 HT1.4.5_BIU 正常文字这是粗体字 这是斜体字给文字加下划线对文字综合使用粗体、斜体、下划线标 1.4.2 标题标记 设定标题的文字大

20、小，从到总共有六级。 标题自占一行，不必加可自动换行。【例1.4.5】显示标题字。文件名为HT1.4.5_hn，运行结果如图1.4.5（左）所示 Font的字型 HT1.4.5_hn 标题1 标题2标题3 标题4标题5 标题6 标题可用属性align设置在页面中的对齐方式，属性值有left（左对齐）、center（居中）、right（右对齐），默认为左对齐。例如：例如如下语句设置标题字为2级，蓝色居中： 标题 1.5表格在HTML页面中，表格是用于排版的最佳手段之一，一般布局比较复杂的页面都使用表格进行排版。 1.5.1 表格的基本语法要产生表格，需综合使用、以及这三个标记。和 表示表格的开始

21、与结束和 表示表中一行的开始与结束和表示行中一列的开始与结束 表格的基本语法： 列1 列2 - 列1 列2 - - 格式中，表的宽度，单位为像素或百分比，其他宽度、高度、间距的单位都是像素。background: 表格的背景图像，可以使用GIF或JPEG图片文件。cellspacing: 单元格之间的间距，单位为像素。对齐方式的值为CENTER，LEFT、RIGHT。 2标题 可以通过标记为表格添加标题，且可设置align、valign属性的值控制标题文字的位置。 基本语法： 表格标题 格式中，valign的值有top（上方）或bottom（下方）。 3表头 表头是指表格的第一行，其中的文字可以实现居中并且加粗显示，通过标记实现。基本语法： th