网页设计HTML语言

1、1第第5章章 网页设计语言HTML 学习目标 u HTML的概念u HTML的语法与结构 u 掌握HTML的各种标记符号及其属性u 能够制作简单网页 2第第5章章 网页设计语言HTML 教学内容 5.1 HTML概述 5.2 HTML的一般标记符 5.3 文本标记符 5.4 列表标记符 5.5 链接标记符 5.6 表格标记符 5.7 表单标记符 5.8 多媒体标记符本章小结 35.1 HTMLHTML概述概述 HTML（Hypertext Markup Language）是最基本的Web页面开发语言，称为文本文档标记语言。它不需要编译，由浏览器（如IE）解释执行。HTML是纯文本文件，可采用W

2、indows中的记事本或写字板来编辑，也可以用DOS下的Edit等文本编辑器，保存时文件名的后缀为.htm或.html。 HTML的主要语法是元素和标签。元素是符合文档类型定义的文档组成部分，如title（文档标题）、img（图像）、table（表格）等。元素名不区分大小写。标签用来规定元素的属性和它在文档中的位置。标签分单独出现和成对出现两种情况。 例如：网页设计教程 title是元素名，与之间的内容都属于元素title，是标签，用来说明元素title。 45.2 HTMLHTML的一般标记符的一般标记符 一个简单的网页一个简单的网页 一个简单网页的制作一个简单网页的制作 第一步：打开Win

3、dows下的记事本。 第二步：输入下面代码 HTML网页设计教程 你好! 欢迎浏览本网页！ 第三步：以sample.htm为文件名保存文件并关闭该文件。 第四步：双击sample.htm文件，浏览器会自动执行它。 55.2 HTMLHTML的一般标记符的一般标记符 HTMLHTML文件格式特点文件格式特点 1每一个HTML文件以开始，以结束，浏览器遇到标志时，会按照HTML的标准来解释后面的文本，直到才停止解释。和是成对出现的，所有的文本和命令都在它们之间。 2是网页的头部标记，通常紧跟之后。与之间的文本是整个文件的序言，不属于HTML文件本体部分，不在浏览器屏幕中显示。 3用来说明文件标题，

4、TITLE元素的格式为：文件题目 ，一个好的题目应该使读者能从中判断出该文件的大概内容。浏览时文件题目将显示在IE浏览器标题栏上。中不包含其他标记。 4和之间是网页主体内容。在标签中可以规定整个文档的一些基本属性，如：“bgcolor” 属性，用于指定文档的背景颜色,“text” 属性用于指定文档中文字的颜色。 5所有标记不得交叉，如与必须包含在与中间。 6HTML文件对书写格式要求不太严格。65.3 文本标记符文本标记符 常用文本标记符常用文本标记符标 签 作 用 是单独出现的，作用相当于插入回车符。如果没有换行标签，Web浏览器窗口将根据浏览器窗口的宽度尽可能长的显示文本。 标签是成对出现

5、的，夹在和之间的文字是文档中的标题。标题文字都用黑体显示，上级标题总比下面各级标题更大些、更粗些。标签共分六级，其中标签括起的文字是第一级标题，最大最粗，而标签括起的文字是最后一级标题，最小最细。 标签是单独出现的，作用是换行并在该行下面画一条水平直线。它有三个属性值：SIZE、WIDTH和ALIGN，分别用以规定水平线的高度、宽度和水平线在浏览器窗口中的位置。 P是paragraph的意思，它用于划分段落，作用是换行并插入一个空白行，标签可以单独使用，也可以成对使用。成对使用时，可以添加ALIGN属性，标出段落在浏览器中的位置。ALIGN属性的参数值有left、center和right，分别

6、表示标签所括起的段落位于浏览器窗口的左侧、中间、右侧。 75.3 文本标记符文本标记符 常用文本标记符常用文本标记符 标 签 作 用 是预格式化标签，HTML的输出是基于窗口的，因而HTML文件在输出时都要重新排版，对确实不需要重新排版的内容，可以用通知浏览器。浏览器在输出时，对括起来的内容几乎不做修改地输出。 字符格式标签 HTML文档的字符格式标签主要有、和，它们都成对出现。和之间的内容将显示为黑体文字，和之间的内容将显示为斜体，和之间的内容将显示为带下划线的文字。 地址标签，一般放在文档体的首部或尾部。和之间的内容通常是有关作者的信息，包括作者的姓名、身份等等。 85.3 文本标记符文本

7、标记符 常用文本标记符常用文本标记符 例常用文本标记符举例例常用文本标记符举例 有关文本标签的使用 这一个段落我们分两行显示，需用到<BR>标签，我们看如果我们不用<BR>标签，而只是在形式上分行的效果， 该段落到此结束 下面是第二段。该段只有一行，在该行下面加一条绿色水平线。说明：<BR>将作为纯文本符号而不是标记。95.3 文本标记符文本标记符 滚动字幕滚动字幕 滚动字幕能使网页生动活泼，增加视觉效果。标签为： 。标签有这样几个常用属性：1derection属性，用于指定文字移动方向，属性值有：left、r

8、ight。2behavior属性，指定文字移动方式。属性值有：scroll、 slide、 alternate，分别表示文字一圈一圈的绕着走、只走一次、来回走动。3loop属性，用于指定循环次数，若不指定循环次数，则表示循环不止。4scrollamount属性，用于指定文字移动的速度。5bgcolor属性，用于指定文字背景色。105.3 文本标记符文本标记符 滚动字幕滚动字幕 例例5-3 滚动字幕举例滚动字幕举例 滚动字幕 请进入音乐休闲屋看我还会动呢,并且是从右向左移动 我从左向右一圈一圈的移动 我是不是移动的比较快？ 我的底色是黄的，我循环三次即停止移动 115.4 列表标记符列表标记符

9、有序列表有序列表 有序列表用于对网页中的一些内容进行编号排列，以便读者清晰地了解其每行的顺序。 在HTML中插入有序列表是通过标签来实现的。首标签和尾标签之间的内容是有序列表的内容，排序列表的每一项必须用标签标识。例有序列表举例例有序列表举例 有序列表 下面是有序列表 这是列表第一项 这是列表第二项 这是列表第三项 125.4 列表标记符列表标记符 无序列表无序列表 无序列表是指列表内容可以按任意顺序排列。每一列表项前不是用连续编号，而是用一个特定符号来标记，通常是在每一列表项前加上一个圆点儿。无序列表与有序列表的实现方法很相似，只是用标记来代替有序列表中的来代替列表中的。 例无序列表举例例无

10、序列表举例 无序列表 以下是娱乐休闲版的列表： 音乐影视游戏135.4 列表标记符列表标记符 定义列表定义列表 定义列表用于对清单条目进行简短说明，首标签和尾标签之间的内容就是定义列表的内容，列表项目用引导，它的说明用引导。通常和是成对出现的，即一个列表项目对应一个说明项，当然也可以一个列表项目对应多个说明项。例定义列表举例 定义列表 下面是一个定义性列表： 计算机硬件如软驱、硬盘等计算机软件如系统软件、应用软件145.5 链接标记符链接标记符 在浏览网页过程中，有时点击某处的文字或图像会跳转到另一部分，这是因为在网页中使用了超文本链接。使用超文本链接可以使顺序存放的文件在一定程度上具有随机访

11、问的能力，更加符合人类的思维方式。支持文档的超连接是HTML最吸引人优点之一。 一个超文本链接指针由两部分组成：被指向的目标和是锚点。目标可以是同一文件的另一部分，也可以是另一个文件，还可以是动画或音乐。而当用户把鼠标移到锚点时，鼠标的形状会变成小手状，这时点击鼠标，就会跳转到链接的目标。155.5 链接标记符链接标记符不同文件间的链接不同文件间的链接 HTML文件用文字作锚点的格式是：字符串。 HTML文件用图像作锚点的格式是：。用图像作锚点实际上是用取代了用文字作锚点中“字符串”的位置。 HREF是链接中最常用的属性，该属性用来指出所要链接文件的名称或URL。URL是统一资源定位器(Uni

12、form Resource Locator)。 对于自己主机内的文件，它的URL可以根据该文件的实际情况决定。对于因特网上的资源，在用浏览器观看时它的URL会在浏览器的“地址”栏中显示出来，把它抄下来写到你的HTML文件中即可。这个“字符串”就是锚点。用鼠标点这个字符串时，浏览器就会将URL处的资源显示在屏幕上。 用来指明作为锚点的图像。 例如：点此处看相片 网页上会显示字符串“点此处看相片”，当把鼠标移到这个字符串上时，鼠标会变成小手形状，点击字符串就会显示文件“mypicture.gif”的内容。165.5 链接标记符链接标记符同一文件间的链接同一文件间的链接 链接指针可以使读者在整个因特

13、网网上方便的跳跃浏览，当一个HTML较长时，还可以在文件中建立一些链接，实现同一文件中内容的跳跃浏览。对于一个完整的文件，可以用URL来唯一地标识被指向的目标，但对于同一文件的不同部分，被指向的目标是通过标记的NAME属性来定义的。 格式：text 说明：NAME属性用来给被链接的部分起名字并加标记，text是可选项。 给被链接的部分起名字并加标记后，可以用text 指向它。其中的URL是放置标记的HTML文件的URL，name是标记名，对于同一个文件，可以写为text 。这时就可以点取text跳转到标记名为name的部分了。 例如：这里白雪飘飘 点此进入白雪飘飘 这段代码，为“这里白雪飘飘”

14、作了标记“白雪飘飘”。点击“点此进入白雪飘飘”字符串可链接到“这里白雪飘飘”。175.5 链接标记符链接标记符在新窗口中显示被指向的目标在新窗口中显示被指向的目标 如果希望在一个新的窗口中显示被指向的目标，可以使用target属性。 格式： 字符串 它能将URL代表的资源显示在一个新的窗口中，该窗口的名字叫“新窗口名”。 185.5 链接标记符链接标记符链接地图链接地图 图像链接中每幅图只能指向一个地点，而图像地图可以把图像分成多个区域，每个区域指向不同的目标文档。例链接地图举例例链接地图举例 链接地图 下面定义的是一个链接地图 195.5 链接标记符链接标记符链接地图链接地图 在定义链接地图

15、时，首先要为链接源点的图像添加ismap属性，将图像定义为地图。然后必须使用usemap属性说明该图像是遵循哪个地图定义的。usemap属性的参数值为“#地图名”。HTML是通过标签和标签来定义地图的。标签有一个不可缺省的属性name，参数值是地图名字，比如上例中的name=JY，其中“JY”是地图名。地图的区域划分是通过标签来实现的。标签有三个属性，就是上例中用到的shape、coords、href，分别表示该区域的形状、范围和所链接到的目标文档。上例中用到的rect用于指定一个矩形区域，该区域的位置由左上角坐标和右下角坐标说明。poly 指定一个多边形区域， 该区域的位置由各顶点坐标说明。

16、circle 指定一个圆形区域，该区域的位置由垂直通过圆心的直径与该圆的交点坐标说明。上例中语句定义了一个矩形区域，矩形的左上角坐标为（100，80），右下角的坐标为（130，120）。在该区域的任何位置点击都可以链接到目标文档“WATER.HTML”。205.6 表格标记符表格标记符 表格能将HTML的内容按行或列的方式组织，使网页的组织井然有序。 标记是定义表格的总标记，HTML要求一个表格的全部内容包含在和标记之中。标记中最常用属性是border属性，它的值表示以像素点为单位的边框宽度，如border=2表示边框为2个像素点（像素点是位图的基本单位），如果不包含border属性则默认无边

17、框。此外，标记还有align属性，取值为left、right、center，分别表示将表格定义在网页的左端、右端或使表格居中。 表是由行和列内的单元格组成的。表格的定义顺序是首先定义表的一行，行标记用，是成对标签。然后依此是行的单元格，单元格用标记，如果一个表格中某个单元格的内容很长，可以使用标记强制内容折行。再定义第二行，依次定义第二行的单元格。表的列由每行包含的单元格数目自动计算得到。标志用来设置表格头，文字通常是黑体居中显示。为确保表中每列对齐，应在每行包含相同单元格。 215.6 表格标记符表格标记符 此外，还有align和valign属性。align属性定义水平对齐方式，与标记的该属

18、性相同。valign属性定义垂直对齐方式，取值为top（顶端对齐）、middle（居中间对齐）或bottom（底部对齐）。具有width、colspan、rowspan和nowrap属性。width是格的宽度，单位用绝对像素值或总宽度的百分比，colspan设置一个表格格子跨占的列数（缺省值为1），rowspan设置一个表格格子跨占的行数（缺省值为1），nowrap禁止单元格内的内容自动换行。 表的标题使用标记，一般放在表中第一行的前面， 的属性包括对齐属性align，取值为top、bottom、right、left、middle。225.6 表格标记符表格标记符 例例 表格的制作表格的制作

19、表格标志的综合示例 姓名 性别 分数 周 女 90 王 男 98 235.7 表单标记符表单标记符 我们上网时经常需要填写一些用户信息，在HTML中是通过表单实现的。表单使网页具有交互功能，在Web页中提供表单让访问者填写，从而获得用户信息。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。当用户填写完信息做提交（submit）操作后，表单内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器，网页便有了交互性。设计表单常用标记是：、和等。245.7 表单标记符表单标记符表单输入标记表单输入标记 此标

20、记在表单中使用频繁，大部分表单内容需要用到此标记。语法如下：各项含义说明如下：255.7 表单标记符表单标记符表单输入标记表单输入标记 1align用于设定表单的位置，参数有：left、right、middle、top、bottom。 2name是单行文字盒名称。比如我们要在该文本框中填写姓名，可给文本框起名：YOUR-NAME. 3type决定了输入数据的类型。 4value用于设定默认值，如果用户不输入的话，就采用此默认值； 5src是针对type=image的情况来说的，设定图像文件的地址； 6checked指定复选项的初始状态，表示该复选项在初始时是被选中的； 7maxlength表示

21、在输入单行文本的时候，最大输入字符个数； 8size用于设定在输入多行文本时的最大输入字符数； 9onclick表示在按下按钮时调用指定的子程序； 10onselect表示当前项被选择时调用指定的子程序。265.7 表单标记符表单标记符表单输入标记表单输入标记 例制作一个表单例制作一个表单表单实例请选择您喜欢的娱乐节目：非常六加一开心辞典快乐大本营275.7 表单标记符表单标记符 和和标签标签 用标签和标签可以在表单中插入一个下拉列表框。首标签和尾标签之间的内容就是一个列表框的内容。标签必须和标签联合使用，因为下拉菜单中的每个选项要用标签定义。 标签和标签语法如下： 请单击该图标看请单击该图标

22、看 下拉列表框举例下拉列表框举例说明： 1name设定下拉列表框的名称； 2size设定列表框高度，即一次显示几个菜单项，一般取默认值（size=1）； 3multiple设定可以进行多选。 4标签定义下拉列表框中的一个选项，其中selected表示当前项被默认选中，value表示该项对应的值，当该项被选中之后，该项的值会被送到服务器进行处理 。285.7 表单标记符表单标记符多行文本输入多行文本输入标签标签 建立多行文本输入框的专用标签，其语法如下： 各参数含义： name：文本框名称，cols：宽度，rows：高度（行数），wrap：换行控制，有三个属性值：off表示不自动换行；hard表

23、示自动硬回车换行，换行标记一同被传送到服务器中去；soft表示自动软回车换行，换行标记不会传送到服务器中去。 表单所涉及的标记很多，参数也比较复杂，但一般的表单不可能涉及所有参数，实际制作表单时通常是组合应用这些标记。我们在制作表单时要遵循一个原则：能用默认值的尽量用默认值，绝不设定一个不用的参数。295.8 多媒体标记符多媒体标记符文本中插入图像文本中插入图像 超文本支持的图像格式一般有X Bitmap(XBM)、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，才可以在浏览器中看到。插入图像的标签是，格式为：。 src属性指明了所要链接的图像文件所在地址，这个图像文

24、件可以在本地机器上，也可以位于远端主机上。地址的表示方法可以沿用3.4节“链接标记符”中URL地址表示方法。img还有两个属性是height和width，分别表示图形的高度和宽度。 网页上不仅有图形还有文字，文字与图形之间有各种不同的对齐方式，用align属性定义对齐方式。align的取值可以是 top|middle|bottom|right|left。图文之间的距离用属性hspace和vspace来规定，分别表示文字与图像的水平距离和垂直距离。305.8 多媒体标记符多媒体标记符插入背景音乐插入背景音乐 标签用以插入背景音乐，但只在 IE中才能听到。其格式如下： src用来指出音乐文件地址；

25、autostart 用来指出在音乐下载传送完之后是否自动播放，默认false（否），选true（是）则自动播放；Loop用来指出播放的次数。Loop=3表示重复三次，Infinite 表示重复多次。 315.8 多媒体标记符多媒体标记符插入背景音乐插入背景音乐 要在浏览网页时听音乐，可将音乐做成一个链接，只需用鼠标在锚点上单击，就可以听到动人的音乐了。其基本格式与前面讲的链接标记符相同： 乐曲名 除了借助链接实现网上播放音乐的功能，我们还可以让音乐自动载入，让它出现控制面板或当背景音乐来使用。基本语法：325.8 多媒体标记符多媒体标记符多行文本输入框多行文本输入框 src=“音乐文件地址” :用于设定音乐文件的路径 autostart=true/false :音乐文件传送完后是否自动播放，true是要，false是不要，默认为false。 loop=循环次数:设定播放重复次数，loop=3为重复3次，true为无限次播放，false播放一次即停止。 startime=“分:秒”:设定乐曲的开始播放时间，若30秒后播放可写为 :startime=00:30。 volume=0-100:设定音量的大小。如果没设定的话，就用系统的音量。 wi