HTML5和以前HTML4的区别整理

HTML5是HTML标准的下一个版本。虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同。最新 最全的HTML5-HTML4对比信息请看http://dev.w3.org/html5/html4-differences/,貌似略多的样子。在 这个IE还仍然存在的世界里,HTML5的差别先掌握一些即可,等全部支持后再细细研究也不迟。

1. 简化的语法
HTML5简化了很多细微的语法,例如doctype的声明,你只需要写<!doctype html>就行了。HTML 5 指定 UTF-8 编码的方式如下<meta charset="UTF-8">

2. <canvas>标签替代Flash
Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。

3 新增许多标签
HTML5设计的一个原则是更好的体现网站的语义性,所以增加 了<header>和<footer>这样的标签,用来明确表示网页的结构;新增 <section> 和 <article> 标签,<section>和<article>也有利于清晰化网页的结构,更有利于SEO;新增 <menu> 和 <figure> 标签,<menu>可以被用于创建传统的菜单,也可以用于工具栏和上下文菜单。<figure>标签使得网页文字和图片的排版更 专业; 新增 <audio> 和 <video> 标签,这两个标签可能是HTML5里面最有用的两个标签了,使用起来时也异乎方便,如在HTML5页面中嵌入视频只需一小段
 

复制代码
代码如下:

<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>

同理,音频等其他的也类似。

4. 全新的表单
HTML5对 <form> 和 <forminput> 标签进行了大量修改,添加了很多新的属性,也修改了很多属性,

5. 删除 <b> 和 <font> 标签,<frame>, <center>, <big> 标签

6.HTML5 支持了不同类型的存储类型

HTML5 支持本地存储,在之前版本中是通过 Cookie 实现的。HTML5 本地存储速度快而且安全。并且HTML5有两种不同的对象可用来存储数据,HTML5通过JS来存储和访问数据:

    localStorage 适用于长期存储数据,浏览器关闭后数据不丢失
    sessionStorage 只是针对一个session的数据存储,存储的数据在浏览器关闭后自动删除

总的来说,HTML5已经超越了标记语言的范畴,更富语义的标签将使得HTML5更有用处。Canvas+WEBGL等技术,实现无插件的动画以及 图像、图形处理能力;本地存储,可实现offline应用;websocket,一改http的纯pull模型,实现数据推送的梦 想;MathML,SVG等,支持更加丰富的render等等等等,现在对于对HTML5的了解还只停留在表面阶段,以后会多阅读一部分HTML5的书籍 增加一下见识。

时间: 2024-10-26 19:30:45

HTML5和以前HTML4的区别整理的相关文章

HTML5标签与HTML4标签的区别示例介绍

(1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> <nav>菜单</nav> <article> <h1>标题:HTML5专题视频教程</h1> (2)声明与标签: HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素. HTML5标签语法介绍及新增标记 1.

XML、HTML、CSS与JS的区别整理_javascript技巧

在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会. 首次,我们看一下这四项技术都是什么,能干什么? (一)XML-Extensible Markup Language 可扩展标记语言(标准通用标记语言的子集)是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然可扩展标记语言占用的空间比二进制数据要占用更多的空间,但可扩展标记语言极其简单易于掌握和使用. <Hello> <bcd>C

Oracle &amp; mysql的区别整理

1.组函数用法规则 mysql中组函数在select语句中可以随意使用,但在oracle中如果查询语句中有组函数,那其他列名必须是组函数处理过的,或者是group by子句中的列否则报错 eg:select name,count(money) from user:这个放在mysql中没有问题在oracle中就有问题了2.自动增长的数据类型处理 MYSQL有自动增长的数据类型,插入记录时不用操作此字段,会自动获得数据值.ORACLE没有自动增长的数据类型,需要建立一个自动增长的序列号,插入记录时要

Centos 6.X 与Centos 7.X一些区别整理

man: centos 6.x [root@Lnmp ~]# whatis man man: nothing appropriate [root@Lnmp ~]# makewhatis [root@Lnmp ~]# man -f man man                  (1)  - format and display the on-line manual pages man.config [man]     (5)  - configuration data for man man

html5关键词相关整理

html5特有关键词 不断更新和整理..... HTML5 中的一些新特性:嵌入音频.视频.图片的函数.客户端数据存储,以及交互式文档.其他特性包括新的页面元素,比如 <header>, <section>, <footer>, 以及 <figure>. 1.特有关键词 article 定义article aside 定义页面内容之外的内容 audio 定义声音内容 canvas 定义图形 command 定义命令按钮 datagrid 定义树列表(tree

WebForm\Html5\Asp.Net三者区别

问题描述 请尽量用易懂的语言来总结归纳WebFormHtml5Asp.Net三者异同.区别,如果有对未来的分析,对当前态势的把握就更好了.或者可以向楼主介绍更好的网络开发. 解决方案 解决方案二:webform是asp.net特有的,asp:开头的标签是服务器端的标签,需要经过framework解析后才会生成对应的html代码不管服务器端有什么标签,最终生成的都是html代码,服务器端标签浏览器不会解析.html5也是html,只是新增了一些新的标签,h5的新标签低版本IE浏览器不支持,如can

Html5 CSS3新标签解释及用法

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求. HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站.其中有些是技术上类似 <div> 和

HTML5:实至名归还是言过其实?

庶几何时,HTML5 开始吸引越来越多的人的目光,尽管 W3C 表示,它的最终成熟还有很长的路,然而并不能阻止人们对它的期待.2007年,HTML5 向 W3C 标准进军,HTML5 的使命是实现富 Web 应用的本地化,脱离浏览器插件的羁绊.W3C 于 2008 年 1 月 推出 HTML5 的第一份草案,而 HTML5 标准的全部实现也许要到 2022年以后. 什么是 HTML5 HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本,旨在消除

前端面试整理********************************************************

 HTML语义化? 1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 2.为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好地内容结构.代码结构:为了裸奔时好看: 用户体验:例如title.alt用于解释名词或解释图片信息.label标签的活用: 有利于SEO:和搜索引擎