HTML5
1.HTML5 新元素
HTML5提供了新的元素来创建更好的页面结构:
2.HTML5 Canvas
HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
<canvas>简单实例如下:
<canvasid="myCanvas"width="200"height="100"></canvas>
使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
-
</script>
3.HTML5 拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
拖动什么 - ondragstart 和 setData()
放到何处 - ondragover
进行放置 - ondrop
4.HTML5 地理定位
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
<script>
var x=document.getElementById("demo");
function getLocation()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="Latitude: "+ position.coords.latitude +
"<br>Longitude: "+ position.coords.longitude;
}
</script>
5.HTML5 Audio(音频)、Video(视频)
HTML5 规定了在网页上嵌入音频元素的标准,即使用 <audio> 元素。
<audiocontrols>
<sourcesrc="horse.ogg"type="audio/ogg">
<sourcesrc="horse.mp3"type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
<videowidth="320"height="240"controls>
<sourcesrc="movie.mp4"type="video/mp4">
<sourcesrc="movie.ogg"type="video/ogg">
您的浏览器不支持Video标签。
</video>
6.HTML5 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
-
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
<inputtype="range"name="points"min="1"max="10">
Search Google: <inputtype="search"name="googlesearch">
电话号码: <inputtype="tel"name="usrtel">
7.HTML5 表单元素
HTML5 有以下新的表单元素:
标签 |
描述 |
<datalist> |
<input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
<keygen> |
><keygen> 标签规定用于表单的密钥对生成器字段。 |
<output> |
<output> 标签定义不同类型的输出,比如脚本的输出。 |
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<inputlist="browsers">
<datalistid="browsers">
<optionvalue="Internet Explorer">
<optionvalue="Firefox">
<optionvalue="Chrome">
<optionvalue="Opera">
<optionvalue="Safari">
</datalist>
8.HTML5 表单属性
HTML5 的 <form> 和 <input>标签添加了几个新属性.
<form>新属性:
<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 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
HTML5 Cache Manifest 实例
下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):
<!DOCTYPE HTML>
<htmlmanifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
-
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
-
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
-
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
12.HTML5 Web Workers
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。(相当于实现多线程并发)
13.HTML5 SSE
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
EventSource 对象用于接收服务器发送事件通知:
var source=newEventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data +"<br>";
};
为了让上面的例子可以运行,您还需要能够发送数据更新的服务器(比如 PHP 和 ASP)。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>
14.HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。
CSS3
CSS3选择器
CSS3 边框(Borders)
用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序
div
{
border:2px solid;
border-radius:25px;
box-shadow:10px10px5px#888888;
border-image:url(border.png)3030 round;
}
CSS3 背景
CSS3中包含几个新的背景属性,提供更大背景元素控制。
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100%100%;
background-origin:content-box;
}
多背景
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
CSS3 渐变
CSS3 定义了两种类型的渐变(gradients):
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
-
background: linear-gradient(direction, color-stop1, color-stop2,...);
- 径向渐变(Radial Gradients)- 由它们的中心定义
-
background: radial-gradient(center, shape size, start-color,...,last-color);
CSS3 文本效果
CSS3 字体
以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3,网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。您所选择的字体在新的CSS3版本有关于@font-face规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
CSS3 转换和变形
2D新转换属性
以下列出了所有的转换属性:
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转换属性
下表列出了所有的转换属性:
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 过渡
过渡属性
下表列出了所有的过渡属性:
div
{
transition-property: width;
transition-duration:1s;
transition-timing-function: linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
CSS3 动画
要创建CSS3动画,你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
实例
当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
@keyframes myfirst
{
0%{background: red;}
25%{background: yellow;}
50%{background: blue;}
100%{background: green;}
}
下面的表格列出了 @keyframes 规则和所有动画属性:
div
{
animation-name: myfirst;
animation-duration:5s;
animation-timing-function: linear;
animation-delay:2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
CSS3 多列
下表列出了所有 CSS3 的多列属性:
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),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
下表列出了在弹性盒子中常用到的属性:
CSS3 多媒体查询
从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型。清单 1 展示了一个示例。
清单 1. 使用媒体类型
<linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>
<linkrel="stylesheet"type="text/css"href="print.css"media="print"/>
清单 2. 媒体查询规则
@media all and(min-width:800px){...}
-
@media all
是媒体类型,也就是说,将此 CSS 应用于所有媒体类型。
-
(min-width:800px)
是包含媒体查询的表达式,如果浏览器的最小宽度为 800 像素,则会告诉浏览器只运用下列 CSS。
清单 3. and
条件
@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}
清单 4. or
关键词
@media(min-width:800px)or(orientation:portrait){...}
清单 5. 使用 not
@media(not min-width:800px){...}
原文发布时间:2018-6-19
原文作者:杜媛媛