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. Django多进程日志文件问题

    Django多进程日志文件问题 最近使用Django做一个项目.在部署的时候发现日志文件不能滚动(我使用的是RotatingFileHandler),只有一个日志文件. 查看Log发现一个错误消息:P ...

  2. Golang教程:并发介绍

    Go是并发语言,而不是并行语言.在讨论Go并发性之前,我们必须首先了解什么是并发,以及并发与并行的区别. 什么是并发 并发(concurrency)是指一次处理大量事情的能力.让我们用一个例子来说明. ...

  3. easypoi导出单个sheet和多个sheet

    今天有时间研究了一下easypoi,感觉使用了easypoi导出excel方便了很多,不用写很多复杂的反射,只需要使用注解和一些工具类就可以实现常用的excel的导出,接下来介绍一下easypoi如何 ...

  4. docker 开机自动启动容器

    注意:如果有存在多个容器,都占用了同一端口,那么只会起来一个,要注意,我在调试时候就遇到这个坑了 在使用docker run启动容器时,使用--restart参数来设置: docker run -m  ...

  5. shell编程之while死循环

    原文 在linux下编程的程序猿都知道shell脚本,就算你不怎么熟悉,也应该听过的吧!那在shell脚本中的死循环该怎么写呢? 对于熟悉C语言的猿人们来说,最简单的死循环应该这样写: ------- ...

  6. MVC 控制器中直接访问url 的方式

    public void ShowDetailsImg() { //生成MD5码 string path = @"D:\其他\Test\WebApplication2\WebApplicati ...

  7. String.replace使用技巧

    relace replace() 方法返回一个由替换值替换一些或所有匹配的模式后的新字符串.模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数. 使用字符串 ...

  8. Can't read stdin: end of file found

    问题是在我修改svn的账号和密码后出现的,因为百度出来的情况只有一种答案,所以记录一下我的情况,给其他人多一种排查思路.问题根源是,由于该版本库只有一个账号,更改了账号密码,没有同步修改post-co ...

  9. mysql if函数使用例子

    1.场景一 有时查询数量a 同时查询过滤后的数量b 2. 代码 SELECT count(id) as total_count, count( IF ( date(order_time) = DATE ...

  10. 使用JS完成首页轮播图效果

    获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...