第四天h5,css3

h5新特性

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

video视频

<video> 标签的属性
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| preload | preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
|
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |

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

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

<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>

audio音频(同video类似)

拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分,任何元素都可以被拖放。
为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

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

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

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

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

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中

canvas 元素用于在网页上绘制图形。(使用 JavaScript 在网页上绘制图像)

canvas和Svg

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

地理定位

1. 简单的地理定位实例，可返回用户位置的经度和纬度。

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

例子解释：

• 检测是否支持地理定位
• 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
• 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
• showPosition() 函数获得并显示经度和纬度
• getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
  geolocation方法
  watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
  clearWatch() - 停止 watchPosition() 方法

Input类型

1. email
2. url
3. number
4. range
5. Date pickers (date, month, week, time, datetime, datetime-local)
6. search
7. color

表单元素

1. datalist 元素

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

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

2. keygen 元素

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

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

3. output 元素

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

<output id="result" onforminput="resCalc()"></output>

表单属性

1. autoComplete
2. autofocus
3. pattern
4. novalidate
5. require
6. placeholder
7. list
8. form

css3

边框

1. box-shadow:
   box-shadow: h-shadow v-shadow blur spread color inset;

| 值 | 描述
| h-shadow | 必需。水平阴影的位置。允许负值。
| v-shadow | 必需。垂直阴影的位置。允许负值。
| blur | 可选。模糊距离,模糊程度。
| spread | 可选。阴影的尺寸
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。
| inset | 可选。将外部阴影 (outset) 改为内部阴影。

2. border-radius：圆角
3. border-image:url() width outset repeated(rounded stretched);

背景

1. background-size:
   background-size: length|percentage|cover|contain;

• cover:扩展背景图，以使背景图像完全覆盖背景区域，背景图部分可能无法显示载背景定位区域中。
• contain按宽高的原本比例把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

2. background-origin:属性规定 background-position 属性相对于什么位置来定位。
   如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
   background-origin: padding-box|border-box|content-box;
3. background-clip:规定背景的绘制区域（即裁剪到那个区域）
   background-clip: border-box|padding-box|content-box;

文本效果

1. test-shadow:
2. word-wrap:允许对长的不可分割的字符串进行分割换行。

字体

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

2D转换

1. translate() 方法
   通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
2. rotate() 方法
   通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
3. scale() 方法
   通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
   scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
4. skew() 方法
   通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
   skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
5. transform属性和transform-origin属性

• transform：向元素应用2d或3d转换
• transform-origin:改变被转换元素的位置。

3D转换

rotate:旋转
perspective：元素透视程度

过渡属性(用于从一种状态到另一种状态)

| 属性 | 描述 | CSS |
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |

动画

关键词 "from" 和 "to"，等同于 0% 和 100%。

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

多列

| 属性 | 描述 | CSS |
| [column-count]| 规定元素应该被分隔的列数。
| [column-fill]| 规定如何填充列
| [column-gap] | 规定列之间的间隔。
| [column-rule] | 设置所有 column-rule-* 属性的简写属性。
| [column-rule-color]| 规定列之间规则的样式。
| [column-rule-width] | 规定列之间规则的宽度。
| [column-span] | 规定元素应该横跨的列数。 | 规定列的宽度。
| [columns] | 规定设置 column-width 和 column-count 的简写属性。

apperance设置元素外观

appearance: normal|icon|window|button|menu|field;

值 描述
normal 将元素呈现为常规元素。
icon 将元素呈现为图标（小图片）。
window 将元素呈现为视口。
button 将元素呈现为按钮。
menu 将元素呈现为一套供用户选择的选项。
field 将元素呈现为输入字段。

box-sizing:

box-sizing: content-box|border-box|inherit;

icon 属性为创作者提供了将元素设置为图标等价物的能力。

除非 "content" 属性的值被设置为 "icon"，否则元素的图标不会被使用。
icon: auto|URL|inherit;

resize:

语法
resize: none|both|horizontal|vertical;
值 描述
none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。