Html4是html标准中比较成熟的一个版本,目前使用时间最长。html5是html标准中先进的最新标准,新增了更加丰富的语义化标签,更好的被机器识别。另外canvas+webgl实现无插件的动画和绘图能力。还有新增了例如本地存储、websocket、语义化标签等。
html5新增元素和标签
-
canvas元素
-
video和audio元素
-
支持更好的本地离线存储
-
新的特殊内容元素(语义化标签)
-
新的表单空间
-
2d/3d制图
-
本地存储
-
本地SQL数据
-
本地应用
新增了语义标签,都是块级元素
Canvas
用于图形的绘制,canvas标签只是图形容器,必须通过js脚本来完成
可以通过多种方法使用canvas绘制路径、多边形、圆等以及添加图像。
一个画布在网页中是一个矩形框,默认情况下<canvas>元素没有边框和内容
通过canvas的getContext方法能够返回一个上下文cxt对象,其具有一系列绘图API,这些API都可以使用js语言通过ctx调用。
canvas可以返回webgl的3d对象,也可以返回2d对象。
webGL
是一个技术标准,来源于比较成熟的OpenGL标准,目前大多数浏览器都能够支持WebGL技术标准。通过WebGL技术标准可以实现3D绘图,要想实现WebGL或者说获得WebGL API来绘制三维场景,需要用HTML的Canvas元素来实现。
Meta标签
<meta>
标签定义关于 HTML 文档的元数据。元数据是关于数据的数据(信息)。
<meta>
标签始终位于 <head> 元素 内,通常用于指定字符集、页面描述、关键词、文档作者和视口设置:
元数据不会显示在页面上,但可以被机器解析。
浏览器(如何显示内容或重新加载页面)、搜索引擎(关键词)和其他网络服务会用到元数据。
提示:meta 元素有多种不同用法,而且一个 HTML 文档中可以多个 meta 元素。
提示:通过 <meta>
标签,有一种方法让网页设计师控制视口(即用户在网页中可见的区域)(请参见下面的"设置视口"实例)。
注意:每个 meta 元素只能用于一种用途。如果想要使用的特性不止一个,那就应该在 head 元素中添加多个 meta 元素。
meta name属性:来帮助你的主页被各大引擎登录,提高网站的访问量。在这个功能中,最重要的就是对keywords和description属性的设置。
meta viewport属性:用于设置页面视窗宽高缩放
!DOCTYPE
文档类型标记
一种标准通用标记语言的文档类型声明
目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义来解析文档。
不是HTML标签
HTML4和HTML5的区别
文档类型声明
html5中仅定义一种文件声明方式(上文),h5中可以不适用版本说明,适用于所有版本的html
指定字符编码
h4使用meta元素的形式指定文件中的字符编码
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
h5使用meta元素直接追加charset属性来指定字符编码
指定省略标记
指定一些元素不允许写结束标记(<br />、<col />……)
指定可以省略标记的元素(<li>、<p>)
指定一些可以完全被省略的元素(<html>)
指定boolean值的属性
<input type="checkbox" checked>
省略引号
在指定属性值的时候,属性值两边加引号时,既可以用双引号也可以用单引号
当属性值不包括空字符串、<、>、=、单引号、双引号等字符时,引号可以省略
<input type=text>
web存储
web存储需要更加的安全和快速,这些数据不会保存在服务器上,但是这些数据只用于用户请求网站的数据上。它可以存储大量的数据而不影响网站的性能,数据以键值对存在,网页的数据只能匀速该网页访问使用。
LoacalStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除
SessionStorage - 用于临时保存同一窗口的数据,在关闭窗口或者标签页之后将会删除这些数据
方法:
保存数据
.setItem(key,value)
读取数据
.getItem(key)
删除单个数据
.removeItem
删除所有数据
.clear
得到某个索引的key
.key(index)
localStorage、sessionStorage、cookie异同
相同点:都是存储在浏览器端
不同点:
1、传递方式不同
cookie的数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递
storage不会自动把数据发送给服务器,仅仅是浏览器本地保存
2、数据量大小不同
cookie数据不能超过4k(由于http请求都会携带cookie,所以cookie适合保存很小的数据)
storage也有限制,但是能达到5m或者更大
3、数据有效期不同
sessionStorage:当前浏览器窗口关闭前有效,不能持久保存
localStorage:始终有效,窗口或者浏览器关闭也有效
cookie:在设置的过期时间之前一直有效,即使窗口和浏览器关闭。
4、作用域不同
sessionStorage仅在一个窗口下,在不同的浏览器窗口中也不共享,即使是同一个页面
localStorage在所有同源窗口中都共享
cookie在所有同源窗口中共享