HTML5,CSS3新特性,与旧版的区别

时间:2021-08-04 12:10:50

HTML5新特性

(1)语意化更好的内容元素,比如 article、footer、header、nav、section
(2)本地存储。sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况
if(window.sessionStorage){
//浏览器支持sessionStorage
}
if(window.localStorage){
//浏览器支持localStorage
}

localStorage和sessionStorage,cookie的区别:
sessionStorage基于会话,关闭浏览器之后存储消失。
localStorage是域内安全,也就是同一个域才能对localStorage进行存储,所以可能遇到的坑是跨域问题,可以通过postMessage来解决
localStorage在各浏览器中上限不同,最低的是2.6MB, 所以开发上限为2.6MB,如果还是不够的话可借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间,不过这个可以在localStorage中加一个时间字段轻松解决这个问题。

(3)离线web应用

(4)表单新增功能

可以通过input的form属性綁定form,实现数据随着form表单一起提交
placeholder屬性
autofocus属性,页面只能有一个
表单控件,calendar、date、time、email、url、search、number。

(5)地理定位

CSS3提供了更多的选择器:

before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局,用户界面

-moz、-webket,-o,-ms(IE)等等css做浏览器兼容用
还可以使用media-query实现响应式布局
用于媒介回放的 video 和 audio 元素
用于绘画 canvas 元素