HTML5
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:命名空间名来指定；其次可以使用这个标签写内容（通常命名采用-连接方式）；最后，在样式里使用
命名空间名\:标签名{}定义
<!DOCTYPE html>
<html xmlns:ownhtml>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
//2、这里如果有多个标签，都是从ownhtml创建的，那么对其设置样式主要是冒号后面的部分，也就是命名空间部分
ownhtml\:customdiv{
font-size: .36rem;
font-weight: bold;
color:red;
}
p{
color: green;
}
</style>
</head>
<body>
<ownhtml:customdiv class="custom">this is a custom element!</ownhtml:customdiv>
<!--1、冒号后的命名空间可以有多个值，这样就有多个不同的标签可以拿来使用-->
<p>this is normal text</p>
</body>
</html>6、canvas
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。默认情况下 <canvas> 元素没有边框和内容。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
//首先找到canvas元素
var c=document.getElementById("myCanvas");
//创建 context 对象：是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx=c.getContext("2d");
//fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）
ctx.fillStyle="#FF0000";
//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
ctx.fillRect(0,0,150,75);
</script>canvas 的左上角坐标为 (0,0),上面的 fillRect(0,0,150,75)意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
再来一个画圆的实例：arc(x,y,r,start,stop)
其中，画布左上角坐标0，0；x为圆心在x轴上坐标，y同理；r为半径长度；start为起始角度；stop结束角度；Math.PI表示180°，顺时针
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(250,250,250,0,Math.PI);
ctx.stroke();
</script>7、SVG
指可伸缩矢量图形，定义用于网络的基于矢量的图形，使用XML格式定义，图像改变尺寸质量不会损失。
优点：可通过文本编辑器创建与修改；可被索引，压缩；是可伸缩的；可在任何分辨率下高质量打印。
异同：SVG 是一种使用 XML 描述 2D 图形的语言；Canvas 通过 JavaScript 来绘制 2D 图形
8、video和audio
一个是音频，一个是视频。都可以有多个source，第一个不支持便播放下一个。
controls功能为让浏览器启用本身的播放控制栏。
Source标签用于给媒体（video/audio）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。
loop属性用于指定视频是否循环播放，是一个布尔属性。
Autoplay属性用于设置视频是否自动播放，是一个布尔属性。
preload属性用于定义视频是否预加载值有none,metadata,auto(默认)。
poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。
<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>9、关于header,footer等的统一说明：
header:文档头部区域；nav定义导航链接部分；section定义文档中的章节；article定义独立的内容；aside定义页面主区域之外内容；figure规定独立的流内容（图像，图表等）；footer定义文档底部。
考虑到其兼容问题，可在样式中对其所有标签设置一个display:block属性。
其中，article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。
<article>
<header>
<h1>article元素使用方法</h1>
<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
</header>
<p>此标签里显示的是article整个文章的主要内容，，下面的section元素里是对该文章的评论</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：maizi</h3>
<p><time>1小时前</time></p>
</header>
<p>这篇文章很不错啊，顶一下！</p>
</article>
<article>
<header>
<h3>发表者：小妮</h3>
<p><time>1小时前</time></p>
</header>
<p>这篇文章很不错啊，对article解释的很详细</p>
</article>
</section>
</article>
10、MathML<math>
数学标记语言，基于XML的标准，书写数学符号和公式的语言。
11、input新增几个类型
type=color选取颜色；date从日期选择器选择日期；email提交表单自动验证域名合法性；number选择数字(上下箭头)<input type="number" name="quantity" min="1" max="5">1 到 5 之间；tel电话号码；url自动校验url的值
12、web存储
localStorage：长久保存网站数据，无过期时间，直到手动去除；
sessionStorage：临时保存同一窗口数据，关闭窗口后删除；
mainfest：离线缓存，断开网络时继续访问页面。
常用API：
保存数据localStorage.setItem(key,value);
读取localStorage.getItem(key);
删除单个localStorage.removeItem(key);
删除所有localStorage.clear();
得到某个索引的key，localStorage.key(index);
对于离线缓存，首先建立一个manifest文件，内容为cache manifest,cache（必须）,network,fallback。cache manifest固定格式， 写在第一行，#加版本号作为注释，cache标识出哪些文件需要缓存。然后在html标签里加上即可。服务器部署是需要添加相应mime-type
CACHE MANIFEST
# version 2018-08-20 10:44
CACHE:
./asset/src/style/main.css
./asset/src/style/index.html
./asset/src/style/main.js
HTML
<html lang="en" manifest="index.manifest"></html>CSS3
1、边框
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使用之。
<style>
.box {
background-color: red;
-webkit-animation: mycolor 4s linear infinite;
}
@-webkit-keyframes mycolor {
0% {
background-color: red;
}
40% {
background-color: darkblue;
}
70% {
background-color: yellow;
}
100% {
background-color: green;
}
}
</style>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样式
}
来源：oschina
链接：https://my.oschina.net/u/3728554/blog/1929097