html5 css3新特性了解一下

时间：2023-08-26 12:25:26

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

相关文章