《DHTML1-Web与HTML基础.ppt》由会员分享，可在线阅读，更多相关《DHTML1-Web与HTML基础.ppt（44页珍藏版）》请在三一办公上搜索。
1、Web与HTML基础,实训内容,WEB基础HTML(HyperText Markup Language)JavaScriptCSS(Cascading Style Sheets),HTML互联网简介、超链接与基本标记常用标记、表和层表单、框架,第一讲,互联网简介、基本标记与超链接,互联网简介,互联网是世界上最大的计算机网络互联网被称为网络的网络万维网是互联网中的一个子网WWW 包含分散在世界范围内的众多Web 服务器,用户通过浏览器访问资源,Request,一个请求可能由以下内容组成：,请求行：,请求头部：,GET,Response,一个响应可能包含如下内容：,响应头部：,HTML：,HTML
2、 简介,HTML(HyperText Markup Language)超文本标记语言使用 HTML 标记和元素，可以：控制页面和内容的外观发布联机文档使用 HTML 文档中插入的链接检索联机信息创建联机表单，收集用户的信息插入动画开发帮助文件,HTML版本,HTML浏览器和编辑器,浏览HTML文件的工具编辑HTML文件的工具,Firefox-Mozilla/NavigatorChrome-GoogleIE-MicrosoftSafari-AppleOpera-Opera,Dreamweaver记事本 Editplus,FireFox,FireFox，简称FF，是由Mozilla基金会与开源团体
3、共同开发的网页浏览器。FireFox可以在多种操作系统中运行；FireFox是开源的；FireFox最新版本是3.6.10，于2010年9月20日正式发布，支持HTML5主要功能；FireFox插件十分丰富，其中包括最为著名的firebug以及Web developer；FireFox适合开发人员使用；,HTML 语法示例,HTML语法,HTML 标记的格式组成：,HTML 文档的结构,HTML 标记元素类型,结构性标记:描述文字的意图例：测试 指明浏览器将测试显示为一级标题。呈线性标记：描述文字的外观例：测试将测试显示为斜体超文本标记：将文档的一部分关联到其他文档框架页面标记：描述网页如何显
4、示框架网页，低版本的浏览器不支持此功能例：定义了一个框架,HTML 基本标记,标题段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接,段落标记,换行标记,使用对齐属性,右对齐,使用META标记 2-1,提供关于网页的信息应用：关键词生成响应,使用META标记 2-2,3 自动刷新页面4 使用网页所使用的编码,标题,动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感,H1 到 H6 标签用于指定不同级别的标题,标签,诗词学习静夜思 床前明月光 疑是地上霜 举头望明月 低头思故乡 html,标签用于显示具有预先定义格式的文本（如
5、HTML 文档中所示）,学习 html这很有趣足球是最令人喜爱的运动之一。信息技术是发展的关键。水的分子式是 h 2 o。3 2 等于 9。,字符格式化标签,此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等,列表简介,列表用于按逻辑方式对数据分组,玫瑰花,向日葵,兰花,苹果,桔子,水仙,芒果,水果苹果 芒果桔子花卉水仙兰花向日葵玫瑰花,列表类型：无序列表,星期中的每一天星期日星期一星期二星期三星期四星期五星期六,无序列表也称为“项目列表”,星期中的每一天星期日星期一星期二星期三星期四星期五星期六,列表类型：有序列表,在有序列表中，列表项以自动生成的顺序显示,使用水平线,动物世界
6、老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上,标签用于在页面上绘制水平线,使用字体和属性,动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从 1 到 7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本,元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示,标签用于在 HTML 文档中插入图像。标签的两个常用属性是 src 和 align。,src 属性用于指定要插入的图像位置。,align 属性用于指定图像相对于文本
7、的对齐方式。,插入图像 2-1,插入图像 2-2,动物世界让我们看看这些可爱的动物底部对齐顶部对齐居中对齐,插入特殊字符 2-1,某些字符在 HTML 中具有特殊意义，如小于号()定义 HTML 标签的开始字符实体用于在 HTML 文档中插入特殊字符，如版权号，注册商标等,插入特殊字符需要用HTML字符实体,空格；,插入特殊字符 2-2,超链接简介 2-1,超链接简介 2-2,创建超链接,HREF,要链接到另一目录(C:example)下的页面，可编写 或,要链接到同一目录(C:html)下的页面，可编写 或,C:html 目录,C:example目录,绝对和相对路径名,绝对路径名,相对路径名
8、,链接到同一文档的某个部分2-1,锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 为达到这种跳转效果，请在 HREF 参数中使用该标记,主题名称,主题名称,链接到同一文档的各个部分2-2,.狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。斑马没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马.,演示:锚链接例子,链接到其他文档的特定位置,让我们深入了解一些动物狮子斑马印度豹,Animals.htm,狮子狮子的吼声从八公里之外就能
9、听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。,Animaldetails.htm,电子邮件链接,用户可从网页发送电子邮件,海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 david fernandez,总结,互联网是网络的网络，万维网(WWW)是互联网的一个子集。全世界所有的计算机都可以通过 TCP/IP 协议绑定在一起。HTML命令称为标记，用于控制HTML文档的内容和外观。META元素提供关于网页的信息。掌握使用HTML标记创建超链接。了解网站的各种导航方式。,练习,1.制作一个简单的html页面2.制作两个页面，实现两个页面的链接3.使用实现页面定时刷新 4.用,完成一页面 5.特殊字符在Html里的显示,
