超文本标记语言.ppt

第2章 网页设计的基本描述语言 HTML 2.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 文件的正文写在这里 标记和 标记对 注释标记 (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,AREA 字符格式元素FONT,B,I,U,S等 帧帧元素FRAMESET,FRAME,NOFRAME,IFRAME 图图片元素IMG 层层元素DIV,SPAN,LAYER,ILAYER 脚本元素SCRIPT 内嵌对对象元素APPLET,OBJECT,PARAM,EMBED 2.3.1 文档结构 HTML 文件的正文写在这里 1. 文档标记HTML 2. 文档头标记 头部元素： 头部用表示开始，用表示结 束。标签用于定义文档的头部，它是所有头 部元素的容器。 在头部元素中我们一般都会用到 ，他是网页 的标题，将显示在网页的标题栏当中。 2.3.2 头部元素 可以嵌套在head元素中的元素。 1. TITLE标记 功能: 设置网页标题. 说明: 该标记只能嵌入在标记对中 使用. 2. META标记 (1) 功能: 指明网页作者、制作工具等. (2)说明: 该标记可以重复出现在标记对中; 该标记中的信息不显示在网页中. 3. 其他标记 LINK 最常见的用途是链接样式表。 STYLE BASE 标签为页面上的所有链接规定默认地址或 默认目标。 3. 文档体标记 文档体标记的常用属性 属 性功 能 描 述 link设定页面默认的链接颜色 alink设定鼠标正在单击时的链接颜色 vlink设定访问后链接文字的颜色 background设定页面背景图像 bgcolor 设定页面背景颜色 leftmargin 设定页面的左边距 topmargin设定页面的上边距 bgproperties设定页面背景图像为固定，不随页面的滚动而滚动 text设定页面文字的颜色 2.3.3 块 CENTER标记 标题标记H1H6 P标记 BR标记 PRE标记等 1. 文本居中标记 功能: 居中显示文本. 2. 标题标记 (1) 格式: (2) 功能: 字号最大,字号最小. n为16 3 分段标记 (1) 格式: (2) 说明: 该标记可单独使用，也可成对使用。单独使用时，下 一个的开始就意味着上一个的结束。 作用：将文本换行，并空出一个文本行的间距。 (3)对齐属性 align 取 值值 功 能 left缺省设设置,段落内容左对齐对齐 center段落内容居中对齐对齐 right段落内容右对齐对齐 justify段落内容两端对齐对齐 4. 换行标记 (1) 格式: (2) 功能与说明: 换行标记为单标记,且一般不包含属性; 在段落间换行,不产生空行(与标记不同) 作用：将文本换行，但没有行间距。 5. 原样显示标记 (1) 格式: 作用：保持文本的原始格式，并显示在网页上。 6. 分隔线标记 (1) 格式: (2) 功能与说明: 标记为单标记. 作用： 在网页中显示一条水平分隔线。 (3) 标记的属性 属性参数功能单单位默认值认值 size 设设置线线的粗细细pixel(像素）2 width 设设置的宽宽度pixel(像素）100% align left center right 设设置线线的对齐对齐 方 式 center color 设设置线线的颜颜色 black 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色彩模式 o是工业界的一种颜色标准，是通过对红(R) 、绿(G)、蓝(B)三个颜色通道的变化以及它 们相互之间的叠加来得到各式各样的颜色的 RGB颜色查询对照表 2. 物理字体标记 (1) 粗体标记 放在与标记之间的文字将以粗体方式显示。 (2) 斜体标记 放在与标记之间的文字将以斜体方式显示。 (3) 下划线标记 放在与标记之间的文字将以下划线方式显示。 (4) 删除线标记 放在与标记之间的文字将以下划线方式显示。 3. 上标标记和下标标记 (1) 上标标记 放在与标记之间的文字将以上标方式显示. (2) 下标标记 放在与标记之间的文字将以下标方式显示. 2.3.5 图像 (1) 格式: 单标记 必须指定的 属性 (2) img标记的其他常用属性 属性功能描 述 alt指定提示文本,即鼠标标停留在图图像上时显时显 示的文本 height width 指定图图像在网页页中显显示的高度,单单位为为像素 指定图图像在网页页中显显示的宽宽度,单单位为为像素 hspace vspace 指定图图像左右的间间距 , 单单位为为像素 指定图图像上下的间间距 , 单单位为为像素 align 指定图图像与文本的对齐对齐 方式,取值为值为 : top、middle、bottom、left、right border指定图图像边边框的宽宽度，单单位为为像素 (3) 使用img标记的注意事项 img标记没有结束标记; 图片文件一般使用.gif或.jpg文件,以保证下载速度; 图片文件的URL尽量使用相对路径. 绝对路径就是你的网页上的文件或目录在硬盘上 真正的路径，在制作网页中实际很少用到。 包含了标识Internet上的文件所需要的所有信息。 包括完整的协议名称、主机名称、文件夹名称和文 件名称 。 例如: /special/000120MC/drought060816.html 协议名主机名文件夹名文件名 绝对路径 相对路径 相对路径是指目标文件地址相对于源文件的路径。 如果链接到同一目录下,只需输入要链接文件的名称. 要链接到下级目录中的文件,需先输入目录名,然后加“/“,再 输入文件名. 要链接到上一级目录中文件,则先输入“/“,再输入文件名. 相对路径示例 相对路径名含 义 href=“abc.htm“abc.htm 是本地当前路径下的文件 href=“web/abc.htm “ abc.htm 是本地当前路径下web子目 录下的文件 href=“/ abc.htm “ abc.htm 是本地当前目录的上一级子 目录下的文件 href=“/ abc.htm “ abc.htm 是本地当前目录的上两级子 目录下的文件 举例 Index链接到contents: 支持/contents.html Contents链接到index： /index.html 2.3.6 超链接 链接的基本概念 创建超链接标记 常见的链接目标 1. 链接的基本概念 源端点目的端点 本网页内的某处(锚点) 网页文件或其他文件 E-mail FTP服务器 文字 图片 动画 图片的一个区域(热点) 2. 创建超链接标记 (1) 文字为超链接源,超链接标记的常用格式 源端点文字 绝对路径 相对路径 _blank: 在新窗口中显示目标 _self: 在当前网页窗口中显示目标 _parent: 在当前网页的上一级窗口中显 示目标 _top: 忽略框架,在整个浏览器中窗口中 显示目标 嵌套了一个 标记 (2) 图像为超链接源,超链接标记的常用格式 3. 常见的超链接目标 (1) 链接到网页或其他文件 在标记的href属性中指定网页文件或其他文件所 在的路径和文件名即可. (2) 链接到锚点 o也叫书签链接 ,常常用于那些内容庞大繁琐 的网页，通过点击命名锚点，不仅让我们能 指向文档，还能指向页面里的特定段落，更 能当作“精准链接“的便利工具，便于浏览者 查看网页内容。 (1) 定义锚点 锚点内容 (2) 链接到锚点 超链接内容 (3) 链接到FTP 超链接内容 (4) 链接到E-mail 超链接内容 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“表示项项目符号用小圆圆点(默认样认样 式) type=“square“表示项项目符号用小正方形() type=“circle“表示项项目符号用小圆圆圈() 3. 定义列表 术语1 术语解释1 术语2 术语解释2 术语3 术语解释3 (1) 格式: 2.3.8 表格 标 记描 述 . 用于定义一个表格开始和结束. . 定义一行，一对行标记内可以建立多对由 或标记所定义的单元格. . 定义表头单元格。表头单元格中的文字将以 粗体显示，此标记不是必需的. 标记必须放在标记内. . 定义一个单元格，一对标记将建立一个 单元格，标记必须放在标记内. 定义表格的基本语法 1. 表格标记的常用属性 属 性功能描 述 width表格的宽度。单位可以是像素,也可以是百分比 height表格的高度。单位可以是像素,也可以是百分比 align表格在页面的水平摆放位置(left, center, right) background表格的背景图片 bgcolor表格的背景颜色 border表格边框的宽度(以像素为单位)。 默认为0,无边框 bordercolor表格边框颜色 frame(了解)表格外边框线的显示方式(取值见后) rules(了解)表格内边框线的显示方式(取值见后) cellspacing单元格之间的间距 cellpadding单元格内容与单元格边界之间的空白距离的大小 单元格边距(表格填充 )(cellpadding) - 代表单元格 外面的一个距离,用于隔开单 元格与单元格空间 单元格间距(表格间距 )(cellspacing) - 代表表格边 框与单元格补白的距离,也是 单元格补白之间的距离 2. 行标记的常用属性 属 性功能描 述 align 文本的水平对齐方式,取值为: left、center、right、justify等 valign 行中文本的垂直对齐方式,取值为： top、middle、bottom、baseline bgcolor 行的背景颜色 3. 单元格标记和的常用属性 属 性描 述 width/height单元格的宽和高，单位为像素或 colspan单元格向右打通的栏数 rowspan单元格向下打通的列数 align单元格内容的水平对齐方式， left, center, right。 valign单元格内容的垂直对齐方式， top, middle, bottom。 bgcolor单元格的背景色 background单元格的背景图片，与 bgcolor 任用其一 4. 标题标记 该标记是标记的子元素； 功能是设置表格的标题或说明； 可用属性: align，取值为： top标题位于表格上边居中对齐（默认值）； bottom标题位于表格下边居中对齐； left标题位于表格上边，左对齐； right 标题位于表格上边，右对齐。 习题： o用HTML编写一个网页，要求建立文字超链 接，单击这个链接会在新窗口打开工大主页 () o用HTNL编写网页，要求单击图片 (/home/deco/200 9/0330/logo_home.gif)会在同一个窗口 中打开sina网主页 () 2.3.9 表单 表单标记 表单元素标记 (也称为控件) 和 表单元素标记 1. 表单标记 表单元素标记 (1) 格式: 常用属性: action method name等 表单元素标记: input textarea select (2) name属性 name属性: 为表单指定一个名称. 网页上的其他对象或 JavaScript代码可以通过该名称访问表单和表单中的各 个表单控件. (3) method属性 method属性: 用于指定表单提交时数据的传送方式. 取值 如下: get: 将表单数据放在HTTP头中, 作为URL的参数 传递, 因而数据量不能太大. post: 将表单数据放在HTTP正文中传送, 可以传送 较大量的数据(常用). (4) action属性 action属性: 用于指定表单所要提交到的URL，一般是 一个动态网页，如CGI、ASP、JSP或PHP的网页。 例: 2. 表单元素标记 P45 name属性: 指定控件名称, 通过该名称可以访问该控件; type属性: 指定控件类型(可用的控件类型见下页表格) ; value属性: 设定输入默认值; 其他属性: 根据控件类型的不同,还有其他可用属性. (1)普通按钮(type=“button“) 单击该按钮时的处理,其值为 JavaScript或VBScript代码 (2) 提交按钮(type=“submit“) 重置按钮(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属性,表示初始为 选中状态. 3. 表单元素标记 多行文本框 文本区中的初始内容 4. 表单元素标记/ 下拉菜单 滚动列表 由 size 属性决定 一个option标记 对应一个列表项 (1) select标记中常用的属性 multiple属性: 设置列表框中允许多选. size属性: 设置列表框中可以显示的行数. 格式为: size=“行数“ onchange属性: 列表框中的选择发生改变时触发该事件. 格式为: onchange=“javascript等代码“ (2) option标记中常用的属性 selected属性: 设置当前列表项为选中状态. 2.3.10 框架(也称为帧元素 P54) 框架集 框架 1. 框架集标记的常用属性 属 性说说 明 border 设设置边边框粗细细,默认认是5象素,如果设设置小于5,分 隔线线将不可见见 bordercolor设设置边边框颜颜色 frameborder 指定是否显显示边边框. =“0“: 不显显示边边框，=“1“:显显示边边框 cols 用“象素数“ 和 “%“左右分隔窗口,“*“表示剩余 部分 rows 用“象素数“ 和 “%“上下分隔窗口,“*“表示剩余 部分 2. 框架标记的常用属性(之一) 属 性描 述 name设设置框架名称,是链链接标记标记 的 target所要的参数 src设设置框架中加载载的url文件的地址 frameborder设设置是否显显示边边框, 1显显示边边框，0不显显示 border设设置边边框粗细细 bordercolor设设置边边框颜颜色 noresize设设置不能调调整框架的大小,省略此项时项时 可以调调整 3. 框架嵌套 略 4. 框架间的超链接 关键: 在 标记的target指定的目标窗口为框架名. 框架名:在标记中通过name属性指定. 2.3.11 滚动字幕标记(补充) 属 性描 述 direction 设设置文