区别：HTML5中简化了DOCTYPE、html、meta、script等标签。HTML5中增加了header、footer、section、article、nav、hgroup、aside、figure等语义标签；增加了canvas标签。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。 1 HTML5中的标记方法 1.1 内容类型（ContentType）- HTML5的文件扩展符与内容类型保持不变。即扩展符仍然为".html"或".htm"，内容类型仍然为“text/html”。
1.2 DOCTYPE <！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <！DOCTYPE html>（不区分大小写） 在H5中，刻意不使用版本声明，一份文档将会适用所有版本的HTML。 另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法如下： <！DOCTYPE HTML SYSTEM "about:legacy-compat">(不区分大小写，引号不区分是单引号还是双引号) 1.3 指定字符编码 使用meta元素的形式指定文件中的字符编码(通过 content元素的属性来指定)，如下所示： <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 使用对<meta>元素直接追加charset属性的方式来指定字符编码。 <meta charset="UTF-8"> 注意：两种方法都有效，但是不能同时混合使用两种方式，从H5开始，对于文件的字符编码推荐使用UTF-8。 2 HTML5确保的兼容性 2.1 可以省略标记的元素 （1）不允许写结束标记的元素（即不允许使用开始标记与结束标记将元素括起来的形式,只允许使用“<元素/>”的形式 ） area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、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 具有boolean值的属性<!--只写属性不写属性值代表属性为true--> <input type="checkbox" checked> <!--不写属性代表属性为false--> <input type="checkbox"> <!--，属性值=属性名,代表属性为true--> <input type="checkbox" checked="checked"> <!--，属性值=空字符串，代表属性为true--> <input type="checkbox" checked=" "> 2.3 省略引号（1）在指定属性值的时候，属性值两边加引号时，既可以用双引号也可以用单引号。 （2）H5在此基础上做了一些改进，当属性值不包括空字符串、”<“、”>“、”=“、单引号、双引号等字符时，属性值两边的引号可以省略。 如下所示 <input type="text"> <input type='text'> <input type=text> 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类型代替 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的区别有哪些的详细内容，更多请关注模板之家(www.mb5.com.cn)其它相关文章！ |
