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
posted @ 2019-03-05 11:18  raocheng  阅读(431)  评论(0编辑  收藏  举报