HTML5与HTML4区别
Posted 十斤代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5与HTML4区别相关的知识，希望对你有一定的参考价值。
语法的改变
在html5中提高Web浏览器之间的兼容性是他的一个很大的目标，为了确保兼容性，就要有一个统一的标准。因此，在HTML5中，就围绕着这个标准，重新定义了一套在现有的HTML的基础上修改而来的语法，是他运行在各浏览器时各浏览器都能符合这个通用标准。
HTML 5中的标记方法
内容类型 (ContentType)
HTML 5的文件扩展符与内容类型保持不变。也就是说，扩展符仍然为" .html" 或 ".htm" ，内容类型 (ContentType)仍然为 "text/html"
DOCTYPE声明
DOCTYPE声明是HTML文件中必不可少的，它位于文件第一行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">在HTML5中，刻意不使用版本声明，一份文档将会适用于所有版本的HTML。
<!DOCTYPE html>当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法：<!DOCTYPE HTML SYSTEM "about:legacy-compat">（不区分大小写，引号不区分单引号还是双引号）
指定字符编码
在HTML4中，使用meta元素的形式指定文件中的字符编码，如下：
<meta http-equiv="content-Type" content="text/html;charset=UTF-8">在HTML5中，可以使用对<meta>元素追加charset属性的方式来指定字符编码，从HTML5开始，对于文件的字符编码推荐使用UTF-8。如下：
<meta charset="UTF-8">HTML5确保与之前HTML版本兼容
可以省略标记的元素
不允许写结束标记的元素：
area/base/br/col/command/embed/hr/img/input/keygen/link/meta/param/source/track/wbr
可以省略结束标记的元素：
li/dt/dd/p/rt/rp/optgroup/option/colgroup/thead/tbody/tfoot/tr/td/th
可以省略全部标记的元素：
html/head/body/colgroup/tbody
不允许写结束标记的元素指只能用<元素/>的形式标记。
可以省略全部标记的元素是指该元素可以完全被省略，但还是以隐式的方式存在的。例如，不写body元素，但可以通过document.body访问。
省略引号
在指定属性值的时候，属性值可以添加单引号或双引号。
在HTML5中，当属性值不包括空字符串、“<”">""="单引号双引号等字符时。属性值两边的引号可以省略。
<input type="text"><input type='text'><input type=text>
新增的元素和废弃的元素
新增的结构元素
在HTML中div被广泛用于各种布局环境在，没有明确的定义，HTML5将div语义化了。新增加结构标签如下：
a)、section元素 表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。
b)、article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。
c)、aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。
d)、header元素 表示页面中一个内容区块或真个页面的标题。
e)、hgroup元素 表示对整个页面或页面中的一个内容区块的标题进行组合。
f)、footer元素 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
g)、nav元素 表示页面中导航链接的部分。
h)、figure元素 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。
例如：
<figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949</p></figure>
HTML4中常写作：
<dl><h1>prc</h1><p>The People's Republic of China was born in 1949</p></dl>
新增的其他元素
a)、新多媒体元素
| <audio> | 定义音频内容 |
| <vedio> | 定义视频内容 |
| <source> | 定义多媒体资源（audio或vedio） |
| <embed> | 定义嵌入的内容，比如插件 |
| <track> | 为如video和 audio元素之类的媒介规定外部文本轨道 |
b)、图形绘制新元素
| <canvas> | 标签定义图形，比如图表和其他图像。该标签基于 javascript 的绘图 API |
c)、新表单元素
| <datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| <keygen> | 规定用于表单的密钥对生成器字段。 |
| <output> | 定义不同类型的输出，比如脚本的输出。 |
d)、新的语义元素
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮。 |
| <details> | 用于描述文档或文档某个部分的细节。 |
| <dialog> | 定义对话框，比如提示框。 |
| <summary> | 标签包含 details 元素的标题。 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
废弃的元素
以下的 HTML 4.01 元素在HTML5中已经被删除，虽然浏览器为了兼容性考虑都还支持这些标签，但建议使用新的替代标签，矛盾的是老浏览器对新标签的支持度又不够，视项目的受众对象而定。
1、能用CSS代替的元素
这些元素包含basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为页面展示用的，表现的内容应该由CSS完成。
2、frame框架
这些元素包含frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。
3、只有部分浏览器支持的元素
这些元素包含applet、bgsound、blink、marquee等标签。
4、其他被废除的元素
废除rb，使用ruby替代
废除acronym使用abbr
替代废除dir使用ul替代
废除isindex使用form与input相结合的方式替代
废除listing使用pre替代
废除xmp使用code替代
废除nextid使用guids
废除plaintex使用“text/plian”（无格式正文）MIME类型替代
新增及废除属性
新增属性
1、表单属性
a）、autofocus
对input[所有类型]、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性，同时设置多个，则第一个生效。
这个属性对登录页面很有用，可提升用户体验，有时登录页面就一个用户名，密码，页面加载后用户要手动定位到输入框，才能输入，有了autofocus，页面打开即可直接输入。
例如：
<form><p>用户名：<input type="text" autofocus /></p><p>密 码：<input type="password"/></p></form>
b）、placeholder
对input[text, search, url, telephone, email 以及 password]、textarea指定placeholder属性，它会对用户的输入进行提示，提示用户期待什么样的输入。当输入框获取焦点时，提示字符消失。这个属性也能提升用户体验，用的已经相当普遍了。
c）、form属性
对input[所有类型]、output、select、textarea、button与fieldset指定form属性。它声明属于哪个表单，然后将其放置在页面的任何位置，都在表单之内。这个属性解放了form表单里的元素，给我们在复杂的布局时带来方便。
一个输入域可以属于一个或多个表单，多个表单用空格分隔开。输入域的form属性必须引用所属表单的id。
<form action="" method="" id="user_form"><p>用户名：<input type="text" autofocus placeholder="用户名"/></p></form><p>下面的密码框在form表单之外，但仍然属于form表单会被提交到服务器</p><p>密 码：<input type="password" placeholder="密码" form="user_form"/></p>
d）、required属性
该属性表示用户提交时检查该元素输入域不能为空。
适用于以下类型的 input[text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file]。
<form action="" method="" id="user_form"><p>用户名：<input type="text" autofocus placeholder="用户名" required/></p><p><input type="submit" value="提交"/></p></form>
e）、autocomplete属性
设置"autocomplete"属性为"on"，则用户在自动完成域输入时，浏览器会在该域内显示填写的选项。
<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>
举例：formnovalidate属性，可以取消提交时进行的有关检查，表单可以被无条件地提交[哪怕form里有required,min,max等]。
<form action="demo_form.jsp" method="get" id="user_form">E-mail: <input type="email" required name="useremail" /><br /><input type="submit" formnovalidate="true" value="Submit without validation" /></form>
点击“Submit without validation”按钮时，Form 不会做任何校验，虽然有required属性，表单空仍然可以提交。
g)、list属性
list属性与 datalist元素配合使用，用来规定输入域的datalist。datalist是输入域的选项列表，该元素类似<select>，但是 比select更好的一点在，当用户要设定的值不在选择列表内时，允许自行输入,该元素本身不显示，当文本框获得焦点时以提示输入的方式显示。
list值为文档中的 datalist 的 id，又看到了熟悉的id，回想一下form属性引用的是表单的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增加的提示。
h)、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>
i)、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>
j)、multiple属性
multiple属性规定输入域中可选择多个值。
multiple属性适用于input[email,file]。
2、链接属性
a）、media属性
为a、area增加media属性。规定目标 URL 是为哪种类型的媒介/设备进行优化的，只能在href属性存在时使用。该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的，可接受多个值。【感觉没啥用~~】
<a href="http://www.baidu.com" media="print and (resolution:300dpi)" >查询</a>
b）、<area>新增herflang、media、rel、type属性
c）、<link>新增sizes属性
d）、<base>新增target属性
为base元素增加target属性，主要是保持与a元素的一致性。
<html><head><meta charset="UTF-8" /><title>base element target</title><base href="http://localhost/ " target="_blank"></head><body><a href="a.html" >a.html页面</a></body></html>
点a.html页面将在新窗口中打开链接：http://localhost/a.html
3、其他属性
a）、ol新增reversed属性
reversed是个bool属性，规定有序列表倒序。
举例：有序列表起始值50，倒序。
<ol start="50" reversed><li>coffee</li><li>Tea</li><li>Milk</li></ol>
b）、meta新增charset属性
c）、menu新增type和label属性
d）、style新增scoped属性
html5为style增加scoped属性。有了一个样式作用域的概念，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。scoped为开发单页面样式带来方便。
e）、script新增async属性
html5为script新增了一个async属性，用来定义脚本是否异步执行。async仅适用于外部脚本（只有在使用src属性时）。
f）、html元素新增manifest属性
html5为html元素增加manifest，指向一个用于结合离线web应用API的应用程序缓存清单。开发离线web应用程序时他与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。
访问一次以后下次就是断网了也能看到以前的内容
g、iframe元素新增sandbox、seamless、srcdoc属性
为iframe增加三个属性，sandbox、seamless、srcdoc。用来提高页面安全性，防止不信任的web页面执行某些操作。
删除属性
删除了一些可以用css代替的属性，多余属性和其他属性。
全局属性
全局属性：对于任何一个标签都是可以使用的属性。
1.contenteditable
是否允许用户编辑内容，是个非常神奇的属性，通常我们使用的输入文本内容的标签是input和textarea，使用contentEditable，可以在div,table,p,span,body等很多元素中输入内容,点击时出现一个编辑框。配合js对网页内容局部修改。过去要使用输入框替代。
当一个元素的contenteditable状态为true（contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true）时，意味着该元素是可编辑的。否则，该元素不可编辑。
<p>这是一个不可编辑的段落。</p><p contenteditable ="true">这是一个可编辑的段落。</p>
2.desginMode
用来指定整个页面是否可编辑，有两个值，on和off。该属性只能用javascript来修改值。如果design设置为on，则所有允许设置contenteditable的元素都可编辑。
用法：【不咋实用】
window.document.designmode="off";3.hidden布尔值
表示元素的不可见状态，有2个值，true和false。
<label hidden>看不见 </label>4.spellcheck
规定是否必须对元素进行拼写或语法检查。用了spellcheck属性，浏览器会帮助检查html元素文本内容拼写是否正确，只有当html元素在可编辑状态，sepllcheck属性才有意义，所以一般是针对input[text],textarea元素用户输入内容进行拼写和语法检查，拼写错误有红色的波浪下划线，右键会给提示。必须声明true或false
<textarea spellcheck="true" cols="60" rows="5"> </textarea>5.tabindex
tabindex 属性规定元素的 tab键切换顺序（当 tab 键用于导航时），可将tabIndex属性设成1到32767的一个值。
tabindex属性设为一个负值（如tabindex="-1")时，用户使用tab键切换时该html元素将不会被选中。
以上是关于HTML5与HTML4区别的主要内容，如果未能解决你的问题，请参考以下文章