HTML5,CSS3新特性,与旧版的区别
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 元素
HTML5,CSS3新特性,与旧版的区别的更多相关文章
- 使用Modernizr探测HTML5/CSS3新特性(转载)
转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...
- 使用Modernizr探测HTML5/CSS3新特性
[转] HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和Jav ...
- 学习前端第一天心得体会(初步了解HTML5的新特性以及和HTML的区别)
一.HTML5是什么? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提 ...
- html5 css3新特性了解一下
html5: 用于绘画的 canvas 元素 以及SVG 用于媒介回放的 video 和 audio 元素 拖拽(Drag 和 drop) 地理定位(Geolocation) 对本地离线存储的更好的支 ...
- html5.css3新特性
块: article section, Nav aside header footer 内容分组 future fig caption main 文本级别标签 time i b em str ...
- 21、前端知识点--html5和css3新特性汇总
跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- 浅谈HTML5的新特性
2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络 ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
随机推荐
- 关于 折半查找 while 条件 < , <=
int bin_search(int a[],int len,int key) { int low=0; int high=len-1; while(low<=high) //若为low< ...
- UVA - 1476 Error Curves 三分
Error Curves Josephina is a clever girl and addicted to Machi ...
- 在openwrt上编译一个最简单的ipk包
1 什么是opkg Opkg 是一个轻量快速的套件管理系统,目前已成为 Opensource 界嵌入式系统标准.常用于路由.交换机等嵌入式设备中,用来管理软件包的安装升级与下载. opkg updat ...
- MongoDB基本概念和安装配置
基本概念 MongoDB直接存储JSON. 有了NoSQL数据库之后,可以直接在业务层将数据按照指定的结构进行存储. NO SQL NoSQL 1 数据库 数据库 2 表 集合 3 行 文档 4 列 ...
- 大家都能看懂的 canvas基础教程
原文链接: http://www.shitu91.com/cms/canvasSub/index.html 01.canvas简单的认识 canvas 是html5提供给我们的一个绘图标签 默认大小 ...
- [JZOJ 5910] [NOIP2018模拟10.18] DuLiu 解题报告 (并查集+思维)
题目链接: https://jzoj.net/senior/#contest/show/2530/0 题目: LF是毒瘤出题人中AK IOI2019,不屑于参加NOI的唯一的人.他对人说话,总是满口垃 ...
- python中使用easygui
在阅读<跟孩子一起学编程>的同学对easygui应该不会陌生.书中给出的下载链接有时会连不上,可以试一下http://www.ferg.org/easygui/download.html ...
- spm总体说明
目录 1.如何工作 2.何时使用 1.如何工作 sql plan baseline 是一个关联sql 语句的对象,设计会影响查询优化器生成执行计划,更具体的说,一个sql baseline包含其中的一 ...
- OpenGL编程(六)通过三角形绘画出3D模型
使用三角形绘制3D模型 三角形是基本的多边形,任何多变形都能由三角形组成.三角形是由三个顶点的连线组成.三个点分别是v0:v1:v2. 1.绕法 从某个顶点开始,有两种连线的方法,顺时针和逆时针,这是 ...
- N!,斯特林近似
题目链接 输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. Input 第1行:一个数T,表示后面用作输入测试的数的数量.(1 <= T <= 1000) 第2 - ...