HTML网页制作ppt课件

HTML语言 1 目标 描述HTML文档的结构使用基本的HTML标签在HTML文档中插入特殊字符在HTML文档中创建超级链接 2 HTML简介 超文本 提供链接到其他页面或同一页面的其他位置的文本 标记 可以用标签标记页面的不同部分以正确显示 语言 HTML可用于 控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象 3 HTML文档示例 学习HTML欢迎来到HTML世界 HTML代码 浏览器处理代码并进行显示 4 编辑器和浏览器 学习HTML欢迎来到HTML世界 HTML代码 在编辑器中编写HTML代码 浏览器显示HTML文档 页面 5 编辑器2 2 需要在编辑器中键入源代码 示例 DreamWeaver MacromediaDreamweaver是一种专业的HTML编辑器 用于设计 编码 开发网站 网页和强大的Web应用程序 6 HTML文档结构 学习HTML欢迎来到HTML世界 HTML网页 头部部分 主体部分 标签标记HTML文档的开始和结束 这部分包括标题和其他说明信息 包括在 标签内 这部分包含文本 图像和链接 它包括在 标签内 7 HTML标签2 2 学习HTML欢迎来到HTML世界 标签 标识BODY元素 属性 提供有关元素的附加信息 值 分配给属性的内容 8 META标签2 1 META标签是一个特殊的HTML标签 提供有关网页的信息 如作者姓名 公司名称和联系信息等许多搜索引擎都使用META标签信息例如 要将GrahamBrowne指定为作者 则使用以下META标签 9 META标签2 2 http equiv属性可用来代替META标签中的name属性 表示有效期 格林尼治标准时间2005年9月12日 星期一14 25 27 表示每隔2秒 自动刷新网页 演示 自动刷新的例子 10 HTML基本元素 标题段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接 11 标题 动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感 H1到H6标签用于指定不同级别的标题 12 段落标签 诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示 标签用于标记段落 13 换行符 只要在文本中放入标签 就会强制换行 诗词学习我是第一行我是第二行我是第一段我是第二段 14 标签 诗词学习静夜思床前明月光疑是地上霜举头望明月低头思故乡 HTML 标签用于显示具有预先定义格式的文本 如HTML文档中所示 15 字符格式化标签 学习HTML这很有趣足球是最令人喜爱的运动之一 信息技术是发展的关键 水的分子式是H2O 32等于9 此标签用于对文本应用各种格式 如粗体 斜体 下划线 下标 上标等 16 列表简介 列表用于按逻辑方式对数据分组 玫瑰花 向日葵 兰花 苹果 桔子 水仙 芒果 水果苹果芒果桔子花卉水仙兰花向日葵玫瑰花 17 列表类型 无序列表 星期中的每一天星期日星期一星期二星期三星期四星期五星期六 无序列表也称为 项目列表 18 列表类型 有序列表 星期中的每一天星期日星期一星期二星期三星期四星期五星期六 在有序列表中 列表项以自动生成的顺序显示 19 使用水平线 动物世界老虎的夜间视觉老虎的夜视能力优于人类的夜视能力五倍以上 标签用于在页面上绘制水平线 20 使用字体和属性 动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的 因此每匹斑马都是独一无二的 可以按名称或十六进制值指定颜色 可以为字体指定的大小范围为从1到7 可以指定一列字体 各字体间用逗号分隔 浏览器以最先找到的字体显示文本 元素及其相关属性 如SIZE COLOR和FACE 可用于控制网页上文本的显示 21 插入图像2 1 标签用于在HTML文档中插入图像 标签的两个常用属性是SRC和ALIGN SRC属性用于指定要插入的图像位置 ALIGN属性用于指定图像相对于文本的对齐方式 22 插入图像2 2 动物世界让我们看看这些可爱的动物底部对齐顶部对齐居中对齐 23 插入特殊字符2 1 某些字符在HTML中具有特殊意义 如小于号 定义HTML标签的开始字符实体用于在HTML文档中插入特殊字符 如版权号 注册商标等通常情况下 HTML会自动截去多余的空格 不管你加多少空格 都被看做一个空格 比如你在两个字之间加了10个空格 HTML会截去9个空格 只保留一个 为了在网页中增加空格 你可以使用表示空格 插入特殊字符需要用HTML字符实体 空格 24 插入特殊字符2 2 25 创建超级链接 了解鸟类会弹琴的狗狗单击此处查看 26 绝对和相对路径名 要链接到另一目录 C example 下的页面 可编写或 要链接到同一目录 C html 下的页面 可编写或 C html目录 C example目录 绝对路径名 相对路径名 27 链接到同一文档的某个部分2 1 锚记标签用于使用户 跳 到文档的某个部分HTML的NAME属性用于创建锚标记为达到这种跳转效果 请在HREF参数中使用该标记 主题名称 主题名称 28 链接到同一文档的各个部分2 2 狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到 雄狮 很容易从鬃毛识别出雌雄 的重量达250公斤 而雌狮则要轻得多 只有180公斤 斑马没有任何两匹斑马的斑纹完全一样 因此每匹斑马都是独一无二的 斑马也称为黑白条纹相间的马 演示 锚链接例子 29 链接到其他文档的特定位置 让我们深入了解一些动物狮子斑马印度豹 Animals htm 狮子狮子的吼声从八公里之外就能听到 雄狮 很容易从鬃毛识别出雌雄 的重量达250公斤 而雌狮则要轻得多 只有180公斤 Animaldetails htm 30 电子邮件链接 用户可从网页发送电子邮件 海豚充分交流 密切配合据说 海豚的交流模式几乎与人类的一样复杂 请将您的疑问发送至DavidFernandez 31 总结2 1 HTML标签一般配对使用 不区分大小写标签都具有属性 属性提供关于网页上HTML元素的附加信息META标签放置在网页的标题处以提供关于页面的信息 搜索引擎常会用到这些标签标题级标签使用 32 总结2 2 段落标签使用 无序列表使用标签 有序列表使用标签字体标签超链接标签超链接文本 33 表格 行 列 列标题 在HTML文档中 广泛使用表格来存放网页上的文本和图像 单元格 34 使用表格姓名性别分数RobertM80 创建表格 代表表格的开始 border 2表示边框尺寸为2 表示行 这是表格的第一行 有三列数据 代表列 表格的第二行 有三列数据 表格的第三行 也有三列数据 35 学员档案信息姓名性别分数RobertM80 表格的标题 表示表格标题 表示行或列标题 粗体显示 表格的第二行 有三列数据 表格的第三行 有三列数据 36 学员档案信息姓名性别分数RobertM80 表格的对齐方式 整个表格居中 姓名列默认左对齐 性别列居中 分数列右对齐 37 合并单元格 跨列 创建表格第一学期第二学期数学科学英语数学科学英语989580958788 COLSPAN n 属性表示跨多少列 38 合并单元格 跨行 创建表格螺母螺栓锤子第一季度一月250010001240二月300025004000 ROWSPAN n 属性表示跨多少行 39 学员档案信息姓名性别分数RobertM80MaryF18 表格的背景色和尺寸设置 表格的颜色设置 表格的背景色行的背景色列的背景色颜色值可以采用RGB red green blue 红绿蓝十六进制值表示 如红色 FF0000 或是一些预定义色彩名称 red blue yellow等 表格的尺寸设置 例如 表示一个长为200像素 宽为100像素的表格 表示一个宽为窗口的20 高为窗口的10 的表格 40 表单输入元素 7 课堂练习 请编写HTML代码 表单 42 METHOD post或get 表单 ACTION METHOD 指定提交后由服务器上哪个处理程序处理 指定向服务器提交的方法 一般为post或get方法 post方法比较安全 ACTION URL 表单输入元素 1 文本框 按钮 单选按钮 复选框等都是输入元素 44 表单输入元素 2 BUTTON 按钮 表单输入元素 3 身份证号 TEXT 文本 密码 请填写您的工作经历 表单输入元素 4 性别 男性女性 单选按钮和复选框 你喜欢以下哪些明星 酒井法子郑秀文BonJovi HTML输入元素 5 2004年欧锦赛预测 最佳球员 RonaldoBeckhamZidane预测大赛亚军巴西法国阿根廷预测谁将成为2004年欧锦赛冠军 阅读代码 请问网页中的显示结果 48 表单输入元素 6 下拉菜单 谁是2002年世界杯冠军 西班牙法国巴西德国 列表选项 表单输入元素 7 课堂练习 请编写HTML代码 框架 广告栏顶部框架 top htm 商品详细介绍右侧框架 main htm 商品导航左侧框架 left htm 51 为何使用框架 在另一个固定部分显示导航部分 在页面的一个固定部分显示徽标或静态信息 在此处显示主要内容 站点中只有此部分是变化的 总结4 1 表格标题数据1数据2 数据11数据22 跨行的单元格 数据11跨列的单元格 数据22 表格的一般语法 53 总结4 2 文本框密码框文本域单选按钮男性复选框酒井法子 表单的一般语法 54 总结4 3 选项1选项2 55 总结4 4 框架 顶部窗口显示广告top htm 显示详细内容main htm 左侧窗口显示导航链接left htm 56 DHTML简介 DHTML HTML 脚本语言JavaScript 层叠样式表CSS 指定一个网页的元素 决定元素的大小颜色和位置 操纵网页的元素 DHTML是制作动态HTML页面的技术 57 DHTML的功能 设计人员可以随着与用户的交互操作而改变文本的颜色 字体和大小 设计人员可以随用户的输入或事件 如单击鼠标 而更改页面的内容 设计人员可以用x座标和y座标来指定网页元素的确切位置 绝对位置或相对位置 设计人员可以将网页中的表格绑定到数据库 设计人员可以将选择的字体和网页一起封装 Web程序员可以编写脚本以更改网页的样式和内容 在DHTML中 每个元素都被视为一个对象 可以独立地对每个对象进行访问和编程 动态样式 动态内容 定位 数据绑定 可下载字体 脚本 对象结构 58 DHTML示例 闪烁文本 移动文本 消隐文本 59 设置属性这个段落应用了样式这个段落按默认样式显示 什么是样式 指定显示样式 60 常用的样式属性 61 根据样式代码的位置 分为三类 行内样式内嵌样式外部样式 样式的分类 在最后一个声明后面加上一个分号 是一个好习惯 行内样式 您如果希望某段文字和其他段落的文字显示风格不一样 那么请采用 行内样式 行内样式使用元素标签的STYLE属性定义 关键代码 剩余时间 成交结束新旧程度 全新所在地 北京宝贝数量 5件浏览量 220次另送价值50元的充电器套装 一个充电器 两节充电电池 可使用半年以 63 应用样式P font size 20px color blue text align center 我是段落1我是段落2我是段落3我们的样式绝对统一 内嵌样式 1 所有的段落都采用P样式 保证样式统一 行内样式表局限于某个标签 如果希望本网页内的所以同类标签都采用统一样式 这时应采用内嵌样式 用分号隔开 64 内嵌样式 2选择器 根据选择器的不同 内嵌样式又分为 HTML选择器CLASS类选择器ID选择器 65 关键代码 P 设置样式 字体和背景色 font family System font size 18px color 3333CC H2 background color CCFF33 text align center 品种特征方面 1 蛋鱼 蛋鱼 2 龙睛 龙睛 3 高头 高头 内嵌样式 3HTML选择器 应用H2样式 应用P样式 内嵌样式 4class类选择器 myinput border 1pxsolid border color D4BFFF color 2A00FF 用户名密码 CLASS类选择器 应用类选择器 class 类名 类选择器的定义格式为 类名 样式规则 fire color red font size 24px 我是二级标题 火是这样的我是段落 火是这样的 内嵌样式 5ID选择器 ID选择器 ID选择器的定义格式为 ID名 样式规则 应用ID选择器 ID ID名 A 设置超链接不带下划线 color blue text decoration none 文本修饰 无 A hover 鼠标在超链接上方停留时 带下划线 color red text decoration underline 文本修饰 下划线 HEAD 俺是超链接 移过来我就显示下划线 内嵌样式 6特殊的选择器 HTML选择器 特殊的伪类 A代表超链接 hover代表鼠标悬停 外部样式 根据样式文件与网页的关联方式又分为 链接 LINK 外部样式表导入 import 外部样式表 样式文件P 网页2 网页3 网页1 70 链接外部样式表 使用LINK 链接 标签 语法 第一步 创建样式表文件newstyle css 第二步 把样式文件和网页关联 样式文件 newstyle cssP Onel htm another htm 第三步 浏览查看各网页 演示 链接样式表示例 71 导入外部样式表 使用 import导入 语法 import样式表文件 css 操作步骤同链接样式表 72 外部样式文件 样式的混合使用 行内样式表 内嵌样式表 外部样式表各有优势 实际的开发中常常需要混合使用 有关整个网站统一风格的样式代码 放置在独立的样式文件 css某些样式不同的页面 除了链接外部样式文件 还需定义内嵌样式某张网页内 部分内容 与众不同 采用行内样式 对于某个HTML标签 1 如果有多种样式 如果规定的样式没有冲突 则叠加 2 如果有冲突 则最先考虑行内样式表显示 如果没有 再考虑内嵌样式显示 如果还没有 最后采用外面样式表显示 否则就按HTML的默认样式显示 内嵌样式 行内样式 某个HTML标签 73 层标签 关键代码 Z index 1 我是第一层 我是容器 包含图片段落Z index 2 我是第二层 包含图片和段落 使用Z index指定是哪一层 是块级容器标签 可以包含图片 标题 段落 文字等 图片 段落 top left 74 标签 所有韩款童装10元 件起拍喽 是行级容器标签 不可以包含图片 标题 段落等 只能包含文字内容 75 CSS的优点 改变浏览器的默认显示风格页面内容和显示样式分离可以重用样式表方便网站维护 76 总结 DHTML是网页中HTML 样式表和脚本的组合应用程序 增强网页的交互性样式分为行内样式 内嵌样式 外部样式样式表包括选择器和样式规则 选择器又分为HTML选择器 类选择器 ID选择器以及特殊的伪类和都是容器标签 是块级标签 可包含段落 标题等 是行级标签 不能包含段落 标题等 只能包含部分文字 77