html5和css3的应用(在线课专用-高洛峰).pdf-资料库

HTML5 与 CSS3 的应用高洛峰 ( 草稿 – PHPCMS 在线课专用版 ) 2014/9 HTML5 与 CSS3 的应用 ................................................................................................................ 1 1 现在是用 HTML5 的时候 ................................................................................................... 2 1.1 HTML4+CSS2 与 HTML5+CSS3 区别..................................................................... 3 2 HTML5 语法的改变 ............................................................................................................. 3 2.1 HTML5 中的标记方法 .............................................................................................. 3 2.2 HTML5 做到了与之前版本的兼容........................................................................... 4 2.3 HTML5 语法改变的简单示例 .................................................................................. 5 3 HTML5 新增的元素和废除的元素 ..................................................................................... 5 3.1 新增的结构元素 ......................................................................................................... 5 3.2 HTML5 表单增加的新特性 ...................................................................................... 8 3.3 新增多媒体播放元素 ............................................................................................... 11 3.4 新增的其他元素 ....................................................................................................... 12 3.5 废除的元素 ............................................................................................................... 13 4 HTML5 新增的属性和废除的属性 ................................................................................... 13 5 HTML5 的高级功能介绍 ................................................................................................... 15 6 CSS3 概述 ........................................................................................................................... 17 6.1 CSS3 在选择器上面的支持 ..................................................................................... 17 6.2 CSS3 在样式上的支持 ............................................................................................. 17 6.3 CSS3 对于动画的支持 ............................................................................................. 17 6.4 在开发中该如何去用 CSS3 .................................................................................... 18 7 CSS3 中的样式选择器 ........................................................................................................ 18 7.1 基本选择器 .............................................................................................................. 18 7.2 多元素的组合选择器 .............................................................................................. 19 7.3 属性选择器 ............................................................................................................... 19 7.4 结构性伪类选择器 ................................................................................................... 20 8 CSS3 的样式属性 ................................................................................................................ 22 8.1 使用 CSS3 属性前的准备 ........................................................................................ 22 8.2 边框属性 ................................................................................................................... 23 8.3 背景属性 ................................................................................................................... 24 8.4 文本属性 ................................................................................................................... 25 8.5 用户界面属性 ........................................................................................................... 25 8.6 动画属性 ................................................................................................................... 26 8.7 多列布局属性 ........................................................................................................... 26 8.8 渐变属性 ................................................................................................................... 27 8.9 透明属性 ................................................................................................................... 27 8.10 旋转属性 ................................................................................................................. 28

8.11 服务器端字体属性 ................................................................................................. 28 9 使用 HTML5 中新增元素来构建网页 .............................................................................. 28 10 LESS CSS 框架简介 ........................................................................................................ 33 虽然我们现在已经普遍使用了 HTML4 和 CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。如今，HTML5 和 CSS3 的技术和应用环境已经日趋成熟，它们将书写 Web 前端领域的新历史，HTML5 将成为新一代的 Web 技术标准，必定会改变整个 Web 应用领域的游戏规则，它在给新的 Web 应用带来无限可能性的同时，还能带来更快、更好、更炫的用户体验。 CSS3 也将为 Web 开发带来革命性的影响，很多以前需要 JavaScript 和 Ajax 才能实现的复杂效果（如背景、圆角、3D 动画，等等），现在使用 CSS3 就能简单地实现，极大地提高了程序的开发效率。HTML5 和 CSS3 已经成为全球各大互联网巨头必争之地， Microsoft、Google、Apple、Mozilla、Opera 等浏览器厂商对它们的支持犹如一场竞赛，似乎已经成为衡量它们的浏览器性能优劣的一个重要标准。 1 现在是用 HTML5 的时候近几年来，HTML5 的大潮似乎是势不可挡。在桌面应用环境中，各大浏览器纷纷地朝着支持 HTML5、结合 HTML5 的方向迈进着；在移动平台上，HTML5 已经成为了 iOS、 Windows Phone 和 Android 移动互联网的唯一选择。放眼望去，仿佛四野皆充满着 HTML5 千秋万代一统江湖的高呼。 HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG（Web Hypertext Application Technology Working Group）致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。HTML5 刚发布时由于各浏览器之间的标准不统一，开发者的时间都浪费在解决 Web 浏览器之间的兼容性上。但由于 W3C 和 WHATWG 对 HTML5 新版本的制定，以及近年来对 HTML5 的使用，再加上各大浏览器鼎力支持，已经有非常丰富的兼容性解决方案，HTML5 在老版本的浏览器上也可以正常运行，正是因为保障了兼容性才能让人毫不犹豫的用 HTML5 开发网站。HTML5 的目标是将 Web 带入一个成熟的应用平台，在 HTML5 平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。另外，HTML5 内部并没有封装什么很复杂的、不切实际的功能，而是封装了简单实用的功能，HTML5 内部功能不是革命性的而是发展性的，并不代表 HTML4 创建出来的网站必须全部要重建，只会要求各 Web 浏览器今后能正常运行用 HTML5 开发出来的功能。虽然 HTML5 还有一些不足，但 HTML5 应用已经是大势所趋，HTML5 已经开始提供各种各样 Web 应用上的解决方案。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。IE 9 将支持某些 HTML5 特性，IE10 将全面支持 HTML5。IE8 及以下 IE 版本对 HTML5 标签的支持是有限的，我们可以通过在网页中添加脚本的方式来解决目前 IE 浏览器对 HTML5 支持的问题。让 IE（包括 IE6）支持 HTML5 元素，我们需要在 HTML 头部添加以下 JavaScript， Opera，FireFox 等其他非 IE 浏览器就会忽视这段代码，也不会存在 http 请求。

上面这段代码仅会在 IE 浏览器下运行，还有一点需要注意，在页面中调用 html5.js 文件必须添加在页面的 head 元素内，因为 IE 浏览器必须在元素解析前知道这个元素，所以这个 js 文件不能在页面底部调用。这个 html5 的 js 文件如果觉得这样会影响你的网页打开速度，你可以把 html5 的 js 文件直接下载下来让后上传到自己的服务器单独调用。 1.1 HTML4+CSS2 与 HTML5+CSS3 区别互联网发展越来越快，有些东西总会要被取代，HTML4+CSS2 将渐渐退出舞台，而 HTML5+CSS3 将取而代之，HTML5 规范是 2004 年新成立的 WHATWG 工作组创立的；2006 年 W3C 加入 HTML，并于 2008 年发布了 HTML5 工作草案，2009 年，XHTML2 工作组停运；2010 年 HTML5 开始解决实际问题，渐渐的各大浏览器厂家开始升自己的产品以支持 HTML5+CSS3，HTML5 得到了持续的完善，2012 年 HTML5 完成规范编写工作。HTML5 以 HTML4 为基础，对 HTML4 进行了大量的修改。学习 HTML5 则需要掌握 HTML5 与 HTML4 在基本语法上有什么区别；了解在 HTML5 中新增了哪些元素和属性，删除了哪些 HTML4 中的元素和属性，为什么要删除这些元素，用什么元素或方法来取代这些被删除的元素和属性；还需要掌握什么是全局属性； 2 HTML5 语法的改变 HTML5 的一个很大的目标就是提高浏览器之间的兼容性，需要有一个统一的标准，因些 HTML5 重新定义了一套在现有 HTML4 基础上修改而来的语法，使它运行在知浏览器都能够符合这个通用标准。 2.1 HTML5 中的标记方法 HTML5 的文件扩展符号内容类型(ContentType)保持不变的，扩展符仍然为“.html” 或“.htm”，内容类型仍然为“text/html”。 1. HTML 5 的 DTD 的声明在编写 HTML5 文档时，要求指定文档类型，以确保浏览器能在 HTML5 的标准模式下进行渲染。在 HTML5 中刻意不使用版本声明，一份文档将会适用于所有版本的 HTML，非常简便， HTML5 中的 DTD 声明方法如下：

在 HTML5 中不区分大小写，引号不区分是单引号还是双引号。 2. 设置页面字符编码在 HTML5 中可以使用对元素直接追加 charset 属性的方式来指定字符编码，如下所示：从 HTML5 开始，对于文件的字符编码推荐使用 UTF-8。 2.2 HTML5 做到了与之前版本的兼容为了保证 HTML5 能与之前的 HTML 版本达到最大的兼容， HTML5 对一些元素标记的省略、boolean 值的属性，以及引号的省略这几方面进行了兼顾，确保与之前版本的 HTML 达到兼容。 1. 可以省略标记的元素元素的标记分为三种情况：不允许写结束标记的元素，可以省略结束标记的元素和开始标记结结束标记都可省略三种类型。不允许写结束标记的元素是指不允许使用开始标记和结束标记将元素括起来的形式，例如，换行标记正确的书写方式为“
”，而 “
…
”的书写就是错误的。可以省略全部标记的元素是指该元素可以完全被省略，当然被省略的标记还是以隐式的方式存在的，例如“”元素省略不写时还是存在的。针对这三种情况的列举清单如表 1-1 所示：表 1-1 三种情况列举清单不允许写结束标记的可以省略结束标记的可以省略全部标记的 br、hr、img、input、link、 Li、 dt、 dd、 p、 option、 thead、 Html、head、 body、 colgroup、 meta、base、param、area、 tbody、 tr、 td、 th、 rt、 rp、 tbody col、 command、 embed、 optgroup、 colgroup、 tfoot keygen、source、 track、 wbr 2. 具有 boolean 值的属性在 html 中有一些元素的属性，当只写属性名称而不指定属性值时，表求属性值为 true, 如果设置该属性值为 false，则不使用该属性即可。另外，要想将属性值设定 true 时，也可以将属性名设定为属性值，或将空字符串设定为属性值。例如 input 元素中的 disabled 与 readonly 就是这样的属性。 3. 引号使用

在 html 中使用属性时，属性值可以使用双引号，也可以使用单引号括起来，在 HTML5 中做了一些改进，当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性两边的引号是可以省略的。 2.3 HTML5 语法改变的简单示例在这个示例中，将前面介绍的几个 HTML5 应用方法集成到本例中，另外，没有特别说明使用什么浏览器，本章默认使用的都是 Firefox 4 浏览器。代码演示结果如图 3-1 所示： 3 HTML5 新增的元素和废除的元素 HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似

和标签，但有一定含义，例如

（网站导航块）和

资料库

html5和css3的应用(在线课专用-高洛峰).pdf

相关推荐

开发技术

热门标签

最新资料