html5和html的区别是什么（精问）

一、总结

一句话总结：html5：简洁（文档生命，链接引入）语义化（语义化标签） API（canvas，地理位置等）一些标签（input新类型）

二、html5和html的区别是什么

可能有人会问，这两者有什么关系呢？随着这移动互联网快速发展的时代，尤其是4G时代已经来临的时刻，加上微软对“XP系统”不提供更新补丁、维护的情况下。“html5+css3”也逐渐的成为新一代web前端技术，手机网站也渐渐的成为一种趋势。

什么是html5呢？

html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：HTML 5 ≈ HTML+CSS 3+JS+API。

hmtl5于html的区别

我们现在web前端开发的静态网页，一般都是html4.0。同时是符合W3C的xhtml1.0规范来的。那么他们两者又有什么实质性的区别呢？

1.在文档类型声明上

html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html5:<!doctype html>

由这两者对比可见：在文档声明上，html有很长的一段代码，并且很难记住这段代码，想必很多人都是靠工具直接生成的吧？而html5却是不同，只有简简单单的声明，这也方便人们的记忆。

2.在结构语义上

html:没有体现结构语义化的标签，我们通常都是这样来命名的<div id="header"></div>.这样表示网站的头部。

html5:在语义上却有很大的优势。提供了一些新的标签，比如:<header><article><footer>

提供这样的标签有什么样的好处呢？我觉得最主要还是在SEO的优化上，不管是我们自己来对网页模块命名，还是有这样的标签。因为做网站最终的目的只有一个，那就是盈利。想盈利的话，就只有通过SEO优化的技术，把你网站排名做上来，这样你的网站才有价值，且正是这一点，html5符合了这一点。为什么这么说呢？因为他定义的这些标签，更加有利于优化，蜘蛛能识别你。

总结：虽然在前几年html5已经出来了，但是那时候因为不够成熟，时机不对，才没被兴起。在这互联网高速发展的时候，也是来临4G的时代。我们还不学习hml5+css3我们就out了！

html5作为下一代的标准语言，有很大的意义，很简单广泛的应用。扩展性上：增加一系列的API支持（Canvas、本地存储、文件操作、重力感应等），非常的强大，以后有什么新的标准支持可以不断更新；商业角度：帮助企业降低开发成本、缩短开发周期、可以跨设备等；战略上：不知道大家有没有注意到，html5和云的概念是对应有关联的性的，以后会实现一种场景——用户只需要打开设备，然后浏览器（html5）就可以查看应用（载体是云），并且实现的用户体验超级棒，很酷炫，可能慢慢会替代本地应用。

三、HTML5与HTML4的区别

1. HTML5推出的理由

解决Web上存在的问题：

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

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

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

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

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

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

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

2. HTML5语法的改变

内容类型不变

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

DOCTYPE声明变化

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

指定字符编码变化

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

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

可以省略元素的标记

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

具有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

可省略引号

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

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

新增元素

新增的结构元素

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：表示日历的日期、时间

废除的元素

能使用css代替的元素

basefont big center font s tt u等

不再使用frame框架

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

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

其他被废除的元素

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

新增的属性

表单相关的属性

链接相关的属性

其他属性

废除的属性

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"时表示无法获取该元素.

四、html5比以往的html多了哪些新特性

从HTML5技术的角度来说，HTML5技术比HTML多增加了这些类别的内容：

1. 新增标签以及属性；
2. CSS3的新特性；
3. Canvas绘图；
4. JavaScript的新增API（如重力感应、HTML5视音频等）；
5. 移动端开发。

内容是从网络弄来的

新增的具体内容如下：

1、新的文档类型 (New Doctype)；

2、脚本和链接无需type；

3、更加语义化的元素；

4、占位符(Placeholder)；

5、Audio 和Video 支持；

6、离线 & 存储；

7、HTML5 canvas；

8、设备访问。

跟HMTL相比，HTML5新增了很多内容，其中有一些特性是作为开发人员必须要了解的。一个叫秒秒学的教学网站上有专门针对HTML5的课程，讲解得还蛮细致，推荐你去看看。

1.新的文档类型 (New Doctype)

HTML5简化了文档类型的声明方式。HTML5的声明方式为：<!DOCTYPE html>。
而之前的文档类型的声明方式是非常复杂，并且难以记忆的，比如XHTML 1.0的文档类型是：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.脚本和链接无需type

在HTML4或XHTML中，你需要用下面的几行代码来给你的网页添加CSS和JavaScript文件。
< link rel="stylesheet" href="stylesheet.css" type="text/css" />
< script type="text/javascript" src="script.js"></script>

而在HTML5中，你不再需要指定type属性。因此，代码可以简化如下：
< link rel="stylesheet" href="stylesheet.css" />
< script src="script.js"></script>

3.更加语义化的元素

HTML5 新增的一些更具有语义化的新标签来替代<div> 标签，但它们并不提供额外的功能。这些新增的标签是：<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>等。

4.占位符 (Placeholder)

在HTML4或XHTML中，一般需要用JavaScript来给文本框添加占位符。比如：通过脚本设置，当用户开始输入时，文本框中的文字就消失。而在HTML5中，新增的“placeholder”功能可以很简单的解决这个问题。

5.Audio 和Video 支持

在HTML5之前，网页通常需要依靠第三方插件来渲染音频。而在HTML5中，<audio>元素被引进来后，我们可以使用audio元素来渲染音频。
在HTML5中，不仅新增渲染音频的元素，同时也新增了支持视频的元素video。

6.离线 & 存储

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。虽然 DOM 存储对于存储少量数据是非常有用的，但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。

7.HTML5 canvas

<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。

8.设备访问

HTML5新增的特性中，允许通过页面元素访问硬件设备，比如：[ ]摄像头、地理位置服务、检测方向、触控事件等。

1. 新的Doctype
尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素
用<figure>和<figcaption>来语义化地表示带标题的图片
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. 重新定义的<small>
<small>已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明
4. 去掉link和script标签里面的type属性
5. 加/不加括号
HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签
6. 让你的内容可编辑，只需要加一个contenteditable属性
7. Email Inputs
如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验
8. Placeholders
这个input属性的意义就是不必通过javascript来做placeholder的效果了
9. Local Storage
使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
10. 语义化的header和footer
11. 更多的HTML5表单特性
12. IE和HTML5
默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup
一般在header里面用来将一组标题组合在一起，如
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
14. Required属性
required属性定义了一个input是否是必须的，你可以像下面这样声明
<input type=”text” name=”someInput” required>
或者
<input type=”text” name=”someInput” required=”required”>
15. Autofocus属性
正如它的词义，就是聚焦到输入框里面
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
16. Audio支持
HTML5提供了<audio>标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” /><!–FF–>
<source src=”file.mp3″ /><!–Webkit–>
<a href=”file.mp3″>Download this file.</a>
</audio>
17. Video支持
和Audio很像，<video>标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供：
<video controls preload>
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” />
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” />
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
</video>
18. 预加载视频
preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频
<video preload>
19. 显示视频控制
<video preload controls>
20. 正则表达式
由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
<form action=”" method=”post”>
<label for=”username”>Create a Username: </label>
<input type=”text” name=”username” id=”username” placeholder=”4 <> 10″ pattern=”[A-Za-z]{4,10}” autofocus required>
<button type=”submit”>Go </button>
</form>
21. 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：
<script>
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
</script>
22. Mark元素
把<mark>元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>
23. 什么时候用<div>
HTML5已经引入了这么多元素，那么div我们还要用吗？div你可以在没有更好的元素的时候去用。
24. 想立即使用HTML5?
不要等2022了，现在就可以使用了，just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性
<div id=”myDiv” data-custom-attr=”My Value”> Bla Bla </div>
CSS中使用：
<style>
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
</style>
<h1 data-hover-response=”I Said Don’t Touch Me!”> Don’t Touch Me </h1>
27. Output元素
<output>元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”">
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}