html5新特性、HTML5和HTML4主要区别

最新推荐文章于 2021-06-15 11:50:43 发布

前端大婶儿

最新推荐文章于 2021-06-15 11:50:43 发布

阅读量1.4k

点赞数

分类专栏： Html + CSS 文章标签： html5

本文链接：https://blog.csdn.net/huhm_evget/article/details/115857765

版权

Html + CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML的发展历程

由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTML5的出现即是为了解决这一问题，致力于将Web带入一个成熟的应用平台。

很多人误以为HTML5是指用HTML5+CSS3+Javascript实现的综合网页效果，但实际上HTML5仅仅是一套新的HTML标准，是对HTML及XHTMI的继承与发展。HTML5是一个向下兼容的版本，本质上并不是什么新的技术，只是在功能特性上有了极大的丰富。

任何事情并不是一蹴而就的，HTML标准同样也经历了时间积累，逐渐演化而成HTML5标准。HTML的出现由来已久，从1993年首次以草案的形式发布，再到2008年的HTML5正式版，中间经历了多次版本升级。

HTML1.0：在1993年由互联网工程工作小组(IETF)工作草案发布(并非标准，众多不同版本HTML陆续在全球使用，但是始终未能形成一个广泛的有相同标准的版本。
HTML2.0：HTML2.0相比初版而言，标记得到了极大的丰富。
HTML3.2：HTML3.2是在1996年提出的规范，注重兼容性的提高，并对之前的版本进行了改进
HTML4.0：1997年12月推出的HTML4.0，将HTML推向了一个新高度。该版本倡导将文档结构和样式分离，并实现了表格更灵活的控制。
HTM.401：由1999年提出的4.01版本是在HTML4.0基础上的微小改进

20世纪90年代是HTML发展速度最快的时期，但是自1999年发布的HTML4.01后，业界普遍认为HTM已经步入瓶颈期，W3C组织开始对Web标准的焦点转向 XHTML上。

XHTML1.0：在2000年由W3C组织提出， XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。
XHTML1.1：XHTML1.1是模块化的 XHTML，是货真价实的XML。
XHTML2.0：XHTML2.0是完全模块化可定制的XHTML，随着HTML5的兴起，XHTML2.0工作小组被要求停止工作。
2004年，一些浏览器厂商联合成立了 WHATWG工作组，致力于Web表单和应用程序。此时的W3C组织专注于 XHTML2.0。在2006年，W3C组织组建了新的HTML工作组采纳了 WHATWG的意见，并于2008年发布了HTML5。

由于HTML5能解决实际的问题，所以在规范还未定稿的情况下，各大浏览器厂家已经开始对旗下产品进行升级以支持HTML5的新功能。因此，HTML5得益于浏览器的实验性反馈并且也得到持续的完善，并以这种方式迅速融入对Web平台的实质性改进中。2014年10月，W3C组织宣布历经8年努力，HTML5标准规范终于定稿。

世界知名浏览器对HTML5的支持

微软的IE<分两个阶段IE9以上支持HTML5> 采用内核 Trident，Trident也被称为IE内核
Google的Chrome 最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink
苹果的Safari，最早使用webkit内核，webkit也被称为苹果内核
Opera，最开始采用Google开源的webkit内核，后来Opera浏览器跟随Google将浏览器内核改为Blink内核
Mozilla Firefox，采用Gecko作为内核

HTML5和HTML4主要区别

内容类型（ContentType）

HTML5的文件扩展符与内容类型保持不变。即扩展符仍然为".html"或".htm"，内容类型仍然为“text/html”。

DOCTYPE

HTML4
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

HTML5
<！DOCTYPE html>（不区分大小写）

在H5中，刻意不使用版本声明，一份文档将会适用所有版本的HTML。

另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法如下：

<！DOCTYPE HTML SYSTEM "about:legacy-compat">(不区分大小写，引号不区分是单引号还是双引号)

指定字符编码

HTML4
使用meta元素的形式指定文件中的字符编码(通过 content元素的属性来指定)，如下所示：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5
使用对元素直接追加charset属性的方式来指定字符编码。

<meta charset="UTF-8">

注意：两种方法都有效，但是不能同时混合使用两种方式，从H5开始，对于文件的字符编码推荐使用UTF-8。

html5新特性

一、语义标签

html5语义标签，可以使开发者更方便清晰构建页面的布局。根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构，为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

写HTML代码时应注意什么？

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

HTML5新增了哪些语义标签

<section></section> 定义文档中的主体部分的节、段。
<article></article> 一个特殊的section标签，比section有更明确的语义。定义来自外部的一个独立的、完整的内容块，例如博客的文本。。。
<aside></aside> 用来装载页面中非正文的内容，独立于其他模块。例如广告、成组的链接、侧边栏。。。
<header></header> 定义文档、页面的页眉。通常是一些引导和导航信息，不局限于整个页面头部，也可以用在内容里。
<footer></footer> 定义了文档、页面的页脚，和header类似。
<nav></nav> 定义了一个链接组组成的导航部分，其中的链接可以链接到其他网页或者当前页面的其他部分。
<hgroup></hgroup> 用于对网页或区段(section)的标题元素(h1~h6)进行组合。
<figure></figure> 用于对元素进行组合。
<figcaption></figcaption>为figure元素加标题。一般放在figure第一个子元素或者最后一个。
<details></details> 定义元素的细节，用户可以点击查看或者隐藏。
<summary></summary> 和details连用，用来包含details的标题。
<canvas></canvas> 用来进行canvas绘图。
<video></video> 定义视频。
<audio></audio> 定义音频。
<embed></embed> 定义嵌入网页的内容。比如插件。
<source></source> 该标签为媒介元素(比如video、audio)定义媒介元素。
<datalist id='dl'></datalist> 定义可选数据的列表，与input配合使用(<input list='dl'>)可制作输入值的下拉列表。
<mark></mark> 在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。
<meter [min/max/low/high/optimum/value]></meter> 度量衡，用红黄绿表示出一个数值所在范围。
<output></output> 定义不同类型的输出，样式与span无异。
<progress></progress> 进度条，运行中的进度。
<time></time> 定义日期或者时间。
<keygen></keygen> 定义加密内容。
<command></command> 定义命令行为。

二、增强型表单

html5修改一些新的input输入特性，改善更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	选取日期
datetime	选取日期(UTC时间)
datetime-local	选取日期（无时区）
month	选择一个月份
week	选择周和年
time	选择一个时间
email	包含e-mail地址的输入域
number	数值的输入域
url	url地址的输入域
tel	定义输入电话号码和字段
search	用于搜索域
range	一个范围内数字值的输入域

html5新增了五个表单元素

表单元素	描述
`<datalist>`	用户会在他们输入数据时看到域定义选项的下拉列表
`<progress>`	进度条，展示连接/下载进度
`<meter>`	刻度值，用于某些计量，例如温度、重量等
`<keygen>`	提供一种验证用户的可靠方法，生成一个公钥和私钥
`<output>`	用于不同类型的输出，比如尖酸或脚本输出

html5新增表单属性

属性	描述
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	描述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔
height/wdith	用于image类型`<input>`标签图像高度/宽度
autofocus	规定在页面加载时，域自动获得焦点
multiple	规定`<input>`元素中可选择多个值

三、视频和音频

html5提供了音频和视频文件的标准，既使用<audio>元素。
音频：<audio src=" "></audio>

<audio controls>    //controls属性提供添加播放、暂停和音量控件。
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
</audio>

视频：<video src=" "></video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

四、Canvas绘图

canvas是HTML5中新增的标签，像所有dom一样，拥有自己的属性、方法、和事件，其中就有绘图的方法，js能够调用它在网页上完成绘图。

canvas也是HTML5中最强大的特性之一，允许开发者使用动态和交互式方法在web上实现桌面应用程序的功能。

canvas元素会在网页上创建一个空白区域，然后通过API操作这个区域，与空白的div元素相似，用途完全不同。

语法
<canvas id="ddd" width="200" height="200"></canvas>

绘制矩形：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
	<script type="text/javascript">
		function init(argument) {
			//获取canvas区域
			var canvas = document.getElementById("canvas");
			//获取绘图canvas的上下文，接收两个参数2d或者3d
			var ctx = canvas.getContext("2d");
			//绘制一个带描边的矩形 参数：（x,y,width,height）
			ctx.strokeRect(10,10,260,260);
			//绘制一个颜色实心的矩形
			ctx.fillRect(20,20,240,240);
			//清除一个矩形形状的区域
			ctx.clearRect(30,30,220,220);
		}
		window.addEventListener("load",init,false);
	</script>
</head>
<body>
	<canvas id="canvas" width="600" height="600">
		Does not support canvas;
	</canvas>
</body>
</html>

绘制图形中需要的一些方法：

save（）保存当前绘制状态
restore（）恢复前一次绘制状态
traslate（）设置（改变）画布原点的位置

颜色

在创建图形时如果不设定颜色，那么所有的图形都会收用默认颜色–纯黑色，可以用以下属性指定绘制颜色：

strokeStyle 声明形状线条颜色
fillStyle 声明形状内部区域的颜色
globalAlpha 透明度属性，可以设置画布上图形的透明度

使用方法：
ctx.fillStyle = "rgba(23,45,204,0.5)"
ctx.strokeStyle = "#666"

渐变

canvas支持的渐变效果包括线性渐变或射线渐变，并且支持设置颜色转折点。

语法：

createLinearGradient（x1,y1,x2,y2）;创建线性渐变
createRadialGradient（x1,y1,r1,x2,y2,r2）;创建圆形放射性渐变
addColorStop（position，color）；指定渐变颜色值

示例代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

放射性的渐变

示例代码：

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(70,70,0,90,90,30);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,300,150);
</script>

创建路径

以上的方法都是直接在画布上绘图，针对一些复杂图形的绘制，就需要自己通过路径进行绘制。路径就是画笔移动的地图，路径建立后，将其发送给上下文，就可以在画布上实际地方绘制出图形。

方法：

beginPath（）开始一个新的形状描述，创建路径之前，必须先调用这个方法
closePath（）关闭路径，用直线将最后一个点与原点相连，如果想保留路径，则不需要调用这个方法
stroke（）将路径绘制为轮廓形状
fill（）将路径绘制为实心形状，使用该方法时可以不用closePath关闭路径，该方法会通过连接最后一个点和第一个点实现封闭
clip（）在上下文中设置裁剪区域

以下方法可以用于设置路径和创建真正的形状：

moveTo（x，y）将笔触移到指定的位置
lineTo（x，y）绘制一条直线，连接当前笔触位置到x和y位置的新位置
rect（x，y，width，height）生成一个矩形路径
arc（x，y，radius，startAngle，endAngle，direction）这个方法可以在位置（x，y）上生成弧线或圆形，半径和弧度分别由属性指定，direction是布尔类型，表示顺时针还方向是逆时针方向

五、SVG绘图

什么是SVG?

SVG指可伸缩矢量图形
SVG用于定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准

SVG的优势

与其他图像格式相比，是哟个SVG的优势在于：

SVG图像可通过文本编译器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大

SVG与Canvas区别

SVG适用于描述XML中的2D图形的语言
Canvas随时随地绘制2D图形（使用javaScript）
SVG是基于XML的，意味这可以操作DOM，渲染速度较慢
在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘
Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘。

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
能够以.png或.jpg格式保存结果图像	复杂度会减慢搞渲染速度
文字呈现功能比较简单	适合大型渲染区域的应用程序
最合适图像密集的游戏	不适合游戏应用

六、地理定位

使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务”

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

七、拖放API

拖放是一种常见的特性，即捉取对象以后拖到另一个位置。在html5中，拖放是标准的一部分，任何元素都能够拖放。

<div draggable="true"></div>

当元素拖动时，我们可以检查其拖动的数据。

<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
    console.log(ev);
}
</script>

拖动生命周期	属性名	描述
拖动开始	ondragstart	在拖动操作开始时执行脚本
拖动过程中	ondrag	只要脚本在被拖动就运行脚本
拖动过程中	ondragenter	当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中	ondragover	只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中	ondragleave	当元素离开合法的防止目标时
拖动结束	ondrop	将被拖动元素放在目标元素内时运行脚本
拖动结束	ondragend	在拖动操作结束时运行脚本

八、Web Worker

Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。

基本使用：

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，

起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。

javascript:

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
worker.postMessage("hello world");     //向worker发送数据
worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
}
</script>
</head>
<body></body>
</html>

九、Web Storage

WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的，session正式依赖与实现的客户端状态保持。WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。

websorage拥有5M的存储容量，而cookie却只有4K，这是完全不能比的。

客户端存储数据有两个对象，其用法基本是一致。

localStorage：没有时间限制的数据存储

sessionStorage:在浏览器关闭的时候就会清除。

localStorage.setItem(key,value);//保存数据
let value = localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//删除所有数据
let key = localStorage.key(index);//得到某个索引的值