html5和html4的区别有哪些

区别:HTML5中简化了DOCTYPE、html、meta、script等标签。HTML5中增加了header、footer、section、article、nav、hgroup、aside、figure等语义标签;增加了canvas标签。

html5和html4的区别有哪些

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

1 HTML5中的标记方法

1.1 内容类型(ContentType)

HTML5的文件扩展符与内容类型保持不变。即扩展符仍然为”.html”或”.htm”,内容类型仍然为“text/html”。

1.2  DOCTYPE

HTML4

 

HTML5

 (不区分大小写)

立即学习“前端免费学习笔记(深入)”;

在H5中,刻意不使用版本声明,一份文档将会适用所有版本的HTML。

另外,当使用工具时,也可以在DOCTYPE声明方式中加入SYSTEM识别符,声明方法如下:

(不区分大小写,引号不区分是单引号还是双引号)

1.3 指定字符编码

HTML4

 使用meta元素的形式指定文件中的字符编码(通过 content元素的属性来指定),如下所示:

 HTML5

使用对元素直接追加charset属性的方式来指定字符编码。  

注意:两种方法都有效,但是不能同时混合使用两种方式,从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值的属性

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键时该元素不会获得焦点。

更多编程相关知识,请访问:编程视频!!

以上就是html5html4的区别有哪些的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2593778.html

(0)
上一篇 2025年3月6日 17:26:00
下一篇 2025年2月24日 07:11:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 用什么写html5

    html5编写软件:1、Brackets;2、WebStorm;3、VisualStudio Code;4、Atom;5、Sublime Text;6、HBuilder;7、Aptana Studio;8、EditPlus等等。 本教程操作…

    2025年3月6日
    200
  • html5 app开发工具有哪些

    html5 app开发工具有:1、Appcelerator,一个开源手机应用开发平台;2、APICloud,一个移动开发平台;3、PhoneGap,一款HTML5移动开发平台;4、NativeScript;5、Kinvey等等。 本教程操作…

    2025年3月6日
    200
  • html5能做app吗

    html5能做app,其优势有:跨平台、简单高效、开发成本低、推广容易等。html5开发app的工具有:1、Appcelerator;2、APICloud;3、PhoneGap;4、NativeScript;5、Kinvey等。 本教程操作…

    2025年3月6日
    200
  • html5有哪些特殊标签

    特殊标签:“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”、“”等等。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 html5特殊标签 格式: 定义文本的文本方向,使其脱离其周围文本的方向设置。…

    2025年3月6日
    200
  • html5有什么标记

    html5标记有:“”、“”、“”、“”、“”、“”、“”、“”、“”、“”等等。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的…

    2025年3月6日
    200
  • html5中rb标签的含义是什么

    rb全称Ruby Base,是html5中的一个元素,用于分隔“”注释的基本文本组件(即正在注释的文本);一个rb元素应该包装基本文本的每个单独的原子段。虽然rb不是一个空元素,但是在源码中通常只包括每个元素的开始标签。 本教程操作环境:w…

    2025年3月6日
    200
  • html5新增的标签有哪些

    HTML5新增的标签:canvas、audio、video、source、embed、track、datalist、keygen、output、article、aside、bdi、nav、mark、rt、rp、ruby、time、wbr等。…

    2025年3月6日 编程技术
    200
  • python基于flask_sqlalchemy的网页显示数据库信息的代码示例

    本篇文章给大家带来的内容是关于python基于flask_sqlalchemy的网页显示数据库信息的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 网页显示数据库信息 使用我们刚学习的flask_sqlalchem…

    2025年3月5日
    200
  • python中flask_bootstrap装饰网页的介绍(附代码)

    本篇文章给大家带来的内容是关于python中flask_bootstrap装饰网页的介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 flask_bootstrap bootstrap 是 twitter 开发…

    2025年3月5日 编程技术
    200
  • python实现Todo清单的代码示例

    本篇文章给大家带来的内容是关于python实现Todo清单的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 添加分页功能 第一步:是对视图函数的改写,通过查询数据库数据,进行分页显示 # 修改清单显示的视图函数@a…

    2025年3月5日
    200

发表回复

登录后才能评论