A第1章 HTML超文本标记语言120OK.docx
《A第1章 HTML超文本标记语言120OK.docx》由会员分享，可在线阅读，更多相关《A第1章 HTML超文本标记语言120OK.docx（42页珍藏版）》请在冰豆网上搜索。
A第1章HTML超文本标记语言120OK
第一篇HTML
HTML语言是网页设计的通用语言。
本章将简要介绍HTML语言的结构和各种标记的功能和用法。
学习本章以后，应能熟练地完成HTML文档的建立、保存和打开操作，能运用HTML设计简单的网页。
1.1HTML文档的建立、保存与打开
HTML（HypertextMarkupLanguage，即超文本标记语言），是用于描述网页文档的通用语言。
本节将介绍HTML文档的建立、保存、打开与浏览的方法。
1.1.1HTML的功能和特点
1．HTML文档的功能
HTML目前被广泛用于网页设计中。
用其他网页设计语言编写的网页文件，都转换为HTML程序以后，浏览器才能识别，才能还原成在浏览器上看到的网页。
HTML语言作为一种网页编辑语言，易学易懂。
其主要功能如下：
（1）格式化文本。
如设置标题、字体、字号、颜色，设置文本的段落、对齐方式等。
（2）建立列表。
把信息用一种易读的方式表现出来。
（3）建立超链接。
只需用鼠标单击，就可转到指定的目标。
（4）建立表格。
表格提供了信息的简捷明了的显示方式，还可以设定整个网页的布局。
（5）加入多媒体。
可在网页中加入图像、音频、视频、动画，并设定播放的时间和次数。
（6）添加交互式表单。
2．HTML文档的组成
HTML文件是用于显示网页的，它由内容和标记两部分组成。
内容就是要在网页上显示的字符、图片、视频、声音、超链接等，标记（Tag）用来规定这些内容显示方式和布局，它告诉浏览器如何显示网页中的内容（如：
文字如何处理，画面如何安排，图片如何显示等）。
网页显示的过程是浏览器接收到HTML文件中，按顺序阅读HTML文件，然后解释标记符，并按标记符规定的显示方式在浏览器上显示网页的内容。
不同的浏览器，对同一标记符可能会有不完全相同的解释，因而同一个HTML文件在不同的浏览器上可能会有不同的显示效果。
1.1.2HTML的建立
HTML之所以称为超文本标记语言，是因为文本中包含了“超级链接”点。
超级链接是一种URL指针，通过点击它，可使浏览器方便地获取新的网页。
这也是HTML获得广泛应用的最重要的原因之一。
HTML文件既然是文本文件，那么任何文本编辑器都可以用作编辑HTML的工具。
HTML常用的编辑器大体可以分为两种，
1．基本文本编辑软件。
使用WINDOWS自带的记事本或写字版都可以编写。
不过存盘必须使用.htm或.html作为扩展名，表明建立的是HTML文件。
2．所见即所得软件。
他们的典型代表就是FrontPage和Dreamweaver,p这也是当前使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，因为网页的HTML代码是自动产生的。
1.1.3HTML文件的结构
以下是一个简单的HIML文件。
文件名为HT1-1-1_strc，运行结果如图1.1.1所示。
欢迎
欢迎进入天天音乐网
我们以这个HIML文档为例说明HTML中的标记、属性和HIML文档的基本结构。
1．HIML文档的结构
（1）整个HIML文档都以开始，并以结束。
标记处于文档的最前面，表示HTML文档的开始，即浏览器从开始解释，直到遇到<／HTML>为止。
（2）HIML文档由头和体两部分组成。
头部分以
标记开始，以标记结束。
体部分由
标记开始，以标记结束。
（3头部分包含文档的标题，标题以
开始，以<／TITLE>绪束。</p><p>“标题”内容显示的，多页的上端。</p><p>标题为搜索提供了关键字。</p><p>头部分在HTML文件中不是必需的。</p><p>（4体部分是网页的正文，包含需要在网页中显示的文本、图形、链接、表格和表单等。</p><p>2．HTML文件主体</p><p>HTML文件主体是网页的核心，网页中真正显示的内容都包含在主体中。</p><p>基本语法：</p><p><BODYbackground=“文件名”bgcolor=“网页背景色”text=“文本颜色”link=“超链接热字色”vlink=“已访问的超链接热字色”alink=“访问瞬间的超链接颜色”>网页的内容<／BODY></p><p><BODY>有很多属性，可以定义页面的背景图像、背景颜色、文字颜色、超文本链接的颜色，这些属性用于设定网页的总体风格。</p><p>简介如下：</p><p>HTML的颜色表示分为两种：</p><p>（1）以命名方式定义常用颜色，如red、black等。</p><p>HTML中定义常用的16种颜色名字是：</p><p>aqua（水绿）、black（黑）、blue（蓝）、fuchsia（紫红）、gray（灰）、green（绿）、lime（浅绿）、maroon（褐）、navy（深蓝）、olive（橄榄）、purple（紫）、red（红）、silver（银）、teal（深青）、white（白）和yellow（黄）。</p><p>（2）以RGB值表示，用“#RRGGBB”表示。</p><p>其中，RRGGBB都代表达式位十六进制，RR、GG、BB分别表示红、绿、蓝三元色，每种颜色由00~ffaqw都有256种彩度，故三原色可以混合成256×256×256=1670万种颜色。</p><p>例如：</p><p>白色的组成是ffffff、红色是ff0000，绿色是green=00ff00，蓝色是0000ff。</p><p>1.1.4关于HTML文档的格式约定</p><p>1．标记与属性</p><p>（1）标记的格式</p><p><标记名>被作用的对象<／标记名></p><p>标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同；例如</p><p><html>……</html>,<head>…</head>,<body>…</body>都是标记。</p><p>（2）标记中的属性</p><p>属性用来说明被标记作用的对象的特征。</p><p>加入属性以后，标记的格式应是：</p><p><标记名属性1=“属性1的值”属性2=“属性2的值”……></p><p>例如：</p><p><fontsize=“7”color=“red”>欢迎进入天天音乐网</font></p><p><font>中的属性size=“7”color=“red”用来定义字符的大小和颜色。</p><p>各个属性项的次序不限，属性间用空格分开，属性值用引号括起来。</p><p>2．关于HTML文档的格式约定</p><p>（1）文本标记语言源程序的文件扩展名默认使用htm或html。</p><p>在使用文本编辑器时，注意修改扩展名。</p><p>而常用的图像文件的扩展名为gif和jpg。</p><p>（2）HTML源程序为文本文件，其列宽可不受限制，即多个标记可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。</p><p>完整的空格可使用特殊符号“ ”表示（字母必须小写）；表示文件路径时使用符号“/”分隔。</p><p>（3）通常在书写HIML文档语句前添加若干个空格，成锯齿形书写语句，以使文档结构清晰，便于阅读。</p><p>（4）标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。</p><p>（5）HTML注释由惊叹号表示，注释内容由符号结束。</p><p>注释内容可插入文本中任何位置。</p><p>任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。</p><p>1.1.5HTML文件的保存</p><p>保存HTML文件的步骤如下：</p><p>①文件编辑完成以后，选菜单命令“文件／另存为”，则弹出“另存为”对话框,如图1.1.1所示。</p><p>②在对话框中输入文件名，在文件名后加上扩展名“.html”或“htm”。</p><p>保存类型为文本文件。</p><p>③按“确定”钮，则 所编文档以指定文件名存盘。</p><p>1.1.6HTML文件的打开</p><p>打开HIML文档有两种方式，一是打开为网页，即运行网页；二是打开为文本文件，供编辑用。</p><p>1．打开为网页，</p><p>打开资源管理器，找到网页文件名后，右击文件名，在弹出的快捷菜单中选“打开”，则所选文件以网页形式打开。</p><p>2．打开为文本文件</p><p>打开资源管理器，找到网页文件名后，右击文件名，在弹出的快捷菜单中选“打开方式／写字板”或选“打开方式／写字板”，则所选文件以文本形式打开。</p><p>1.2分隔标签</p><p>分隔标签用于实现网页对象的分隔。</p><p>分隔标答有换行标记<br>，段落标记<p>，水平线标记<hr>.</p><p>1.2.1换行标记<br></p><p>要让文字换行，可以使用换行标记<br>，换行标记<br>是单标记。</p><p>【例1.2.1】换行标记的例。</p><p>文件名为HT1-2-1_br）。</p><p>运行结果如图1.2.1所示。</p><p>1<html></p><p>2<head><title>换行_HT1-2-13
4
5黄鹤楼送孟浩然之广陵
6唐.李白
7
8故人西辞黄鹤楼,
烟花三月下杨州。
9孤帆远影碧空尽，
唯见长江天际流。
10青山横北郭,白水绕东城，
11此地一为别，孤蓬万里征。
12浮云游子意，落日故人情
13挥手自
去，萧萧斑马鸣。
14
15
由本例可见，第8、9行虽然写成一行，但仍在加了
标记的位置换行；第10~13行，既使分行写，但由于没有
标记，所以仍然显示为一行。
1.2.2段落标记
段落标记
除了实现换行外还在标记处添加一个空行。
段落标记
是单标记。
基本语法：
段落内容
【例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，运行结果如图1.2.3所示。
画线_HT1-2-3
黄鹤楼送孟浩然之广陵
唐.李白
故人西辞黄鹤楼,
烟花三月下杨州。
孤帆远影碧空尽，
唯见长江天际流。
例中，第8语句行用于画一条长350，宽4，绿色的水平线。
1.3排版与列表标记
排版标签用于控制网页对象的布局。
常用标记有预格式化标记
缩排标记和居中标记等。1.3.1预格式化标记
所谓预格式化，就是保留文字在源代码中的格式。
浏览器在显示
标注的内容时，会完全按照原来的文本格式显示。例如，原封不动地保留文档中的空白、空格、换行、对齐、制表符等。
基本语法：
文字内容<／Pre>【例1.3.1】保留原排版格式。
文件名为HT1-3-1_pre，运行结果如图1.3.1所示。
1
2
保留原格式_HT1-3-1_pre3
4
5相思
6王维
7红豆生南国，
8春来发几枝？
9愿君多采撷，
10此物最相思。
11
12
网页中保留了第5~10语句原有的格式。
1.3.2．居中标记
要使段落或文字居中对齐，除了可以使用align属性中的center之外，还可以使用专门的居中标记。
基本语法：
文字内容1.3.3
缩排标记功能：
设定某段落是否要缩排。
【例1.3.2】缩排的例。
文件名为HT1.3.2_blockquote，运行结果如图1.3.2所示。
缩排HT1.3.2_blockquote王小红订购了三本书：
Dreamweaver8
Flash8
ASP．NET程序设计
1.3.4
列表标记列表分为两种类型：
一种是有序列表，用编号来标记项目的顺序；另一种是无序列表，用项目符号来标记项目。
1．有序列表
有序列表中的项目采用数字或英文字母开头，通常各个项目之间有先后顺序，主要使用
和- 两个标记以及type和start两个属性；使用
作为有序列表的声明，- 作为每个项目的开始。
基本语法：
- 项目1
- 项目2
type：
定义有序列表序号类型，默认使用数字序号。
可以定义的属性值有：
1、a、A、i和I。
例如type=“A”，则序号按大写字母A、B、C……排列。
start：
定义序号计数的起始值。
例如数字默认起始值从1开始，小写罗马数字默认起始值从i开始。
若start=“f”，则小写字母序号从f开始。
2．无序列表
在无序列表中，通常使用一个项目符号作为每个列表项的前缀。
无序列表主要使用
、- 、
、- 、
- 几个标记和type属性。
在无序列表中，使用
作为无序列表的声明．- 作为每个项目的开始。
基本语法：
- 项目l
- 项目2
type定义了无序列表的项目符号，属性值可以定义为disc、circle和square，在IE浏览器中显示的项目符号效果分别为●、○和口。
默认情况使用disc项目符号。
3．定义列表
定义列表
标记是一种两个层次的列表，常用于解释名词的定义。名词为第一层次，解释为第二层次，并且不包含项目符号。
定义列表也称为字典列表，因为它与字典有相同的格式。
每个列表项带有一个缩进的定义字段，就好像字典对文字进行解释一样。
基本语法：
- 名词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文字标记
标记用来设置或更改页面中的字体、字号、字型和颜色。
基本语法：
文字内容<／FONT>
Face：
字体的属性，指字体名。
size：
文字的字号，即文字的大小。
其属性值是1~7，数字大字就大。
也可以用+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_sizesize=l大江东去
size=2大江东去
size=3大江东去
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标题标记
设定标题的文字大小，从
到总共有六级。
标题自占一行，不必加
可自动换行。
【例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表格的基本语法
要产生表格，需综合使用
、以及| 这三个标记。表示表格的开始与结束 |
和
表示表中一行的开始与结束和 | 表示行中一列的开始与结束表格的基本语法：
| 列1 | 列2<,td>--- |
| 列1 | 列2<,td>--- |
---
格式中，表的宽度，单位为像素或百分比，其他宽度、高度、间距的单位都是像素。
background:
表格的背景图像，可以使用GIF或JPEG图片文件。
cellspacing:
单元格之间的间距，单位为像素。
对齐方式的值为CENTER，LEFT、RIGHT。
2．标题
可以通过
标记为表格添加标题，且可设置align、valign属性的值控制标题文字的位置。基本语法：
表格标题
格式中，valign的值有top（上方）或bottom（下方）。
3．表头
表头是指表格的第一行，其中的文字可以实现居中并且加粗显示，通过 | 标记实现。 基本语法： |