HTML5基本介绍

HTML5介绍

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然在技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性网站开发技术人员是必须要有所了解的。

兼容

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
需要注意的是，虽然很多浏览器目前已经能够支持HTML5，但是显示效果仍旧存在差异性。这时，我们如果从样式的角度出发，可以采用下面的几种css方案。
css reset
Normalize.css
CSS hack
第三方插件

H5新增标签

语义和结构
HTML5提供了新的元素来创建更好的页面结构：

canvas

标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

多媒体

标签
描述

• audio
  定义音频内容
• video
  定义视频（video 或者 movie）
• source
  定义多媒体资源 video 和 audio
• embed
  定义嵌入的内容，比如插件。
• track
  为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。

表单

标签描述

• datalist
  定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
• keygen
  规定用于表单的密钥对生成器字段。
• output
  定义不同类型的输出，比如脚本的输出。

语义和结构

HTML5提供了新的元素来创建更好的页面结构：

• article
  定义页面独立的内容区域。
• aside
  定义页面的侧边栏内容。
• bdi
  允许您设置一段文本，使其脱离其父元素的文本方向设置。
• command
  定义命令按钮，比如单选按钮、复选框或按钮
• details
  用于描述文档或文档某个部分的细节
• dialog
  定义对话框，比如提示框
• summary
  标签包含 details 元素的标题
• figure
  规定独立的流内容（图像、图表、照片、代码等等）。
• figcaption
  定义 figure 元素的标题
• footer
  定义 section 或 document 的页脚。
• header
  定义了文档的头部区域
• mark
  定义带有记号的文本。
• meter
  定义度量衡。仅用于已知最大和最小值的度量。
• nav
  定义运行中的进度（进程）。
• progress
  定义任何类型的任务的进度。
• ruby
  定义 ruby 注释（中文注音或字符）。
• rt
  定义字符（中文注音或字符）的解释或发音。
• rp
  在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
• section
  定义文档中的节（section、区段）。
• time
  定义日期或时间。
• wbr
  规定在文本中的何处适合添加换行符。

智能表单

控件

新增控件
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  规定度量的最优值
  value  规定度量的当前值(必需)
  注意：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
  支持标签:
  input type类型为radio
  input type类型为checkbox
  　　checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过javascript进行设置

• 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个

1. color
   定义调色板
   type="color"的input输入类型会创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的URL编码
   [注意]safari和IE不支持该类型
2. date
   定义选取日、月、年的输入域
3. datetime
   定义选取时间、日 月、年的输入域(UTC时间)
4. datetime-local
   定义选取时间、日 月、年的输入域(本地时间)
5. email
   定义包含email地址的输入域
   type="email"的input输入类型用于表示语义上的e-mail地址输入域，会自动验证email域的值，外观上与type="text"的input输入类型没有差异，在手机端会唤出英文键盘
   email类型的input元素支持multiple属性
   [注意]IE9-浏览器及safari浏览器不支持
6. month
   定义选取月、年的输入域
7. number
   定义包含数值的输入域
   　type="number"的input输入类型用于处理数字输入，在手机端会唤出数字键盘
   [注意]IE不支持该类型
   相关属性
   max允许最大值
   min允许最小值
   step规定合法的数字间隔
   value默认值
8. range
   定义包含一定范围内数字值的输入域
   type="range"的input输入类型用于处理包含在一定范围内的数字输入，类似于type="number"的input类型
   [注意]IE9-不支持该类型
   相关属性
   max规定允许的最大值
   min规定允许的最小值
   step规定合法的数字间隔
   value规定默认值
   Tip
   如果不设置min和max，那么默认值为0 和100
9. search
   定义搜索域
   　type="search"的input输入类型用于表示语义上的搜索框，外观上与type="text"的input输入类型没有差异
10. tel
    定义包含电话号码的输入域
    type="tel"的input输入类型用于表示语义上的电话输入域，外观上与type="text"的input输入类型没有差异，在手机端会唤出数字键盘
11. time
    定义选取月、年的输入域
12. url
    定义包含URL地址的输入域
    type="url"的input输入类型用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异
    　[注意]IE9-浏览器及safari浏览器不支持
13. 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  规定描述文本区域预期值的简短提示
					注意：I**E9-浏览器不支持该属性**
				maxlength  规定文本区域的最大字符数
					注意：**IE9-浏览器不支持该属性**
		 cols  规定文本区内的可见列数
		 rows  规定文本区内的可见行数
					注意：可以用cols和rows来规定textarea的尺寸，但更好的办法是使用CSS的height和width属性
	 wrap  规定当在表单中提交时，文本区域中折行如何处理
					 当wrap="soft"，表示表单提交时，虽然文字在屏幕上折行，但提交的数据里不会有换行符(默认值)；而当wrap="hard"，表示表单提交时，提交的数据包含文本换行符%0D%0A

fieldset

fieldset元素用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset

			相关属性
				disabled  禁用fieldset
				form  规定fieldset所属的一个或多个表单  
				name  规定fieldset的名称

legend

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

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