1.0 html5+css3学习大纲

1.0标签变化

标签变化：

1. 结构标签10
   header,nav,section,aside,article,hgroup,figure(定义一组媒体内容)
   figureCaption(定义媒体元素的标题),dialog(对话框，配合dt和dd),footer
2. 多媒体标签：

• 音频视频标签：audio,video,source

案例：360音乐导航；

• 图片类标签：canvas-案例：炫酷小球

3. embed:定义外部可交互的内容或插件；比如flash，avg等；
   意义：多媒体标签的出现，意味着富媒体的发展，及不使用插件的情况下即可操作的媒体文件，极大提高用户体验；

web 应用标签

    1.状态标签
    meter：状态的显示
    progress：状态过程的显示
    2.列表标签
    datalist,配合option选项
    3.注释标签
    ruby配合rt：定义注释或音标
    mark：定义有标记的文本
    output标签 oninput事件可以实施监听文本框的输入变化；

2.0 html5属性变化

• input:email/tel/url/number/range/Date picker/search/color
• form标签属性 autocomplete/autofocus/multiple/placeholder/required
• 链接属性
• data属性（自定义属性，在html5中，都用data-xxx）
  jquery通过data方法来获取自定义的target；
  原生通过el.dataset.target来获取
  实例：简易版选项卡；

3.0 新的选择器： querySelector querySelctorAll

4.0 classList

封装了一系列对类名的操作，比如：add,remove,toggle,contains

5.0 localstorage本地存储

• 优势：
  1、localStorage拓展了cookie的4K限制
  2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，IE8以上支持
• 不足：
  1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
  2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

• localStorage增加的三种方式：

 storage.a=1;
 storage['b']=2;
 storage.setItem('c','3');

• localStorage的删除
  1）全部删除 localStorage.clear();
  2）将localStorage某个键值对的删除 localStorage.removeItem('a')
• localStorage所有键的获取

for(var i=0; i

• 注意事项：
  1）一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式；
  这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
  2）读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

css3选择器

css3兼容处理前缀:-webkit，-moz，ms

边框

• 圆角效果border-radius
• 阴影box-shadow

1. 盒子阴影
   • box-shadow是向盒子添加阴影。支持添加一个或者多个（多个阴影用逗号隔开）。
   • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
   • 注意：
     1)inset 可以写在参数的第一个或最后一个，其它位置是无效的。
     2)模糊半径不能是负值，否则代表没有模糊度；
2. 边框图片

   border-image-source
   border-image-slice
   border-image-width
   border-image-repeat
   

颜色rgba()和渐变

文字和字体

1）text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

//单行文本省略
white-space:nowrap;
overflow:hidden;
text-overflow:clip(剪切)/ellipsis(省略号);

2)@font-face能够加载服务器端的字体文件，让浏览器可以显示用户电脑中没有安装的字体；

@font-face{
    font-family:字体名称；
    src:字体文件在电脑上的相对路径/绝对路径
}
//这样设置后，以后就能正常使用font-family：字体名称；

3)text-shadow：文本阴影

与背景相关的样式

1）background-origin:设置元素背景图片的起始位置；
background-origin:border-box|padding-box|content-box;
注意：如果背景不是no-repeat,此属性无效，默认从边框开始显示；

2. background-clip 背景图片裁切(默认不裁切)
   background-clip ： border-box | padding-box | content-box | no-clip
   3）background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
   background-size: auto | <长度值> | <百分比> | cover | contain
   4）background多背景

css3 3D效果

• 3D效果的认知：rotate三个属性rotateX、rotateY、rotateZ）
• perspective属性：透视，视觉！用该属性来激活一个3D空间
  当为父元素定义perspective时，其子元素就能获得透视效果(使用了3D变换的元素)；所以，一般perspective都在父元素上；可以把这个元素成为"舞台元素";
• perspective取值小技巧：
  1. 取值为none或不设置，就没有3D空间。
  2. 取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
  3. 貌似当取值为元素的宽度时，视觉效果比较好。
• transform-style：指定嵌套元素如何在3D空间中呈现；
  transform-style:flat | perserve-3d;
  • flat:是默认值，代表2D平面呈现
  • perserve-3d:所有子元素在3D空间中呈现；（注意：一般在声明，和应用在父元素上,代表容器）
• transform-origin:用来改变元素的原点位置；他的常用取值方式如下
  • transform-origin:center 默认值，等价于center center / 50% 50%;
  • top:等价于 top center; 同理 bottom
  • left/right等价于 left center/ right center;
  • left top/right top/left bottom/right bottom;
• 实战：翻转导航菜单 立方体 轮播图 切割轮播图