HTML5与HTML4的区别

1. HTML5推出的理由

解决Web上存在的问题：

1）Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。

原因：各浏览器规范不统一，没有被标准化。

解决方案：使各浏览器的功能符合通用标准。

2）文档结构不够明确：HTML4中元素不能把文档结构表示清楚。

解决方案：增加与结构相关的元素。

3）Web应用程序的功能受到限制：HTMLL4对Web应用程序的贡献很小，比如：不允许同时上传多个文件。

解决方案：提供供Web应用程序使用的API。

2. HTML5语法的改变

1）内容类型不变

HTML5的文件扩展符（html或.htm）与内容类型（text/html）保持不变。

2）DOCTYPE声明变化

HTML4中需要指明是HTML的哪个版本，HTML5不需要，只使用<!DOCTYPE html>即可。

3）指定字符编码变化

HTML4：<meta http-equiv=‶content-type″ content=‶text/html; charset=UTF-8″>

HTML5:<meta charset=‶UTF-8″>

4）可以省略元素的标记

HTML5中很多元素标记可以省略

5）具有boolean值的属性调整

不指定属性值、属性名设定为属性值、字符串设为空时表示属性值为true；

不写该属性表示属性值为false。

例如：

<input type=‶checkbox″ checked> 表示checked值为true

<input type=‶checkbox″ checked=‶checked″> 表示checked值为true

<input type=‶checkbox″ checked=‶″> 表示checked值为true

<input type=‶checkbox″> 表示checked值为false

6）可省略引号

HTML5可省略指定属性值时的引号。

3. 新增的元素和废除的元素

1）新增元素

新增的结构元素

section：表示页面中内容块，比如章节、页眉、页脚或页面中的其他部分，可与<h1>到<h6>结合使用表示文档结构。

article:表示页面中一块与上下文不相关的独立内容，比如博客中的一篇文章或报纸中的一篇文章。

aside:表示article内容之外，与article内容相关的辅助信息。

header：表示页面中的区域块，通常用它表示标题。

hgroup：用于对整个页面或页面中标题进行整合。

footer：表示页面中的区域块，通常表示区域快的脚部或底部，用于承载作者姓名、创作日期等与作者的元素。

nav:表示页面中导航部分。

figure：表示一段独立的流内容，一般表示主体流内容的一个独立单元。

新增的其他元素

video:定义电影片段、视频流等视频。

audio：定义音乐或音频流。

canvas：画布，本身没有行为，仅提供一块画布，但它的API展现给JavaScript及脚本，能够把想绘制的东西绘制在canvas上。

embed mark progress meter time ruby rt rp wbr command details detalist

datagrid keygen output source menu

新增的input元素的类型

email：表示必须输的email地址

url：表示文本框输入的一个地址

number：表示数字

range：表示数字范围值

DataPickers：表示日历的日期、时间

2）废除的元素

能使用css代替的元素

basefont big center font s tt u等

不再使用frame框架

由于frame框架对网页可用性存在负面影响，HTML5中已不支持frame框架，只支持iframe框架或者用服务器方式创建的由多个页面组成的复合页面的形式，同时将frameset元素、frame元素、noframes元素废除。

只有部分浏览器支持的元素

其他被废除的元素

4. 新增的属性和废除的属性

1）表单相关的属性

a、autofocus：对input[所有类型]、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性，同时设置多个，则第一个生效

b、placeholder：对input[text, search, url, telephone, email 以及 password]、textarea指定placeholder属性，它会对用户的输入进行提示，提示用户期待什么样的输入。当输入框获取焦点时，提示字符消失。

c、form：对input[所有类型]、output、select、textarea、button与fieldset指定form属性。它声明属于哪个表单，然后将其放置在页面的任何位置，都在表单之内。这个属性解放了form表单里的元素，给我们在复杂的布局时带来方便。一个输入域可以属于一个或多个表单，多个表单用空格分隔开。输入域的form属性必须引用所属表单的id，这点有点像<label>标签的for属性。

d、required：该属性表示用户提交时检查该元素输入域不能为空。适用于以下类型的 input[text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file]。

e、autocomplete属性：autocomplete:适用于form,input[text,search,url,telephone,email,password,datepickers,range,color]。设置"autocomplete"属性为"on"，则用户在自动完成域输入时，浏览器会在该域内显示填写的选项。

<form>
<p>用户名：<input type="text" autofocus /></p>
<p>密&nbsp;&nbsp;码：<input type="password"/></p>
</form>

<form action="" method="" id="user_form">
<p>用户名：<input type="text" autofocus placeholder="用户名"/></p>
</form>
<p>下面的密码框在form表单之外，但仍然属于form表单会被提交到服务器</p>
<p>密&nbsp;&nbsp;码：<input type="password" placeholder="密码" form="user_form"/></p>

<form action="" method="" id="user_form">
<p>用户名：<input type="text" autofocus placeholder="用户名" required/></p>
<p><input  type="submit" value="提交"/></p>
</form>

<form action="" method="get" autocomplete="on">
        First name:
        <input type="text" name="fname" /><br />
        Last name:
        <input type="text" name="lname" /><br />
        E-mail:
        <input type="email" name="email"autocomplete="on"/><br />
        <input type="submit" />
</form>

f、重置表单默认行为的新属性

html5中表单的自由度非常高，因为html5为input[submit,image]、button元素增加formaction、 formenctype、formmethod、formnovalidate与formtarget几个新属性，能对form元素的某些属性重置，比如能做到表单1的提交按钮提交表单2等。

formaction：重写表单action属性

formenctype：重写表单enctype属性

formmethod：重写表单method属性

formnovalidate：重写表单novalidate属性

formtarget：重写表单target属性

举例：formaction和formmethod

html中，一个表单内的所有元素都通过表单的action属性统一提交到另一个页面。html5中可通过formaction属性实现点击不同提交按钮，将表单提交到不同的页面。

html中一个表单只有一个action属性来对表单内所有元素统一指定提交页面，每个表单只有一个method属性统一指定提交方法。html5中新增的formmethod方法，可以实现不同按钮指定不同提交方法，比如post，get等。

<form action="server.jsp" method="get" id="user_form">
     E-mail:
     <input type="email" name="useremail" /><br />
     <input type="submit" formmethod="get"  formaction="s1.jsp" value="get方法提交到s1.jsp" /><br />
     <input type="submit" formmethod="post" formaction="s2.jsp" value="post方法提交到s2.jsp" /><br />
</form>

g、image提交按钮新增width,height属性

width和height来设置image类型的input标签的图像的宽高。

<form action="server.jsp" method="get" id="user_form">
     E-mail:
     <input type="email" name="useremail" /><br />
     <input type="image" src="img/submit.png"  width="30px" height="30px"/>
</form>

h、list属性

ist属性与 datalist元素配合使用，用来规定输入域的datalist。datalist是输入域的选项列表，该元素类似<select>，但是比select更好的一点在，当用户要设定的值不在选择列表内时，允许自行输入,该元素本身不显示，当文本框获得焦点时以提示输入的方式显示。

list属性适用于input[text,search,url,telephone,email,datepickers,numbers,range,color]

Note:

list值为文档中的 datalist 的 id，又看到了熟悉的id，回想一下form属性引用的是表单的id，都类似label属性引用input的id一样。

<form action="demo_form.jsp" method="get">
    主页:<input type="url" list="url_list" name="link" />
    <datalist id="url_list">
        <option label="baidu" value="http://www.baidu.com" />
        <option label="qq" value="http://www.qq.com" />
        <option label="Microsoft" value="http://www.microsoft.com" />
      </datalist>
    <input type="submit" />
</form>

举例：顺便说一下datalist和autocomplete配合使用

前面讲了autocomplete属性可以让用户完成域输入时，浏览器在该域内显示填写的选项。现在datalist元素与autocomplete属性配合使用可更好的提升用户体验。

在上面代码基础上给datalist增加autocomplete属性，即<datalist id="url_list" autocomplete>。

用户第一次输入http:www.google.com提交后，再次输入时会同时给出datalist的option提示和autocomplete增加的提示

i、max，min和step属性

max,min和step属性用来为包含数字或日期的input类型规定限定或者说约束。

max属性规定输入域所允许的最大值。

min属性规定输入域允许的最小值。

step属性为输入域规定合法的数字间隔。（假如 step="3"，则合法数字应该是 -3、0、3、6，以此类推）step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。

max,min,step属性适用于input[datepickers,number，range]。

举例：

这是一个非常好的属性，之前有人问我用<input type="time">来输入时间，奈何firefox浏览器不支持怎么办。可以通过min max 模拟实现一个时间输入框，小时允许输入[0~23]，分钟允许输入[0~59]。

<form action="demo_form.jsp" method="get">
    <label>time小时，分钟：<input type="time" name="user_time"></label>
    <p>input类型time在firefox下不支持，给出模拟实现方案</p>
    <label><input type="number" min="0" max="23" step="1">时</label>
    <label><input type="number" min="0" max="59">分</label>
    <input type="submit" value="提交"/>
</form>

j、pattern属性

pattern属性用于验证输入字段的模式，其实就是正则表达式，不用再写js绑定正则验证了，非常方便。

pattern属性适用于input[text,search,url,telephone,email,password]

举例：给输入框定义了 Pattern 为“[A-z]{3}”，也就是包含三个字母的正则表达式约束，如果输入不合法，我们会看到如下效果。

<form action="#" method="get" id="user_form">
    Country code:
    <input type="text" name="country_code" pattern="[A-z]{3}"title="Three letter country code" />
    <input type="submit" />
</form>

k、multiple属性

multiple属性规定输入域中可选择多个值。

multiple属性适用于input[email,file]。

举例：允许上传时一次上传多个文件。

<form action="demo_form.jsp" method="get">
    选择图片:<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>

l、<fieldset>增加disabled属性

html5为 fieldset元素增加了disabled属性，可以把它的子元素设为disabled状态,但是注意不包括legend里的元素。

举例：点击legend中的checkbox，切换filed子元素的disabled状态。

<form>
    <fieldset name="userInfo">
        <legend>
            <label><input type="checkbox" checked name="enableUserInfo" onchange="form.userInfo.disabled=!checked">启用用户信息</label>
        </legend>
        <p>
            <label>姓名:<input name="userName" required></label>
        </p>
        <fieldset name="personalInfo">
            <legend>
                <label><input type="checkbox" checked  name="enablePersonalInfo" onchange="form.personalInfo.disabled=!checked">个人信息</label>
            </legend>
            <p>
                <label>生日:<input name="birthday" required></label>
            </p>
        </fieldset>
        <fieldset name="companyInfo">
            <legend>
                <label><input type="checkbox" checked name="enableCompanyInfo" onchange="form.companyInfo.disabled=!checked">公司信息</label>
            </legend>
            <p>
                <label>公司名称:<input name="companyName" required></label>
            </p>
        </fieldset>
    </fieldset>
</form>

m、<label>增加control属性

html5中为标签新增了control属性，在标签内部放置一个表单元素，通过标签的control属性访问该表单元素。

<script>
    function setValue(){
        var label=document.getElementById("label");
        var textbox=label.control;
        textbox.value="718308";
    }
</script>
<form>
<label id="label">
    邮编：
    <input id="txt_zip" maxlength="6">
    <small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>

分析：通过label的control属性控制input输入框的value，所以点“设置默认值”按钮，将邮编输入框值初始化为"718308"。

n、新增SelectionDirection属性

selectionDirection适用于input元素和textarea元素。

用户在input元素或textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为"forward"，反向选取值为“backward”，且当用户没有选取任何文字时，该属性值为"forward"。

举例：

<script type="text/javascript">
    function alertSelectionDirection(){
        var testInput=document.getElementById("test");
        var direction=testInput.selectionDirection;
        alert(direction);
    }
</script>
<form>
    <input type="text" name="text" id="test">
    <input type="button" value="查看选中文本方向" onclick="alertSelectionDirection()"> 
</form>

o、复选框的indeterminate属性

这个属性用来表示复选框部分选中，像qq邮箱中，邮件部分选中就有这样的效果。

举例：经测试，貌似还是必须通过脚本控制indetermidate属性。

<form>
     <input type="checkbox" checked/>
     <input type="checkbox" indeterminate/>只写一个indeterminate不起作用
     <input type="checkbox" id="test"/>
     <input type="checkbox" />
</form>
 <script>
    document.getElementById(‘test‘).indeterminate = true;
</script>

indeterminate属性主要是在复选框嵌套时使用，了解更多可参考css-tricks indetermidate-checkboxes

废除的属性

5. 全局属性

HTML5中新增全局属性的概念，全局属性指可以对任何元素都使用的属性。

contentEditable属性

允许用户编辑元素中内容，使用该属性的元素必须为可以获得鼠标焦点的元素，而且在点击鼠标后向用户提供一个插入符号，提示用户该元素允许进行编辑。

是boolean值类型，可以设为true、false或继承状态。其中，true代表可编辑，false代表不可编辑，当未指定true或false时与父元素的继承状态相同。

designMode属性

用来指定整个页面是否可编辑，当页面可编辑时，页面中所有支持contentEditable属性的元素都变为可编辑状况。designMode属性只能在JavaScript脚本中被修改、编辑。属性值可取on（可编辑）或off（不可编辑）。

hidden属性

HTML5中所有元素都允许使用hidden属性，该属性类似于input元素中hidden元素，boolean值，可设为true（不可见）、false（可见）。当某元素的hidden属性值为true时，浏览器不渲染该元素，使该元素处于不可见状态，但浏览器创建该元素内容，即页面加载后允许使用JavaScript脚本将该属性值取消，使该元素可见。

spellcheck属性

针对input（type=text）与textarea这两个文本输入框提供的一个新属性，主要对用户输入内容进行拼写与语法检查。属性值为boolean值，可取true或false。

tableindex属性

当点击Tab键时，让窗口或页面中可获得焦点的链接元素或表单元素进行遍历，tableindex表示该元素第几个被访问到。

若tableindex值为"-1"时表示无法获取该元素.