HTML5和CSS3新特性一览

HTML5

1.HTML5 新元素

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>

规定在文本中的何处适合添加换行符。

2.HTML5 Canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

  1. <canvas>简单实例如下:
  2. <canvas id="myCanvas" width="200" height="100"></canvas>
使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

  1. <script>
  2. var c=document.getElementById("myCanvas");
  3. var ctx=c.getContext("2d");
  4. ctx.fillStyle="#FF0000";
  5. ctx.fillRect(0,0,150,75);
  6. </script> 

3.HTML5 拖放

 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

  1. <img draggable="true">

拖动什么 - ondragstart 和 setData()

放到何处 - ondragover

进行放置 - ondrop

4.HTML5 地理定位

 HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。


  1. <script>
  2. var x=document.getElementById("demo");
  3. function getLocation()
  4.   {
  5.   if (navigator.geolocation)
  6.     {
  7.     navigator.geolocation.getCurrentPosition(showPosition);
  8.     }
  9.   else{x.innerHTML="该浏览器不支持获取地理位置。";}
  10.   }
  11. function showPosition(position)
  12.   {
  13.   x.innerHTML="Latitude: " + position.coords.latitude + 
  14.   "<br>Longitude: " + position.coords.longitude; 
  15.   }
  16. </script>

5.HTML5  Audio(音频)、Video(视频)

 HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。


  1. <audio controls>
  2.   <source src="horse.ogg" type="audio/ogg">
  3.   <source src="horse.mp3" type="audio/mpeg">
  4. 您的浏览器不支持 audio 元素。
  5. </audio>

 HTML5 规定了一种通过 video 元素来包含视频的标准方法。

  1. <video width="320" height="240" controls>
  2.   <source src="movie.mp4" type="video/mp4">
  3.   <source src="movie.ogg" type="video/ogg">
  4. 您的浏览器不支持Video标签。
  5. </video>


6.HTML5 Input 类型

 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

  • color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week


  1. <input type="range" name="points" min="1" max="10">
  2. Search Google: <input type="search" name="googlesearch">
  3. 电话号码: <input type="tel" name="usrtel">

 

7.HTML5 表单元素

 HTML5 有以下新的表单元素:

标签描述
<datalist><input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>><keygen> 标签规定用于表单的密钥对生成器字段。
<output><output> 标签定义不同类型的输出，比如脚本的输出。

 <datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

  1. <input list="browsers">
  3. <datalist id="browsers">
  4.   <option value="Internet Explorer">
  5.   <option value="Firefox">
  6.   <option value="Chrome">
  7.   <option value="Opera">
  8.   <option value="Safari">
  9. </datalist>

 

8.HTML5 表单属性

 HTML5 的 <form> 和 <input>标签添加了几个新属性.

<form>新属性：

  • autocomplete、novalidate

<input>新属性：

  • autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

 

9.HTML5 语义元素

 

 HTML5提供了新的语义元素来明确一个Web页面的不同部分:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>














10.HTML5 Web 存储

 Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

  • sessionStorage—客户端数据存储，只能维持在当前会话范围内。
             sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
  • localStorage—客户端数据存储，能维持在多个会话范围内。
             localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

对于大量复杂数据结构，一般使用IndexDB

 

11.HTML5 离线Web应用（应用程序缓存）

 HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

  1. <!DOCTYPE HTML>
  2. <html manifest="demo.appcache">
  4. <body>
  5. The content of the document......
  6. </body>
  8. </html>

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面
    1. CACHE MANIFEST
    2. # 2012-02-21 v1.0.0
    3. /theme.css
    4. /logo.gif
    5. /main.js
    7. NETWORK:
    8. login.php
    10. FALLBACK:
    11. /html/ /offline.html

12.HTML5 Web Workers

 

 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（相当于实现多线程并发）


 

13.HTML5 SSE

 Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

EventSource 对象用于接收服务器发送事件通知：

  1. var source=new EventSource("demo_sse.php");
  2. source.onmessage=function(event)
  3. {
  4.     document.getElementById("result").innerHTML+=event.data + "<br>";
  5. };
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。
  1. <?php 
  2. header('Content-Type: text/event-stream'); 
  3. header('Cache-Control: no-cache'); 
  5. $time = date('r'); 
  6. echo "data: The server time is: {$time}nn"; 
  7. flush(); 
  8. ?>

 

14.HTML5 WebSocket

 WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。


CSS3

CSS3选择器
选择器示例示例说明CSS
.class.intro选择所有class="intro"的元素1
#id#firstname选择所有id="firstname"的元素1
**选择所有元素2
elementp选择所有<p>元素1
element,elementdiv,p选择所有<div>元素和<p>元素1
element elementdiv p选择<div>元素内的所有<p>元素1
element>elementdiv>p选择所有父级是 <div> 元素的 <p> 元素2
element+elementdiv+p选择所有紧接着<div>元素之后的<p>元素2
[attribute][target]选择所有带有target属性元素2
[attribute=value][target=-blank]选择所有使用target="-blank"的元素2
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
[attribute|=language][lang|=en]选择一个lang属性的起始值="EN"的所有元素2
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标在链接上面时1
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个<P>元素的第一个字母1
:first-linep:first-line选择每一个<P>元素的第一行1
:first-childp:first-child指定只有当<p>元素是其父级的第一个子级的样式。2
:beforep:before在每个<p>元素之前插入内容2
:afterp:after在每个<p>元素之后插入内容2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有<p>元素2
element1~element2p~ul选择p元素之后的每一个ul元素3
[attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素3
[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
[attribute*=value]a[src*="44lan"]选择每一个src属性的值包含子字符串"44lan"的元素3
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp:only-child选择每个p元素是其父级的唯一子元素3
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数3
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数3
:last-childp:last-child选择每个p元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素（包括文本节点）3
:target#news:target选择当前活动的#news元素（包含该锚名称的点击的URL）3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput:checked选择每个选中的输入元素3
:not(selector):not(p)选择每个并非p元素的元素3
::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
:out-of-range:out-of-range匹配值在指定区间之外的input元素3
:in-range:in-range匹配值在指定区间之内的input元素3
:read-write:read-write用于匹配可读及可写的元素3
:read-only:read-only用于匹配设置 "readonly"（只读） 属性的元素3
:optional:optional用于匹配可选的输入元素3
:required:required用于匹配设置了 "required" 属性的元素3
:valid:valid用于匹配输入值为合法的元素3
:invalid:invalid用于匹配输入值为非法的元素

 

CSS3 边框（Borders）

 用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

属性说明CSS
border-image设置所有边框图像的速记属性。3
border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
box-shadow附加一个或多个下拉框的阴影3
  1. div
  2. {
  3.   border:2px solid;
  4.   border-radius:25px;
  5.   box-shadow: 10px 10px 5px #888888;
  6.   border-image:url(border.png) 30 30 round;
  7. }

CSS3 背景

 CSS3中包含几个新的背景属性，提供更大背景元素控制。

顺序描述CSS
background-clip规定背景的绘制区域。3
background-origin规定背景图片的定位区域。3
background-size规定背景图片的尺寸。3
  1. div
  2. {
  3.   background:url(img_flwr.gif);
  4.   background-repeat:no-repeat;
  5.   background-size:100% 100%;
  6.   background-origin:content-box;
  7. }

多背景

  1. body
  2. { 
  3.   background-image:url(img_flwr.gif),url(img_tree.gif);
  4. }
CSS3 渐变

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
    1. background: linear-gradient(direction, color-stop1, color-stop2, ...);

  • 径向渐变（Radial Gradients）- 由它们的中心定义
    1. background: radial-gradient(center, shape size, start-color, ..., last-color);


CSS3 文本效果

 

属性描述CSS
hanging-punctuation规定标点字符是否位于线框之外。3
punctuation-trim规定是否对标点字符进行修剪。3
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3
text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。3
text-outline规定文本的轮廓。3
text-overflow规定当文本溢出包含元素时发生的事情。3
text-shadow向文本添加阴影。3
text-wrap规定文本的换行规则。3
word-break规定非中日韩文本的换行规则。3
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3

 

CSS3 字体

 以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的字体在新的CSS3版本有关于@font-face规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

  1. <style> 
  2. @font-face
  3. {
  4.  font-family: myFirstFont;
  5.  src: url(sansation_light.woff);
  6. }
  8. div
  9. {
  10.  font-family:myFirstFont;
  11. }
  12. </style>

CSS3 转换和变形

 

2D新转换属性

以下列出了所有的转换属性:

Property描述CSS
transform适用于2D或3D转换的元素3
transform-origin允许您更改转化元素位置

2D 转换方法

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

 

3D转换属性

下表列出了所有的转换属性：

属性描述CSS
transform向元素应用 2D 或 3D 转换。3
transform-origin允许你改变被转换元素的位置。3
transform-style规定被嵌套元素如何在 3D 空间中显示。3
perspective规定 3D 元素的透视效果。3
perspective-origin规定 3D 元素的底部位置。3
backface-visibility定义元素在不面对屏幕时是否可见。3

3D 转换方法

函数描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

 

CSS3 过渡

 

过渡属性

下表列出了所有的过渡属性:

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3
  1. div
  2. {
  3.  transition-property: width;
  4.  transition-duration: 1s;
  5.  transition-timing-function: linear;
  6.  transition-delay: 2s;
  7. /* Safari */
  8.  -webkit-transition-property:width;
  9.  -webkit-transition-duration:1s;
  10.  -webkit-transition-timing-function:linear;
  11.  -webkit-transition-delay:2s;
  12. }

 

CSS3 动画

 要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

实例

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

  1. @keyframes myfirst
  2. {
  3.  0%   {background: red;}
  4.  25%  {background: yellow;}
  5.  50%  {background: blue;}
  6.  100% {background: green;}
  7. }

下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3


 

  1. div
  2. {
  3.  animation-name: myfirst;
  4.  animation-duration: 5s;
  5.  animation-timing-function: linear;
  6.  animation-delay: 2s;
  7.  animation-iteration-count: infinite;
  8.  animation-direction: alternate;
  9.  animation-play-state: running;
  10. /* Safari and Chrome: */
  11.  -webkit-animation-name: myfirst;
  12.  -webkit-animation-duration: 5s;
  13.  -webkit-animation-timing-function: linear;
  14.  -webkit-animation-delay: 2s;
  15.  -webkit-animation-iteration-count: infinite;
  16.  -webkit-animation-direction: alternate;
  17.  -webkit-animation-play-state: running;
  18. }

CSS3 多列

下表列出了所有 CSS3 的多列属性：

属性描述
column-count指定元素应该被分割的列数。
column-fill指定如何填充列
column-gap指定列与列之间的间隙
column-rule所有 column-rule-* 属性的简写
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的厚度
column-span指定元素要跨越多少列
column-width指定列的宽度
columns设置 column-width 和 column-count 的简写

 

CSS3 盒模型

 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

  • resize：none | both | horizontal | vertical | inherit
  • box-sizing: content-box | border-box | inherit
  • outline:outline-color outline-style outline-width outine-offset

resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

 

CSS3伸缩布局盒模型(弹性盒)

 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

 下表列出了在弹性盒子中常用到的属性:

属性描述
display指定 HTML 元素盒子类型。
flex-direction指定了弹性容器中子元素的排列方式
justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap设置弹性盒子的子元素超出父容器时是否换行。
align-content修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flowflex-direction 和 flex-wrap 的简写
order设置弹性盒子的子元素排列顺序。
align-self在弹性子元素上使用。覆盖容器的 align-items 属性。
flex设置弹性盒子的子元素如何分配空间。

 

CSS3 多媒体查询

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

  1. <link rel="stylesheet" type="text/css" href="site.css" media="screen" />
  2. <link rel="stylesheet" type="text/css" href="print.css" media="print" />
清单 2. 媒体查询规则
  1. @media all and (min-width: 800px) { ... }
  • @media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。
  • (min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

清单 3. and 条件

  1. @media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清单 4. or 关键词
  1. @media (min-width:800px) or (orientation:portrait) { ... }

清单 5. 使用 not
  1. @media (not min-width:800px) { ... }






posted @ 2016-07-11 08:31  FeMiner  阅读(38812)  评论(1)  编辑  收藏  举报