区别：HTML5中简化了DOCTYPE、html、meta、script等标签。HTML5增加了页眉、页脚、节、文章、导航、hgroup、旁白、图等语义标签。添加了画布标签。

【资料图】

本教程运行环境：windows7系统，HTML5版本5，Dell G3电脑。

HTML5中的标记方法

1.1内容类型(content type)HTML 5的文件扩展名和内容类型保持不变。也就是说，扩展名仍然是"。html "或"。htm "，而内容类型仍然是“text/html”。1.2 DOCTYPEHTML4！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD "

HTML5！DOCTYPE html(不区分大小写)

在H5，故意不使用版本声明，一个文档将适用于HTML的所有版本。

此外，使用该工具时，还可以将系统标识符添加到DOCTYPE声明方法中，如下所示：

！Doctype HTML系统" about : legacy-compat "(不区分大小写，引号不区分单引号还是双引号)

1.3指定字符编码HTML4以元元素的形式指定文件中的字符编码(由content元素的属性指定)，如下所示：

meta http-equiv=" Content-Type " Content=" text/html；charset=UTF-8 "

HTML5通过将charset属性直接附加到meta元素来指定字符编码。

meta charset="UTF-8 "

注意：两种方法都有效，但不能同时混用。从H5开始，UTF-8被推荐用于文件的字符编码。

2 HTML5确保兼容性

2.1可以省略标签的元素(1)不允许写带结束标签的元素(即不允许用开始标签和结束标签封闭元素的形式，只允许“element/”的形式)

区域、基础、br、col、命令、嵌入、hr、img、输入、keygen、链接、元、参数、源、跟踪、wbr

(2)可以省略结束标记的元素。

li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

(3)所有标记的元素都可以省略(意味着该元素可以完全省略)

html，head，body，colgroup，tbody

注意：即使省略了标签，元素仍然隐式存在。例如，如果省略了body元素，它仍然存在于文档结构中，并且可以使用document.body进行访问

2.2带有布尔值的属性！-只写属性，不写属性值，说明属性为真-

输入类型="复选框"已选中

！-不写属性意味着属性为假-

输入类型="复选框"

！-，属性值=属性名，表示属性为真-

输入类型="复选框"选中="已选中"

！-，属性值=空字符串，表示属性为真-

“输入类型=”复选框“选中=”

2.3省略引号(1)指定属性值时，属性值两边加引号可以用双引号，也可以用单引号。

(2)H5在此基础上做了一些改进。当属性值不包含空字符串，“、”、“=”、单引号、双引号等字符时。属性值两边的引号可以省略。如下

输入类型="文本"

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

3.1新增的结构元素

section元素、article元素、aside元素、header元素、footer元素、 nav元素、figure元素、main元素

3.2新增的其他元素

video元素、audio元素、embed元素、mark元素、progress元素、meter元素、time元素、ruby元素、rt元素、rp元素、wbr元素、canvas元素、commmand元素、details元素、datalist元素、datagrid元素、keygen元素、output元素、source元素、menu元素、dialog元素

3.3新增的input元素的类型

（1）email：表示必须输入e-mail地址的文本输入框

（2）url：表示必须输入URL地址的文本输入框

（3）number：表示必须输入数值的文本输入框

（4）range：表示必须输入一定范围内数字值的文本输入框

（5）Date Pickers：H5拥有多个可供选择日期和时间的新型输入文本框

1. date：选取日、月、年

2 .month：选取月、年

3. week：选取周和年

4. time：选取时间（小时和分钟）

5. datetime：选取时间、日、月、年（UTC时间）

6. datetime-local：选取时间、日、月、年（本地时间）

（6）search：用于搜索

（7）tel：专用于电话

（8）color：颜色选择文本框。选择的值为”#000000“格式的文字。

3.4 废除的元素

（1）能使用CSS替代的元素

如：basefont、big、center、font、s、strike、tt、u 等元素

其中s、strike元素可以由del元素替代，tt元素由CSS的font-famliy属性进行代替。

（2）不再使用frame框架

如：frameset、frame、noframes。

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

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

如：applet、bgsound、blink、marquee等元素。

其中applet元素可由embed元素或object元素代替，bsground元素可由audio元素代替，marquee可以由javascript编程方式代替。

（4）其他被废除的元素

1. rb元素，由ruby元素代替

2. acronym元素，由abbr元素代替

3. dir元素，由ul元素代替

4. isindex元素，由form元素与input元素相结合的方式代替

5 .listing.元素，由pre元素代替

6. xmp元素，由code元素代替

7. nextid元素，由GUIDS元素代替

8. plaintext元素，使用“text/plain”MIMEL类型代替

推荐教程：《html视频教程》

4.全局属性

所谓全局属性，是指可以对任何元素都使用的属性。

4.1 contentEditable属性

（1）主要功能

允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容循序编辑

（2）值

该属性为一个布尔值属性，可以被指定被true或false。

（3）隐藏的inhert状态

当该属性未被指定时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。

（4）isContentEditable属性

当元素可编辑时，该属性值为true，否则为false。

4.2 designMode属性

（1）功能

用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持contentEditable属性的元素都变成了可编辑状态。

（2）值

该属性有两个值，“ on ”（页面可编辑）和“ off ”（页面不可编辑）。

（3）该属性只能在Javascript脚本中被编辑修改

document.designMode = " on ";

（4）浏览器支持

1.IE8：出于安全考虑，不允许使用该属性让页面进入编辑状态。

2.IE9：允许使用该属性让页面进入编辑状态。

3.Chorme3 和 Safari：使用 。内嵌frame的方式，该内嵌frame是可编辑的。

4.Firefox 和 Opera：允许使用该属性让页面进入编辑状态。

4.3 hidden属性

（1）功能

通知浏览器不渲染该元素，使该元素处于不可见状态。

（2）值

布尔值属性，为 true 或 false。

4.4 spellcheck属性

spellcheck属性是H5针对input元素（type=text）与textarea这两个文本输入框提供的一个新的属性。

（1）功能

对用户输入的文本内容进行拼写和语法检查.

（2）值

布尔值，true 或 false。

（3）注意

1.必须声明属性值为true或false。

2.如果元素的 readOnly 属性或 disabled 属性设为 true，则不执行拼写检查。

（4）浏览器支持情况

目前除了IE之外，Firefox、Chorme、Safari、Opera等浏览器都对该属性提供了支持。

4.5 tabindex属性

每一个控件的tabindex表示该控件是第几个被访问到的。（敲击Tab键）

（1）如今控件的遍历顺序是由元素在页面上所处位置决定的，所以就不再需要了。

（2）另一个作用

在默认情况下，只有链接元素与表单元素可以通过按键获取焦点。如果对其他元素使用该属性后，也能让该元素获得焦点。把元素的tabindex值设为负值（通常为-1）后，可以通过编程的方式让元素获得焦点，并且在按下Tab键时该元素不会获得焦点。

更多编程相关知识，请访问：编程视频！！

以上就是html5和html4的区别有哪些的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网