html5和html4的区别

1.1 HTML5推出的理由

推出的缘由和目标：

目前web端存在一些问题，解决浏览器的兼容性问题同样的代码在不同浏览器的显示的不同。

一些特殊的权限没有给开发人员，比如：定位，拍照。。。H5的推出就是为了解决这些问题。

H5解决了什么问题

1.给了开发一些特殊的权限，有了权限可以轻易获取用户的定位信息，拍照功能。

2.解决不同浏览器的兼容性问题，h5可以理解为协议标准，他让绝大部分浏览器厂商都遵守这一标准。

3.文档结构不清晰，在之前的开发中都，都是使用div+class不利于搜索引擎去抓取页面的信息，比如，浏览器抓取一篇新闻网页的时候，根本抓不到作者，时间发布时间等信息。

 

 

 

 

版本支持情况：

（1）Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。

（2）Safari，Opera：同样支持html5很多年，支持也很好。

（3）IE：IE10起比较好了，之前很差。

1.2语法的改变

（1）内容类型html文件的后缀名是.html或.htm,文件的内容类型“text/html”

 

（2）DOCTYPE

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。

位于html的第一行，随着HTML的版本更新，其声明方式也在改变。但是h5的DOCTYPE的声明方式向下兼容（兼容低版本）

（3）

字符集(Character set)是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集。H5默认的是utf-8，之前的默认编码是ISO-8859-1

(4)标签省里

1.标签胜率：body、tobody、head、colgrop、httml

2.不许写结束标记的标签。Br、hr、input、base、img、link、meta

3.可写结束标记的标签p、li、dt、dd、tr、td、th、

4.布尔类型的属性：对于布尔类型的属性，当他们readonly，disabled，checked，selected当他们不写值      时默认true。同时对于值是任何东西都是无效的，说白了，只要写了属性就立即生效

 

 

 

1.3新增和废弃的元素新增和废弃的属性

1.新增的标签

新增的结构标签：section、article、nav、footer、header、hgroup

aside、figure

新增的其他标签：video、audio、mark、time、menu、canvas、svg、details、

Datalist、progress、output、source、

Input type的新增 email、url、number、date pickers、range

 

2.废弃的标签

font、center、tt、big、s、u、basefont、

 

1.4全局属性

在html5中，定义了少量对所有元素都有效的属性。

1.Contenteditable

如果设置了Contenteditable属性后，可以直接在页面上进行编辑，元素的宽高自动适应。

<p contenteditable="true"> 我是一个段落1，但是我可以编辑</p>

<p contenteditable="false"> 我是一个段落2，但是我不可以编辑</p>
<p contenteditable> 我是一个段落2，但是我可以编辑</p>

 

1.默认值是true

2.可以被继承，但是遵循就近原则

 

 

2.designMode

用来指定整个页面是否可以编辑，当designMode设置为on的时候，相当于页面内的所有设置了contenteditable，off怎不能编辑了。

document.designMode="on";

 

1.可以被继承，但是遵循就近原则

2.在ie8以下的浏览器不支持。

 

 

3.Hidden

 

<div style="display: none">diiv1</div>
<div class="aaa">diiv1</div>
<div style="visibility: hidden">diiv2</div>
<div class="aaa">diiv2</div>
<div hidden>diiv3</div>
<div class="aaa">diiv3</div>

 

Hidden属性的实现对隐藏，同时不占位置类似于display：none，hidden属性的默认值是“hiddden”，设置属性的时候，只有属性名就可以了

 

visibility: hidden看不见占位置

display: none看不见占位置

hidden看不见占位置

4.Spellcheck

Spellcheck属性专门为input和textarea标签提供的新属性，他的功能就是对用户输入的内容进行拼写和语法进行检查，如果错了则提示红色波浪线，

spellcheck="flase"取消检查

spellcheck="true"开启检查

 

5.Tabinex

 

tabindex如果是正整数，按tab键可以选中，选中的可以使input输入框，按钮，a标签，同时从小到大选中，，如果tabindex值相同选择上面的，在选择后面的的，然后在选择无tabindex的标签，0慎用，用负数是无法选中