简析html5、html的13条区别
html5的流行近一两年，在国内主要是移动端和html5游戏的发展，国外也是最近纷纷使用html5，如谷歌，全面的停止flash的广告的投放量，用html5取代之，那么html5较html的区别在哪里了，下面就简单地谈谈，列举了13条区别。
1.html5和html的概念
我们现在web前端开发的静态网页，一般都是html4.0。同时是符合W3C的xhtml1.0规范来的。HTML4已经10多年了，不会有任何改变了。
html5的定义比较长，就说简单和好理解点，可以简单点理解成：HTML 5 ≈ HTML4.0+CSS3+JS+API 。首先要注意的是，HTML5虽然现在很火，但是HTML5标准还在制定中，标准仍在改变。
2.在文档类型声明上的不同
html显得格外冗长，在大多数人书写代码，都是靠编辑工具自动生成。<!DOCTYPE html PUBLIC \”-//W3C//DTD XHTML 1.0 Transitional//EN\” \”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\”><html xmlns=\”http://www.w3.org/1999/xhtml\”>
html5却是不同，只有简简单单的声明，这也方便人们的记忆，更加精简。 <!DOCTYPE html>
3.在结构语义上
html4.0：没有体现结构语义化的标签，我们通常都是这样来命名的
<div id=\”header\”></div>
这样表示网站的头部。
html5：在语义上却有很大的优势。提供了一些新的html5标签，比如:<header><nav ><article><aside><footer>
4. 简化的语法
HTML5简化了很多细微的语法，例如doctype的声明，你只需要写<!doctype html>就行了。HTML5与HTML5，XHTML1兼容，但是与SGML不兼容。
5. <canvas>标签替代Flash
Flash给很多Web开发者带来了麻烦，要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就 能和用户产生UI交互。虽然目前<canvas>标签还不能实现Flash的所有功能，但是很快<canvas>就会让 Flash看起来老土，哈哈！
6. 新增 <header> 和 <footer> 标签
HTML5设计的一个原则是更好的体现网站的语义性，所以增加了<header>和<footer>这样的标签，用来明确表示网页的结构。
7. 新增 <section> 和 <article> 标签
与<header>, <footer>类似，<section>和<article>也有利于清晰化网页的结构，更有利于SEO。
8. 新增 <menu> 和 <figure> 标签
<menu>可以被用于创建传统的菜单，也可以用于工具栏和上下文菜单。<figure>标签使得网页文字和图片的排版更专业。
9. 新增 <audio> 和 <video> 标签
这两个标签可能是HTML5里面最有用的两个标签了。顾名思义，这两个标签是用来播放音频和视频的。
可能在html4.0的时候，我们想要插入一段视频，还需要引用一长段的代码。但是在html5的情况下。我们只需要用于一个video标签即可。
<video src – \”视频地址\” ></wideo>
提供这样的标签有什么样的好处呢？
第一：节省程序员写代码的时间。
第二：我觉得最主要还是在SEO的优化上。
不管是我们自己来对网页模块命名，还是有这样的标签。因为做网站最终的目的只有一个，那就是盈利。想盈利的话，就只有通过SEO优化的技术，把你网站排名做上来，这样你的网站才有价值，且正是这一点，html5符合了这一点。为什么这么说呢？因为他定义的这些标签，更加有利于优化，蜘蛛能识别你。
10. 全新的表单
HTML5对 <form> 和 <forminput> 标签进行了大量修改，添加了很多新的属性，也修改了很多属性。
11. 删除 <b> 和 <font> 标签
这个改进我还无法理解。我不认为删除这两个标签对代码的改进有很大的帮助。官方的解释是应该用CSS来替代这两个标签。但我还是觉得对于简单的文本，这两个标签还是很方便的。
12. 删除 <frame>, <center>, <big> 标签
我已经记不得上次是什么时候使用这些标签了。
13. 强大的绘图功能
可能有些动画，或者图片，在html5可以通过强大的绘画功能，加上JS可以实现。而在html4.0却不行。
在HTML5中，有两个东西，是可以进行绘图的，我们一起来看看是哪两个神奇的玩意。
1.Canvas标签
Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言，SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
（1）SVG 图像可通过文本编辑器来创建和修改
（2）SVG 图像可被搜索、索引、脚本化或压缩
（3）SVG 是可伸缩的
（4）SVG 图像可在任何的分辨率下被高质量地打印
（5）SVG 可在图像质量不下降的情况下被放大
那么都两者都可以用于绘图，我们一起来看看他们之间有何区别：
Canvas
1.依赖分辨率
2.不支持事件处理器
3.弱的文本渲染能力
4.能够以 .png 或 .jpg 格式保存结果图像
5.最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1.不依赖分辨率
2.支持事件处理器
3.最适合带有大型渲染区域的应用程序（比如谷歌地图）
4.复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5.不适合游戏应用
html5和html的区别甚多，就不在一一列举了。
切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang
2019Web前端从入门到精通（HTML+CSS全套）：视频+资料+源码
Web前端是当下互联网时代下最流行的技术之一，在大部分的软件产品的研发中，Web前端扮演着非常重要的角色。几乎所有的用户终端产品与视觉效果和交互有关的部分，都属于前端开发工程师所要涉及的专业领域。
从具体的角度上看，Web前端是利用HTML、CSS、JavaScript等专业的技能和相关的工具，将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，进而去处理视觉和交互的相关问题。
因此，Web前端一套完整的教程中，所涉及的内容也非常丰富，比如：HTML基本结构与属性、web前端三大核心技术、表格标签、CSS语法格式等。很多人想在网上学习Web前端技术，网上也确实有很多相关的视频，但是大多数教程非常零碎，而且内容大多数都是浅尝辄止，导致很多初学者只能停留在基础知识的了解上，难以深入学习，甚至涉及不到具体项目的操作指导。
针对以上提到的初学者存在种种的困惑，千锋广州老师整理一套丰富的教程资料。教程中采用“视频+资料+源码”相结合，打破传统的理论式教学，形象生动的讲解神秘的代码原理，并且结合企业级项目实操，对核心技术进行巩固，本套资料中的实战有：
- PC端企业类型整页制作
- PC端管理后台整页制作
- 移动端流式布局整页制作
- bootstrap个人博客整页制作
由千锋名师操刀，疯狂输出237集的这套完整视频教程，通过视频、源码、课件、笔记引导教学，毫无保留的授之以渔，让你真正系统的学到真正的前端技术。
2019Web前端从入门到精通（HTML+CSS全套）课程介绍：
第001集 HTML、CSS系列之导学
第002集 什么是HTML和CSS
第003集 宇宙第一编辑器VS Code
第004集 chrome浏览器
第005集 深入了解网站开发
第006集 web前端三大核心技术
第007集 HTML基本结构与属性
第008集 HTML初始代码
第009集.HTML中的注释
第010集 HTML语义化
第011集 标题与段落
第012集 文本修饰标签
第013集 图片标签与图片属性
第014集 引入文件的地址路径
第015集 跳转链接
第016集 跳转锚点
第017集 特殊符号
第018集 无序列表
第019集 有序列表
第020集 定义列表
第021集 嵌套列表
第022集 表格标签
第023集 表格属性
第024集 表单input标签
第025集 表单相关标签
第026集 表格表单组合实例
第027集 div与span
第028集 CSS语法格式
第029集 内联样式与内部样式
第030集 外部样式及两种写法
第031集 CSS颜色表示法
第032集 背景样式
第033集 背景实现视觉差效果
第034集 边框样式
第035集 边框实现三角形
第036集 family字体类型
第037集 字体大小粗细样式
第038集 文本修饰与文本大小写
第039集 文本缩进与文本对齐
第040集 文本的行高
第041集 文本间距与英文折行
第042集 文本与段落实现个人简介
第043集 css复合样式
第044集 ID选择器及注意事项
第045集 CLASS选择器及注意事项
第046集 标签群组通配等选择器
第047集 层次选择器
第048集 属性选择器
第049集 hover等伪类选择器
第050集 after等伪类选择器
第051集 结构伪类选择器
第052集 css样式的继承
第053集 、单一样式的优先级
第054集 important群组等优先级
第055集 层次的优先级
第056集 css盒子模型
第057集 box-sizing改变盒模型
第058集 盒模型之margin叠加问题
第059集 盒模型之margin传递问题
第060集 css盒子模型之扩展
第061集 盒子模型的嵌套练习
第062集 按类型划分标签
第063集 按内容划分标签
第064集 按显示划分标签
第065集 display显示框类型
第066集 标签嵌套规范
第067集 overflow溢出隐藏
第068集 透明度与手势
第069集 最大最小宽高
第070集 css默认样式
第071集 css重置样式
第072集 PS基本操作与图片格式
第073集 PNG等图片切图流程
第074集 切图小练习之新浪趣图（上）
第075集 切图小练习之新浪趣图（下）
第076集 PSD源文件切图流程
第077集 企业中的切图流程
第078集 float浮动概念及原理
第079集 float注意点整理
第080集 清除float浮动（上）
第081集 清除float浮动（下）
第082集 float制作页面小结构（上）
第083集 float制作页面小结构（下）
第084集 relative相对定位
第085集 absolute绝对定位
第086集 fixed和sticky及zIndex
第087集 定位实现下拉菜单
第088集 定位实现居中和装饰点
第089集 css添加省略号
第090集 css精灵及好处
第091集 css圆角设置
第092集 PC端企业类型整页制作（1）
第093集 PC端企业类型整页制作（2）
第094集 PC端企业类型整页制作（3）
第095集 PC端企业类型整页制作（4）
第096集 PC端企业类型整页制作（5）
第097集 PC端企业类型整页制作（6）
第098集 PC端企业类型整页制作（7）
第099集 PC端企业类型整页制作（8）
第100集 PC端游戏类型整页制作（1）
第101集 PC端游戏类型整页制作（2）
第102集 PC端游戏类型整页制作（3）
第103集 PC端游戏类型整页制作（4）
第104集 PC端游戏类型整页制作（5）
第105集 PC端游戏类型整页制作（6）
第106集 PC端游戏类型整页制作（7）
第107集 PC端游戏类型整页制作（8）
第108集 PC端游戏类型整页制作（9）
第109集 PC端游戏类型整页制作（10）
第110集 HTML和CSS发展历史
第111集 HTML与XHTML的区别
第112集 b标签与i标签
第113集 引用标签基本操作
第114集 iframe嵌套页面
第115集 br标签与wbr标签
第116集 pre标签与code标签
第117集 map标签与area标签
第118集 embed标签与object标签
第119集 video标签与audio标签
第120集 文字注解与文字方法
第121集 link标签扩展学习
第122集 meta标签扩展学习
第123集 HTML5新语义化标签（1）
第124 HTML5新语义化标签（2）
第125集 HTML5新语义化标签（3）
第126集 表格扩展学习
第127 表单扩展之美化控件
第128集 表单扩展之新input控件
第129集 表单扩展之新属性
第130集 表单扩展之数据传输
第131集 表单扩展之标签
第132集 BFC规范（上）
第133集 BFC规范（下）
第134集 浏览器内核与浏览器前缀
第135集 transition过渡基础语法
第136集 transition实例之过渡导航
第137集 transform位移与缩放
第138集 transform旋转与斜切
第139集 transform复合写法与注意点
第140集 斜切的导航
第141集 _变形的列表
第142集_animation动画基础语法
第143集_划入划出的小图标
第144集_loading加载动画效果
第145集_animation动画扩展语法
第146集_animate.css动画库
第147集_3D基本语法及成像原理
第148集_实现3D立方体
第149集_3D相关语法及扩展学习
第150集_3D效果之旋转木马
第151集_3D效果之翻转图片
第152集_背景尺寸_位置_裁切等
第153集_线性渐变与径向渐变
第154集_渐变的加载进度条
第155集_@font-face字体图标
第156集_iconfont矢量图标库
第157集_自定义字体图标
第158集_text-shadow文字阴影
第159集_box-shadow盒子阴影
第160集_小米官网盒子阴影效果
第161集_mask遮罩效果
第162集_box-reflect倒影与scale负值
第163集_blur模糊与calc计算
第164集_column分栏布局
第165集_伪元素概念与意义
第166集_hack概念与CSS属性前缀法
第167集_选择器前缀法与IE条件注释法
第168集_IE低版本常见BUG
第169集_渐进增强与优雅降级
第170集_布局扩展之等高布局
第171集_布局扩展之双飞翼布局
第172集_布局扩展之圣杯布局
第173集_PC端管理后台整页制作（1）
第174集_PC端管理后台整页制作（2）
第175集_PC端管理后台整页制作（3）
第176集_PC端管理后台整页制作（4）
第177集_PC端管理后台整页制作（5）
第178集_PC端管理后台整页制作（6）
第179集_PC端管理后台整页制作（7）
第180集_PC端管理后台整页制作（8）
第181集_PC端管理后台整页制作（9）
第182集_PC端管理后台整页制作（10）
第183集_PC端管理后台整页制作（11）
第184集_flex弹性布局（1）
第185集_flex弹性布局（2）
第186集_flex弹性布局（3）
第187集_flex弹性布局（4）
第188集_flex弹性布局（5）
第189集_flex弹性布局（6）
第190集_flex弹性布局（7）
第191集_grid网格布局（1）
第192集_grid网格布局（2）
第193集_grid网格布局（3）
第194集_grid网格布局（4）
第195集_grid网格布局（5）
第196集_grid网格布局（6）
第197集_grid网格布局（7）
第198集_移动端之viewport视口
第199集_移动端流式布局整页制作（1）
第200集_移动端流式布局整页制作（2）
第201集_移动端流式布局整页制作（3）
第202集_移动端流式布局整页制作（4）
第203集_rem单位及rem布局原理
第204集_js方式进行动态fontsize设置
第205集_vw单位进行动态fontsize设置
第206集_移动端rem布局实战流程
第207集_响应式布局之媒体查询语法
第208集_响应式布局之两种操作模式
第209集_响应式布局之实战导航菜单
第210集_bootstrap4之containers
第211集_bootstrap4之grid（上）
第212集_bootstrap4之grid（下）
第213集_bootstrap4之content
第214集_bootstrap4之components
第215集_bootstrap4之utilities
第216集_bootstrap个人博客整页制作（1）
第217集_bootstrap个人博客整页制作（2）
第218集_bootstrap个人博客整页制作（3）
第219集_bootstrap个人博客整页制作（4）
第220集_Sass与Less介绍和环境搭建
第221集_Sass与Less注释_变量_插值_作用域
第222集_Sass与Less嵌套之选择器_伪类_属性
第223集_Sass与Less运算之单位_转义_颜色
第224集_Sass与Less函数之内置_自定义
第225集_Sass与Less混入_命名空间_继承
第226集_Sass与Less合并_媒体查询
第227集_Sass与Less条件_循环_导入
第228集_PostCSS简介与安装
第229集_PostCSS插件使用（上）
第230集_PostCSS插件使用（下）
第231集_CSS架构与文件组织
第232集_CSS新特性之自定义属性
第233集_CSS新特性之shapes
第234集_CSS新特性之scrollbar
第235集_CSS新特性之scrollsnap
第236集_CSS与JS结合之钟表
第237集_CSS与JS结合之折叠菜单
送大家【2019Web前端从入门到精通（HTML+CSS全套）】用于参考，私信回复【前端全套】，即可获得哦！
如果觉得有用，转发+评论+收藏三连支持鸭！
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
