• HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核;

• app(applicatin):应用;

• native app:原生的app

• sadsadsadad

• 单标签可以省略结尾标记; 比如input和br, /可以不写;

新增的标签

header,nav,footer,section,video,audio···

功能性标签:video,audio,canvas···

结构标签:header,nav,footer,section···

• 页眉;不兼容IE8—;
• 页脚;不兼容IE8—;
• 标题的组合; 不兼容IE9—;
• 区块;不兼容IE8—;
• 文章;不兼容IE8—;
• 侧边栏;不兼容IE8—;
  • 放到article之外,section之内,一般表达(推荐文章,热门评论,友情链接,广告位);
  • 放到article之内,一般表达跟此文章相关的东西(相关文章,相关人物介绍,引用连接等);
• 用于对元素进行组合,一般用于图片或者视频;

• figure的子元素,用于对figure的内容进行说明,一般配合figure使用;

• 用来表现时间或者日期;

• 选项(数据)列表,与input元素配合使用,来定义input可能的值;一般配合input使用,里面放各种option选项;

• 描述;展开状态：open,
• 简介;和detail配合使用;

• 对话框;默认隐藏,需要现实的话加open;

•  

  地址;

• 标记;

• 进度条;

• 进度条;IE完全不兼容;

如果想让标签支持IE低版本,需要引入html5shiv.js,下载地址:https://en.wikipedia.org/wiki/HTML5_shiv

JS新增选择器

document.querySelectorAll('.box ul li input');//返回一组元素; 注意前面要加选择符

document.querySelector('input');//返回一个元素;其实就是queryselectorall加完下标0的结果;注意前面要加选择符

自定义属性规范

实例:index就是自定义属性;之前没有规范,随便写;

    <input type="button" index="1" />

规范:以data-开头;获取和设置可以用getAttribute和setAttribute;

    <input type="button" index="1" /> --->  <input type="button" data-index="1" /> 

好处：

    使用方便：

        obj.dataset.index = 1;//设置;

        alert(obj.dataset.index);//获取自定义属性;

    方便循环：用for in循环,obj.dataset

class操作

obj.classList.add(className);添加className;

obj.classList.remove(className);删除className;

obj.classList.contains(clasName);判断有没有className,有的话返回true,否则返回false;

obj.classList.toggle(clasName);判断有没有className,有的话删除,没有的话增加;

本地存储

cookie:缺点：

        容量小,大约4KB;

        需要放到服务器环境;

        有过期时间;

HTML5本地存储: localStORage;仅仅不兼容IE6;

    没有过期时间;

    容量大(5MB);

localStroage三个操作:F12-->RESOURCES--->LOCALSTORAGE

    存储:

        方法1.localStorage.a = 12;

        方法2. localStorage.setItem(name,value);

    获取:

        方法1.alert(localstorage.a);

        方法2.alert(localstorage.getItem(name));

    删除:

        方法1.datele localstorage.a;

        方法2.localStorage.removeItem(name);

    删除多条localstorage：

        方法1.for(var name in localstroage){

            delete localstroage[name];

        }

        方法2.localstorage.clear();

    以上方法可以混合使用,但是不建议.

共同点:

    都不安全;不能跨域;不能夸浏览器;

sessionstroage

本地存储,和localstorage的区别就是关闭浏览器会消失,其他操作完全一样;

localstorage和sessionstorage和cookie的用法一样,能用cookie的地方都可以用localstorage和sessionstorage;

CSS3选择器

属性选择器
element[name=value];name=vlaue 的元素；
示例:input各种type
input[type=text]{background: red;}

    element[name]:只要包含name的元素；

        示例: <div type></div>

            *[type]{background:red}

    element[name~=vlaue]:包含value整个单词的元素;

        示例：<div title="apple banana"></div>

            div[title~=apple]{backgrund:red;}

    element[name*=vlaue]:包含value这个字母的元素;

        示例：<div title="apple a banana"></div>

            div[title*=apple]{backgrund:red;}

    element[name^=vlaue]:以value开头的元素;

    element[name$=value]:以value结尾的元素;

    element[name|=value]:以整个是value或者以value-开头的元素;

    element[name1][name2]{background:red;}拥有多个name的元素;

伪类选择器

element:nth-child(n){}:正着数第n个element;

element:nth-last-child(n):倒着数第n个element;

element:nth-child(2n):偶数行;--->element:nth-child(even)

element:nth-child(2n-1):奇数行;--->element:nth-child(odd)

element:first-child{}第一个元素;

element:last-child{}最后一个元素;

element:empty{}空元素;没有内容的元素;

element:disabled{}不可用的元素,一般指的是表单元素;

element:enabled{}:激活的可用的元素,一般指的是表单元素;

element:checked{}选中的元素,指的是表单元素，比如：radio

element:target{}被选中的元素;比如选项卡;

element:nth-last-child(n){}:倒数第N个元素;--->element:nth-last-child(1):倒数第一个元素;

element:nth-of-type(1):所有类型里面的第N个元素;

element:nth-last-of-type(1):所有类型里面倒数第1个元素;

element~obj{}选择element下面的兄弟元素;

element>obj{}选择子元素;

element:not(.class){}不包含某个class的元素;

element:first-line{}第一行文字;

element:first-letter{}:第一个文字;

element::selection{}选中的文本，文字;

::selection{}所有选中的文字,--->*selection{}所有选中的文字;

element::after{}文本的前面添加东西，配合content:'asd'

element::before{}文本的后面的添加东西;配合content:'adsa'

CSS3新的样式

css3新的样式有些浏览器不兼容,需要加浏览器前缀:

    -webkit-:chrome,opera,safari,

    -moz-:firefox,

    -ms-:microsoft,

    -o-:opera,

    s

• transform:rotate(30deg)—->deg:角度;

  案例:点击div旋转;

  obj.style.transform = "rotate(30deg)";
  
  js封装;
  

• 动画

  运动形式：
  
      linear
  
      ease
  
      ease-in
  
      ease-out
  
      ease-in-out
  
  基础动画：transition,想运动谁,就把动画加给谁;
  
      transition: 时间 要运动的属性[width,height,background···] 运动形式;
  
      运动多个属性,以逗号隔开;transition:1s width ease,1s height ease, 1s background ease-in;
  
  高机动画:
  
     定义动画： @keyframes 动画名称{
  
          form {}
  
          to{}
  
     }
  
     执行动画：animation： 时间  动画名称 运动形式
  

• 圆角

     border-radius: 10px | 50%;
  
     border-radius: 10px 20px; 上下10px，左右20px；
  
     border-radius:100px 20px 50px ;上100px 左右20px，下50px；
  
     border-radius: 100px 50px ;上下100px，左右50px；
  
     border-radius: 10px/30px--->x/y: x轴[水平]，y轴[垂直]；
  

• 颜色的表达方式

  rgba(0,0,0,.5);//黑色半透明;

• 文字阴影

  text-shadow: 1px 1px 4px red;
  
               x轴  y轴 模糊度 颜色;
  

• 文字描边

  text-stroker: 1px red;
  

• 块阴影

  box-shadow: 1px  1px   4px   red;
  
              x轴  y轴    模糊度 颜色;
  
  box-shadow: insert 1px  1px   4px   red;内阴影;
  
  box-shadow: outer 1px 1px 4ps red ;外阴影;
  
  box-shadow: 1px   1px   4px   5px   red;
  
              x轴    y轴   模糊度  扩展  颜色;
  
  box-shadow: [insert]  x轴  y轴  blur  [spread]  color  ---->[]中的参数可有可无,insert为内阴影,spread为扩展;如果需要叠加多个颜色,以逗号隔开;
  

• 渐变

     线性渐变：
  
             background:linear-gradient(color1,color2···):
  
             background:linear-gradient(left,top,right,bottom,color1,color2···)方向:left,right,top,bottom, left top···
  
             background:linear-gradient(left,top,right,bottom,color1,color2···)方向:0deg:left,90deg:bottom;
  
             渐变区域大小：
  
                 -webkit-gradient(方向,color 大小,color2 大小····);
  
     径向渐变：
  
         background:-webkit-radial-gradient(x y,color1,color2····)x,y代表的是形状,也可以用英文单词代替,圆形[circle]和椭圆形[ellipse];
  
         background:-webkit-radial-gradient(x y,x y,color1,color2····):第一个xy代表的是圆心的位置,可以用left,right,top,bottom代替，也可以使用数值加单位的形式代替,第二个x y 代表的是形状,也可以用单词代替,圆形[circle]和椭圆形[ellipse]
  
     重复渐变:
  
         background:-webkit-repeating-liinear-gradient(red 0px,blue 10px):
  

• 蒙版

  -webkit-mask:url(1.png);—->特点:有颜色的地方会显示出来,跟颜色无关;用PS做一个透明的图片,覆盖到div上就可以了.

• 倒影

     -webkit-box-reflext: 方向  距离  渐变;
  
         方向取值：
  
                 下：below, 上above  右right  左left
  

• 文字排列

     direction: ltr | rtl |;left to right | right to left;
  
     此样式需要配合Unicode-bidi:bidi-override才可以生效;
  

• 变形

     transform:
  
         rotate(30deg):旋转
  
         scale(x,y):缩放--->scaleX();--->scaleY();
  
         translate(x,y):平移--->translateX();--->translateY();
  
         skew(x,y):倾斜度
  
         以上样式,物体的本身并没有发生变化,盒子模型也没有发生变化,位置信息也没有发生变化;也就是说并不会引起浏览器重绘重排,性能比较高;只是视觉上发生了变化;
  
         案例:CSS3时钟;
  
     transform-origin: 旋转中心点;也可以理解成绕着哪个坐标开始转;
  
         center center
  
         left center
  
         rigth center
  
      ***transform多个值同时写的时候,先写的后生效,比如:旋转60deg,缩放2倍,横向平移300px应该写成:
  
             transform:translateX(300px) sclae(2) rotate(deg);
  

3D

坐标:

    x:

    y:

    z:

    **面朝坐标轴,顺时针旋转;

transform:

    rotateX():

    rotateY():

    rotateZ():

3D需要配合透视(景深)来使用,透视/景深:观察物体的远近程度;

    perspective:取值number+单位;此属性加给要变化的物体;比如:perspective(800px)