第2章通向Web技术世界的钥匙-html讲述.pptx

任课专业：*****系 E-Mail: ******** 第2章 通向Web技术世界的钥匙－html 计算机科学与工程学院 2015.1.23 任课教师：*** 学习目标 本章节的学习目标 了解HTML的发展； 掌握HTML常用标签以及语法构成； 掌握HTML文档结构。 2.1 HTML简介 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。 设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 2.1 XHTML简介 XHTML（Extensible HyperText Markup Language）即可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。 XHTML就是一个扮演着类似HTML的角色的可扩展标记语言（XML），所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。 2.1 XHTML简介 XHTML是基于XML应用，但XHTML是一种增强了的HTML，XHTML 是更严谨更纯净的 HTML 版本。 XHTML的可扩展性和灵活性将适应未来网络应用更多的需求。 XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的基于HTML语言设计的网站，直接采用XML还为时过早。 建立XHTML的目的就是实现HTML向XML的过渡。 国际上在网站设计中推崇的WEB标准就是基于XHTML的应用（即通常所说的CSS+DIV）。 2.1 HTML5 HTML5的优点(标准规范2014年10月29日正式发布) HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如nav网站导航块和footer）； 新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用； 提供了一些新的功能，比如视频音频用的video和audio等等更加丰富的功能。 2.2.1 文档定义 文档定义类型（3种主要类型） 严格型（Strict）：所有标记必须符合XHTML标准。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd 过渡型（Transitional）：能够兼容之前的HTML代码。 !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd 2.2.1 文档定义 文档定义类型（3种主要类型） 框架型（Frameset）：能够兼容XHTML不推荐的框架。 !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN /TR/html4/frameset.dtd 说明：在最新的HTML协议中，完全抛弃了以上约定。在 HTML 4.01 中有 3 个不同的文档类型，在 HTML 5 中只有一个： !DOCTYPE HTML 2.2.1 文档定义 DOCTYPE的重要性 噩梦开始的源头：之前写html或者jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。直到最近碰到了一个非常奇葩的bug：某一个页面在IE7和8，Chrome，firefox等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，各种log，终于在httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了!DOCTYPE html，果然奏效了。 2.2.1 文档定义 DOCTYPE的作用和用法 patMode： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面； CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。 2.2.1 文档定义 说明：这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat，这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。 如果你的页面添加了!DOCTYPE html，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。这就是!DOCTYPE html的作用。 2.2.1 文档定义 一个