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新特性了解一下的更多相关文章

  1. 使用Modernizr探测HTML5/CSS3新特性(转载)

    转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.h ...

  2. 使用Modernizr探测HTML5/CSS3新特性

    [转] HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和Jav ...

  3. html5.css3新特性

    块: article section, Nav aside header footer  内容分组 future fig caption main 文本级别标签   time i b  em  str ...

  4. 21、前端知识点--html5和css3新特性汇总

    跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...

  5. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  6. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  7. 浅谈HTML5的新特性

    2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络 ...

  8. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  9. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

随机推荐

  1. html5的meta标签

    meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签;meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言等等;感兴趣的朋友可以了解下     ...

  2. 有标号的DAG计数 III

    Description 给定一正整数n,对n个点有标号的有向无环图进行计数,这里加一个限制:此图必须是弱连通图.输出答案 mod 10007 的结果. Solution 弱连通图即把边变成无向之后成为 ...

  3. jquery 使用整理

    1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“se ...

  4. (转)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 ...

  5. git flow强制重新初始化

    Gitflow工作流定义了一个围绕项目发布的严格分支模型. git flow初始化命令: git flow init 关于各个分支的命名一路回车就可以了,如果不小心修改了默认的分支命名,后来又觉得不爽 ...

  6. [javaEE] EL表达式调用java方法

    1.新建个类,类里面定义静态方法 package com.tsh.utils; import java.net.URLEncoder; public class ELFunc { public sta ...

  7. windows下es安装教程

    es安装 1.es下载地址:https://www.elastic.co/downloads/past-releases 2.使用es需要先安装好jdk,注意es版本和jdk版本的兼容问题,es6.1 ...

  8. 使用 WireShark 分析 TCP/IP 三次握手 和 四次挥手

    TCP 三次握手 示意图 Wireshark 抓包注意事项 为了演示一个TCP三次握手建立连接的过程,我们通过 Chrome 访问一个网页. 已知 HTTP 协议就是建立在TCP链接上的 比如访问以下 ...

  9. unity3d之控制人物转向移动并播放动画

    tip:transition 勾选Has Exit Time B动画播放完毕后就可以自己返回A不用代码控制.因为想做一个小人静止时 隔两秒会摆动小手的特效. 附上代码参考: using UnityEn ...

  10. 关于display:inline-block布局导致错位问题分析

    移动端设计稿需求是这样的,如下图: 未知的几个头像从左至右并行居中排列. 一般可能直接使用float,但是设计图要求头像排列始终是居中的,于是想到要让它们成为行内元素,然后可使用的方法有flex bo ...