html5 css3新特性了解一下
html5:
- 用于绘画的 canvas 元素 以及SVG
- 用于媒介回放的 video 和 audio 元素
- 拖拽(Drag 和 drop) 地理定位(Geolocation)
- 对本地离线存储的更好的支持
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。) - 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
- 新的 form 属性:
autocomplete
novalidate - 新的 input 属性:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required - 语义元素:有利于搜索引擎优化和快速查找
HTML5 添加了很多语义元素如下所示:
标签 描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
css3:
CSS3实现圆角(border-radius),阴影(box-shadow),
对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询,多栏布局
border-image
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.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 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- 浅谈HTML5的新特性
2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络 ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
随机推荐
- 8、在Shell脚本中使用函数
学习目标Shell的函数 Shell程序也支持函数.函数能完成一特定的功能,可以重复调用这个函数.函数格式如下: 函数名() { 函数体 } 函数调用方式: 函数名 参数列表 实例:编 ...
- 手动修改user-agent
1. 在浏览器地址栏输入 about:config.弹出对话框:
- JMS消息中间件之ActiveMQ学习
1.下载 下载二进制bin文件:http://activemq.apache.org/activemq-5132-release.html 下载源码: 2.启动: 解压任意路径: 启动后: 3.访问: ...
- 一:Shiro知识整理
一:springboot快速入门: 1.建立Maven项目,导入springboot父工程 <!-- 继承springboot默认父工程 --> <parent> <gr ...
- 获取路径path
request 的常用方法 request.getSchema() 返回当前页面使用的协议,http 或是 https; request.getServerName() 返回当前页面所在的服务器的名字 ...
- dubbo配置清单-超详细版
服务发布者 在服务发布者的springboot主配置文件application.properties中添加dubbo配置 #dubbo服务名 spring.dubbo.application.name ...
- apache和tomcat搭建集群
最近在学习简单的apache服务器和两个tomcat一起搭建集群,这里简单记录一下 1.准备工作 ①搭建一个可以运行的web项目 用maven搭建springmvc项目 ,只要将这里面的web.xml ...
- JS原型链继承
继承普通版 继承逻辑上都差不多,普通版调用方式比较繁琐,不利于反复大量的使用: (function (){ //创建一个人员类 function Person(name){ this.name = n ...
- Grunt实践之简易教程
以前自己太low了,都没用过高大上的前端自动化打包工具,开发方式也是偏传统的.加入到新的团队后得拼命赶上啊,前端技术更迭太快,各种技术层出不穷,智商都快不够用了.看人家都用的牛逼哄哄的技术,自己还守着 ...
- iview中事件获取自定义参数
前提:页面渲染多个cascaer组件,根据不同cascader组件选中的值,加载不同内容 解决:此时需要解决的问题是,在on-change事件中返回index索引使用如下格式: <Cascade ...