HTML5基础

 

HTML5基础

1.前言介绍
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML工作团队。

定义：

（1）如果从狭义的角度来讲，HTML5就是HTML4的新一代产品。

（2）而如果从广义的角度来讲，则是新一代的富客户端解决方案

2.发展史

（1）HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5 支持。

（2）2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

（3）2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

（4）本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg`也进行了改进，性能得到进一步提升。

（5）本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg`也进行了改进，性能得到进一步提升。

（6）目前在开发的领域，大家说的H5开发其实指的是HTML5 + CSS3 + JavaScript等技术。

在目前的软件开发生态链中，H5的技术充斥着很多的领域。无论是网站开发、移动端开发、软件开发、游戏等等。

3.兼容
（1）支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

（2）需要注意的是，虽然很多浏览器目前已经能够支持HTML5，但是显示效果仍旧存在差异性。这时，我们如果从样式的角度出发，可以采用下面的几种css方案。
css reset
Normalize.css
CSS hack
第三方插件

4.语义化标签
section元素 表示页面中的一个内容区块

article元素 表示一块与上下文无关的独立的内容

article元素 表示一块与上下文无关的独立的内容

aside元素 是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域

header元素 表示页面中一个内容区块或整个页面的标题

footer元素 表示页面中一个内容区块或整个页面的脚注

nav元素 表示页面中导航链接部分

figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

main元素 表示页面中的主要的内容(ie不兼容)

5.智能表单
（1）新增控件
datalist
定义输入域的选项列表
  datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输入域，需要把输入域的list属性引用datalist的id。option元素一定要设置value属性

<form action="#">
<input list="list" name="input">
<datalist id="list">
<option value="1">
<option value="2">
<option value="3">
</datalist>
</form>

 

注意：IE9-浏览器及safari浏览器不支持

keygen
定义密钥对生成器，用于生成密钥
keygen规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器

output
用于显示计算的结果
这是一个语义化标签，定义不同类型的输出，比如脚本的输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

注意：IE不支持

progress
progress元素用来标示任务的进度或进程(常用于表示过程)
注意：IE9-浏览器及safari浏览器不支持

相关属性
max  规定任务一共需要多少工作
value  规定已经完成多少工作
如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果
例如：
如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果

<progress></progress>
点击开始下载
<input id="btn" type="button" value="开始下载">
下载进度：<progress id="test" value="0" max="100"></progress>

<script>
var oTimer;
btn.onclick = function(){
if(oTimer){
return;
}
oTimer = setInterval(function(){
test.value++;
if(test.value >= test.max){
clearInterval(oTimer);
}
},50); 
}
</script>

meter
meter元素用于显示剩余容量或剩余库存(常用于表示状态)
注意：IE浏览器及safari浏览器不支持
相关属性
form  规定meter元素所属的一个或多个表单
high  规定被视作高的值的范围
low  规定被视作低的值的范围
max  规定范围的最大值
min  规定范围的最小值
optimum  规定度量的最优值
****  规定度量的当前值(必需)
注意：min 小于 low 小于 high 小于 max

 

 

传统控件
input：传统类型10个
button
定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
type="button"的input输入类型定义可点击的按钮，但没有任何行为

checkbox：定义复选框
允许用户在给定数目的选择中选择一个或多个选项。同一组的按钮，name取值一定要一致

[注意]checkbox类型的input元素无法设置padding和border(除IE10-浏览器以外)
file：定义输入字段和 "浏览"按钮，供文件上传

hidden：定义隐藏的输入字段，定义隐藏输入类型用于在表单中增加对用户不可见，但需要提交的额外数据
[注意]disabled属性无法与type="hidden"的input元素一起使用

image：定义图像形式的提交按钮
type="image"的input输入类型定义图像形式的提交按钮，该类型可以设置width、height、src、alt这四个属性
用图片作为提交按钮会一起发送点击在图片上的x和y坐标，这样可以与服务器端图片地图结合使用，如果图片有name属性，也会随坐标发送

password：密码输入框
它与文本输入框几乎一模一样，功能上唯一的不同的字母输入后会被隐藏，一般是一连串的点
Tip:显示密码和隐藏密码可以通过更改type值来实现

radio:定义单选按钮
允许用户从给定数目的选择中选一个选项。同一组按钮，name值一定要一致
[注意]radio类型的input元素无法设置padding和border(除IE10-浏览器以外)

reset:定义重置按钮。重置按钮会清除表单中的所有数据

submit:定义提交按钮。提交按钮会把表单数据发送到服务器

text:定义单行的输入字段，用户可在其中输入文本
默认的输入控件，一个单行的输入框

传统属性:
alt:alt属性为图像输入规定替代文本，功能类似于image元素的alt属性，为用户由于某些原因无法查看图像时提供备选信息
[注意]alt属性只能与type="image"的input元素配合使用

size:
size属性对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度
[注意]由于size属性是一个可视化的设计属性，推荐使用CSS来代替它

src:src属性作为提交按钮显示的图像的URL
[注意]src属性只能且必须与type="image"的input元素配合使用

checked:checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置
input type类型为radio
input type类型为checkbox

name:name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据
[注意]只有设置了name属性的表单元素才能在提交表单时传递它们的值
所有的表单控件都具有name属性

type:用来规定input元素的类型
[注意]如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type=“text”

disabled:disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本
　[注意1]disabled属性无法与type="hidden"的input元素一起使用
　[注意2]对于IE7-浏览器必须设置为disabled=“disabled”，而不可以直接设置disabled，否则使用javascript控制时将失效

readonly:readonly属性规定输入字段为只读。只读字段是不能修改的，但用户仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本
readonly属性可与type="text"或"password"的input元素配合使用
[注意]IE7-浏览器不支持使用javascript控制readonly属性

maxlength:maxlength属性规定输入字段的最大长度，以字符个数计
[注意]该属性只能与type="text"或type="password"的input元素配合使用

value:value属性为input元素设定值。对于不同的输入类型，value属性的用法也不同：
type=“button”、“reset”、"submit"用于定义按钮上的显示的文本
type=“text”、“password”、"hidden"用于定义输入字段的初始值
type=“checkbox”、“radio”、"image"用于定义与输入相关联的值
[注意1]type="checkbox"或"radio"必须设置value属性
[注意2]value属性无法与type="file"的input元素一起使用

新增属性:
autocomplete:
autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。
当用户在字段开始键入时，浏览器基于之前键入过的值，显示出在字段中填写的选项
autocomplete属性适用form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color
[注意]IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

autofocus:
autofocus属性规定在页面加载时，域自动地获得焦点
autofous属性适用于button、input、keygen、select和textarea元素

novalidate:
novalidate属性规定在提交表单时不验证form或input域
novalidate属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color
[注意]IE9-浏览器不支持

height:
height属性用于规定image类型的input标签的图像高度
height属性用于规定image类型的input标签的图像高度

width:
width属性用于规定image类型的input标签的图像宽度
[注意]该属性只适用于image类型的input标签
min:最小值
max:最大值
step:数字间隔

multiple:
multiple属性规定按住ctrl按键，输入字段可以选择多个值
该属性适用于type="email"和"file"的input元素
[注意]该属性IE9-浏览器不支持

pattern:
规定用于验证input域的模式
模型pattern是正则表达式
pattern属性适用于以下类型的input元素：text、search、url、tel、email、password
[注意]IE9-浏览器及safari浏览器不支持

<form action="#">
<input pattern="\d{3}"> 
<input type="submit">
</form>

placeholder:
placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失
placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password
[注意]IE9-浏览器不支持
要修改placeholder的颜色需要使用::placeholder
::placeholder{color:green;}

required:
required属性规定必须在提交之前填写输入域(不能为空)
required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file
[注意]IE9-浏览器及safari浏览器不支持

form:
form属性规定输入域所属的一个或多个表单，form属性必须和所属表单的id
form属性适用于所有input标签的类型，若需要引用一个以上的表单时，用空格分隔
[注意]IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

<form id="form" action="#">
<input type="submit">
</form>
<input name="test" form="form">

 

表单重写属性:
表单重写属性允许重写form元素的某些属性设定。其中，formnovalidate适用于button或input元素，而其他属性适用于submit或reset的button或input元素
formaction:重写表单的action属性
formenctype:重写表单的enctype属性,绝对大数情况下并不需要设置
formmethod:重写表单的method属性
formnovalidate:重写表单的novalidate属性
formtarget:重写表单的target属性

新增类型13个:

color:定义调色板
type="color"的input输入类型会创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的URL编码
[注意]safari和IE不支持该类型

date:定义选取日、月、年的输入域
datetime:定义选取时间、日 月、年的输入域(UTC时间)
datetime-local:定义选取时间、日 月、年的输入域(本地时间)

email:定义包含email地址的输入域
type="email"的input输入类型用于表示语义上的e-mail地址输入域，会自动验证email域的值，外观上与type="text"的input输入类型没有差异，在手机端会唤出英文键盘
email类型的input元素支持multiple属性
[注意]IE9-浏览器及safari浏览器不支持

month:定义选取月、年的输入域

number:定义包含数值的输入域
type="number"的input输入类型用于处理数字输入，在手机端会唤出数字键盘
[注意]IE不支持该类型
max允许最大值
min允许最小值
step规定合法的数字间隔
value默认值

range:定义包含一定范围内数字值的输入域
type="range"的input输入类型用于处理包含在一定范围内的数字输入，类似于type="number"的input类型
[注意]IE9-不支持该类型
相关属性:
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔
value规定默认值

Tip:如果不设置min和max，那么默认值为0 和100

search:定义搜索域
type="search"的input输入类型用于表示语义上的搜索框，外观上与type="text"的input输入类型没有差异

tel:定义包含电话号码的输入域
type="tel"的input输入类型用于表示语义上的电话输入域，外观上与type="text"的input输入类型没有差异，在手机端会唤出数字键盘

time:定义选取月、年的输入域

url:定义包含URL地址的输入域
type="url"的input输入类型用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异
[注意]IE9-浏览器及safari浏览器不支持

week:定义选取周、年的输入域

select:select元素用来定义一个下拉列表，包含任意数量的option和optgroup元素
可以使用的属性:
autofocus  规定在页面加载后文本区域自动获得焦点
disabled  规定禁用该下拉列表
form   规定文本区域所属的一个或多个表单
multiple   规定可选择多个选项
name   规定下拉列表的名称
size   规定下拉列表中可见选项的数目
注意：size不可为0，默认为1
注意：safari浏览器无法设置高度

option:
option元素定义下拉列表中的一个选项
option元素有两种应用场景，除了用于下拉列表select外，还可以用于选项列表datalist中
支持属性:
disabled  规定此选项应在首次加载时被禁用
label  定义当使用optgroup时所使用的标注，替代option元素内容(注意：firefox不支持label属性)
selected  规定选项在首次显示在列表中时表现为选中状态
value  定义送往服务器的选项值
注意：当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容
注意：option无法设置margin、padding、border等盒模型样式

optgroup:optgroup元素定义选项组，用于组合选项
注意：optgroup无法设置margin、padding、border等盒模型样式

相关属性:
label  为选项组规定描述(必须)
disabled  规定禁用该选项组(可选)
button　　定义按钮

button元素内部可以放置文本或图像或其他多媒体内容
禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为
始终具有type属性
IE7-浏览器的默认类型是button
IE7-提交button元素之间的文本
而其他浏览器的默认类型是submit
而其他浏览器则会提交value属性的内容

label:
label元素为input元素定义标注，建立文字标签与表单控件的关联。在label元素内点击文本会触发此控件，选择该文本时浏览器会自动把焦点转到和标签相关的表单控件上
label元素有两种用法：一种是使用for属性，另一种是将表单控件嵌套到label内部。但IE6浏览器只识别使用for属性的方法
相关属性:
for  规定label绑定到哪个表单元素
form  规定label字段所属的一个或多个表单
注意：label标签的for属性要与相关元素的id属性相同

textarea:
textarea定义多行的文本输入控件，文本区可容纳无限数量的文本
注意：浏览器不允许textarea嵌套textarea
注意：IE8-浏览器宽高设置不包含滚动条；其他浏览器宽高设置包含滚动条
相关属性:
name   规定文本区的名称
value   表示文本区的值
disabled 规定禁用该文本区
IE7-浏览器不支持通过setAttribute(‘disabled’,’’)的写法，必须设置为setAttribute(‘disabled’,‘disabled’)
readonly  规定文本区为只读
注意：IE7-浏览器不支持通过javascript设置readonly属性
autofous  规定在页面加载后文本区域自动获得焦点
注意：IE9-浏览器不支持该属性
required  规定文本区域是必填的
注意：IE9-浏览器和safari浏览器不支持该属性
placeholder  规定描述文本区域预期值的简短提示
注意：IE9-浏览器不支持该属性
maxlength  规定文本区域的最大字符数
注意：IE9-浏览器不支持该属性
cols  规定文本区内的可见列数
rows  规定文本区内的可见行数
注意：可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性
wrap  规定当在表单中提交时，文本区域中折行如何处理

fieldset:fieldset元素用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset
相关属性:
disabled 禁用fieldset
form   规定fieldset所属的一个或多个表单
name   规定fieldset的名称

legend:
legend元素用于定义fieldset元素的标题

<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>

6.多媒体标签
audio:音频播放
相关属性
autoplay:自动播放
controls:显示控件
loop:循环播放
preload:音频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
src:要播放的音频url
注意：元素不支持播放wma格式的文件

video:视频播放
相关属性
autoplay:自动播放
controls:显示控件
height:播放器高度
width:播放器宽度
loop:循环播放
preload:视频在页面加载时进行加载，并预备播放(若使用autoplay,则忽略该属性)
src:要播放视频的url
poster:规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

例如:
<video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>
source:为video和audio提供媒介资源
media:规定媒体资源的类型(没有浏览器支持)
src:规定媒体文件的url
type:规定媒体资源的MIME类型

常用类型

音频:audio/ogg
视频:audio/mpeg 、video/ogg 、video/mp4 、video/webm

例如

<audio>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mp3">
audio player not available.
</audio>
<video>
<source src="video.webm" type="video/webm; codecs='vp8,vorbis'">
<source src="video.ogg" type="video/ogg; codecs='theora,vorbis'">
<source src="video.mp4">
video player not available.
</video>