1.html5表单

1.1 新增input元素的种类

search:搜索输入框
tel:电话号码输入框
url:输入url地址
email:邮件输入框
number:数字输入框
range:特定范围内的数值选择器（通过拖动滚动条改变一定范围的数字）
color:颜色选择器 只在Opera和 Blackberry浏览器
datetime：显示完整日期和时间
datetime-local:显示当地时间
time：显示到时间
month：显示到月
week：显示到周

1.2 表单新特性

placeholder：输入框占位符，常用作输入提示，在光标聚焦时，占位符自动消失
autocomplete: 是否保存用户输入值，默认为on，关闭为off
autofocus：自动聚焦
required:此项必填，不能为空
Pattern：正则验证pattern="\d(1,5) "
form：只要加上form属性，表单元素可以放到页面的任意位置
formnovalidate和novalidate:表示不需要验证表单，直接提交
                           novalidate用于form
                           formnovalidate用于submit类型的提交按钮

1.3 表单验证

validity对象，通过下面的valid可以查看验证是否通过
     -oText.addEventListener("invalid",fn1,false);
     -valid:验证不通过是返回false
     -valueMissing:输入值为空时
     -typeMismatch:控件值与预期类型不匹配
     -patternMismatch：输入值不满足pattern正则
     -customError不符合自定义验证
         >>setCustomValidity();自定义验证

2.css3选择器

2.1 后代定位选择器

 ul>li:nth-child(n){}:选择第n个(子代)
 ul>li:first-child{}:选择第n个(子代)
 ul>li:last-child{}:选择第n个(子代)
 ul>li:nth-child(even/2n){}:选择偶数行
 ul>li:nth-child(odd/2n+1){}:选择奇数行
 kn、kn+1、kn+2.....kn+n,表示k循环

 nth-of-type(n){}:n表示特定类型的第n个(某一类的第n个)
 nth-last-child(n){}:倒数第n个子代
 only-child：只有一个子元素
 only-of-type:同种类型的子元素只有一个
 empty:无子元素空，连空行都没有

2.2 否定选择器

 :not   :not(:nth-child(1)):除了第一个

2.3 属性选择器

 例如：ul li[class="box"]
 E[attr=val]
 E[attr|=val] 只能等于val 或只能以val-开头
 E[attr*=val] 包含val字符串
 E[attr~=val] 属性值有多个，其中有一个是val
 E[attr^=val] 以val开头
 E[attr$=val] 以val结尾

2.4 目标伪类选择器

 :target 用来匹配url指向的目标元素
 存在url指向该元素时，样式效果才会生效

2.5 伪元素

 :first-line 匹配第一行文本
 :first-letter 匹配第一首字符
 :before和:after DOM元素前后插入额外的内容

3.边框-圆角 border-radius

border-radius:1-4个数字/1-4个数字
   前面是水平半径，后面是垂直半径
   四个数字方向分别是左上 右上 右下 左下
   
不给“/”则水平半径和垂直半径一样
 border-radius: 10px/5px;
 border-radius: 60px 40px 30px 20px/30px 20px 10px 5px;

4.线性渐变linear-gradient

linear-gradient:  
 只能用在背景上
 颜色是沿着一条直线轴变化
 参数:
background: linear-gradient(方向/角度, 颜色1 [起始位置, 颜色1, 结束位置],
            ... ,颜色n [起始位置, 颜色n, 结束位置])
 
 方向/角度：top | left | 度数45deg | top left | and so on
 起始位置/结束位置：百分比 | 像素
 重复的线性渐变：-webkit-repeating-linear-gradient:

5.径向渐变radial-gradient

radial-gradient:
 从“一个点”向多方向颜色渐变
 background: radial-gradient([shape/[size]] [at position], 颜色1 [起始位置, 颜色1, 结束位置], 
             ... ,颜色n [起始位置, 颜色n, 结束位置]);
 参数：
 
 shape形状：ellipse（椭圆）、circle（圆）或设置水平半径，垂直半径
 size：渐变的大小，即渐变到哪里停止，有如下关键词：
     closest-side:   最近边;farthest-side  : 最远边;
     closest-corner: 最近角;farthest-corner: 最远角;
 position: 关键词(top/top left) | 数值(10px 10px) | 百分比(50%/50% 50%)
 起始位置/结束位置：百分比 | 像素
 重复的径向渐变：-webkit-repeating-radial-gradient

6.背景background

(1) background-origin 区域显示
  padding-box:从padding区域显示  默认
  border-box:从border区域显示
  content-box:从content区域显示

(2) background-clip 裁剪
  padding-box:从padding区域向外裁剪
  border-box:从border区域向外裁剪 默认
  content-box:从content区域向外裁剪
  text 文本裁剪
  
(3) background-size 背景大小
  100% 100% 百分比
  10px 10px 数值
  contain   按原始比例收缩，背景图显示完整，但不一定铺满整个容器
  cover     按原始比例收缩，背景图显示不一定完整，但铺满整个容器
  
(4) background--attachment 
  背景图片是滚动的还是固定的 
  fixed 固定的 scorll 滚动的

7.阴影

(1)盒子阴影   box-shadow
  box-shadow: h v blur spread color inset;
  h: 水平方向偏移
  v: 垂直方向偏移
  blur: 模糊半径
  spread: 扩展半径
  color: 颜色
  inset: 加上这个表示内阴影 默认是外阴影

(2)文本阴影 text-shadow
  text-shadow: x y blur color
  x轴偏移 y轴偏移 模糊度 颜色
  多层阴影制作文字的立体效果，设置多种颜色，中间以逗号隔开

(3) 文字添加边框  text-stroke
  text-stroke: 2px blue
  通过设定1px的透明边框，可以让文字变得平滑
  颜色设成透明能创建镂空字体

8.多媒体标签

8.1 视频标签

 <video >
   <source src="" type = "">
   <source src="" type = "">
 </video>

8.2 音频标签

<audio>
       <source src="" type = "">
       <source src="" type = "">
     </audio>**