HTML5+CSS3 控制浏览器行为

H5基础知识（⼀）

⼀、概述

HTML5 是html4.0 升级版

结构 Html5 、样式 css3 、⾏为: API 都有所增强

HTML5并不仅仅只是做为HTML标记语⾔的⼀个最新版本，更重要的是它制定了Web应⽤开发的⼀系列标准，成为第⼀个将Web做为应⽤开发平台的HTML语⾔。

HTML5定义了⼀系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联⽹应⽤，还提供了⼀些Javascript API，如地理定位、重⼒感应、硬件访问等，可以在浏览器内实现类原⽣应⽤，甚⾄结合Canvas我们可开发⽹页版游戏。

⼴义概念：HTML5代表浏览器端技术的⼀个发展阶段。在这个阶段，浏览器呈现技术得到了⼀个飞跃发展和⼴泛⽀持，它包括：HTML5，CSS3，Javascript，API在内的⼀套技术组合。 传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页⾯具有语义性，但是不具有通⽤性。

HTML5则是通过新增语义标签的形式来解决这个问题，例如

H5 经典⽹页布局:

常⽤新语义标签

表⽰媒介内容分组 与 ul > li 做个⽐较

表⽰标记 (带⽤“UI”，不怎么⽤)

表⽰进度 (带⽤“UI”，不怎么⽤)

表⽰⽇期

本质上新语义标签与

尽量避免全局使⽤header、footer、aside等语义标签。

兼容处理

(我们在测试ie 的兼容的时候，有⼀个叫做ietest 的软件，这个软件可以模拟ie6-ie11)

在不⽀持HTML5新标签的浏览器⾥，会将这些新的标签解析成⾏内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使⽤，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的⾃定义标签，于是我们的解决⽅案就是将HTML5的新标签全部通过document.createElement('tagName')来创建⼀遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采⽤的是通过检测IE浏览器的版本来加载三⽅的⼀个JS库来解决兼容问题。

HTML5+CSS3 FileReader接口

FileReader接口主要用来读取文件中的数据并放入内存。它相当于一个异步API，可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

FileReader接口提供了4个方法，其中3个用以读取文件，一个用来过程中断，详细介绍如下：

名称 描述

readAsBinaryString 将文件读取为二进制编码。

readAsTest 将文件读取为文本。

readAsDataURL 将文本读取为DataURL。

Abort 中断读取操作。

除了上述方法之外，还包含了一套完整的事件模型，用于捕获读取文件时的状态，详细介绍如下：

名称 描述

onabort 数据读取中断时触发。

onerror 数据读取错误时触发。

onloadstart 数据读取开始时触发。

onprogress 数据读取中。

onload 数据读取成功完成时触发。

onloadend 数据读取完成时触发。

示例：4-15 FileReader.html

fileReader使用

读取文本文件：

上述代码中，为“读取”按钮添加单击事件，实现文本文件内容的读取。首先，单击“选择”按钮，在弹出对话框中，选择要读取的文件。然后，单击“读取”按钮，读取并显示文件内容。

单击按钮

单击按钮 选择文件 显示结果 单击按钮

显示信息

25款不得不说的html5+css3动画效果

这25款动画效果分别使⽤了html5 svg、css3 transform、css3 transition、css3 animation等制作⽽成。1、9种梦幻般的html5+css3 tooltip⿏标提⽰插件效果

这个tooltip⿏标提⽰插件将带您离开黄底⿊字的html tooltip原始时代。该插件共9种效果，使⽤html5 svg和css3 transform属性完成。该tooltip带图⽚带动画，效果⼀流。

>>

2、19种基于css3的超华丽模态窗⼝效果

这是⼀款集19种模态窗⼝效果于⼀体的css3插件。使⽤了css3 transition 和css3 animation属性。某些模态窗⼝中还加⼊了3d透视效果。>>

3、在桌⾯和移动设备上展⽰响应式设计

这个响应式设计展⽰了在不同设备的显⽰屏上⽹页的显⽰效果，这种响应式设计保证了在所有显⽰屏上获得最佳显⽰效果。>>

4、 html5 svg打开圣诞礼盒和下雪动画效果

⼀款很炫的html5 svg打开圣诞礼盒和下雪动画效果。点击礼盒后会飞出许多icon礼物，之后会有雪花从屏幕上⽅飘落。>>

5、html5 css3为移动设备设计的可⾃由伸缩的搜索框代码

这是⼀个为移动设备设计的可⾃由伸缩的html5搜索框代码，使⽤css3 transition属性和少量的javascript完成。>>

6、 css3 transitions和伪元素制作4种超酷⿏标经过hover动画效果

⼀款使⽤css3 transitions和伪元素制作的4种⿏标经过hover动画效果，4种⿏标经过hover动画效果分别是：滴⽔效果，圆⼼放⼤，旋转放⼤和飞翔的独眼怪。>>

7、13款html5 svg页⾯loading加载动画效果

13款使⽤html5 svg技术打造的页⾯loading加载动画效果。页⾯的3d效果使⽤了css3动画技术。整个loading加载动画效果时尚新颖。

.

.

《HTML5+CSS3 网站设计基础教程》课程教学大纲

（课程英文名称）

课程编号：201601210011

学 分：5 学分

学 时：76 学时 （其中：讲课学时：47 学时 上机学时：26 学时）

先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、 JavaScript 网页特效

适用专业：信息技术及其计算机相关专业开课部门：计算机系

一、课程的性质与目标

《HTML5+CSS3 网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课程的学习， 学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路

课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发 .

.

展所需的能力和终身学习的能力，实现一站式教学理念。

课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。

三、教学条件要求

开发工具：Dreamweaver CS6

四、课程的主要内容及基本要求

第一章 初识 HTML5

学习单元 初识 HTML5 学时 10 学时

学习目标 1. 了解 HTML5 发展历程

2. 理解 HTML5 浏览器支持情况

3. 熟悉 HTML5 基本语法,掌握 HTML5 语法新特性。

4. 掌握 HTML5 相关标记及属性，能够制作简单的网页页面。