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 ...
随机推荐
- html5的meta标签
meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签;meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言等等;感兴趣的朋友可以了解下 ...
- 有标号的DAG计数 III
Description 给定一正整数n,对n个点有标号的有向无环图进行计数,这里加一个限制:此图必须是弱连通图.输出答案 mod 10007 的结果. Solution 弱连通图即把边变成无向之后成为 ...
- jquery 使用整理
1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“se ...
- (转)The remote certificate is invalid according to the validation procedure
If you get “The remote certificate is invalid according to the validation procedure” exception while ...
- git flow强制重新初始化
Gitflow工作流定义了一个围绕项目发布的严格分支模型. git flow初始化命令: git flow init 关于各个分支的命名一路回车就可以了,如果不小心修改了默认的分支命名,后来又觉得不爽 ...
- [javaEE] EL表达式调用java方法
1.新建个类,类里面定义静态方法 package com.tsh.utils; import java.net.URLEncoder; public class ELFunc { public sta ...
- windows下es安装教程
es安装 1.es下载地址:https://www.elastic.co/downloads/past-releases 2.使用es需要先安装好jdk,注意es版本和jdk版本的兼容问题,es6.1 ...
- 使用 WireShark 分析 TCP/IP 三次握手 和 四次挥手
TCP 三次握手 示意图 Wireshark 抓包注意事项 为了演示一个TCP三次握手建立连接的过程,我们通过 Chrome 访问一个网页. 已知 HTTP 协议就是建立在TCP链接上的 比如访问以下 ...
- unity3d之控制人物转向移动并播放动画
tip:transition 勾选Has Exit Time B动画播放完毕后就可以自己返回A不用代码控制.因为想做一个小人静止时 隔两秒会摆动小手的特效. 附上代码参考: using UnityEn ...
- 关于display:inline-block布局导致错位问题分析
移动端设计稿需求是这样的,如下图: 未知的几个头像从左至右并行居中排列. 一般可能直接使用float,但是设计图要求头像排列始终是居中的,于是想到要让它们成为行内元素,然后可使用的方法有flex bo ...