第3章网页元素标记.ppt

1、网页元素标记,学习目标：,HTML头部标记 HTML主体标记 文字与段落标记 文字美化标记 插入图像标记,HTML头部标记,HTML的标签与属性:,基本语法 内容 参考实例 字体设置 注意事项 不要在“”与标签名之间输入多余的空格， 不能在中文输入法状态下输入这些标签及属性,HTML头部标记,HTML头部标记是，主要包括页面的一些基本描述语句，如：JavaScript和CSS一般也定义在HEAD头元素中，用于包含当前文档的有关信息，例如标题和关键词等。,头部标记,标题标记,1、基本语法： 2、语法解释： 标记内部就是标题的内容。 3、文件范例：3-1.htm,基底文字标记,1、基本语法： 2、

2、语法解释： FACE 字体 SIZE 字号 COLOR 颜色 3、文件范例：3-3.htm,3.1.4 元信息标记,1、作用 标记通过属性来定义文件信息的名称、内容等，是实现元数据的主要标记，它能够提供文档的关键字、作者、描述等多种信息。在HTML的头部可以包含任何数量的标记。 2、属性,标记属性,设定关键字,1、基本语法 2、语法解释 keywords为关键字定义， CONTENT中定义关键字的内容。 3、文件范例：3-5.htm,注意,注意：,大多数搜索引擎检索时都会限制关键字的数量，有时关键字过多，该网页会在检索中被忽略。所以关键字的输入不宜过多，应切中要害。多个关键字之间用逗号隔开。,

3、设定字符集,1、基本语法 2、语法解释 http-equiv传送HTTP通信协议的标头， CONTENT中定义页面的内码，其中charset 中写下内码的语系。 3、文件范例：3-8.htm,设定自动刷新,1、基本语法 2、语法解释 http-equiv传送HTTP通信协议的标头， REFRESH代表刷新，CONTENT中写下刷新 间隔的秒数。 3、文件范例：3-9.htm,设定自动跳转,1、基本语法 2、语法解释 http-equiv传送HTTP通信协议的标头， REFRESH代表刷新，CONTENT中写下跳转间 隔的秒数以及跳转后打开的文件地址。 3、文件范例：3-10.htm,设定禁用缓

4、存,1、基本语法 2、语法解释 CACHE-CONTROL为缓存控制，CONTENT中定义禁用缓存。 3、文件范例：3-12.htm,总结2-1,总结2-2,HTML主体标签及属性、颜色的设定,3.2.1 HTML的主体标签,HTML主体标记是，在和中放置页面中所有的内容，如文字、图片、链接、表格、表单等。 这些元素有很多自身的属性，如定义页面文字的颜色、背景的颜色、背景图像等。,元素的属性,文字颜色属性TEXT,1、基本语法： 2、语法解释： COLOR_VALUE指的是颜色的值，可以是颜色名称或十六进制值来表示。 3、文件范例：5-1.htm,背景颜色属性BGCOLOR,1、基本语法： 2

5、、语法解释： COLOR_VALUE指的是颜色的值，可以是 颜色名称或十六进制值来表示。 3、文件范例：5-2.htm,背景图像属性BACKGROUND,1、基本语法： 2、语法解释： IMG_FILE_URL指的是图片文件所在的路径,可以是文件所在位置的地址,也可用统一资源定位符URL。 3、文件范例：5-3-1.htm 5-3-2.htm,背景图像固定属性bgproperties,1、基本语法： 2、语法解释： BGproperties定义了背景属性，FIXED就是设为固定的效果。 3、文件范例：5-4-1.htm 5-4-2.htm,链接文字颜色属性LINK,1、基本语法： 2、语法解释

6、： 通过LINK定义默认的没有单击过的链接文字的颜色，COLOR_VALUE定义 颜色的名称或十六进制值来。 3、文件范例：5-5.htm,激活链接文字颜色属性ALINK,1、基本语法： 2、语法解释： 通过ALINK定义鼠标按下链接文字时链接文字的颜色，COLOR_VALUE定义 颜色的名称或十六进制值来。 3、文件范例：5-6.htm,访问后链接文字颜色属性VLINK,1、基本语法： 2、语法解释： 通过VLINK定义单击过后的链接文字颜色，COLOR_VALUE定义 颜色的名称或十六进制值来。 3、文件范例：5-7.htm,上边距属性TOPMARGIN,1、基本语法： 2、语法解释： V

7、ALUE的值一般以像素为单位。 3、文件范例：5-8.htm,左边距属性LEFTMARGIN,1、基本语法： 2、语法解释： VALUE的值一般以像素为单位。 3、文件范例：5-9.htm,3.2.2 颜色的设定,颜色值是一个关键字或一个RGB格式的数字 颜色是由 red green blue 三原色组合而成的，在 HTML 中对颜色的定义是用十六进位的,3.2.2 颜色的设定,RGB颜色可以有四种表达形式： #rrggbb (如，#00cc00) #rgb (如，#0c0) rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y

8、是一个介乎0.0到100.0之间的整数 (如， rgb(0%,80%,0%),3.2.2 颜色的设定,Windows VGA(视频图像阵列)形成了16各关 键字： aqua，black， blue，fuchsia, gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，and yellow,3.2.2 颜色的设定,例如： 白色的组成是 red=ff, green=ff, blue= ff,RGB 值即为ffffff 红色的组成是 red=ff, green= 00, blue= 00, RGB值即为ff0000 绿色的

9、组成是 red=00, green=ff, blue= 00, RGB值即为 00ff00 蓝色的组成是 red=00, green= 00, blue= ff, RGB值即为0000ff 黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor=#336699 用英文名字表示颜色时直接写名字。如 bgcolor=green,3.3 文字与段落标记,文字的内容,在浏览器中显示的文字内容编写在标记中，这些内容包括普通的文字、空格符号和特殊符号以及页面的注释语句。,输入普通文字,1、在页面

10、中输入文字内容是HTML语言所能做到的最简单的事情。 2、文件范例：6-1.htm 如： 这是一本专业的HTML书籍 ,输入空格符号,1、基本语法： 2、语法解释： 一个半角空格使用一个 ；表示，多个空格只需使用多次即可。 3、文件范例：6-2.htm,输入特殊符号,1、一些特殊符号是凭借特殊的符号码来表现的。通常由前缀“”而组成。 2、语法解释： 见下表 3、文件范例：6-3.htm 3-5.htm,特殊符号,3.3.2 注释语句,1、基本语法： 2、语法解释： 上述两种表示方法都可以代表注释语句。 3、文件范例：3-6.htm,3.3.3 文字的修饰标记,标题字标记 在浏览器中的正

11、文部分，可以显示标题文字，所谓标题文字就是以某几种固定的字号显示文字。,标题字标记,1、基本语法： 一级标题（最大字号） 六级标题（最小字号） 2、文件范例：6-5.htm,标题字的对齐属性ALIGN,1、基本语法： 2、语法解释： Hn中的n代表从16，Value取值left、center、right。 3、文件范例：6-6.htm 3-7.htm,字体标记,综合实例：3-8.htm,字体属性FACE,1、基本语法： 2、语法解释： 标记中的FACE定义了字体。 3、文件范例：6-20.htm,字号属性SIZE,1、基本语法： 2、语法解释： 标记中的SIZE定义了字号，VALUE 取值范围

12、为从1到7。 3、文件范例：6-21.htm,颜色属性COLOR,1、基本语法： 2、语法解释： 标记中的COLOR定义了颜色。 3、文件范例：6-22.htm,文字的修饰标记,粗体标记,1、基本语法： 2、语法解释： 这两个标记都可以表现文字的粗体效果。 3、文件范例：6-7.htm,斜体标记,1、基本语法： 2、语法解释： 这3个标记都可以表现文字的斜体效果。 3、文件范例：6-8.htm,上标标记,1、基本语法： 2、语法解释： 将文字放在标记中间就可以实现上标。 3、文件范例：6-9.htm,下标标记,1、基本语法： 2、语法解释： 将文字放在标记中间就可以实现下标。 3、文件范例：6

13、-10-1.htm,大字号标记,1、基本语法： 2、语法解释： 将文字放在标记中间就可以实现加大字号。 3、文件范例：6-11.htm,小字号标记,1、基本语法： 2、语法解释： 将文字放在标记中间就可以实现减小字号。 3、文件范例：6-12.htm,下划线标记,1、基本语法： 2、语法解释： 将文字放在标记中间就可以实现文字的 下划线。 3、文件范例：6-13.htm,删除线标记,1、基本语法： 2、语法解释： 这两个标记都可以在文字的中间添加删除线。 3、文件范例：6-14.htm,段落标签及属性,段落标记,1、基本语法： 2、语法解释： 可以使用成对的标记来包含段落，也可以使用单独的标记

14、来划分段落。 3、文件范例：6-24.htm,段落标记的对齐属性ALIGN,1、基本语法： 2、语法解释： 标记的ALIGN属性可以使段落文字进行居左、居中、居右的对齐。 3、文件范例：6-25.htm 综合范例：3-11.htm,换行标记,1、基本语法： 2、语法解释： 一个换行使用一个,多个换行可以连续使用多个标记。 3、文件范例：6-26.htm,原样显示文字标签,1、基本语法： 2、语法解释： 上述标记之间的文字会实现预格式化的效果。 3、文件范例：6-29.htm 3-12.htm,居中对齐标签,1、基本语法： 2、语法解释： 上述标记之间的文字会自动居中对齐。 3、文件范例：3-1

15、3.htm,缩排标签,1、基本语法： 2、语法解释： 上述标记之间的文字会进行缩排。 3、文件范例：3-14.htm,水平分隔线标签,水平分隔线标签,1、基本语法： 2、语法解释： 在页面中插入水平线。 3、文件范例：6-32.htm,水平线宽度属性WIDTH,1、基本语法： 2、语法解释： 水平线的宽度可以是以绝对的像素为单位,也可以是以相对的百分比为单位。 3、文件范例：6-33.htm,水平线高度属性SIZE,1、基本语法： 2、语法解释： 水平线的高度只能使用绝对的像素来定义。 3、文件范例：6-34.htm,水平线去掉阴影属性NOSHADE,1、基本语法： 2、语法解释： 去掉页面中

16、水平线的阴影。 3、文件范例：6-35.htm,水平线颜色属性COLOR,1、基本语法： 2、语法解释： VALUE为颜色的英文名称或者十六进制值。 3、文件范例：6-36.htm,水平线排列属性ALIGN,1、基本语法： 2、语法解释： VALUE的取值为LEFT、CENTER、RIGHT。 3、文件范例：6-37.htm 综合范例：3-15.htm,插入图片标记,图片的基本格式,1、JPEG格式： 是特别为照片图像设计的文件格式。JPEG支持数百万种色彩。 2、GIF格式： 图形交换格式GIF是网页图像中很流行的格式。虽然它仅包括256种色彩，但GIF提供了出色的、几乎没有丢失的图像压缩。

17、,插入图片,插入图片,1、基本语法： 2、语法解释： 通过SRC属性指定路径，File_Name为要插入图像的路径。 3、文件范例：3-17.htm,1. 图像的源文件属性SRC,1、基本语法： 2、语法解释： 通过LOWSRC属性指定路径，File_Name为要插入图像的路径。 3、文件范例：3-18.htm,2.图像的低分辨率源文件属性LOWSRC,1、基本语法： 2、语法解释： 说明提示文字的内容中英文均可。 3、文件范例：3-19.htm,图像的提示文字属性ALT,提示文字有两个作用：一是如果图像已下载，用于说 明或者描述图像；二是如果图像没有被下载，在图像 的位置上就会显示提示文字。,1、基本语法： 2、语法解释： 图像的宽度和高度的单位可以是像素，也可以是百分比。 3、文件范例：3-20.htm,4. 图像的宽度和高度属性WIDTH、HEIGHT,1、基本语法： 2、语法解释： VALUE为边框线的宽度，单位为像素。 3、文件范例：3-21.htm,5. 图像的边框属性BORDER,1、基本语法： 2、语法解释： VALUE为图片垂直方向上和文字的距离，单位为像素。指定图像左边和右边的文字与图像之间的间距。 3