网页基础：第2章：HTML初级应用.ppt

,HTML,2,回顾1-1,表单有什么用？表单有哪些属性？ 文本框分为哪三种？各有什么特点？ 希望昵称文本框不超过10个字符，应使用哪个属性加以限制？ 单选按钮和复选框有什么区别？,3,回顾1-2,按钮分为哪三种？各有什么功能？ 根据您的理解，下拉菜单的选项和值有什么区别？ 常见的有哪些事件？哪些行为？,4,目标,描述 HTML 文档的结构 使用基本的 HTML 标签 在 HTML 文档中插入特殊字符 在 HTML 文档中创建超级链接,5,HTML 简介,超文本,提供链接到其他页面或同一页面的其他位置的文本,标记,可以用标签标记页面的不同部分以正确显示,语言,HTML 可用于： 控制页面和内容的外观 发布和检索联机文档 创建联机表单 插入诸如音频剪辑和视频剪辑等对象,6,HTML 文档示例, 学习 HTML 欢迎来到 HTML 世界 ,HTML 代码,浏览器处理代码并进行显示,7,编辑器和浏览器, 学习 HTML 欢迎来到 HTML 世界 ,HTML 代码,在编辑器中编写 HTML 代码,浏览器显示 HTML 文档/页面,8,编辑器 2-2,需要在编辑器中键入源代码,示例：DreamWeaver,Macromedia Dreamweaver 是一种专业的 HTML 编辑器，用于设计、编码、开发网站、网页和强大的 Web 应用程序。,9,HTML 文档结构, 学习 HTML 欢迎来到 HTML 世界 ,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,这部分包括标题和其他说明信息。包括在 标签内,这部分包含文本、图像和链接。它包括在 标签内,10, 学习 HTML 欢迎来到 HTML 世界 ,HTML 标签 2-2,标签,标识 BODY 元素,属性,提供有关元素的附加信息,值,分配给属性的内容,11,META 标签 2-1,META 标签是一个特殊的 HTML 标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等 许多搜索引擎都使用 META 标签信息 例如，要将 Graham Browne 指定为作者，则使用以下 META 标签：,12,META 标签 2-2,http-equiv 属性可用来代替 META 标签中的 name 属性,表示有效期：格林尼治标准时间 2005 年 9 月 12 日，星期一 14:25:27,表示每隔2秒，自动刷新网页,演示：自动刷新的例子,13,HTML 基本元素,标题 段落 换行符 预先格式化 字符格式化 列表 水平线 字体 图像 特殊字符 超级链接,14,标题, 动物世界 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 ,H1 到 H6 标签用于指定不同级别的标题,15,段落标签, 诗词学习 我是第一段 我是第二段 左对齐显示 居中显示 右对齐显示 , 标签用于标记段落,16,换行符,只要在文本中放入 标签，就会强制换行, 诗词学习 我是第一行我是第二行 我是第一段 我是第二段 ,17, 标签, 诗词学习 静夜思 床前明月光 疑是地上霜 举头望明月 低头思故乡 HTML, 标签用于显示具有预先定义格式的文本 （如 HTML 文档中所示）,18, 学习 HTML 这很有趣 足球是最令人喜爱的运动之一。 信息技术是发展的关键。 水的分子式是 H 2 O。 3 2 等于 9。 ,字符格式化标签,此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等,19,列表简介,列表用于按逻辑方式对数据分组,玫瑰花,向日葵,兰花,苹果,桔子,水仙,芒果,水果 苹果 芒果 桔子 花卉 水仙 兰花 向日葵 玫瑰花,20,列表类型：无序列表, 星期中的每一天 星期日 星期一 星期二 星期三 星期四 星期五 星期六 ,无序列表也称为“项目列表”,21, 星期中的每一天 星期日 星期一 星期二 星期三 星期四 星期五 星期六 ,列表类型：有序列表,在有序列表中，列表项以自动生成的顺序显示,22,使用水平线, 动物世界 老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上 , 标签用于在页面上绘制水平线,23,使用字体和属性, 动物世界 了解有关动物的更多信息 斑马的特性 没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的 ,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从 1 到 7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本, 元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示,24, 标签用于在 HTML 文档中插入图像。 标签的两个常用属性是 SRC 和 ALIGN。,SRC 属性用于指定要插入的图像位置。,ALIGN 属性用于指定图像相对于文本的对齐方式。,插入图像 2-1,25,插入图像 2-2, 动物世界 让我们看看这些可爱的动物 底部对齐 顶部对齐 居中对齐 ,26,插入特殊字符 2-1,某些字符在 HTML 中具有特殊意义，如小于号 () 定义 HTML 标签的开始 字符实体用于在 HTML 文档中插入特殊字符，如版权号 ，注册商标等,插入特殊字符 需要用HTML字符实体, 空格 ；,27,插入特殊字符 2-2,28,创建超级链接, 了解鸟类 会弹琴的狗狗 单击此处查看 ,29,要链接到另一目录 (C:example) 下的页面，可编写 或 ,要链接到同一目录 (C:html) 下的页面，可编写 或 ,C:html 目录,C:example目录,绝对和相对路径名,绝对路径名,相对路径名,30,链接到同一文档的某个部分2-1,锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 为达到这种跳转效果，请在 HREF 参数中使用该标记,主题名称,主题名称,31,链接到同一文档的各个部分2-2,. . . 狮子 斑马 印度豹 狮子 狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。 斑马 没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马,演示:锚链接例子,32,链接到其他文档的特定位置, 让我们深入了解一些动物 狮子 斑马 印度豹 ,Animals.htm, 狮子 狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。 ,Animaldetails.htm,33,电子邮件链接,用户可从网页发送电子邮件, 海豚 充分交流，密切配合 据说，海豚的交流模式几乎与人类的一样复杂！ 请将您的疑问发送至 David Fernandez ,34,总结