HTML 4与HTML 5的一些区别

最新推荐文章于 2022-05-26 15:19:24 发布
最新推荐文章于 2022-05-26 15:19:24 发布
阅读量616 收藏
点赞数
分类专栏： HTML 5 - Up and running 文章标签： html stylesheet xhtml 文档 浏览器 ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zanos/article/details/7097064
版权
以一个HTML页与该页面HTML 5的写法为例，比较下HTML 4与HTML 5的区别。


1. DocType
DocType的由来是个比较有趣的故事。微软在开发IE 5的时候，发现IE 5比IE 4在对HTML标准规范支持上提高非常多，所以很快旧的页面不再对在新的版本中被渲染，原因是这些页面的编写方式都很不规范，而旧的浏览器也是在很不规范地处理HTML页面。所以他们想了个办法，在每个新的页面中加入DocType来指出这个项目是需要用新的IE渲染方式的，而不加doctype的页面是用旧的渲染方式。这样也就把页面的渲染方式变成了不同的模式。


在HTML 4中，doctype的指定方式为： 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

而在HTML 5中，只需要很简单的指定为： 
<!DOCTYPE html>
即可


2. 根元素
页面的根元素为<html>，在HTML 4中如果为了指出一个页面是符合XHTML 1.0规范，就需要写成： 
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">

但HTML 5总是符合XHTML 1.0规范的，所以只需要写为 
<html lang="en">

即可


3. 字符编码
一个页面的字符编码信息告诉浏览器当前页面是用什么字符编码，这样才能用正确的字符集进行显示。
HTML 4中可以用： 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML 5只需要使用 
<meta charset="utf-8" />
即可


4. Link
页面的link表示了这个页面与其他页面之间的关系（当前页面的扩展，或是链接向其他页面）。当前页面的扩展信息是用来辅助进行页面渲染的，比如说页面的CSS。页链向其他页面的link则更多的信息，没有实际的作用。举例说明HTML 4与HTML 5在link上的区别


rel=stylesheet
HTML 4: 
<link rel="stylesheet" href="style-original.css" type="text/css" />


HTML 5: 
 <link rel="stylesheet" href="style-original.css" />

 因为页面只有CSS一种stylesheet，所以type没必要了。


ref=alternate
HTML 4中只是用它来指定页面的RSS feed信息
HTML 5不仅可以用它指定RSS feed信息，也会用它来表示该页有另外一种阅读方式，如PDF形式，等。


5. HTML 5加入的新元素


- <section>是文档或应用的一个章节
- <nav>是section之间的导航信息
- <article>表示一个完整的文档、应用，它可以被独立的分发和重用。
- <aside>表示与当前section相关的一些信息，用于补充当前页面信息
- <hgroup>表示section的标头信息，可以组合h1到h6到一个hgroup中。
- <header>页面的顶端部分
- <footer>页面的底部
- <time>表示一个时间信息
- <mark>一个文档的标注信息
zanos
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html4与html5效果,HTML4与HTML5的区别
weixin_28858247的博客
06-04 1775
一、HTML4与HTML5的区别1、取消了一些过时的 HTML4的标签其中包括纯粹显示效果的标记，如和，它们已经被 CSS完全取代。其他取消的属性:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。2、添加了一些新的元素比如：更加智能的表单标签：date...
html标签中h4和h5,h5与h4的区别
weixin_42138525的博客
06-15 2837
HTML5新特性HTML5 中一些有趣的新特性：①用于绘画的 canvas 元素；②用于媒介回放的 video 和 audio 元素；③对本地离线存储的更好的支持；④新的特殊内容元素，比如 article、footer、header、nav、section；⑤新的表单控件，比如 calendar、date、time、email、url、search"以上是w3c上的原话，简单说就是更符合标准，提供...
HTML 5 与HTML 4 的区别
weixin_30747253的博客
09-14 82
（1）HTML 5 与HTML 4 的相比，语法的改变，以下四个方面： 字符编码改变举例： 省略标记值： （2）新增和废弃的元素 （3）新增html全局属性 （1）指定元素是否可编辑 （2）指定页面是否可编辑on：可编辑off：不可编辑 （3）True：使元素处于不可见状态 （4）对文本进行拼写和语法检查 （5）访问顺序则按tabindex访问...
HTML4和HTML5的区别
程序员Monkey的专栏
07-27 1342
HTML5是最新的HTML标准，或迟或早，所有的web程序员都会发现需要使用到这个最新的标准，而且，很多人都会感觉到，重新开发一个HTML5的网站，要比把一个网站从HTML4迁移到HTML5上容易的多，这是因为这两个版本之间有很大不同之处。 事实上，HTML5并没有对HTML4做什么重大的修改，它们很多东西都是相似的。 　　可是，其中有一些很重要的区别你需要知道。下面列出的就是一些HT
html4和html5的区别
qq_43205326的博客
12-12 3315
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
HTML4与HTML5的区别
白雪
07-16 1434
HTML4和HTML5的区别 1、取消了一些过时的HTML4标签     其中包括纯粹显示效果的标记，如&lt;font &gt;和&lt;center&gt;，他们已经被css完全取代。     其他取消的属性：acronym、applet、basefont、big、center、dir、font、frame、frameset、isindex、noframes、strike、tt。 2、...
HTML5和HTML4的区别
xuan的博客
08-16 5328
1HTML5中的标记方法 1.1 内容类型（ContentType） HTML5的文件扩展符与内容类型保持不变。即扩展符仍然为".html"或".htm"，内容类型仍然为“text/html”。 1.2DOCTYPE HTML4 <！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML5与传统HTML的区别
小瑾沐晚风的博客
09-27 1万+
参考 1.什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 为 HTML5 建立的一些规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScrip...
uniapp 和 HTML5 区别
CRMEB小程序商城的博客
05-26 3061
uniapp 和 HTML5 区别：1、uniapp 是一个使用 Vue.js 开发所有前端应用的框架，而 HTML5 是构建 Web 内容的一种语言描述方式；2、uniapp 不支持 dom 操作，而 H5 端有 dom 对象；3、uniapp 不支持过滤器等等。 本教程操作环境：windows7 系统、uni-app2.5.1 版本、thinkpad t480 电脑。 推荐（免费）：uni-app 开发教程 uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到
HTML5与HTML4的区别中文WORD版
07-22
资源名称：HTML5与HTML4的区别 中文WORD版本文档主要讲述的是HTML5与HTML4的区别；有需要的朋友可以下载看看 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Web时代变迁及html5与html4的区别
12-13
HTML5不仅保留了HTML4的一些核心特性，还引入了一系列新功能和改进，使得网页开发更为高效且具有更好的用户体验。 在HTML5中，最显著的变化之一是新增了结构性元素。例如，`<header>`、`<footer>`、`<nav>`、`...
html4 与html 5 的区别
10-14
html4 与html5 的区别，html5 快速人们，html4 与html5 的比较
HTML5和以前HTML4的区别整理
12-14
HTML5是HTML标准的重大升级，它在HTML4的基础上进行了诸多改进和创新，旨在提供更高效、更具语义化的网页开发体验。以下是一些主要的区别点： 1. **简化的语法**： - HTML5的doctype声明更为简洁，只需要`<!...
检查浏览器是否支持HTML 5功能（附检查代码）
学而乐
12-21 2613
老的浏览器是不支持HTML 5的功能的，部分新的浏览器目前可以支持部分HTML 5特性。有4种检测是否支持HTML 5的方法： 1. 检查目标属性是否被支持在某个全局对象中（如window或navigator） 2. 创建一个元素，检测目标属性是否存在于该元素中 3. 创建一个元素，检测是否支持该元素的某种方法，再检测方法的返回是否正确。 4. 创建一个元素，为该元素的某属性赋值，再检测该
Canvas的使用方法
学而乐
12-25 1474
1. Canvas简介 单纯的canvas是指一块画布，你可以在这块画布上绘制任何你需要的图形图象内容。Canvas具有最基本的绘制区域的宽与高两个属性，以及该元素的名字属性。在使用之前可以用前面的检测方法得知当前浏览器是否支持canvas元素。定义一个画布： 在javasrcipt中，就可以在document里取得该画布的句柄： var mycanvas = document.ge
视频播放- video标签
学而乐
12-25 825
HTML 5支持很多种格式的音视频编码与封装格式，使之可与flash player相抗衡。 支持封装格式有mp4, m4v, mov, flv, ogv, webm, avi等。 其中支持的视频压缩格式有：H.264, Theora, VP8，音频压缩格式有mp3, aac, vorbis等。 在HTML 5语言中，视频的支持很简单，标签可以定义一个视频元素。如： 为了
地理位置信息
学而乐
12-26 697
使用HTML 5来获得地理位置信息是非常容易的。它可以依赖你的IP地址，设备上有的GPS装置等方法取得你当前的地理位置信息。与手机一样，取得用户当前的地理位置信息需要通过用户的许可，以浏览器为例，它会在工具栏弹出一个提示，询问用户是否容许该网站使用当前的地理位置信息。 在确认浏览器支持HTML 5的地理信息之后，可以使用navigator.geolocation.getCurrentPo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值