学习-HTML5

2021-11-25 13:22:47

　　　@@　学习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

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标签实现的自动填充表单功能

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

便于排版的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属性。

新增找对象方法

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绘制图形

优点:被渲染速度快

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

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

码农公寓

相关文章