HTML5与HTML4的差异对比(1)

最新推荐文章于 2021-06-24 04:07:19 发布
最新推荐文章于 2021-06-24 04:07:19 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： HTML5标签 文章标签： html5 html 文档 浏览器 ruby audio

1.对比html4和html5新增比较重要的功能

  • canvas标签元素（可结合js驱动其成为绘画容器，支持画点、线、面、圆、过度色效果等等）
  • 一直期待且存在较大争议的 video 和 audio 标签元素（经过试用目前感觉不到传说中能替代flash的强大之处在哪，我觉得各方面差得都比较远，不过码流清晰度方面没有测试）
  • 对本地离线存储的更好的支持（个人对此处功能比较期待）
  • 新增加了一些标签元素，丰富了html的语义构成，如：article、footer、header、nav、section、calendar、date、time、email、url、search

2.目前有哪些浏览支持html5?


  不管目前浏览器如何表现，html5标准已经势不可挡的成为浏览器下一个争夺点，也就是说html5标准马上就要来了，将被各大浏览器争先恐后的支持的更加完善。（css3标准将另写文章阐述）

3.我们需要改变什么？

    需要尽快接受html5标准，扔掉抱残守缺的态度。自1999年html4问世以来已经10多年没有大的发展了，现在html5的来临无疑将是里程碑似的进步。
    html5可能会改变部分页面布局的语义结构定义；给页面展示效果带来颠覆性的理念（在数据图形表现、简单绘画领域有新的变化）；给web结合客户端存储带来革命性动力（它将在webgame或者sns相关产品中有巨大亮眼的表现）；视音频播放展示方面带来新的空气。

4.现在开始深入了解html5与html4的差别和优越之处

  • 视频标签

    mp4是带有H.264视频编码和AAC音频编码的MPEG4文件，也就是在flash高清视频里应用f4v
      
  • 音频标签

    ogg文件，适用于Firefox、Opera 以及 Chrome 浏览器。


  • 运行在ff3.5.9下的效果图，如下：


  • Canvas

    这个单词的意思是：画布，顾名思义就是一个可以绘画的容器，有了这个标签可方便了，我们可以javascript在这个容器里面为所欲为了，下面举例说明：


  • 运行在ff3.5.9下的效果图，如下：

    5.常用标签变化列表

    标签描述45
    <!--...-->定义注释。45
    <!DOCTYPE> 定义文档类型。45
    <a>定义超链接。45
    <abbr>定义缩写。45
    <acronym>HTML 5 中不支持。定义首字母缩写。4 
    <address>定义地址元素。45
    <applet>HTML 5 中不支持。定义 applet。4 
    <area>定义图像映射中的区域。45
    <article>定义 article。 5
    <aside>定义页面内容之外的内容。 5
    <audio>定义声音内容。 5
    <b>定义粗体文本。45
    <base>定义页面中所有链接的基准 URL。45
    <basefont>HTML 5 中不支持。请使用 CSS 代替。4 
    <bdo>定义文本显示的方向。45
    <big>HTML 5 中不支持。定义大号文本。4 
    <blockquote>定义长的引用。45
    <body>定义 body 元素。45
    <br>插入换行符。45
    <button>定义按钮。45
    <canvas>定义图形。 5
    <caption>定义表格标题。45
    <center>HTML 5 中不支持。定义居中的文本。4 
    <cite>定义引用。45
    <code>定义计算机代码文本。45
    <col>定义表格列的属性。45
    <colgroup>定义表格列的分组。45
    <command>定义命令按钮。 5
    <datalist>定义下拉列表。 5
    <dd>定义定义的描述。45
    <del>定义删除文本。45
    <details>定义元素的细节。 5
    <dfn>定义定义项目。45
    <dir>HTML 5 中不支持。定义目录列表。4 
    <div>定义文档中的一个部分。45
    <dl>定义定义列表。45
    <dt>定义定义的项目。45
    <em>定义强调文本。45
    <embed>定义外部交互内容或插件。 5
    <fieldset>定义 fieldset。45
    <figcaption>定义 figure 元素的标题。 5
    <figure>定义媒介内容的分组，以及它们的标题。 5
    <font>HTML 5 中不支持。4 
    <footer>定义 section 或 page 的页脚。 5
    <form>定义表单。45
    <frame>HTML 5 中不支持。定义子窗口（框架）。4 
    <frameset>HTML 5 中不支持。定义框架的集。4 
    <h1> to <h6>定义标题 1 到标题 6。45
    <head>定义关于文档的信息。45
    <header>定义 section 或 page 的页眉。 5
    <hgroup>定义有关文档中的 section 的信息。 5
    <hr>定义水平线。45
    <html>定义 html 文档。45
    <i>定义斜体文本。45
    <iframe>定义行内的子窗口（框架）。45
    <img>定义图像。45
    <input>定义输入域。45
    <ins>定义插入文本。45
    <keygen>定义生成密钥。 5
    <isindex>HTML 5 中不支持。定义单行的输入域。4 
    <kbd>定义键盘文本。45
    <label>定义表单控件的标注。45
    <legend>定义 fieldset 中的标题。45
    <li>定义列表的项目。45
    <link>定义资源引用。45
    <map>定义图像映射。45
    <mark>定义有记号的文本。 5
    <menu>定义菜单列表。45
    <meta>定义元信息。45
    <meter>定义预定义范围内的度量。 5
    <nav>定义导航链接。 5
    <noframes>HTML 5 中不支持。定义 noframe 部分。4 
    <noscript>定义 noscript 部分。45
    <object>定义嵌入对象。45
    <ol>定义有序列表。45
    <optgroup>定义选项组。45
    <option>定义下拉列表中的选项。45
    <output>定义输出的一些类型。 5
    <p>定义段落。45
    <param>为对象定义参数。45
    <pre>定义预格式化文本。45
    <progress>定义任何类型的任务的进度。 5
    <q>定义短的引用。45
    <rp>定义若浏览器不支持 ruby 元素显示的内容。 5
    <rt>定义 ruby 注释的解释。 5
    <ruby>定义 ruby 注释。 5
    <s>HTML 5 中不支持。定义加删除线的文本。4 
    <samp>定义样本计算机代码。45
    <script>定义脚本。45
    <section>定义 section。 5
    <select>定义可选列表。45
    <small>定义小号文本。45
    <source>定义媒介源。 5
    <span>定义文档中的 section。45
    <strike>HTML 5 中不支持。定义加删除线的文本。4 
    <strong>定义强调文本。45
    <style>定义样式定义。45
    <sub>定义下标文本。45
    <summary>定义 details 元素的标题。 5
    <sup>定义上标文本。45
    <table>定义表格。45
    <tbody>定义表格的主体。45
    <td>定义表格单元。45
    <textarea>定义 textarea。45
    <tfoot>定义表格的脚注。45
    <th>定义表头。45
    <thead>定义表头。45
    <time>定义日期/时间。 5
    <title>定义文档的标题。45
    <tr>定义表格行。45
    <tt>HTML 5 中不支持。定义打字机文本。4 
    <u>HTML 5 中不支持。定义下划线文本。4 
    <ul>定义无序列表。45
    <var>定义变量。45
    <video>定义视频。 5
    <xmp>HTML 5 中不支持。定义预格式文本。4 

html5cn
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一文读懂HTML5和HTML4区别！
weixin_54963682的博客
03-23 186
一文读懂HTML5和HTML4区别！ HTML5自从2010年正式推出后，它以惊人速度发展，现在主流浏览器基本上都支持了HTML5（除了个别的特性在浏览器兼容有问题），这说明HTML5越来越受到欢迎。可以预测不久的将来HTML5会成为web前端的主流技术。HTML5特效更好适应移动互联网时代，可以更好支持多媒体在移动设备上运行。 html5和html4有什么不同？ 定义上区别 HTML5是应用超文本标记语言(HTML)的第五次修改，HTML4是应用超文本标记语言(HTML)的第四次修..
HTML+JS+mergely在线文件对比
05-09
HTML和JavaScript是构建Web应用程序的基石，而在线文件对比工具则是一种高效的工作辅助工具，尤其在版本控制或代码审查中非常实用。Mergely是一款基于Web的文件比较工具，它利用HTML和JavaScript技术实现了在浏览器...
html5
weixin_30566111的博客
07-31 985
1.向后兼容 HTML5是这样被定义的：能向后兼容目前UA处理内容的方式。为了让语言更简单，一些老的元素和Attribute被舍弃。比如一些纯粹用于展现的元素（译注：即非语义化的元素，如big）或Attribute被舍弃，因为他们更适合用CSS来处理。但UA依然可以支持老旧的属性和元素。这就是为什么HTML5标准清楚地划分了给开发的要求和给UA的要求。比如，开发者不应当使用plaintext元...
HTML 5新特性和HTML4对比
abyss
08-14 1409
HTML 5 特性 1 指定字符编码 2 可以省略的标记元素 3 具有 boolean 值的属性 4 省略引号 HTML5 新增和废除的元素 1 新增的元素 2 新增 input 元素的类型 3 废除的元素 31 使用 CSS 替代的元素 32 不再使用 frame 框架 33 只有部分浏览器支持的元素 新增和废除的属性 1 新增的属性 11 表单相关的属性 12 链接相关属性 13 其他属性 2
简述HTML5和HTML4的区别,Html5和Html4的区别
weixin_39765796的博客
06-24 437
html5解决了：web浏览器之间的兼容性很低、文档结构不明确等功能。一、Html5和Html4的区别(1)语法的改变：内容类型：文件名还是 .html或 .htm；文件类型还是 texttypeDOCTYPE声明：变化较大(在html4中要指定版本)，指定字符编码：html4： ;html5 ：(2)可以省略标记的元素：具有boolean值得属性值为true的情况：值为false的情况：(3)...
HTML5与HTML4的区别，新增的元素有哪些？
IT届的小学生
12-20 1505
注：部分格式编写存在<>封闭错误，只为在博客中显示，并非正确写法。 1. HTML5推出的理由解决Web上存在的问题：Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。原因：各浏览器规范不统一，没有被标准化。解决方案：使各浏览器的功能符合通用标准。文档结构不够明确：HTML4中元素不能把文档结构表示清楚。解决方案：增加与结构相
国内三大HTML5平台的对比分析共5页.pdf.zip
11-25
1. **技术支持**：每个平台对HTML5新特性的支持程度，包括Web存储、WebSocket、离线应用、多媒体元素等。 2. **开发工具**：提供的编辑器、调试器、预览器等是否完善，能否帮助开发者高效工作。 3. **社区资源**：...
html差异化比较工具(网页版)
09-09
HTML差异化比较工具是一种在线网页版的应用程序，专为开发者设计，用于比较两个HTML文档之间的差异。这个工具解决了在C/S（客户端/服务器）模式下缺乏类似功能的问题，它提供了便捷的网页界面，允许用户直接在浏览器...
HTML5CSS3原图对比查看特效源码.zip
11-03
这个源码可能利用HTML5的Canvas和CSS3的过渡效果实现图片对比功能，用户可以通过滑动条或点击按钮在原始图片和修改后的图片之间切换，直观地看到差异。具体实现可能涉及JavaScript事件监听、DOM操作以及Canvas的绘图...
Html差异文件（加实例）
11-21
在"html差异比较文件"中，我们可以找到不同HTML版本间的对比，例如HTML4、HTML5以及可能的HTML5.1或HTML5.2等。这些差异可能涉及到元素的添加、删除、属性的变更以及语义化的改进。例如，HTML5引入了新的结构元素如`...
HTML 5的页面结构和HTML 4或早先的HTML有什么不同？
weixin_52630329的博客
12-09 235
HTML 5的页面结构和HTML 4或早先的HTML有什么不同？ 一个典型的Web页面有页眉（header），页脚（footer），导航（navigation），正文（central area）和侧栏（side bar）。现在如果是在HTML 4中，HTML部分中的上述这些专用名词需要使用DIV标签来描述。 但是，如果是在HTML 5，可以专门为这些区域创建特定的元素名，让HTML更具可读性。 以下是形成页面结构的HTML 5元素的更多细节。 ：表现HTML的标题数据。 ：页面的页脚部分。 ：页面中的导航
HTML和HTML5之间的区别
culing2941的博客
09-15 394
In this article you will learn about difference between HTML and HTML5. 在本文中，您将了解HTML和HTML5之间的区别。 Introduction to Markup Languages 标记语言简介 The term markup language may not ring the bell for an indi...
html和htm、html5对比
Seemyc的博客
05-13 970
HTM是超文本标记Hypertext Markup  HTML是超文本标记语言Hypertext Markup Language 同时，这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误（这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个连接的） 实际上HTM与HTML没有本质意义的区别，只是为了满足DOS
html5页面结构与html4的区别,HTML5与HTML4的区别-----通用的排版结构
weixin_26901145的博客
06-05 231
一个网页通常分为：头部，主体内容和脚部三个部分，当然也有其他更细的划分方法。以移动端为例，当给一个设计图，我通常使用一下结构；返回首页分类菜单提意见手机网易分类菜单对于header section footer等新增的元素,在低版本浏览器IE8及以下不识别，会转成 div元素。不考虑到兼容可以不加类名。在编写html时，结构越简单越好。样式相同的地方，提取出相同的类名。img元素，当在网页中具有实...
html4与html5之间的差异
weixin_34185560的博客
11-08 126
2019独角兽企业重金招聘Python工程师标准>>> ...
html5与html的区别你可知道?
zyj66666的博客
06-27 1230
现在HTML5开发是一个网页的趋势，我们有体验过，愤怒的小鸟，在流畅度、清晰、响应速度上都有一定的优势，现在的很多的网页游戏它们都是使用html5技术来开发出来的，因此很多开发者也是热衷于html5的一个开发，那么它和html的区别是在哪里呢？本文将为大家进行一个简单的阐述。 　　重点来了，那么什么是html5呢？ 　　实际上html5最先由WHATWG(web超文本应用技术工
HTML5与HTML4的区别-----通用的排版结构
weixin_30391339的博客
03-03 92
一个网页通常分为：头部，主体内容和脚部三个部分，当然也有其他更细的划分方法。 以移动端为例， 当给一个设计图，我通常使用一下结构； <div class="container"> 　　<header class="header"> 　　　　<img src="./logo.png" /> 　　　　<a href="#">返回首页<...
HTML5对比HTML4带来的新变化
Just Code
07-18 891
HTML5入门 HTML5是HTML的最新版本，目标是更好地开发网络应用程序。 HTML5比HTML4拥有更简洁的语法并且提供了更多新的特性。 本文将对HTML5做一个大体的介绍。     HTML5能做什么？ 1. 离线存储 HTML5可以让你的WEB应用程序离线也能运行,它提供了一个称作“应用程序缓存"的离线存储功能，因此即使当用户离线，浏览器仍然能够访问到它所需的文件。...
H5学习笔记1：HTML5与HTML4的区别
weixin_42583552的博客
10-17 309
1. HTML5推出的理由 解决Web上存在的问题： Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。 原因：各浏览器规范不统一，没有被标准化。 解决方案：使各浏览器的功能符合通用标准。 文档结构不够明确：HTML4中元素不能把文档结构表示清楚。 解决方案：增加与结构相关的元素。 Web应用程序的功能受到限制：HTMLL4对Web应用程序的贡献很小，比如：不允许同时上传多个文件。 解决方案：提供供Web应用程序使用的API。
Python爬虫超详细实战攻略课件第2章HTML基础知识和Python文本处理.ppt
最新发布
02-20
Python爬虫超详细实战攻略课件第2章HTML基础知识和Python文本处理.ppt

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值