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