html5+css3新增标签

HTML5

针对以前的不足，增加了一些新的表单、新的标签、新的表单属性

注：这些新特性都有兼容问题，基本是i9+以上版本才支持

一、结构标签

<header>头部标签
<nav>导航标签
<article>内容标签
<section>定义文档某个区域
<aside>侧边栏标签
<footer>尾部标签

注：1、这种语义标准化主要是针对搜索引擎
       2、在页面中可以多次使用
       3、IE9中，需要把这些元素转换为块级元素

二、多媒体标签

<audio>音频

<video>视频

属性：

autoplay 自动播放（谷歌浏览器需要添加muted）          

 controls 播放控件   
loop 循环播放

poster 视频加载等待的画面图片

注：音频、视频使用方式基本一致

三、新增input

1、number 限制用户输入的类型必须为数字

2、required 表示其内容不能为空，必填

3、tel 手机号码

4、search 搜索框

5、placeholder 提示文本

6、auto complete 记录曾经的输入信息  on打开 off关闭 默认是打开状态

需要添加name且提交成功一次 才有会记录

7、multiple 多选文件提交

注：表单需要在表单域内

CSS3

一、属性选择器 权重为10

1、E[att]  将E中具有att属性的选择出来

2、E[att=“val”] 将E中具有属性att且att=val的选择出来

3、E[att^="val"] 将E中具有att属性且以val开头的元素选择出来

4、E[att$="val"] 将E中具有att属性且以val结尾的元素选择出来

5、E[att*="val"] 将E中具有att属性且含有val属性的元素选择出来

二、结构伪类选择器：根据文档结构来选择

1、E:first-child 匹配父元素中的第一个子元素E

2、E：last-child 匹配父元素中最后一个子元素E

3、E：nth-child（n）匹配父元素中的第n个子元素E n可以是数字 也可以是公式、关键字

①、关键字是奇（odd）偶（even）

②、关键字是公式：E：nth-child（n）表示选中所有子元素
      2n表示选中所有偶数子元素 2n+1示选中所有奇数子元素  
      an表示选中所有a的倍数的子元素  

      n+a 表示选中从a开始的所有子元素
      -n+a 表示选中从a开始倒数的所有子元素

4、nth-of-type 用法与ntn-child相同

区别：
nth-child 对父元素里面所有孩子排序，先找到第n个孩子，再看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先匹配E，然后再根据E找第n个孩子

二、伪元素选择器：

1、语义：利用css创建新标签元素，而不需要html标签，从而简化html结构

2、：：before 在元素内部的前面插入内容

3、：：after 在元素内部的后面插入内容

注：①、before和after创建一个元素，但属于行内元素
       ②、新创建的这个元素在文档树中找不到，所以称为伪元素
       ③、语法： element：：before{  }
       ④、before和after必须有content 属性
       ⑤、伪元素选择器和标签选择器一样，权重为1

三、伪元素清除浮动

两种：

1、clearfix：after { content："" ; (伪元素必须写的属性)  display：block；（插入的必须是块级元素）height：0；（不要看见这个元素）clear：both；（核心代码清除浮动）visibility：hidden；（隐藏元素）}

2、.clearfix:before,clearfix:after { content:"";  display:table; (转换为块级元素并且一行显示)}                  .clearfix:after { clear:both ; }

四、盒子模型

通过box-sizing来指定盒模型，有两个值：

1、box-sizing：content-box 盒子大小为 width+padding+border （默认）

2、box-sizing：border-box 盒子大小为width

五、css3滤镜

filter：blur（5px） blur是一个函数，括号里面数字越大越模糊，数值需要加px

六、clac函数

此css函数可以在声明css属性值时执行一些计算（+ - * /）

七、css3过渡

transition：要过渡的属性  花费的时间（必须写单位） 运动曲线  何时开始

注：1、谁做过渡给谁加 2、如果想要多个属性变化，则属性用all代替