HTML5与CSS3 Web前端开发技术第1章 HTML 5概述.pptVIP

HTML5+CSS3 Web 前端开发技术 LOGO HTML5+CSS3 Web 前端开发技术 * * 第1章 HTML 5概述 HTML 5简介 1 HTML 5与HTML 4区别 2 HTML 5特性 3 HTML 5开发环境 4 1.1 HTML 5简介 1．HTML含义 HTML是英文HyperText Markup Language的缩写，即超文本标记语言。 HTML历史 版本 发表日期 HTML3.2 W3C REC:1996.4 HTML4 W3C REC:1997.12 HTML4.01 W3C REC:1999.12 HTML5 2012年12月定稿 1.1 HTML 5简介 2. HTML5 HTML5是用于取代1999年所制定的HTML4.01和XHTML1标准的HTML标准版本。 HTML5实际指的是包括HTML、CSS和JS在内的一套技术组合，能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA）。 2012年12月，W3C称：“HTML5是开放的Web网络平台的奠基石”。 Firefox、Chrome、IE9、Safari、Opera等。 1.2 HTML5与HTML4区别 HTML5其核心目的在于解决当前Web开发中存在的各种问题。 第一个问题是解决Web浏览器之间的兼容性问题。 第二个问题是文档结构描述的问题。 本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验。 1.2 HTML5与HTML4区别 1 HTML5文档结构的变化 内容类型(ContentType) HTML5文件的扩展名仍然是“.html”或“.htm” DOCTYPE声明 声明如下：!DOCTYPE html 指定的字符编码 HTML5开始对于HTML文件的字符编码推荐使用UTF-8。 meta charset=utf-8 1.2 HTML5与HTML4区别 2 HTML5语法的变化 可以省略标记的元素 在HTML5中，标记省略成为一种规范，绝大多数浏览器予以支持。 不允许写结束标记的元素 area、base、br、col、 command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 可以省略结束标记的元素 li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th 可以省略全部标记的元素 html、head、body、colgroup、tbody 1.2 HTML5与HTML4区别 2 HTML5语法的变化 具有boolean值属性的元素 一些元素，如果有boolean值的属性，如checked、autofocus与readonly等，当只写属性而不指定属性值时，表示属性值为true； 如果想要将属性值设为false，可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。 1.2 HTML5与HTML4区别 2 HTML5语法的变化 省略引号 在不同版本的HTML中，在指定属性值的时候，属性值两边加引号时既可以用双引号，也可以用单引号。 HTML5在此基础上做了一些改进，当属性值不包括空字符串、“”、“”、“=”、单引号、双引号等字符时属性值两边的引号可以省略。 1.2 HTML5与HTML4区别 3 HTML5增加和删除的元素和属性 HTML5新增的元素可以分为结构元素（section、article、aside等）、多媒体元素（video、audio、embed等）和扩展HTML功能的元素（canvas）等，具体如表所示。 表1-3 HTML5新增的主要标记 1.2 HTML5与HTML4区别 4 HTML5的全局属性 属性 描述 HTML5新增 accesskey 规定访问元素的键盘快捷键 ? class 规定元素的类名（用于规定样式表中的类）。 ? contenteditable 规定是否允许用户编辑内容。 是 contextmenu 规定元素的上下文菜单。 是 dir 规定元素中内容的文本方向。 ? draggable 规定是否允许用户拖动元素。 是 dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么。 是 hidden 规定该元素是无关的。被隐藏的元素不会显示。 是 id 规定元素的唯一 ID。 ? lang 规定元素中内容的语言代码。 ? spellcheck 规定是否必须对元素进行拼写或语法检查。 是 style 规定元素的行内样式