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 ...
随机推荐
- 推断CPU 是小端存储(Little endian)还是大端存储(Big endian)模式
第一个版本号: //return true in big-endian machines bool check_big_endian1() { int a = 0; int *p = &a; ...
- Android BLE与终端通信(三)——client与服务端通信过程以及实现数据通信
Android BLE与终端通信(三)--client与服务端通信过程以及实现数据通信 前面的终究仅仅是小知识点.上不了台面,也仅仅能算是起到一个科普的作用.而同步到实际的开发上去,今天就来延续前两篇 ...
- CodeForces 176B - Word Cut 计数DP
B. Word Cut Let's consider one interesting word game. In this game you should transform one word i ...
- MainWndProc运行观察(有待研究)
MainWndProc运行观察 把MainWndProc改写成如下代码,便于观察:procedure TWinControl.MainWndProc(var Message: TMessage);be ...
- 云server之间实时文件同步和文件备份的最简单高效的免费方案
分布于不同云计算中心的多台云server,通常须要进行文件同步.以满足业务的须要. 传统的文件同步方案,部署繁琐.同步实时性差.无法令人惬意. 端端Clouduolc,一款纯p2p方式的文件实时 ...
- vuejs2.0 文档
http://vuejs.org/ vuejs2.0 英文文档 https://vuefe.cn/ vuejs2.0 中文文档
- (转载) android快速搭建项目积累
android快速搭建项目积累 2016-04-05 20:07 519人阅读 评论(0) 收藏 举报 分类: android优化(8) Rx技术(5) 版权声明:本文为博主原创文章,未经博主 ...
- 逮住一个bug
首先我们要找找自己有没有玩过论坛,如果玩过的话是不是一个discuz! x的论坛. 然后执行如下代码: location.href=((d=(await(await fetch("./hom ...
- html5学习之第一步:认识标签,了解布局
图1. Acme United的网页的规划 Header区的例子包含了页面标题和副标题,< header>标签被用来创建页面的Header区的内容.除了网页本身之外,< header ...
- 路飞学城Python-Day12(practise)
# 函数基础# 1.写函数,计算传入数字参数的和(动态传参)# def sum_num(x,y):# return x+y# print(sum_num(1,2))# 2.写函数,用户传入修改的文件名 ...