《超文本标记语言》PPT课件

1、第2章 网页设计的基本描述语言HTML2.1 HTML概述2.2 HTML文档的构成2.3 HTML元素2.1 HTML概述HTML(Hypertext Markup Language)：是一种规范，是一种标准。他是通过标记符(tag)来标记显示网页的各个部分。所有网页都是HTML格式的文件。HTML通过元素来告诉浏览器如何处理两个标记符之间的信息。HTML元素的格式：正文2.2 HTML文档的构成网页总是以标记开始，在文件的末尾以结束，表示文件是HTML格式。网页文件通常有两部分组成：头部(head)和主体(body)。1. HTML文档的基本结构 HTML 文件的正文写在这里 标记和标记对

2、注释标记 (1) 格式:(2) 功能与说明: 注释内容 不显示在网页上; 主要功能是提高代码的可读性.2. HTML元素 内容起始标记结束标记,有些标记可以省写结束标记2.3 HTML元素类别允许包含的元素文档结构元素HTML,HEAD,BODY,FRAMESET头部元素TITLE,META,LINK,BASE,STYLE块元素CENTER, Hx, ADDRESS, PRE, P, BR, DIV列表元素DIR,DL,DT,DD,LI,OL,UL表格元素TABLE,TR,TD,TH,CAPTION表单元素FORM,INPUT,SELECT,OPTION,TEXTAREA超链接元素A,MAP,

3、AREA字符格式元素FONT,B,I,U,S等帧元素FRAMESET,FRAME,NOFRAME,IFRAME图片元素IMG层元素DIV,SPAN,LAYER,ILAYER脚本元素SCRIPT内嵌对象元素APPLET,OBJECT,PARAM,EMBED2.3.1 文档结构 HTML 文件的正文写在这里 1. 文档标记HTML 2. 文档头标记 头部元素： 头部用表示开始，用表示结束。标签用于定义文档的头部，它是所有头部元素的容器。 在头部元素中我们一般都会用到，他是网页的标题，将显示在网页的标题栏当中。2.3.2 头部元素 可以嵌套在head元素中的元素。1. TITLE标记 功能: 设置网

4、页标题.说明: 该标记只能嵌入在标记对中使用.2. META标记 (1) 功能: 指明网页作者、制作工具等.(2)说明: 该标记可以重复出现在标记对中;该标记中的信息不显示在网页中.3. 其他标记 LINK 最常见的用途是链接样式表。 STYLE BASE 标签为页面上的所有链接规定默认地址或 默认目标。3. 文档体标记 文档体标记的常用属性属性功 能 描 述link设定页面默认的链接颜色alink设定鼠标正在单击时的链接颜色vlink设定访问后链接文字的颜色background设定页面背景图像bgcolor 设定页面背景颜色leftmargin 设定页面的左边距topmargin设定页面的上

5、边距bgproperties设定页面背景图像为固定，不随页面的滚动而滚动text设定页面文字的颜色2.3.3 块 CENTER标记 标题标记H1H6P标记BR标记PRE标记等1. 文本居中标记 功能: 居中显示文本.2. 标题标记(1) 格式: (2) 功能:字号最大,字号最小.n为163 分段标记(1) 格式: (2) 说明:该标记可单独使用，也可成对使用。单独使用时，下一个的开始就意味着上一个的结束。 作用：将文本换行，并空出一个文本行的间距。 (3)对齐属性 align 取 值 功 能 left缺省设置,段落内容左对齐 center段落内容居中对齐 right段落内容右对齐 justif

6、y段落内容两端对齐 4. 换行标记 (1) 格式: (2) 功能与说明: 换行标记为单标记,且一般不包含属性;在段落间换行,不产生空行(与标记不同)作用：将文本换行，但没有行间距。5. 原样显示标记(1) 格式: 作用：保持文本的原始格式，并显示在网页上。6. 分隔线标记(1) 格式: (2) 功能与说明: 标记为单标记.作用： 在网页中显示一条水平分隔线。(3) 标记的属性属性参数功能单位默认值 size设置线的粗细pixel(像素）2 width设置的宽度pixel(像素）100% align left center right设置线的对齐方式center color设置线的颜色black

7、 noshade取消线的3d阴影2.3.4 字符格式 FONT标记 B标记 I标记 U标记等1. 字体格式标记 (1) 格式:(2) 属性 属性功 能默认值 face设置文字字体宋体 size设置文字的大小3 color设置文字的颜色黑色作用：设置字符的颜色、大小和字体。(3) 说明如果系统中没有face属性所指定的字体,则使用默认字体;size属性的取值为17;也可以用+n或-n来设定字号的相对值;color属性的值为：rgb颜色(#rrggbb). RGB色彩模式 是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的RG

8、B颜色查询对照表2. 物理字体标记(1)粗体标记放在与标记之间的文字将以粗体方式显示。(2)斜体标记放在与标记之间的文字将以斜体方式显示。(3)下划线标记 放在与标记之间的文字将以下划线方式显示。(4) 删除线标记 放在与标记之间的文字将以下划线方式显示。3. 上标标记和下标标记(1)上标标记放在与标记之间的文字将以上标方式显示.(2)下标标记放在与标记之间的文字将以下标方式显示.2.3.5 图像 (1) 格式:单标记必须指定的属性(2) img标记的其他常用属性属性功能描 述 alt指定提示文本,即鼠标停留在图像上时显示的文本 height width指定图像在网页中显示的高度,单位为像素指

9、定图像在网页中显示的宽度,单位为像素 hspace vspace指定图像左右的间距 , 单位为像素指定图像上下的间距 , 单位为像素 align指定图像与文本的对齐方式,取值为: top、middle、bottom、left、right border指定图像边框的宽度，单位为像素(3) 使用img标记的注意事项 img标记没有结束标记; 图片文件一般使用.gif或.jpg文件,以保证下载速度; 图片文件的URL尽量使用相对路径. 绝对路径就是你的网页上的文件或目录在硬盘上真正的路径，在制作网页中实际很少用到。 包含了标识Internet上的文件所需要的所有信息。包括完整的协议名称、主机名称、文

10、件夹名称和文件名称 。例如: /special/000120MC/drought060816.html协议名主机名文件夹名文件名绝对路径相对路径相对路径是指目标文件地址相对于源文件的路径。如果链接到同一目录下,只需输入要链接文件的名称.要链接到下级目录中的文件,需先输入目录名,然后加/,再输入文件名.要链接到上一级目录中文件,则先输入./,再输入文件名.相对路径示例相对路径名含 义href=abc.htmabc.htm 是本地当前路径下的文件href=web/abc.htm abc.htm 是本地当前路径下web子目录下的文件href=./ abc.htm abc.htm 是本地当前目录的上一

11、级子目录下的文件href=././ abc.htm abc.htm 是本地当前目录的上两级子目录下的文件举例Index链接到contents: 支持/contents.htmlContents链接到index： ./index.html 2.3.6 超链接链接的基本概念创建超链接标记常见的链接目标1. 链接的基本概念源端点目的端点 本网页内的某处(锚点) 网页文件或其他文件 E-mail FTP服务器 文字 图片 动画 图片的一个区域(热点)2. 创建超链接标记(1) 文字为超链接源,超链接标记的常用格式 源端点文字 绝对路径 相对路径 _blank: 在新窗口中显示目标 _self: 在当前

12、网页窗口中显示目标_parent: 在当前网页的上一级窗口中显示目标_top: 忽略框架,在整个浏览器中窗口中显示目标 嵌套了一个标记(2) 图像为超链接源,超链接标记的常用格式3. 常见的超链接目标(1) 链接到网页或其他文件在标记的href属性中指定网页文件或其他文件所在的路径和文件名即可.(2) 链接到锚点也叫书签链接 ,常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作精准链接的便利工具，便于浏览者查看网页内容。 (1) 定义锚点 锚点内容 (2) 链接到锚点 超链接内容 (3) 链接到FTP 超链接内容 (4) 链接到E-mai

13、l 超链接内容 2.3.7 列表 有序列表 无序列表 定义列表 嵌套列表1. 有序列表 第1项 第n项 (1) 格式:单标记(2) 有序列表中type属性的取值取值功能描 述type=1表示列表项目用数字标号(1 , 2 , 3.)type=A表示列表项目用大写字母标号(A , B , C.)type=a表示列表项目用小写字母标号(a , b , c.)type=I表示列表项目用大写罗马数字标号(,.)type=i表示列表项目用小写罗马数字标号(i , ii , iii.)2. 无序列表 第1项 第n项 (1) 格式:(2) 无序列表中type属性的取值取值功能描 述type=disc表示项目

14、符号用小圆点(默认样式)type=square表示项目符号用小正方形()type=circle表示项目符号用小圆圈()3. 定义列表 术语1 术语解释1 术语2 术语解释2 术语3 术语解释3 (1) 格式:2.3.8 表格标 记描 述.用于定义一个表格开始和结束.定义一行，一对行标记内可以建立多对由或标记所定义的单元格.定义表头单元格。表头单元格中的文字将以粗体显示，此标记不是必需的.标记必须放在标记内.定义一个单元格，一对标记将建立一个单元格，标记必须放在标记内.定义表格的基本语法1. 表格标记的常用属性属 性功能描 述width表格的宽度。单位可以是像素,也可以是百分比height表格的

15、高度。单位可以是像素,也可以是百分比align表格在页面的水平摆放位置(left, center, right)background表格的背景图片bgcolor表格的背景颜色border表格边框的宽度(以像素为单位)。 默认为0,无边框bordercolor表格边框颜色frame(了解)表格外边框线的显示方式(取值见后)rules(了解)表格内边框线的显示方式(取值见后)cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小单元格边距(表格填充)(cellpadding) - 代表单元格外面的一个距离,用于隔开单元格与单元格空间 单元格间距(表格

16、间距)(cellspacing) - 代表表格边框与单元格补白的距离,也是单元格补白之间的距离 2. 行标记的常用属性属 性功能描 述 align 文本的水平对齐方式,取值为: left、center、right、justify等 valign 行中文本的垂直对齐方式,取值为： top、middle、bottom、baseline bgcolor 行的背景颜色3. 单元格标记和的常用属性属 性描 述width/height单元格的宽和高，单位为像素或colspan单元格向右打通的栏数rowspan单元格向下打通的列数align单元格内容的水平对齐方式， left, center, right。

17、valign单元格内容的垂直对齐方式， top, middle, bottom。bgcolor单元格的背景色background单元格的背景图片，与 bgcolor 任用其一4. 标题标记该标记是标记的子元素；功能是设置表格的标题或说明；可用属性: align，取值为： top标题位于表格上边居中对齐（默认值）； bottom标题位于表格下边居中对齐； left标题位于表格上边，左对齐； right 标题位于表格上边，右对齐。习题：用HTML编写一个网页，要求建立文字超链接，单击这个链接会在新窗口打开工大主页()用HTNL编写网页，要求单击图片(/home/deco/2009/0330/log

18、o_home.gif)会在同一个窗口中打开sina网主页(http:/)2.3.9 表单表单标记表单元素标记 (也称为控件)和 表单元素标记 1. 表单标记 表单元素标记 (1) 格式: 常用属性:actionmethodname等 表单元素标记:inputtextareaselect(2) name属性name属性: 为表单指定一个名称. 网页上的其他对象或JavaScript代码可以通过该名称访问表单和表单中的各个表单控件.(3) method属性method属性: 用于指定表单提交时数据的传送方式. 取值如下:get: 将表单数据放在HTTP头中, 作为URL的参数传递, 因而数据量不能

19、太大.post: 将表单数据放在HTTP正文中传送, 可以传送较大量的数据(常用). (4) action属性action属性: 用于指定表单所要提交到的URL，一般是一个动态网页，如CGI、ASP、JSP或PHP的网页。例: 2. 表单元素标记 P45name属性: 指定控件名称, 通过该名称可以访问该控件;type属性: 指定控件类型(可用的控件类型见下页表格) ;value属性: 设定输入默认值;其他属性: 根据控件类型的不同,还有其他可用属性.(1)普通按钮(type=button)单击该按钮时的处理,其值为JavaScript或VBScript代码(2) 提交按钮(type=subm

20、it) 重置按钮(type=reset)或 reset(3)单行文本框(type=text)文本框的宽度(字符数)文本框中允许输入的字符个数(4)密码文本框(type=password)文本框的宽度(字符数)文本框中允许输入的字符个数(5)单选按钮(type=radio)说明:(1) 一组单选按钮的name属性必须相同,value属性必须不同;(2)一组按钮中只有一个按钮设置checked属性,表示初始为选中状态.(6)复选框(type=checkbox)说明:(1) 一组复选框的name属性必须相同,value属性必须不同;(2)一组中可以有多个选框设置checked属性,表示初始为选中状态

21、.3. 表单元素标记多行文本框 文本区中的初始内容 4. 表单元素标记/下拉菜单滚动列表由 size 属性决定 一个option标记对应一个列表项(1) select标记中常用的属性multiple属性: 设置列表框中允许多选.size属性: 设置列表框中可以显示的行数. 格式为: size=行数onchange属性: 列表框中的选择发生改变时触发该事件. 格式为: onchange=javascript等代码(2) option标记中常用的属性selected属性: 设置当前列表项为选中状态.2.3.10 框架(也称为帧元素 P54) 框架集框架1. 框架集标记的常用属性属 性说 明bord

22、er设置边框粗细,默认是5象素,如果设置小于5,分隔线将不可见bordercolor设置边框颜色frameborder指定是否显示边框.=0: 不显示边框，=1:显示边框cols用象素数 和 %左右分隔窗口,*表示剩余部分rows用象素数 和 %上下分隔窗口,*表示剩余部分2. 框架标记的常用属性(之一)属 性描 述 name设置框架名称,是链接标记的 target所要的参数src设置框架中加载的url文件的地址frameborder设置是否显示边框, 1显示边框，0不显示border设置边框粗细 bordercolor设置边框颜色noresize设置不能调整框架的大小,省略此项时可以调整3. 框架嵌套略 4. 框架间的超链接关键: 在 标记的target指定的目标窗口为框架名. 框架名:在标记中通过name属性指定.2