html5新增 css新增

1. html 新增基本都有兼容性问题基本ie9+才支持

新增语义标签：

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

新增多媒体标签：
音频audio：

• mp3尽量
• 跟下面差不多

视频video：

• 支持格式有限 mp4尽量
• autoplay 自动播放
• controls 用户自定义显示组件
• muted 静音
• loop 循环播放
• poster 加载等待页面图片
• preload 是否预加载视频

2. 新增input:type

• email
• url
• date
• month week
• time
• number
• tel
• search
• color

3. 新增表单

• required 必写
• placeholder提示文本
• autocomplete off on 默认打开 用户开始键入时提示之前输入过的内容
• multiple 多选文件提交

4. css新增
   新增选择器

• 属性选择器(权重10）
  标签[属性=“val”]
  标签[属性^=“val”] 以val开头的
  $ 以val 结尾的
  * 包含val

<input type="text" value="ss">
<input type="text"  value="sb">
 <style>
        input[value='ss']{
            color: pink;
        }
         input[value$=b]{
            color: red;
        }
    </style>

• 结构伪类选择器（权重10）
• :first-child
• :last-child
• :nth-child(n) n 数字或者公式（从0开始 变量必须为n） 或关键字 odd基数 even 偶数

<style>
		ul li:first-child{
            background-color: pink;
        }
        /*或*/
        ul li:nth-child(2){
            background-color: #00a4ff;
        }
 </style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

应用 表格隔行变色

• :first-of-type
• :last-of-type
• nth-of-type
• 区别：
  child 所有盒子都排列
  type 按指定类型排列

<section>
    <p>wq</p>
    <div>dd</div>
    <div>xx</div>
</section>

5. 伪元素选择器

• ::before 在元素内部的前面插入内容
• ::after 在元素内部的后面插入内容
• 创建一个元素属于行内元素
• 称为伪元素
• 元素::before{}
• 权重1
• 使用 字体图标 after 清除浮动

<style>
	.bef::before{
     	content: 'dddd';
	}
</style>
<div class="bef">
    1233
</div>

6. css 新增盒子模型

• 原来：盒子大小=width +border+padding+content
• 新增 width = border+padding+content
• box-sizing :border-content 原来的盒子
  border-box 新增

7. 其他

• 图片变模糊 filter:函数() blur()模糊
• 基数盒子宽度width:calc()函数

8. 过渡 从一个状态过渡到零一状态

• 经常与hover 使用
• transition :要过渡的属性 花费时间 运动曲线 何时开始

	<style>
 		.guoDu {
            width: 200px;
            height: 100px;
            background-color: #2aabd2;
            transition:width 0.5s ease 1s;
        }
        .guoDu:hover{
            width: 400px;
        }
	</style>

• 过渡条

	<style>
		.bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition:width 0.5s;
        }
        .bar_in:hover{
            width: 100%;
        }
    </style>
    <div class="bar">
    	<div class="bar_in"></div>
	</div>