@@　学习HTML5发现对我们开发工作者来说要方便很多，它现在还在发展阶段，在未来肯定会是主流。

　　我们知道HTML5目的是取代HTML4.01和XHTML1.0标准，他希望能够减少互联网富应用（RIA）对Flash等依赖，并且提供更多能够有效增强Web应用的API.

@@广义上：新一代开发Web富客户端应用程序整体解决方案

　　　　通过上表可以预计以后就是我们来编写HTML5

那么我们来看看HTML5的新特性：一、语义化标签

　　　　　　　　　　　　　　　 二、多媒体

　　　　　　　　　　　　　　    三、智能表单

　　　　　　　　　　　　　　　四、三维、图形与特效

　　　　　　　　　　　　　　　五、设备通用

　　　　　　　　　　　　　　　六、离线存储

　　　　　　　　　　　　　　   七、连接

　　　　　　　　　　　　　　　八、CSS3

常见的 DOCTYPE 声明

　　

HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

常用的语义标签列表
<article> 定义文章
<aside> 定义文章的侧边栏
<figure> 一组媒体对象以及文字
<figcaption> 定义 figure 的标题
<footer>定义页脚
<header>定义页眉
<hgroup>定义对网页标题的组合
<nav>定义导航
<section> 定义文档中的区段

被弃用的标签：<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>

　　　　　　　 <s>、<isindex>、<noframes>、 <frameset> 、<strike>、<tt>、<u>和<xmp>。

Html5shiv
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
Google的解决方案https://github.com/aFarkas/html5shiv/tree/master/dist 
Bootstrap的解决方案
http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js

音视频的发展史
早期：<embed>+<object>+文件

问题：不是所有浏览器都支持，而且embed不是标准。

现状：Realplay、window media、Quick Time 、Flash

问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。

HTML5认为浏览器应该原生支持音视频！

HTML5支持的格式
HTML5能在完全脱离插件的情况下播放音视频
但是不是所有格式都支持。

HTML5支持的视频格式：
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O

<vidio>的使用
1）<video src="文件地址" controls="controls"></ video>

2）< video src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</video>

3）<video controls="controls" >
<source src="happy.MP3" type="video/mp4" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</video >

Video的常见HTML属性

属性

值

描述

Autoplay

Autoplay

视频就绪自动播放

controls

controls

向用户显示播放控件

Width

Pixels(像素)

设置播放器宽度

Height

Pixels(像素)

设置播放器高度

Loop

Loop

播放完是否继续播放该视频，循环播放

Preload

Proload

是否等加载完再播放

Src

url

视频url地址

Poster

Imgurl

加载等待的画面图片

Autobuffer

Autobuffer

设置为浏览器缓冲方式，不设置autoply才有效

 

Video的API

方法

属性

事件

play()

currentSrc

play

pause()

currentTime 当前播放时间

pause

load()

videoWidth

progress
 

videoHeight

Error
 

Volume音量

  
 

playbackRate   播放倍数

  
 

Paused  是否暂停

  
 

Muted  是否静音

  

HTML5支持的音频格式

HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的

HTML5支持的音频格式：

Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S

<audio>的使用
<audio src="文件地址" controls="controls"></audio>

<audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ audio >

<audio controls="controls" >
<source src="happy.MP3" type=" audio /mpeg" >
<source src="happy.ogg" type=" audio /ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>

audio的常见HTML属性

属性

值

描述

autoplay

autoplay

如果出现该属性，则音频在就绪后马上播放。

controls

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

loop

loop

如果出现该属性，则每当音频结束时重新开始播放。

preload

preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src

url

要播放的音频的 URL。

新增表单元素

Input type

IE

Firefox

Opera

Chrome

Safari

datalist

No

No

9.5

No

No

keygen

No

No

10.5

3.0

No

output

No

No

9.5

No

No

新增表单类型

Input type

IE

Firefox

Opera

Chrome

Safari

email

No

4.0

9.0

10.0

No

url

No

4.0

9.0

10.0

No

number

No

No

9.0

7.0

No

range

No

No

9.0

4.0

4.0

Date pickers

No

No

9.0

10.0

No

search

No

4.0

11.0

10.0

No

color

No

No

11.0

No

No

新增表单属性

Input type

IE

Firefox

Opera

Chrome

Safari

autocomplete

8.0

3.5

9.5

3.0

4.0

autofocus

No

No

10.0

3.0

4.0

form

No

No

9.5

No

No

form overrides

No

No

10.5

No

No

height and width

8.0

3.5

9.5

3.0

4.0

list

No

No

9.5

No

No

min, max and step

No

No

9.5

3.0

No

multiple

No

3.5

No

3.0

4.0

novalidate

No

No

No

No

No

pattern

No

No

9.5

3.0

No

placeholder

No

No

No

3.0

3.0

required

No

No

9.5

3.0

No

Datalist标签
Datalist标签配合option标签实现的自动填充表单功能

<input type="search" name="move" list="search" >
<datalist id="search" >
<option label=“囧1” value=“泰囧”/>
<option label=“囧2” value=“人在囧途”/>
<option label=“囧3” value=“车在囧途”/>
</datalist>

Date类型
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

<input type=“date" name="move" >

便于排版的From表单
XHTML或者HTML4.01中from和其中的表单标签(input、textarea、select、button)必须嵌套使用
<form action="" method="post">
<input type="text" name="user" />
<select name="year">
<option value="1999"></option>
</select>
<textarea name="ext" ></textarea>
<button type="submit">提交</button>
</form>

HTML5中为了方便排版，可以使from中的表单标签脱离from的嵌套。方法:from指定ID，所有表单标签均添加from=id属性。

<form action="" method="post" id="register" ></form>
<input type="text" name="user" form="register" />
<select name="year" form="register" >
<option value="1999"></option>
</select>
<textarea name="ext" form="register" ></textarea>
<button type="submit" form="register" >提交</button>

新增找对象方法

document.querySelector(“选择器”);
document.querySelectorAll(“选择器”);

DOM.classList;//返回一个DOM对象的类名集合
DOM.classList.add(“class”);//添加类名
DOM.classList.remove(“class”);//删除类名
DOM.classList.toggle(“class”);//切换类名

HTML5自定义属性(data-*)
在HTML5中添加了data-*的方式来自定义属性,使用这样的结构可以进行数据存放,解决了早期自定义属性混乱无管理的现状。
一 、设置自定义属性
<div id="test" data-age="24"> Click Here </div>
DOM.dataset.age = 24;
自定义属性时注意：
我们在添加或读取属性的时候需要去掉前缀data-*，如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式
二、获取自定属性值
通过dataset对象，来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名.

应用程序缓存
Application Cache
1 正常编写代码
2 在html标签里面添加manifest属性指向一个文件
3 编写要缓存的文件
CACHE MANIFEST
# version 1.0.0

CACHE:
../demo.html
../style.css
../main.js

NETWORK:
*

本地文件API
获取文件 input#file.files/e.dataTransfer.files/files.slice()
文件对象 FileReader()
文件事件
Loadstart()
Loadend()
load() 文件读取完执行
progress() 文件读取中(loaded/total)
文件读取
readAsDataURL()
readAsText()
readAsBinaryString()
this.result

Web存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
setItem(key,value) getItem(key)
removeItem(key)

Web SQL
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

executeSql：这个方法用于执行实际的SQL查询

SVG
可缩放矢量图形（Scalable Vector Graphics)

Object:HTML4的标准标签，被所有较新的浏览器支持。但不允许使用脚本。
<object data="old_man.svg" type="image/svg+xml" width="500"></object>
Embed:所有主流的浏览器支持，并允许使用脚本,但是属于非标准
<embed src="old_man.svg" width="500" type="image/svg+xml"/>
<iframe src="old_man.svg" width="500"></iframe>
AJAX请求SVG文件!!!
优点:质量高\体积小\支持事件处理器
缺点:被渲染速度低\不适合开发游戏
应用场景:图片展示\谷歌地图

Canvas
画布:可被用来通过脚本JavaScript绘制图形

优点:被渲染速度快

缺点:依赖屏幕分辨率\不支持事件处理器

应用场景:游戏开发\图表展示数据

学习-HTML5的更多相关文章

  1. 大熊君学习html5系列之------Online && Offline（在线状态检测）

    一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...

  2. 大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  3. 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  4. 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  5. 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  6. 大熊君学习html5系列之------History API（SPA单页应用的必备）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  7. 学习HTML5必读之《HTML5设计原理》

    引子:很久前看过的一遍受益匪浅的文章,今天再次转过来,希望对学习HTML5的朋友有所帮助. 今天我想跟大家谈一谈HTML5的设计.主要分两个方面:一方面,当然了,就是HTML5.我可以站在这儿只讲HT ...

  8. 怎样学习HTML5?

    怎样学习HTML5?这个话题,问的人非常多,随便百度一下就能看到各种各样的回答.只是感觉每种回答都不给力.以下我给出一个自己理解的HTML5学习的路线图,依照这个路线图学习以后,一般的HTML5项目开 ...

  9. Web开发者应当开始学习HTML5的新功能

    据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...

  10. 零基础如何迅速学习HTML5？新手小白学习web前端H5自白！

    很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...

随机推荐

  1. ELK新手教程——pomelo + log4js + ELK（一）

    随着项目越来越庞大,日志的数量也随之增多,游戏上线后的日志量肯定更多了,所以对日志的收集.存储.查询就非常重要了,开源界第一日志分析系统ELK必不可少. ELK系统由Elasticsearch(分布式 ...

  2. Python: json模块实例详解

    ref:https://www.jianshu.com/p/e29611244810 https://www.cnblogs.com/qq78292959/p/3467937.html https:/ ...

  3. vue2.0 父子组件数据传递prop

    vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...

  4. OSB格式（REST）转化（XML到JSON，JSON到XML）

    OSB转换项目操作手册 新建一个OSB项目 建立以下文件夹,以便更规范的管理工程 一.XML转JSON 1.导入wsdl文件 1)右键wsdl文件夹,选择import选项 2)在弹出框中选择Servi ...

  5. inno setup 软件打包

    2017-05-26 软件开发完毕以后,要进行打包发布,有几款打包用的软件很常见:innosetup,nullsoft,installshield.本人今天终于把自己独立开发的呈现软件打了包.第一个版 ...

  6. 数据库设计和ER模型-------之数据库系统生存期（第二章）

    数据库设计 概念:开发人员利用开发环境表达用户要求.设计构造最优的数据模型,然后据此建立数据库以及其应用系统,这个过程称为数据库设计 数据库生存期 1968年首次提出“软件工程”的概念 概念:我们把数 ...

  7. Robot Operating System (ROS)学习笔记---创建简单的机器人模型smartcar

    搭建环境:XMWare  Ubuntu14.04  ROS(indigo) 转载自古月居  转载连接:http://www.guyuehome.com/243 一.创建硬件描述包 已创建catkin_ ...

  8. 8.代理ip使用

    我日常常用的两个代理: 一.风讯代理 http://www.gzkangyun.com/ 操作界面: 二.智连代理 综合感觉吧,还是智连好用一点,ip质量相对好一点,价格也便宜,不过一个ip基本上的存 ...

  9. openx -书表添加字段

    OpenX的版本是2.8.10.在数据表加完数据库之后,还不能读取和保存字段. OpenX使用scheme来 管理数据库表和字段, 修改数据库结构同时也要修改相关schema, 一个是etc/tabl ...

  10. PHPutf-8转码。

    $str = 'jiaoqing.': echo mb_convert_encoding($str,"gbk","utf-8");