html5解决了:web浏览器之间的兼容性很低、文档结构不明确等功能。一、Html5和Html4的区别

(1)语法的改变:

内容类型:文件名还是 .html或 .htm;文件类型还是 texttype

DOCTYPE声明:变化较大(在html4中要指定版本),指定字符编码:html4: ; html5 :

(2)可以省略标记的元素:具有boolean值得属性

值为true的情况:

值为false的情况:

(3)新增元素:

结构元素:section(内容块)  article(博客中的一篇文章)  aside(辅助信息)    header(标题)        hgroup(标题的结合)  footer(作者姓名)    nav (导航)  figure(文档主体中的一个单元)

其他元素:video    audio   canves   embed  mark progress meter  time ruby  rt  rp  wbr

command  details  datalist  datagrid   keygen   output   source  menu

input元素的类型: email(地址)、  url、  number、  range、  Date Pickers(日历)二、祥讲

article元素:article元素代表文档、页面或应用程序中独立的、完整的、可以独立被外部引用的内容。它可以是一篇博客或者报刊中的文章,一片论坛帖子、一段用户评论、或独立的插件,或其他任何独立的内容。article元素是可以嵌套使用的;article元素可以用来表示插件。

section元素:用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但 section元素并非一个普通的容器元素; 当一个容器需要被直接定义成样式或通过脚本定义行为时,推荐使用div而非section元素。

通常不推荐没有标题内容使用section元素,对页面中的内容进行分段,对文章进行分块。

不要与article元素混淆

特别注意:1、不要将section元素作为设置样式的页面容器

2、如果 article元素、aside元素、nav元素更符合使用条件,那就不要使用section元素

3、没有标题内容  不要使用section元素

nav元素:是一个可以用作页面导航的连接组,其中的导航元素连接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。

应用场景:

传统导航条、侧边栏导航、页内导航、翻页操作

特别注意:不能用menu元素替代nav元素

aside元素:用来表示当前页面或文章的附属信息部分,它可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别与主要主要内容的部分。

aside元素在article元素内,作为主要信息的一个附属信息;aside元素在article元素外。

header元素:是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,也可以是其他内容,例如:数据表格,搜索表单,或者相关的logo图片。可以出现多次。

footer元素:可以作为其上层父级内容块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如:作者、相关阅读链接及版权信息等。

hgroup 元素:是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组,譬如:一个内容区块的标题及其子元素算一组。

address元素:用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子信箱、真实地址、电话号码等。address应该不只用来呈现电子信箱或真实地址,还用来展示跟文档相关的联系人的所有信息。

2.1废除元素

能使用css替代的元素:basefont  big  center  font   s   tt  u;不再使用frame框架;只有部分浏览器支持的元素;其他被废除的元素

2.2新增属性

表单相关的属性:

form属性:在HTML4中,表单内的从属元素必须写在表单内部。而在HTML5中,可以把他们写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了。

formmethod属性:在HTML4中,一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面,所以每个表单内也只有一个method属性来统一指定提交方法。在HTML5中,可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法(提交方法:get和post)。

formenctype属性:在HTML4中,表单元素具有一个enctyp属性,该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。

在HTML5中,可以使用formenctype属性对表单元素分别指定不同的编码方式。

三种形式:

formtarget属性:在HTML4中,表单元素具有一个target属性,该属性用于指定在何处打开表单提交后所需要加载的页面。在HTML5中,可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

autofocus属性:为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该控件自动获得光标焦点。

required属性:HTML5中新增的required属性可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,同时在浏览中显示信息提示文字。

labels属性:在HTML5中,为所有可使用标签的表单元素、button、select 元素等,定义一个labels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。

2.3新增的全局属性 (Html5)

contentEditable属性:主要功能是,允许用户编辑元素中的内容,是boolean类型值,未说明类型时,则由继承的状态来指定(如:父元素是可编辑的,其子元素也是)。

designMode属性:值有两个 : On,可编辑;Off,不可编辑。

hidden属性:也是boolean类型值。

spellcheck属性:用于输入框中拼写检查。

tabindex属性:

tabindex="-1":是无法获取焦点的,但是在程序中是可以获取tabindex的。

html5跟html4有什么区别,Html5和Html4的区别相关推荐

  1. html5新增的标签是什么,HTML5新增标签及含义解释

    HTML 5提供的一些新的标签用法,让我们来看一下有哪些新增的标签,以及它们和HTML 4的区别. header元素表示一个区域或整个区域的头部区域. nav元素表示导航部分 article元素表示一 ...

  2. HTML5网页术语,web前端之HTML5的一些术语和概念

    HTML5是html标准的下一个版本,它並沒有完全颠覆後者,依然有很多相似之处,但是也有10个关键不同之处.(从头用html5建站更方便) HTML5与HTML4区别不是特别的大,新增了很多直观的新功 ...

  3. 使用 jQuery Mobile 与 HTML5 开发 Web App (十九) —— HTML5 对 Web App 的影响

    在本系列文章的开头,Kayo 曾经介绍过 Web App 的优缺点,并且说明了 HTML5 在其中起的作用,当然,Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后 ...

  4. [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  5. html5网页怎么弄才高级,Html5高级

    什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准.HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处 ...

  6. jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

    最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...

  7. Html5的页面基本结构标签,HTML5:简介和文档基本结构

    1)HTML5:http://www.w3.org/TR/html5/ HTML5简介 HTML5实际上是一系列用来制作现代富Web内容的相关技术的总称,其中最重要的三项技术是HTML5核心规范.CS ...

  8. html5中有哪些新属性,整理HTML5中表单的常用属性及新属性

    HTML5 新的表单属性HTML5 的 和 标签添加了几个新属性.新属性: autocomplete novalidate 新属性: autocomplete autofocus form forma ...

  9. html5 将资源存于客户端,HTML5离线应用与客户端存储的实现

    html5几种在客户端存储数据的实例详解 LocalStorage LocalStorage用于持久化的本地存储,存储资料在客户端(client)的浏览器上,除非主动删除数据,否则数 据是永远不会过期 ...

  10. 前端 html5 css3 框架,UI,分享,CSS3,HTML5,前端框架

    随着HTML5和CSS3以及网页设计布局的全面翻新创新改革.让很多网页设计者和界面设计师都知道一个道理.就是去掌握一套对应的工具包.这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果.界面 ...

最新文章

  1. 高性能NoSql数据库 SSDB
  2. 已知三角形三点坐标求角度_高中数学:椭圆相关角度的最值问题
  3. 基于用例点来度量软件规模并管理进度 之结束语
  4. OpenCASCADE:使用扩展数据交换 XDE之颜色和图层
  5. 139邮箱的邮件附件功能
  6. 《python深度学习》代码中文注释
  7. LeetCode 2090. 半径为 k 的子数组平均值(滑窗)
  8. ipvs,ipvsadm的安装及使用
  9. 虚拟化--vsphere排错组件归纳
  10. 图解SM2算法流程(合)
  11. Vivado中各个文件的含义
  12. 4_04_GLib库入门与实践_指针数组
  13. 浏览器报ScriptResource.axd异常
  14. python网络爬虫实践_《python 网络爬虫从入门到实践》笔记
  15. 上海居住证转户口证攻略
  16. 将物理机迁移到ESXI上
  17. 46道面试题带你了解中高级Java面试,Java开发必看书籍
  18. linux cuda安装目录,ubuntu16.04上的cuda安装、卸载以及替换
  19. stl文件介绍及读取
  20. 天气预报技术这些年有没有发展?什么时候才能准一点?

热门文章

  1. gcc编译ceres-solver报错‘is_trivially_default_constructible’ is not a member of ‘std’
  2. 国际顶会加持,算法大赛等你共探技术新可能
  3. 审题解题没思路?算法大赛出题方为你指点迷津!
  4. 送给程序员的 编程箴言
  5. 中级病案信息技术计算机基础知识要点,病案信息技术基础知识考试重点梳理(最新最全).doc...
  6. oracle缓存怎么看,Oracle从缓存里面查找真实的执行计划
  7. 美国广告市场:Facebook和Google将占据四分之一市场份额
  8. 数学建模-14.主成分分析PCA
  9. 吴恩达机器学习之多变量线性回归实现部分
  10. 小程序 — 保存图片到手机相册①