css3、html5学习笔记

2016/12/14　　　　----认真看完绝对对你有帮助

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

• app(applicatin):应用;

• native app:原生的app

• sadsadsadad

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

H5新增的标签

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)