揭秘HTML5和CSS3

网站标准的简单历史

? WHA TWG?

– Web Hypertext Application Technology Working Group

? W3C

– Word Wide Web Consortium HTML 发展历史

支持HTML5的浏览器

? Opera 9.5+

– Cross-document messaging – Server-sent events – Web Forms 2.0

– Canvas and video –

–

?

Safari 3.1+

1998 2000 2002 2004 2007

HTML4.0 XHTML1 XHTML2 WHATG HTML5

–

–Offline data storage API

–Webkit(Iphone/Chrome/Android/

Nokia s60/Palm's WebOS)

?FireFox 3.1+

–offline storage and canvas

–Geolocation/Web Workers/

ContentEditable

–Gecko(more HTML5 APIS)

–

?Internet Explorer 8.0+

–embed element and

contentEditable attribute

–cross-document messaging HTML5技术概览

?HTML5新增和移除的元素

?HTML5基本布局

?HTML5对表单的支持

?HTML5 DOM变化

?HTML5的Javascript APIs

–Canvas

–Video/Audio

–Drag&Drop

–Geolocation

–Application Cache

–Database Storage

–X-Document Messaging

HTML5新增的元素

?多媒体及交互式元素

–video, audio...

–details, menu, command...

?结构元素

–header, footer, section, article, nav...

?块级语义及行内元素

–aside, figure, dialog...

–time, meter, mark, progress...

?表单控件

–email, url, datetime, number, range, color...

?HTML5新增的属性

–contenteditable, contextmenu, data-*, hidden, item, itemprop, subject, role, aria-*, spellcheck, draggable, irrelevant, template, placeholder, autofocus, required,

async, manifest...

?HTML5新增的事件

–onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage,

onmousewheel, onresize, onscroll, onunload...

HTML5移除的元素

?移除的元素

–font, center, strike, big, s, u, acronym, applet, dir...

?移除的属性

–如link和a元素的rev属性, link元素的target属性, td的scope属性，script 元素的language属性, body元素的alink，link，text和vlink属性...

HTML5基本布局

HTML5对表单的支持

?新的控件类型

–

type="url|email|date|tel|search|datetime|date|month|week|datetime-local|number|r

ange|color">, ?文件上传控件

–

?重复的模型

–add, remove, move-up, move-down

?内建表单验证

–, ?XML Submission

–application/x-www-form+xml

HTML5 DOM变化

?getElementsByClassName

?Selector API

–document.querySelector()

–document.querySelectorAll() ?Traversal API

–.nextElementSibling

–.previousElementSibling

–.firstElementChild

–.lastElementChild

–.children

HTML5的Javascript APIs

Video&Audio

?

?

Download song

Canvas

? 是一个新的HTML 元素，这个元素可以被Script 语言(通常是JavaScript)用

来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。

? var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");

context.fillStyle="rgb(0,0,200)"; context.fillRect(10, 10, 50, 50); ? context.save();

context.restore();

context.scale(x, y); context.rotate(angle); context.translate(x, y);

......

Drag&Drop

? 拖拽事件: dragstart, dragend, dragenter, dragleave, dragover, drag, drop ?

function dragstartHandler(e){

alert('dragstart');

Offline Applications

History API

Video&Audio

Drag&Drop

Undo

Canvas

Editable

X-Domain

Storage

Geolocation

Local Database

}

Web Workers

?让Javascript多线程，可以在后台做很多工作而不会阻断当前的浏览器?var w = new Worker('worker.js');

w.onmessage = function(event){

alert(event.data);

}

w.postMessage('run');

Web Workers

?//worker.js

?importScripts('xhr.js', 'db.js');

?onmessage = function(event){

if(event.data == 'run'){

run();

}

}

?function run(){

var data = doCrazyNumberCrunch();

postMessage(data);

}

Geolocation

navigator

.geolocation

.getCurrentPosition(

success,

error);

Application Cache

? ?rubiks.manifest

–CACHE MANIFEST

/demo/rubiks/style.css

/demo/rubiks/jquery.min.js

/demo/rubiks/rubiks.js

#version 15

Storage

?database storage(客户端数据库SQLite)

?WebKit中已经实现

?var database = openDatabase('db', '1.0');

?database.executeSql('SELECT * FROM test', function(result){

database.executeSql('DROP TABLE test');

});

?key/val存储()

–sessionStorage(window based)

–localStorage(domain based)

?WebKit/IE8/Firefox 3.5已经实现

?.setItem(key, value)

?.getItem(key)

?

Cross-Document Messaging

?.postMessage(message, targetOrigin)

?.onMessage(event)

–event.data == message

?document.getElementById('iframe').contentWindow.postMessage('my message', 'https://www.wendangku.net/doc/7b9898447.html,');

?window.addEventListener('message',

function(e){

if(e.origion !== 'https://www.wendangku.net/doc/7b9898447.html,'){

return;

}

alert(e.origion+' said: '+e.data);

}, false);

CSS3

CSS 的发展历史

支持CSS3的浏览器

1996

1998 2001

CSS1.0 CSS2.0 CSS3.0

Cascading Style Sheets

CSS3技术概况

?选择器

?布局

?样式

?动画

?其它

CSS3-选择器

?属性选择器

–a[href$='.pdf'], a[href^='mailto'], a[class*=‘item’]

?兄弟选择器

–Div~img

?伪类选择器

–:nth-child(n), :nth-last-child(n), :last-child, :checked, :empty, :only-child, :nth-of-type(odd), :nth-of-type(even)

CSS3-样式

–border-radius: 3px

–-moz-border-radius-topleft

–-webkit-border-top-left-radius

?阴影

–box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)

–text-shadow: 2px 2px #444, 3px 3px #555

?自定义字体

–@font-face{

font-family: Adam, src:url(adam.ttf);

}

p{font-family:Adam, serif;}

?文本换行

–word-wrap: normal|break-word

CSS3-样式

?边框背景

–border-image: url(border.png) 27 27 27 27 round round;

?渐变

–background: -moz-linear-gradient(20%, center, 30%, center, from(blue), to(yellow)) no-repeat;

?背景

–background-size: 100px 50px;

–background-origin: content-box|border-box|padding-box;

–background-clip: border-box|padding-box

?透明

–opacity: 0.5;

?RGBA

–color: rgba(0, 255, 0, 0.5);

?HSL/A

–color: hsl(240, 50%, 50%); hsla(240, 50%, 50%, 0.5)

?调整元素尺寸

–resize: both|horizontal|vertical

CSS3-布局

?盒模型

–box-sizing: content-box|border-box;

?网格模型

–column-count: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black;

?CSS Table Display

–#content{display: table;}

#main{display: table-cell; width:620px; padding-right: 22px;}

#side{display: table-cell; width: 300px;}

–outline-offset

CSS3-动画

?变换

–transform: rotate(30deg);

–transform: scale(0.5, 2.0);

–transform: skew(-30deg);

–transform: translate(30px, 0);

?过渡

–transition: all 1s ease-out ;

?动画

–animation: greenPulse infinite ease-in-out 3s;

CSS3-其它

?媒体查询

–.entry{color: red;}

@media all and {min-width: 100em}{

.entry{color: black;}

}

?语音支持

–voice-volume, voice-balance, voice-family

浏览器前缀

?Firefox: -moz-box-shadow

?Safari: -webkit-box-shadow

?Opera: -o-box-shadow

?IE: -ms-box-shadow

CSS3应用原则

?优雅降级

?对于不支持CSS3的浏览器可以使用Javascript来实现

–如ie7.js, ie8.js对CSS选择符的优化

–如对于不支持:hover的ie6使用JS

?在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术

揭秘HTML5和CSS3

网站标准的简单历史

?WHATWG?

–Web Hypertext Application Technology Working Group ?W3C

–Word Wide Web Consortium

HTML发展历史

支持HTML5的浏览器

?Opera 9.5+

–Cross-document messaging

–Server-sent events

–Web Forms 2.0

–Canvas and video

?Safari 3.1+

–

–Offline data storage API

–Webkit(Iphone/Chrome/Android/

Nokia s60/Palm's WebOS)

?FireFox 3.1+

–offline storage and canvas

–Geolocation/Web Workers/

ContentEditable

–Gecko(more HTML5 APIS)

?Internet Explorer 8.0+

–embed element and

contentEditable attribute –cross-document messaging

HTML5技术概览

?HTML5新增和移除的元素

?HTML5基本布局

?HTML5对表单的支持

?HTML5 DOM变化

?HTML5的Javascript APIs

–Canvas

–Video/Audio

–Drag&Drop

–Geolocation

–Application Cache

–Database Storage

–X-Document Messaging

HTML5新增的元素

?多媒体及交互式元素

–video, audio...

–details, menu, command...

?结构元素

–header, footer, section, article, nav...

?块级语义及行内元素

–aside, figure, dialog...

–time, meter, mark, progress...

?表单控件

–email, url, datetime, number, range, color...

?HTML5新增的属性

–contenteditable, contextmenu, data-*, hidden, item,

itemprop, subject, role, aria-*, spellcheck, draggable,

irrelevant, template, placeholder, autofocus, required,

async, manifest...

?HTML5新增的事件

–onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,

onerror, onmessage, onmousewheel, onresize, onscroll,

onunload...

HTML5移除的元素

?移除的元素

–font, center, strike, big, s, u, acronym, applet, dir...

?移除的属性

–如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink，

link，text和vlink属性...

HTML5基本布局

HTML5对表单的支持

?新的控件类型

–

type="url|email|date|tel|search|datetime|date|month|week|

datetime-local|number|range|color">,

data="http://domain/getoptions">

?文件上传控件

– ?重复的模型

–add, remove, move-up, move-down

?内建表单验证

–,

min=10 max=100 />

?XML Submission

–application/x-www-form+xml

HTML5基础入门教程(小编搜集辛苦啊,必看)

HTML5教程 什么是HTML5？ HTML5 将成为HTML、XHTML 以及HTML DOM 的新标准。 HTML 的上一个版本诞生于1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。 你是不是多少有了解一点，但是你却对这个不精啊！可以进群交流，⑤①④①⑥⑦⑥⑦⑧。HTML5 是如何起步的？ HTML5 是W3C 与WHATWG 合作的结果。 编者注：W3C 指World Wide Web Consortium，万维网联盟。 编者注：WHATWG 指Web Hypertext Application Technology Working Group。WHATWG 致力于web 表单和应用程序，而W3C 专注于XHTML 2.0。在2006 年，双方决定进行合作，来创建一个新版本的HTML。 为HTML5 建立的一些规则： ?新特性应该基于HTML、CSS、DOM 以及JavaScript。 ?减少对外部插件的需求（比如Flash） ?更优秀的错误处理 ?更多取代脚本的标记 ?HTML5 应该独立于设备 ?开发进程应对公众透明 新特性 HTML5 中的一些有趣的新特性： ?用于绘画的canvas 元素

?用于媒介回放的video 和audio 元素 ?对本地离线存储的更好的支持 ?新的特殊内容元素，比如article、footer、header、nav、section ?新的表单控件，比如calendar、date、time、email、url、search 浏览器支持 最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer 9 将支持某些HTML5 特性。 HTML 5 视频 许多时髦的网站都提供视频。HTML5 提供了展示视频的标准。 Web 上的视频 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过video 元素来包含视频的标准方法。 视频格式 当前，video 元素支持两种视频格式： Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg X X X MPEG 4 X X Ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件 MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件

4.《HTML5+CSS3从入门到精通》自测练习(修正版)

《HTML5+CSS3从入门到精通》自测练习 （修正版） 一、单选题(共44题，每题1分，共44分) 1.支持input类型的输入框的消息提示的属性是[1.0] A.detail B.placeholder C.pattern D.required 标准答案：B 试题分析：P101 2.context.arc（）方法用于绘制圆形，一般其中的第几个参数决定圆形的半径[1.0] A. 1 B. 2 C. 3 D. 4 标准答案：C 试题分析：P114 3.下列哪项不是HTML5的新特性[1.0] A.兼容性 B.合理性 C.安全性 D.有插件 标准答案：D 试题分析：p1-2 4.下列不是html5主要功能的是[1.0] A.Cross-document B.Vector Scalable Graphics C.MathML D.Web Origin Concept 标准答案：B 试题分析：p4 5.在HTML5中可以省略全部标记的元素是________[1.0] A.option B.body C.hr D.img 标准答案：B 试题分析：P39 6.不支持Web Storage的浏览器的是[1.0] A.IE7以上版本 B.Firefox3.0以上版本 C.Safari 4.0以上版本 D.Opera 10.5以上版本 标准答案：A 试题分析：P178 7.audio元素中src属性的作用是________。[1.0] A.提供播放、暂停和音量控件 B.循环播放 C.制定要播放音频的URL D.插入一段替换内容 标准答案：C 试题分析：P160 8.以下哪项不属于Html5中input标签新增的输入类型________。[1.0] A.email B.url C.number D.radio 标准答案：D 试题分析：P80-83 9.outline属性可以定义块元素的外轮廓线，以下错误的是———[1.0] A.outline-color定义轮廓边框颜色 B.outline-style定义轮廓边框轮廓 C.outline-width定义轮廓边框宽度 D.outline-offset定义轮廓边框位置 标准答案：D 试题分析：509 10.基本CSS代码书写规范不正确的是————[1.0] A.尽量不缩写

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

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

二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5

第二章HTML5页面元素及属性

第四章CSS3选择器

e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用

html5教程视频教程网盘下载

html5教程入门视频网盘下载 学习HTML、CSS基础知识，实现PC端静态页面制作（例如京东商城），响应式网页布局的制作（微软中国官网）、及WebApp页面布局（淘宝、美团等）。 html5前端人才已成为IT职场的紧缺型人才，如何自学html5？如何短时间内迅速提升html5开发能力？千锋教育html5教程入门视频网盘下载（https://www.wendangku.net/doc/7b9898447.html,/video/html5_download.html），助力大家成为企业不可多得的贤才。 实现这些需要的知识有 1、学习HTML基本语法：双标签、单标签语法结构。 2、常用标签：标题标签、段落标签、布局标签、表格、列表、标签标签。 3、学习CSS基本语法：选择器声明。 4、学习CSS的三种样式表：内联、内部、外部 5、学习CSS的各种常用选择器 6、学习CSS的选择器、样式表的优先级和权重问题。 7、学习CSS的核心属性及属性值 8、学习CSS的元素类型的转换

9、学习CSS的定位锚地的应用 10、学习CSS中的图片整合技术的应用 11、学习CSS中常见的浏览器的兼容及解决方法 12、学习HTML5新增元素及属性 13、学习CSS3新增选择器的应用 14、学习CSS3的2D、3D、关键帧动画的相关应用 15、学习CSS3中弹性盒的应用 16、学习CSS3中媒体查询响应式的设计应用 学习JavaScript和jQuery及掌握一门后台程序语言的简单基础和一个数据库，实现PC端项目交互开发（做一个电商类型的网站开发） 需要的知识有 1、学习JavaScript的基本语法 2、学习JavaScript的循环语句 3、学习JavaScript的函数与数组 4、学习JavaScript的String和Data 5、学习JavaScript的BOM与DOM 6、学习JavaScript的相关事件 7、学习JavaScript的拖拽效果 8、学习JavaScript的cookie存储 9、学习JavaScript的正则表达式 10、学习JavaScript的Ajax的应用 11、学习JavaScript的面相对象基础

HTML5+CSS3从入门到精通自测练习

《HTML5+CSS3从入门到精通》自测练习（修 正版） 一、单选题(共44题，每题1分，共44分) 1.支持input类型的输入框的消息提示的属性是[] A.detail B.placeholder C.pattern D.required 标准答案：B 试题分析：P101 2.（）方法用于绘制圆形，一般其中的第几个参数决定圆形的半径[] A.1 B.2 C.3 D.4 标准答案：C 试题分析：P114 3.下列哪项不是HTML5的新特性[] A.兼容性 B.合理性 C.安全性 D.有插件 标准答案：D 试题分析：p1-2 4.下列不是html5主要功能的是[] A.Cross-document B.Vector Scalable Graphics C.MathML D.Web Origin Concept 标准答案：B 试题分析：p4 5.在HTML5中可以省略全部标记的元素是________[] A.option B.body C.hr D.img 标准答案：B 试题分析：P39 6.不支持Web Storage的浏览器的是[] A.IE7以上版本 B.以上版本 C.Safari 以上版本 D.Opera 以上版本 标准答案：A

试题分析：P178 7.audio元素中src属性的作用是________。[] A.提供播放、暂停和音量控件 B.循环播放 C.制定要播放音频的URL D.插入一段替换内容 标准答案：C 试题分析：P160 8.以下哪项不属于Html5中input标签新增的输入类型________。[] A.email B.url C.number D.radio 标准答案：D 试题分析：P80-83 9.outline属性可以定义块元素的外轮廓线，以下错误的是———[] A.outline-color定义轮廓边框颜色 B.outline-style定义轮廓边框轮廓 C.outline-width定义轮廓边框宽度 D.outline-offset定义轮廓边框位置 标准答案：D 试题分析：50910.基本CSS代码书写规范不正确的是————[] A.尽量不缩写 B.全部小写，且每一项CSS定义写成一行 C.ID必须是唯一的，且用在结构的定义中 D.CSS可以尽量使用expression 标准答案：D 试题分析：288 11.1982年，（）创造了HTML语言。[] A.爱因斯坦 B.蒂姆·伯纳斯·李 C.比尔·盖茨 D.埃隆·马斯克 标准答案：B 试题分析：P22 12.在XHTML文档中，（）是一个必要的元素，他决定了网页文档的显示规则。[] A.body B.style C.header D.DOCTYPE 标准答案：D 试题分析：P35

Html5程序设计基础教程

第1章HTML 5概述 一、选择题 1．A 2．D 3．C 4．C 二、填空题 1．HyperText Markup Language 2． 3．HTML 4．UTF-8 5．