网页(二版)第5章.ppt

网页制作及应用 第五章网页设计语言HTML 本章学习目标 1 HTML的概念2 HTML的语法与结构3 HTML的各种标签及其属性4 用HTML制作简单网页 5 1HTML简介 HTML HypertextMarkupLanguage 称为超文本标记语言 是制作网页的基础 它把一台计算机中的文本或图形与其他计算机中的文本或图形方便地联系在一起 形成有机的整体 HTML文件是纯文本文件 用Windows的记事本或写字板编辑 保存时文件扩展名为 htm或 html HTML文件不需要编译 由浏览器解释执行 所有脚本需要都嵌入到HTML文件中 1 一个HTML举例 第一步 打开Windows的记事本 第二步 输入下面代码HTML网页设计教程你好 欢迎浏览本网页 第三步 以sample htm为文件名保存文件并关闭该文件 第四步 双击sample htm文件 浏览器会自动执行它 5 2HTML文档一般标签 1 HTML文档以开始 和成对出现 所有其他标签和元素都放在它们之间 2 是网页的头部标签 与之间通常包括标签和标签 是整个文档的头部信息 不在浏览器屏幕显示 3 用来设置文档标题 显示在窗口标题栏上 中不能包含其他标签 4 标签是单标签 提供网页关键字 文档解码方式等信息 便于搜索引擎搜索信息 5 和之间是网页主体内容 在标签中可以规定整个文档的一些基本属性 如 背景色 bgcolor 文字颜色 text 背景图像 background 6 所有标签不得交叉 5 3文本标签 1 常用文本标签符 1 单标签 插入回车符 2 双标签 其中i是1 6中某个数字 用黑体显示标题文字 3 双标签 划分段落 也可以单独使用 4 单标签 换行并在该行下面画一条水平直线 5 双标签 被标签括起来的内容原样显示 6 双标签 使文字加粗 7 双标签 使文字显示为斜体 8 双标签 使文字带下划线 2 滚动字幕标签 和实现文字和图片滚动 标签有以下几个常用属性 1 derection属性 指定文字移动方向 属性值有 left right up down 默认向左滚动 2 behavior属性 指定文字移动方式 属性值有 scroll slide alternate 分别表示文字一圈一圈的绕着走 只走一次 来回走动 默认scroll 3 loop属性 指定循环次数 若不指定循环次数 则循环不止 4 scrollamount属性 指定文字移动的速度 5 bgcolor属性 指定文字背景色 3 文本格式控制标签 是双标签 用来定义文本的字体 字号和字的颜色 如果不使用标签 则文本将按照标签的文本属性值显示 或按默认值显示 标签有以下3个属性 1 face 定义字体 默认宋体 2 size 定义字大小 取值范围1 7 默认3 可以用加号和减号设置相对值 3 color 定义字颜色 默认黑色 5 4列表标签 列表用于条理性的显示信息 常用列表有3种格式 无序列表 有序列表和定义列表 1 有序列表对网页中的内容进行编号排列 在HTML中插入有序列表通过标签和实现 标签和之间的内容是有序列表的内容 列表的每一项必须包括在标签和之间 有序列表的语法格式如下 列表项1列表项2 列表项n 2 无序列表无序列表是指列表内容顺序任意的排列 与有序列表不同的是 每一列表项前不是用编号开始 而用一个项目符号开始 项目符号默认是一个圆点 无序列表与有序列表实现方法相似 只要将标签代替有序列表中的即可 无序列表的语法格式如下 列表项1列表项2 列表项n 3 定义列表定义列表用于对清单条目进行简短说明 首标签和尾标签之间的内容是定义列表的内容 列表项目用引导 用引导说明项 一个列表项目可以对应多个说明项 定义列表的语法格式如下 标题项1说明1说明2 标题项2说明1说明2 5 5超文本链接标签 超文本链接又称为超链接 是网页中常用的技术 实现起始端点到目标端点的跳转 浏览网页时单击定义了超链接的文字或图像 会跳转到其他网页或网站 使用超链接使得顺序存放的文件在一定程度上具有随机访问能力 更加符合人类的思维方式 HTML支持文档的超连接 1 超链接标签是双标签 在与之间的是超链接的起始端点 又称为源点 标签有3个重要属性 1 href属性 指出链接目标端点的URL 2 name属性 用来在文档内部创建书签 3 target属性 用来指定目标端点的显示窗口 blank 打开一个新窗口显示目标端点内容 parent 在当前文档的父框架集窗口显示目标端点内容 self 在当前文档显示目标端点内容 是默认值 top 在链接所在的完整窗口显示目标端点内容 超链接的起始端点通常是文字或图像 1 用文字作起始端点的格式 字符串 其中的字符串定义了文字型的起始端点 2 用图像作起始端点的格式 其中的定义了图像型的起始端点 2 超链接的起始端点 3 不同文件间的链接 1 链接到图像例如 美丽风光 2 链接到本站点的网页例如 上一页 3 链接到因特网上的网站例如 网易 4 链接到邮箱例如 联系我们 5 链接到音乐文件例如 死了都要爱 4 链接路径 参照当前文档所在位置 写出文档间相对路径 例如 站点web的文件关系如图所示 1 当前文档index htm 链接b htm 相对路径为 aa b htm 2 当前文档b htm 链接a jpg 相对路径为 a jpg 3 当前文档b htm 链接index htm 相对路径为 lx 3 htm 其中 表示父文件夹 5 图像标签 插入图像用标签完成 是单标签 有以下常用属性 1 src属性 指明图像的URL 2 width属性 定义图像显示的宽度 单位是像素 3 height属性 定义图像显示的高度 单位是像素 4 border属性 定义图像是否有边框线和边框线的粗细 值为0时无边框线 5 align属性 定义图像与文字间的排列方式 6 alt属性 定义图像的提示性文字 当鼠标指向图像时提示文字会显示在鼠标旁 5 6表格标签 1 标签是定义表格的总标签 一个表格的全部内容包含在和标签之中 标签的常用属性有 1 border属性 定义边框宽度 单位是像素 不包含border属性时默认无边框 2 bordercolor属性 定义边框颜色 3 align属性 定义表格在页面的水平位置 可取值为left right center 分别表示表格在网页左端 右端或使表格居中 4 bgcolor属性 定义表格背景色 5 wigth属性 定义表格宽度 有百分比和像素值2种 6 height属性 定义表格高度 2 标签表格的定义顺序是首先定义表格的一行 然后依此定义该行中的单元格 标签用来定义表格中的一行 是双标签 表格有几行 就有几组标签 标签的常用属性有 1 align属性 定义水平对齐方式 取值可选 left center right 2 valign属性 定义垂直对齐方式 取值可选 top middle bottom 3 bgcolor属性 定义行的背景色 4 bordercolor属性 定义行的边框色 3 标签和标签标签和标签都用来定义行中单元格 用和定义单元格的表格头 单元格中的文字黑体居中 用标签和定义的单元格为普通单元格 标签和标签的常用属性有 1 align属性 单元格内容水平对齐方式 取值可选 left center right 2 valign属性 单元格内容垂直对齐方式 取值可选 top middle bottom 3 colspan属性 单元格向右打通的栏数 在行的方向合并单元格 4 rpwspan属性 单元格向下打通的栏数 在列的方向合并单元格 5 width属性 单元格的宽度 单位是像素或总宽度的百分比 6 height属性 单元格的高度 单位是像素或总高度的百分比 5 7表单标签 一个表单是由窗体和控件组成的 通常包括说明性文字 输入框 提交和重置按钮等 其中的输入框和按钮等称为控件 当用户填写信息并执行提交操作以后 表单内容就从客户端的浏览器传送到服务器上 经过服务器上的ASP等处理程序处理 再将用户所需信息返回给客户端的浏览器 我们把具有这样功能的网页称为交互性网页 向表单输入信息的控件有 文本框 下拉菜单 单选框 复选框等 1 表单标签是双标签 构建窗体 其他表单标签必须放置在与之间 标签基本语法结构如下 说明 1 action属性 指定表单处理程序的URL 通常是ASP应用程序 提交表单信息后 将转去执行指定的ASP应用程序 2 method属性 指定表单数据的提交方式 有post和get两种 post方式可以传送大量资料 get方式只接受低于1K的资料 当get方式传送数据时 输入的数据会加在action指定的地址后面传送到服务器 保密性差 get方式主要用来从服务器中获取信息 post方式主要用来向服务器发送信息 3 name属性 用来给表单起名 便于处理表单 4 target属性 用来指定表单处理结果显示的目标窗口 2 表单输入标签 是单标签 定义用户的输入区域 标签的语法如下 Type属性决定输入区域的类型 有以下几种 1 type text 单行文本输入框 2 typet textarea 多行文本输入框 3 type password 密码输入框 输入的字符将用星号表示 4 type checkbox 复选框 可同时选中一个或多个复选项 5 type radio 单选项 只能选中所有单选项中的一项 多个单选项控件在一起时name属性要相同 才能产生多选一的效果 6 type submit 提交按钮 将表单中的信息送到服务器 按钮上的文字用value属性设置 例如 7 type reset 重置按钮 清除表单数据以便重新输入 按钮上的文字用value属性设置 8 type button 普通按钮 执行用户定义的事件 按钮上的文字用value属性设置 5 8多媒体标签 1 插入图像是单标签 格式如下 说明 1 src 指定图像文件的URL 2 height 指定图像的显示高度 单位是像素 3 width 指定图像的显示宽度 单位是像素 4 border 指定图像的边框粗细 单位是像素 值为0时无边框 5 alt 设置此属性后 当鼠标指向图像会显示提示文字 6 align属性 指定文字与图像之间的对齐方式 取值有 top 上对齐 middle 居中对齐 bottom 下对齐 right 右对齐 left 左对齐 2 插入背景音乐是单标签 只适用于IE浏览器 格式如下 说明 1 src属性 指定音乐文件 2 autostart属性 指定是否自动播放音乐文件 默认false 否 若选true 是 则打开网页后自动播放背景音乐 3 Loop属性 用来指定音乐文件的播放次数 Loop 3表示重复播放3次 若选infinite 则重复播放直到网页关闭 例如 5 9框架标签 用HTML创建框架用两个标签 框架集标签和框架标签 它们都是双标签 例如 框架练习 1 标签和标签用来分割浏览器窗口 确定分割后各窗口的大小 框架子窗口的排列顺序为 从上到下 从左到右 1 cols属性 定义框架集各框架的宽度 值之间用逗号分隔 宽度值的单位可以是像素 也可以是百分比形式 窗口水平分割 例如 例如 例如 2 rows属性 定义框架集各框架的高度 例如 窗口上下分割 3 frameborder属性 定义框架之间的分隔条是否显示 取1或yes显示分隔条 取0或no不显示分隔条 2 标签和标签用来具体定义框架集中每个框架对应的网页的名字 它们必须包括在和标签之间 每对和标签对应一个框架 1 name属性 为框架起名 例如 将链接文件显示在框架名为leftframe的框架子窗口 2 src属性 指定框架的链接文档 是必选项 值是链接文档的URL 3 scrolling属性 指定框架窗口是否出现滚动条 取值有 auto yes no 如果选择auto 当文档内容超出框架大小时自动出现滚动条 5 10元数据标签 用搜索引擎在因特网上搜索网页是按照头部信息中的 关键字 和 描述 进行的 为使网页能被搜索引擎搜索到 要在标签中添加元数据标签 能被搜索引擎搜索到的关键字用元数据标签及其属性实现 标签是单标签 有2种书写方法 1 http equiv 使HTTP服务