1 什么是H5：
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。设计目的是为了在移动设备上支持多媒体。
2、新增特性：
绘画<canvas>；多媒体播放<video><audio>；本地离线存储；特殊内容元素<article><header><nav><footer>；表单控件<calendar><date><email>等
3、最小的HTML5文档
<!DOCTYPE html> <!--h5的声明-->
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
4、支持：
最新版Safari,Chrome,Firefox,Opera支持，IE9支持
5、自定义标签：
首先在html标签通过xmlns:命名空间名来指定；其次可以使用这个标签写内容（通常命名采用-连接方式）；最后，在样式里使用
命名空间名\:标签名{}定义
6、canvas
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。默认情况下 <canvas> 元素没有边框和内容。 canvas 的左上角坐标为 (0,0),上面的 fillRect(0,0,150,75)意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
再来一个画圆的实例：arc(x,y,rstartstop)
其中，画布左上角坐标0，0；x为圆心在x上坐标，y同理；r为半径长度；start为始角度；stop结束角度；Math.PI表示180，顺时针
SVG
指可伸缩矢量图形，定义用于网络的基于量的图形，使用XML格式定义，图像改变尺质量不会损失。
优点：可通过文本编辑器创建与修改；可索引，压缩；是可伸缩的；可在任何分辨下高质量打印。
异同：SVG 是一种使用 XML 描述 2D 图的语言；Canvas 通过 JavaScript 来制 2D 图形
7、video和audio
一个是音频，一个是视频。都可以有多个source，第一个不支持便播放下一个。
controls功能为让浏览器启用本身的播放控制栏。
Source标签用于给媒体（video/audio）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。
loop属性用于指定视频是否循环播放，是一个布尔属性。
Autoplay属性用于设置视频是否自动播放，是一个布尔属性。
preload属性用于定义视频是否预加载值有none,metadata,auto(默认)。
poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。
关于header,footer等的统一说明：
8 header
header:文档头部区域；nav定义导航链接部分；section定义文档中的章节；article定义独立的内容；aside定义页面主区域之外内容；figure规定独立的流内容（图像，图表等）；footer定义文档底部。
考虑到其兼容问题，可在样式中对其所有标签设置一个display:block属性。
其中，article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。
、MathML<math>
数学标记语言，基于XML的标准，书写数学符号和公式的语言。
9、input新增几个类型
type=color选取颜色；date从日期选择器选择日期；email提交表单自动验证域名合法性；number选择数字(上下箭头)<input type="number" name="quantity" min="1" max="5">1 到 5 之间；tel电话号码；url自动校验url的值
10、web存储
css3
localStorage：长久保存网站数据，无过期时间，直到手动去除；
sessionStorage：临时保存同一窗口数据，关闭窗口后删除；
mainfest：离线缓存，断开网络时继续访问页面。
边框
border-radius有四个值，对应1)border-top-left-radius，2)border-top-right-radius，3)border-bottom-right-radius，4)border-bottom-left-radius，可以分别设置，也可以连写。当连写状态下，只有一个值，则四个角都为该值；有两个值，则对应13,24（对角）；如果为三个值，则1,24,3。
box-shadow，用来定义盒模型阴影而不是文字阴影，有如下几个值：阴影的x轴，y轴，模糊值(越大越模糊)，颜色，（inset可选，加上这个属性是内部阴影）。xy轴单位是px，用来定义阴影方向，为正则是右侧下侧阴影，为负左侧上侧。
如box-shadow:2px 2px 5px #333;
border-image，使用图像创建边框。
2、背景
background-image：url();background-position: left top;background-repeate: no-repeate;也可以连写background:url() left top no-repeate。
background-size：宽px 高px ；指定背景图像大小
background-origin:border-box/padding-box/content-box；背景图像的位置区域。
3、*渐变*
线性渐变：background: linear-gradient(direction,color-stop1,color-stop2,...);也可将颜色设置为rgba()加了透明度。多个颜色默认均匀分布，也可在其后面加上x%控制区域大小。
//从上到下渐变
background: linear-gradient(red,blue);
//左到右
background: linear-gradient(to right,red,blue);
//对角
background: linear-gradient(to bottom right,red,blue);
//角度定义方向
background: linear-gradient(180deg,red,blue);
//从上到下，其中0deg从下到上，45deg顺时针45°，90则顺时针90°也就是从左到右，180向下，-90从右到左
径向渐变：由中心向外。radial-gradient(circle,red,yellow,green);其中circle表示圆形，默认是椭圆ellipse。
4、字体
可以自定义字体，使用时，先在css引入并起名，然后使用
<style>
@font-face{//引入
font-family: 起名字;
url:('...');
}
div{
font-family: 名字;//在这里使用
}
</style>
5、2D转换
transform:translate(20px,10px);沿着xy轴移动；
rotate(30deg);顺时针旋转角度；
scale(2,3);放大或缩小倍数，沿xy轴；
3D转换
transforms:translate3d(x,y,z);scale3d(x,y,z);rotate3d(x,y,z,angle)
连写：transform:rotate|scale|skew|translate|matrix
6、transitions和animations
transition:property duration timing-function，pro表示对哪个属性过渡，duration表示在多长时间内完成，最后表示通过什么方法过渡。如：transitions: background-color 1s linear;
animations:name duration timing-function iteration-count，name表示关键帧的集合，duration多久完成过渡，timing-function通过什么方法过渡，最后一个迭代次数，infinite无限循环，默认为1。
创建动画，首先使用keyframes,然后animation使用之。
linear:同样速度变化；ease-in:开始速度慢，越来越快；ease-out：开始快，后面减速；ease：开始慢，加速再减速。
7、多媒体查询@media
可针对不同媒体类型定义不同样式。
@media 媒介类型and|not|only (媒介特征) {
...
}
媒介类型：print:打印机和打印预览screen:电脑，平板或手机屏幕；all：所媒体设备类型。
媒介特征：
device-height/width:设备屏幕可见高度/宽度；
max-device-height:屏幕可见最大高度；
height/width:页面可见区域高度；
max-height/width:页面可见最大高度；
max-width指的是显示区域的宽度，比如浏览器的显示区域宽度；max-device-width指的是设备整个显示区域的宽度，也就是设备分辨率。max-width在窗口大小改变或横竖屏转换时会发生变化；max-device-width只与设备相关，不会发生变化。
例子：为不同页面宽度设置不同的CSS样式——页面宽度大于320px和页面宽度等于320px时分别为div设置不同的背景颜色。
#square{
width:100px;
height:100px;
}
@media only screen and (min-width: 320px) {
#square {
background:red;
}
}
@media only screen and (min-width: 320px) and (max-width: 320px) {//(min-width: 320px) and可省略
#square {
background:yellow;
}
}
在head中引入
<link media="screen and (max-width:600px)" rel="stylesheet" href="example.css" />
在@import中引入
<style type="text/css" media="screen and (min-width:600px) and (max-width:900px)">
@import url("css/style.css");
</style>
直接在CSS中使用
@media screen and (max-width: 800px) {
// CSS样式
}
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
