《HTML网页设计》PPT课件.ppt

HTML 第 2 章 框架布局 总结与习题 HTML标签 Tag 是影响网页内容显示格式的标记符集合 浏览器根据标签决定网页的显示效果 在HTML中 所有的标签都用尖括号括起来绝大多数标记符都是成对出现的 包括开始标记符和结束标记符 HTML标签是不区分大小写的 但通常约定用大写字母 这有利于HTML文档的维护 HTML属性 Attribute 是标签的功能选项 用来修饰 扩展或补充标签指令的功能 多数标签都包含自己专有的一些属性 属性要放置在起始标签中 一般放置于标签关键字之后 属性的顺序无关紧要 但标签关键字与属性 属性与属性之间必须包含至少一个空格属性和标记一样 也不区分大小写 带有两个属性的标签结构 带有属性的标签的语法格式如下 控制的网页内容 HTML文档的基本框架 HTML标签 处于文档的最前端 表示文档的开始位于文档最后一行标签间的内容都是HTML语法的文档 文件头标记符 用来描述HTML首部内容 说明文档的整体信息首部信息并不出现在浏览器窗体中通常与某些标签一起使用 文档标题标签描述文档的特色或主题标题所在的位置可依照浏览器的不同而不同 但通常位于浏览器的最上方 定义文档的体部 位于HTML首部下面BODY标签内的文字 图像 链接 表格 音频 视频等对象 都可显示在浏览器窗体中 BODY标签 HEAD标签 TITLE标签 1 注释标签为网页文档添加注释注释的内容不会被浏览器所解析 也不会显示在网页中 2 标题标签与用来指定网页的标题 3 样式标签与用来定义文档的内置样式表或定义某个元素的内联样式 一个网页文件在结构上实际上由两部分组成的 头部分和主体部分 主体内容是文档的主要部分 也是包含文本和图像等的可见部分 头部内容是除文档标题外的不可见部分 包含文档类型 语言编码 搜索引擎的关键字和内容指示器以及样式定义等重要信息 这些元素并不是每个页面都需要的 以下就是一个简单网页的代码 头内容部分主体内容部分选择菜单栏中的 插入 中 HTML 的 文件头标签 如图2 1所示 在弹出的下拉菜单中的选项便是作为网页头信息插入的内容 图2 1网页头中可以插入的信息 1 META标签是记录有关当前页面信息 如字符编码 作者 版权信息或关键字 的head元素 这些标签也可以用来向服务器提供信息 如页面的失效日期 刷新间隔和PICS等级 PICS是Internet内容选择平台 它提供了向Web页分配等级 如电影等级 的方法 选择图2 1中文件头标签内容的 META 命令 会弹出 META 对话框 META标签记录有关当前页面的信息 在属性项中选择 名称 值 项中输入 author 内容 项中输入 姜楠 这样作者的信息就设定好了 如图2 2所示 图2 2插入作者信息 属性 指定Meta标签是否包含有关页面的描述性信息 name 或HTTP标题信息 http equiv 值 指定在该标签中提供的信息类型 有些值 如说明 关键字和刷新 是已经定义好的 而且在Dreamweaver中有它们各自的属性检查器 但是可以根据实际情况指定任何值 例如creationdate documentID或level等 内容 是实际的信息 例如 如果为 值 指定了等级 则可以为 内容 指定初级 中级或高级 2 关键字许多搜索引擎装置 自动浏览Web页为搜索引擎收集信息以编入索引的程序 读取关键字META标签的内容 并使用该信息在它们的数据库中将您的页面编入索引 因为有些搜索引擎限制索引的关键字或字符的数目 或者当超过了限制的数目时 它将忽略所有的关键字 所以最好只使用几个精选的关键字 选择图2 1中文件头标签内容的 关键字 命令 弹出 关键字 对话框 输入文字 并以逗号隔开 如在该网络书店的网页头中输入 书店 电子商务 教学 图书 出版社 作者 等 如图2 3所示 当发布到Internet后 用户在一些搜索引擎网站只要键入这些关键字就会链接到此网站 图2 3插入关建字信息 3 描述许多搜索引擎装置读取描述META标签的内容时 将页面编入索引 而有些还在搜索结果页面中显示该信息 而不只是显示文档的前几行 有些搜索引擎限制索引字符的数目 所以最好将描述限制为几个字 选择图2 1中文件头标签内容的第三项时 会弹出 描述 对话框 输入文字 这是一个图书类别最多的网络书店 如图2 4所示 图2 4插入描述信息 4 刷新使用刷新功能可以指定浏览器在一定时间后自动刷新的页面 即重新载入页面或跳转到不同的页面 如登陆论坛后稍微等一会就会转向别的页面就是这种办法 选择图2 1中文件头标签内容的第四项时 会弹出 刷新 对话框 如图2 5所示 则该网络书店的主页 index html 会在延迟8秒后自动跳转到该网络书店的添加新书页面 allshow html 进行显示 该文件在本章实例下 图2 5刷新对话框 5 基础基础定义了文档的基本URL地址 在文档中 所有相对地址形式的URL都是相对于这个URL地址而言的 例如相对地址为 image pic jpg 那么真实地址应该是 基本URL地址 image pic jpg 在 本章实例 文件夹下有一个down html文件 打开这个文件 以这个文件为例 选择图2 1中文件头标签内容的第五项时 会弹出 基础 对话框 如图2 6所示 在 Herf 文本框中输入基本URL地址 如 网络书店 的网址 在 目标 下拉列表框中 选择链接页面在哪个框架集中打开 在这里选择 空白 B 则down html文件则会打开一个新的浏览器窗口进行显示 图2 6基础对话框 空白 B 表示在新窗口中打开 父 P 表示在当前文档的父级框架集中打开 自身 S 表示在当前文档的框架中打开 顶部 T 表示在链接所在的最高级窗口中打开 6 链接链接定义了网页之间的链接关系 在HTML文档的头部可以包含任意多个 链接 标记 选择图2 1中文件头标签内容的 链接 选项时 会弹出 链接 对话框 如图2 7所示 在HREF文本框中 输入链接资源所在的URL地址 在ID文本框中输入 链接 标记的ID值 如book 在 标题 文本框中输入对该链接关系的描述 即 链接 标记的标题属性 如bookshop 在Rel和Rev文本框中 分别输入文档同链接资源的链接关系 即 链接 标记有Rel和Rev的属性 如alt 图2 7链接对话框 由与标签界定的部分称为body元素 此元素定义了HTML的文档体 是整个网页内容的核心 标签支持一些重要属性 这些属性用来设置网页内容要素的颜色 背景图案等项目 以美化网页的外观效果 被称为修饰属性 body元素常用的修饰属性 1 颜色标识符法以颜色名称的英文单词来代表对应的颜色值如以red标识符代表红色 blue 蓝 green 绿 black 黑等 2 RGB r g b 函数法r g b参数代表红 绿 蓝三元色的比例值可为 0 255 范围内的整数值也可为 0 100 范围内的百分比值 3 16进制颜色值法用 rrggbb形式表示颜色值rr gg与bb分别是两位16进制数值 代表红 绿 蓝三原色的取值 在网页中常用的几种颜色值如下 黑色 000000橄榄色 808000红色 FF0000蓝色 0000FF粟色 800000藏青色 000080灰色 808080白色 FFFFFF绿色 00FF00紫红色 800080银色 C0C0C0黄色 FFFF00设置背景色 颜色值也可以用颜色名称来表示 例如 和都是将网页背景设置为蓝色 body标签中可以包含 等众多版面格式标签 用来定义在浏览器窗口中显示的文本信息格式 基准字体标签 基准字体标签为网页的文本指定默认的字体 字号与颜色特性重要属性包括 face size color basefont元素常用的属性 字体标签 字体标签为网页的文本指定字体 字号与颜色特性 该标签的重要属性同标签不同的是font元素的size属性除取1到7标准字号外 还可以取相对字号 6到6 表示在默认字号基础上的偏移值 默认字号由标签设置 例 字体标记字体标记的使用文字大小的设置 这是size 6时的字体这是size 2时的字体文字颜色的设置 这是黑色字体文字字体的设置 字体设置 楷体 字体设置 宋体 字体设置 黑体 文字字体 大小 颜色同时使用 这是size 5 颜色为红色的隶书体文字 字体标记的使用 文本样式控制与修饰标签组 HTML设置了许多文本样式控制与修饰的标签 这类标签能够在不改变字体与字号的前提下 对文本的字型 样式与效果进行修改 这些标签一般不支持属性 文本样式控制与修饰标签集合表 文本样式控制与修饰标签集合表 续 居中标签 居中标签控制网页文本 图片 表格等内容在浏览器窗口中居中显示 例 字符格式设置我是标记 字符格式设置标记的使用 标题标签 标题标签包含六个级别 从到 中 n值越小 标题的字体越大 n值越大 标题的字体越小 标题标签自动控制标题文本占用一行显示 不须使用换行标签 例 标题示例 helloworld helloworld helloworld helloworld helloworld helloworld 标题的效果 分块标签 分块标签用来整合HTML文档中的代码段 并将其做为一个整体的部分进行格式的设置 块标签支持align属性 分段标签 分段标签将标签之间的文本做为一个独立的段落显示在浏览器中HTML文档不支持网页文本的自动分段与换行 需要使用分段标签与换行标签来达到目的分段标签支持align属性 换行标签 换行标签换行标签为单标签 其功能是为当前行插入分行符 将后续内容移至下一行显示 原样显示标签 预定义格式标签 它的功能是在浏览器中浏览时 按照文档中预先排好的形式显示内容 文本中可以包含空格 回车等特殊符号预定义格式标签对文本进行预处理操作 例 显示的区别春晓春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少 春晓春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少 图2 3与的区别 水平线标签 水平线标签为单标签功能是为当前网页添加一条水平分隔线水平线标签支持多种属性 标签常用的属性 例 标记的使用三种标记的使用 我在中间 中间我在左边 左边我在右边 右边 图2 4三种标记的使用 特殊符号 转义字符及数字编码对照表 图像标签 图像标签为单一标签 用来在网页中插入图像或视频该标签支持gif jpg png等图像文件格式 及avi rm等视频文件格式 标签常用的属性表 例 图像标记符的使用 图像标记符显示在D盘下photo文件夹中名为flower jpg的图片 显示效果如下图所示 嵌入标签 嵌入标签 用来在网页中插入音频 视频 flash等多媒体文件支持的媒体文件格式包括mp3 mid wma wav avi rm swf等多种有时需要安装相应的插件 标签常用的属性表 Pluginspage属性 标识FlashPlayer插件的位置 以便在尚未安装该插件时 用户可以下载它 输入的值必须与上面的显示完全一致 仅适用于embed 如 pluginspage 背景音乐标签 背景音乐标签为单一标签用来插入背景音乐 由微软扩展而来 适用于IE浏览器支持mid mp3 wma等音频文件格式 标签常用的属性表 移动字幕标签 移动字幕标签用来显示循环移动的文本 移动字幕 标签常用的属性表 超链接标签 超链接为用户提供了通过点击文字标识 图片 URL地址等Web元素 便可在不同的网页之间或不同类型的数据之间进行跳转或转换的功能超链接是HTML最重要的特色之一 超链接的基本格式如下 链接文本 语法说明 标签表示一个超链接的开始 表示链接的结束属性 HREF 定义了超链接所指的地点通过点击 链接文字 可以到达指定的文件 锚点标签 锚点标签用来定义一种称为锚点的对象锚点是网页中被命名的一个特定位置 通过访问指向超链接的锚点 能够实现不同位置间的快速转移 标签的主要属性 图像超链接 图像超链接是指设定整个图像为超链接的标识 当点击图像的任一区域时 浏览器将自动打开超链接指向的目标对象实现图像超链接的方法 只须将标签镶嵌到带有href属性的标签内即可 图像超链接的方法为 有时为使网页的某些结构化的信息更有条理性 需使用列表方式来显示它们列表命令可以起到提纲挈领的作用 表格是由行列交叉而成的单元格组成的二维网格用于组织与表达结构化的信息或用于规划网页布局 有序列表定义 表项1表项2 表项n 有序列表的type属性值 当位于OL标记符内时 LI标记符具有两个常用的属性 type和value type属性用于设置数字样式 取值与OL的type属性相同 value属性用于指定一个新的数字序列起始值 以获得非连续性的数字序列 例 创建不同的有序列表 有序列表示例用大写罗马字母表示的有序列表 列表项1列表项2列表项3编号不连续的有序列表列表项1列表项2列表项3变换了数字样式的有序列表列表项1列表项2列表项3 创建不同的有序列表 效果如下图所示 例 嵌套的有序列表 嵌套的有序列表嵌套的有序列表列表项1子列表项1子列表项2子列表项3列表项2列表项3 效果如下图所示 无序列表定义 表项1表项2 表项n 以标记开始 以标记结束 在每一个标记处另起一行 并在列表文本前显示加重符号 全部列表会缩排 与Word中的 项目符号 很相似 无序列表中type属性的取值有三种 dics表示实心圆 为默认值 circle表示为空心圆 square表示实心或空心的方块 取决于浏览器 在InternetExplorer中 type的值是区分大小写的 也就是说将type指定为Circle是无法获得空心圆项目符号的 必须指定为circle才可以 例 无序列表的使用 无序列表示例默认的无序列表标记 默认列表项标记一默认列表项标记二默认列表项标记三 使用方块作为无序列表项标记 方块列表项标记一方块列表项标记二方块列表项标记三 显示效果如下图所示 例 有序与无序比较 列表示例计算机新书ASP程序设计HTML网页设计FrontPage使用指南英语新书外经贸英语实用英语翻译朗文英语语法 有序列表与无序列表的区别 自定义列表定义 表项1表项1的描述 表项1的描述2 表项 例 定义型列表标记的使用 定义型列表示例定义型列表标记 软件说明简单介绍软件的功能及基本应用软件界面用于选择软件外观 显示效果如下图所示 列表制作应遵循的准则 1 项目不要太多 2 项目要简短易懂 能抓住重点 3 需要时 可以混合使用各种列表 4 创建嵌套列表时 应遵循由内到外 或由外到内的思路 表格标签 表格标签为定义表格的引导标签 表格标题标签 表格标题标签通常位于表格上方的居中位置 由标签定义该标签必须紧跟在标签之后每个表格最多只能定义一个标题 表格题头标签 表格题头标签用以将表头的一行或多行内容组合在一起 形成表格题头当在浏览器中卷动表格时 题头的内容将不动 始终保持在表格顶部 表格主体标签 表格主体标签用以定义多行表格数据的组合体一般位于标签与标签之间若表格定义中仅包含一个tbody元素 而无thead元素与tfoot元素 则可省略与标签 表格脚注标签 表格脚注标签用以将表尾的一行或多行内容组合在一起 形成表格脚注当在浏览器中卷动表格时 脚注的内容将保持在表格底部不动 表格行标签 表格行标签用来定义一个表格行的完整信息由一列或多列表头字段或表格数据项信息构成 表头标签 表头标签用来定义表头的各个单元格内容 单元格标签 表格单元格标签用来定义表格的一个数据单元格内容 定义表格单元格标记和的属性 合并单元格如果在网页中需要创建不规则的表格 那么就需要进行单元格的合并 有时需要将两个或更多个单元格合并为一个 这就需要应用rowspan及colspan属性 1 行合并在和标记内使用rowspan属性可以进行行合并 rowspan的取值表示向下延伸合并垂直单元格的行数 实际上 rowspan这个单词本身的含义就是跨越的行数 2 列合并在和标记内使用colspan属性可以进行列合并 colspan的取值表示向右延伸合并水平单元格的列数 实际上 colspan这个单词本身的含义就是跨越的列数 如 合并3个水平单元格合并2个垂直单元格 合并单元格示例学生成绩表学号个人信息期末成绩姓名班级入学时间数学语文 0008郭靖一年级二班2006年9月29800009黄蓉五年级一班2006年9月10080 例 制作不规则表格 显示效果如下图所示 表格的尺寸设置 表格的尺寸设置可以通过border width cellspacing cellpaddinc属性实现 其中border和width属性在前面的基本属性中已经介绍 这里主要介绍cellspacing和cellpaddinc属性 1 cellspacing属性该属性的功能是表格间隙设置 在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白 属性的取值通常都采用像素数 其基本格式为 例如 表示表格单元之间的距离是8个像素点 2 cellpaddinc属性该属性的功能是表格内部空白设置 在TABLE标记符中使用cellpadding属性可以控制表格分隔线和数据之间的距离 属性的取值通常都采用像素数 其基本格式为 例如 表示表格单元边缘与单元内容之间的距离是8个像素点 表格尺寸设置表格1此表格宽为400像素 边框宽为2像素 高50像素表格2中国韩国朝鲜印度新加坡马来西亚 缅甸越南菲律宾表格3中国韩国朝鲜印度新加坡马来西亚缅甸越南菲律宾 例 演示表格宽度及单元格内和单元格间的空白 显示效果如下图所示 边框与分隔线 在TABLE标记内使用frame rules border属性可以设置表格的边框和单元格分隔线 1 frame属性格式 表格边框表示表格最外层的四条框线 可以用frame属性进行控制 frame属性的取值可以是 1 void表示无边框 Void是默认值 即默认时不显示边框 2 above表示仅有项部边框 3 below表示仅有底部边框 4 hsides表示仅有项部边框和底部边框 5 vsides表示仅有左 右侧边框 6 lhs表示仅有左侧边框 7 rhs表示仅有右侧边框 8 box表示包含全部四个边框 9 border表示包含全部四个边框 2 rules属性格式 Rules属性用于控制是否显示以及如何显示单元格之间的分隔线 取值可以是以下几种 1 none表示无分隔线 None是默认值 即默认时不显示单元格间的分隔线 2 all 表示包括所有分隔线 3 rows 表示仅有行分隔线 4 cols 表示仅有列分隔线 5 groups 表示仅在行组和列组间有分隔线 例 用HTML代码实现表格设置边框和分隔线时的显示效果 表格分隔线示例我的日程表星期一星期二星期三 星期四星期五北京北京黑龙江黑龙江吉林吉林吉林广东广东广东 内蒙古内蒙古内蒙古江苏江苏 显示效果如下图所示 例 表格的嵌套 多层表格嵌套实例 跟我学网页制作 基础知识简介第一讲HTML简介第二讲HTML标记第三讲CSS基础 HTML最新课堂高级应用技术多层表格嵌套示例 表格的嵌套 应用范例的示范运行效果 应用范例 用表格列出你最喜爱的三部电影的名字 导演及上映时间信息 表格要求带有表格框线 并用不同的背景颜色显示表头与表格数据 表单定义 表单 form 是HTML语法的重要成分 是HTML实现人机交互的主要手段 用于采集用户输入的信息并提交给服务器 从而赋予网站以互动能力 表单是实现动态网页的主要外在形式 网站无论使用哪种语言来实现 表单都是其实现互动功能的统一外在形式 HTML表单作为网页上的一个特定区域 由标签对限定其作用范围 其它的表单控件必须插入在表单区域内 表单常用的控件对象 表单标签 表单标签的主要内容为可选的各类表单控件定义标签的事件包括onsubmit与onreset两类标签的常用属性如下表所示 标签的常用属性 注 get 将表单数据附加到请求URL中发送 post 把表单数据嵌入到HTTP请求中发送 输入控件标签 输入控件标签为单一标签该标签仅包含属性 内容一般为空该标签通过对type属性赋以不同的值来创建命令按钮 文本框 单选按钮等多种输入型表单控件 向用户提供输入数据的手段 input元素的定义格式为 type属性 控件类型及响应事件对照表 标注标签 标注标签用来为表单控件添加文字说明 描述控件的类型与功能 指导用户如何正确使用这些控件该标签常常与输入控件标签结合使用该标签之间的内容为浏览器显示的文字提示 标注元素的重要属性 单行文本框 单行文本框允许用户输入一行信息 是Input元素的默认类型 也是使用频率最高的一种表单控件 单行文本框创建方法为 密码文本框 密码文本框是一种特殊的单行文本框 主要用于保密信息 如个人登录密码 的输入与显示当在密码文本框中输入字符时 浏览器将以屏蔽字符 一般为星号或圆点 来替换用户输入的内容 从而达到保密的效果 创建密码文本框的方法为 隐藏域 隐藏域是表单的特殊输入控件 隐藏域在页面中对用户是不可见的 浏览器中无法看到隐藏域的信息隐藏域主要用于程序设计 程序员用它来保存数据 传递参数 向服务器提交不允许公开的重要信息当浏览者提交表单时 隐藏域的内容会随着一起提交给服务器上的处理程序 创建隐藏域的方法为 命令按钮 表单命令按钮控件有相似的属性 都具有name与value属性表单命令按钮控件有相似的行为 都能够响应鼠标单击事件 onclick 命令按钮控件 自定义按钮自定义按钮为标准的windows风格的按钮 重置按钮单击重置按钮时 将删除任何已经输入到文本框中的信息并清除所做的任何选择 并自动恢复表单各控件的默认内容 提交按钮用以将表单中的信息 包括name与value属性值 以ASCII编码方式提交给服务器相应的表单处理程序 各类命令按钮的示例 创建自定义按钮的方法为 提交按钮的创建方法为 重置按钮的创建方法为 图像按钮 图像按钮以一幅图片作为表单的提交按钮图像按钮能够响应单击事件 自动提交表单信息 功能与提交按钮十分相似图像按钮用图像来代替提交按钮上的文本标题 因此又被称为图像提交按钮 创建图像按钮的方法为 图像按钮的示例 单选按钮 单选按钮是一个小的空心圆环 用以提供在一组相互排斥的选项列表中一次只能选择一项的机制 创建单选按钮的方法为 复选框 复选框允许用户在一组选项列表中同时选择多个选项 创建复选框的方法为 单选按钮 复选框的示例 文件域 文件域主要用于通过表单选择并上传文件文件域由一个文本框和一个 浏览 按钮组成 用户既可将上传文件的路径与文件名直接输入到文本框中 也可通过点击 浏览 按钮 打开选择文件对话框并从系统资源中查找要上传的文件在Email中上传附件 上传图片 发送文件等应用中 经常会见到文件域控件 创建文件域的方法为 文件域的示例 文本域控件定义格式如下 文本域的常用属性 文本域应的示例