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

第2章网页设计的基本描述语言HTML 2 1HTML概述2 2HTML文档的构成2 3HTML元素 2 1HTML概述 HTML HypertextMarkupLanguage 是一种规范 是一种标准 他是通过标记符 tag 来标记显示网页的各个部分 所有网页都是HTML格式的文件 HTML通过元素来告诉浏览器如何处理两个标记符之间的信息 HTML元素的格式 正文 2 2HTML文档的构成 网页总是以标记开始 在文件的末尾以结束 表示文件是HTML格式 网页文件通常有两部分组成 头部 head 和主体 body 1 HTML文档的基本结构 HTML文件的正文写在这里 标记和标记对 注释标记 1 格式 2 功能与说明 注释内容不显示在网页上 主要功能是提高代码的可读性 2 HTML元素 内容 起始标记 结束标记 有些标记可以省写结束标记 2 3HTML元素 2 3 1文档结构 HTML文件的正文写在这里 1 文档标记HTML 2 文档头标记 头部元素 头部用表示开始 用表示结束 标签用于定义文档的头部 它是所有头部元素的容器 在头部元素中我们一般都会用到 他是网页的标题 将显示在网页的标题栏当中 2 3 2头部元素 可以嵌套在head元素中的元素 1 TITLE标记 功能 设置网页标题 说明 该标记只能嵌入在 标记对中使用 2 META标记 1 功能 指明网页作者 制作工具等 2 说明 该标记可以重复出现在标记对中 该标记中的信息不显示在网页中 3 其他标记 LINK最常见的用途是链接样式表 STYLEBASE标签为页面上的所有链接规定默认地址或默认目标 3 文档体标记 文档体标记的常用属性 2 3 3块 CENTER标记标题标记H1 H6P标记BR标记PRE标记等 1 文本居中标记 功能 居中显示文本 2 标题标记 1 格式 2 功能 字号最大 字号最小 n为1 6 3分段标记 1 格式 2 说明 该标记可单独使用 也可成对使用 单独使用时 下一个的开始就意味着上一个的结束 作用 将文本换行 并空出一个文本行的间距 3 对齐属性align 4 换行标记 1 格式 2 功能与说明 换行标记为单标记 且一般不包含属性 在段落间换行 不产生空行 与标记不同 作用 将文本换行 但没有行间距 5 原样显示标记 1 格式 作用 保持文本的原始格式 并显示在网页上 6 分隔线标记 1 格式 2 功能与说明 标记为单标记 作用 在网页中显示一条水平分隔线 3 标记的属性 2 3 4字符格式 FONT标记B标记I标记U标记等 1 字体格式标记 1 格式 2 属性 作用 设置字符的颜色 大小和字体 3 说明 如果系统中没有face属性所指定的字体 则使用默认字体 size属性的取值为1 7 也可以用 n 或 n 来设定字号的相对值 color属性的值为 rgb颜色 rrggbb RGB色彩模式 是工业界的一种颜色标准 是通过对红 R 绿 G 蓝 B 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的 RGB颜色查询对照表 2 物理字体标记 1 粗体标记放在与标记之间的文字将以粗体方式显示 2 斜体标记放在与标记之间的文字将以斜体方式显示 3 下划线标记放在与标记之间的文字将以下划线方式显示 4 删除线标记放在与标记之间的文字将以下划线方式显示 3 上标标记和下标标记 1 上标标记放在与标记之间的文字将以上标方式显示 2 下标标记放在与标记之间的文字将以下标方式显示 2 3 5图像 1 格式 单标记 必须指定的属性 2 img标记的其他常用属性 3 使用img标记的注意事项 img标记没有结束标记 图片文件一般使用 gif或 jpg文件 以保证下载速度 图片文件的URL尽量使用相对路径 绝对路径就是你的网页上的文件或目录在硬盘上真正的路径 在制作网页中实际很少用到 包含了标识Internet上的文件所需要的所有信息 包括完整的协议名称 主机名称 文件夹名称和文件名称 例如 绝对路径 相对路径 相对路径是指目标文件地址相对于源文件的路径 如果链接到同一目录下 只需输入要链接文件的名称 要链接到下级目录中的文件 需先输入目录名 然后加 再输入文件名 要链接到上一级目录中文件 则先输入 再输入文件名 相对路径示例 举例 Index链接到contents 支持 contents htmlContents链接到index index html 2 3 6超链接 链接的基本概念创建超链接标记常见的链接目标 1 链接的基本概念 源端点 本网页内的某处 锚点 网页文件或其他文件E mailFTP服务器 文字图片动画图片的一个区域 热点 2 创建超链接标记 1 文字为超链接源 超链接标记的常用格式 源端点文字 绝对路径相对路径 blank 在新窗口中显示目标 self 在当前网页窗口中显示目标 parent 在当前网页的上一级窗口中显示目标 top 忽略框架 在整个浏览器中窗口中显示目标 嵌套了一个标记 2 图像为超链接源 超链接标记的常用格式 3 常见的超链接目标 1 链接到网页或其他文件 在标记的href属性中指定网页文件或其他文件所在的路径和文件名即可 2 链接到锚点 也叫书签链接 常常用于那些内容庞大繁琐的网页 通过点击命名锚点 不仅让我们能指向文档 还能指向页面里的特定段落 更能当作 精准链接 的便利工具 便于浏览者查看网页内容 1 定义锚点 锚点内容 2 链接到锚点 超链接内容 3 链接到FTP 超链接内容 4 链接到E mail 超链接内容 2 3 7列表 有序列表 无序列表 定义列表 嵌套列表 1 有序列表 第1项 第n项 1 格式 单标记 2 有序列表中type属性的取值 2 无序列表 第1项 第n项 1 格式 2 无序列表中type属性的取值 3 定义列表 术语1术语解释1术语2术语解释2术语3术语解释3 1 格式 2 3 8表格 定义表格的基本语法 1 表格标记的常用属性 单元格边距 表格填充 cellpadding 代表单元格外面的一个距离 用于隔开单元格与单元格空间单元格间距 表格间距 cellspacing 代表表格边框与单元格补白的距离 也是单元格补白之间的距离 2 行标记的常用属性 3 单元格标记和的常用属性 4 标题标记 该标记是标记的子元素 功能是设置表格的标题或说明 可用属性 align 取值为 top 标题位于表格上边居中对齐 默认值 bottom 标题位于表格下边居中对齐 left 标题位于表格上边 左对齐 right 标题位于表格上边 右对齐 习题 用HTML编写一个网页 要求建立文字超链接 单击这个链接会在新窗口打开工大主页 用HTNL编写网页 要求单击图片 2 3 9表单 表单标记 表单元素标记 也称为控件 表单元素标记 1 表单标记 表单元素标记 1 格式 常用属性 actionmethodname等 表单元素标记 inputtextareaselect 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 表单元素标记 一个option标记对应一个列表项 1 select标记中常用的属性 multiple属性 设置列表框中允许多选 size属性 设置列表框中可以显示的行数 格式为 size 行数 onchange属性 列表框中的选择发生改变时触发该事件 格式为 onchange javascript等代码 2 option标记中常用的属性 selected属性 设置当前列表项为选中状态 2 3 10框架 也称为帧元素P54 框架集 框架 1 框架集标记的常用属性 2 框架标记的常用属性 之一 3 框架嵌套 略 4 框架间的超链接 关键 在标记的target指定的目标窗口为框架名 框架名 在标记中通过name属性指定 2 3 11滚动字幕标记 补充 标记常用属性 之二 2 3 12多媒体技术 补充 在网页中播放声音在网页中嵌入影像 1 在网页中播放背景声音 loop infinite时 表示循环播放 直至网页关闭为止 2 利用超级链接播放音乐或影像 3 使用标记播放音乐或影像 2 3 13其他标记 层标记Layer Div Span 与3 2节内容合并介绍脚本标记Script 与3 3节内容合并介绍Applet标记等