HTML5、CSS3(笔记)

HTML5

• 视频
  当前，video 元素支持三种视频格式：
  Ogg, MPEG4, WebM

eg.

     <video src="movie.ogg" controls="controls">
</video>

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的.

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
eg.

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<video>标签：http://www.w3school.com.cn/tags/tag_video.asp

• 音频
  当前，audio 元素支持三种音频格式：
  Ogg Vorbis， MP3， Wav

eg.

<audio src="song.ogg" controls="controls">
</audio>

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
eg.

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

<audio> 标签：http://www.w3school.com.cn/tags/tag_audio.asp

• 拖放

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

<img draggable="true" />

然后，规定当元素被拖动时，会发生什么。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。

ondragover 事件规定在何处放置被拖动的数据。
进行放置 - ondrop

• 画布Canvas

创建 Canvas 元素

<canvas id="myCanvas" width="200" height="100"></canvas>

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

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d"); 

<canvas> 标签：http://www.w3school.com.cn/tags/tag_canvas.asp

• 地理定位

使用 getCurrentPosition() 方法来获得用户的位置。

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数

如需在地图中显示结果，需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图

• Web 存储

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

• Input 类型

email,url,number,range,Date Pickers（日期选择器）,search

• 表单元素

datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的
option 元素永远都要设置 value 属性。

keygen 元素的作用是提供一种验证用户的可靠方法。

output 元素用于不同类型的输出，比如计算或脚本输出

CSS3

• 边框

border-radius 属性用于创建圆角边框。border-radius:25px;
box-shadow 用于向方框添加阴影。box-shadow: 10px 10px 5px #888888;
border-image 属性，可以使用图片来创建边框。border-image:url(border.png) 30 30 round;

• 背景

background-size 属性规定背景图片的尺寸。background-size:63px 100px;

background-origin 属性规定背景图片的定位区域。background-origin:content-box;
背景图片可以放置于 content-box、padding-box 或 border-box 区域。

CSS3 允许为元素使用多个背景图像。

• 文本效果

  text-shadow 可向文本应用阴影。text-shadow: 5px 5px 5px #FF0000;（水平阴影、垂直阴影、模糊距离，以及阴影的颜色）

  word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。p {word-wrap:break-word;}

• 字体

@font-face 规则可用来定义自己的字体。

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

• 2D 转换

  通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。

eg.值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform: rotate(30deg);

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数.transform: scale(2,4);

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数.transform: skew(30deg,20deg);

matrix() 方法把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

• 3D 转换

  通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
  通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);

• 过渡

从一种样式逐渐改变为另一种的效果。

应用于宽度属性的过渡效果。

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}

• 动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}

animation属性是一个简写属性，用于设置六个动画属性：
animation-name规定需要绑定到选择器的 keyframe 名称
animation-duration规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画
- 多列

column-count 属性规定元素应该被分隔的列数。column-count:3;
column-gap 属性规定列之间的间隔。column-gap:40px;
column-rule 属性设置列之间的宽度、样式和颜色规则。column-rule:3px outset #ff0000;

• 用户界面

  resize 属性规定是否可由用户调整元素尺寸。resize:both;
  box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。box-sizing:border-box;
  outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。border:2px solid black;
outline:2px solid red;
outline-offset:15px;