8.21_h5c3新增内容

HTML5/C3

html5是html的第五次升级

广义的html5包括：html5+css3+js API

缺点：还没有被所有浏览器兼容

语义标签

作用：为了增强语义 添加可阅读性

常用语义标签：

• ※ header 头部
• ※ nav 导
• article 内容
• section 块级
• aside 侧边栏
• ※ footer 尾部

输入表单

• email 邮箱
• url 网址
• ※ search 搜索
• tel 电话 ：给移动端弹出数字键盘
• 日期

※ date
- time
- datetime
※ datetime-local

- month
- week

• ※ number 数字输入框

- min 最小值
- max 最大值
- step 步长

• range 范围

- min 最小值
- max 最大值
- step 步长

• color 颜色：value=“#000”
• datalist 可输入表单
  和text输入框一起使用，atalist 创建下拉选项，input提供输入框，两者之间通过给datalist一个id名称 input表单用list调用来连接

表单属性

• ※ placeholder 占位符 输入框内提示信息
• autofocus 自动获取焦点
• autocompleted 自动完成 显示之前输入内容的历史记录 默认no 习惯于off 提高用户体验 保护隐私 实现条件需要在表单内加上name名称
• multiple 多文件提交 和file文件选择表单搭配使用
• form 可以让不在form内的表单一起提交数据 给不在form内的表单添加form=“id名” form调用id名来连接
• ※required 必须验证 输入框不能为空
• novalidate 关闭验证
• pattern 自定义验证 通过编写正则表达式自定义验证规则 和required一起使用

多媒体标签

音频：audio

<audio src="文件路径.格式" autoplay（自动播放）></audio>

支持格式：mp3、ogg、wav

视频：video

 <video src="文件路径.格式" autoplay controls（控件） ></video>

支持格式：mp4、ogg、webm

共同属性值：

• autoplay 自动播放
• controls 显示控件
• loop 循环播放
• muted 静音：视频
• preload 预先加载
• src 路径

谷歌浏览器禁用了自动播放 音频没有解决方法 视频可以设置静音muted解决

source标签

解决路径不能播放 切换到下一个

<video>
	<source src="路径1">
	<source src="路径2">
</video>

CSS3属性选择器

权重10

• 包含某个属性 button[disabled]

• 匹配属性值等于 E[attr='icon']

• 匹配属性值以什么开头 E[attr^='icon']

• 匹配属性值以什么结尾 E[attr$='icon']

• 匹配属性值包含 E[attr*='icon']

例：.local-nav li [class^=“local-nav-icon”]

❤伪类选择器（结构伪类）

权重10

• E:first-child：选择父级元素第一个子元素

• E:last-child：选择父级元素最后一个子元素

• E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E。

• ※E:nth-child(n) n=父级元素的第几个子元素

• ※E:nth-last-child(n) n=倒数父级元素的第几个子元素

  • n：内可以写公式、关键词（odd奇数 even偶数）、数字

  • 公式：匹配到父元素的前3个子元素

    ul li:nth-child(-n+3){}

    因为 n是从 0 ，1，2，3… 一直递增

    所以 -n+3 就变成了

    • n=0 时 -0+3=3
    • n=1时 -1+3=2
    • n=2时 -2+3=1
    • n=3时 -3+3=0

伪元素选择器

权重1

• E::before 在E元素前插入一个元素

• E::after 在E元素后插入一个元素

  E::before {
  	content:" ";
  }
  

**伪元素注意事项 **

1. 伪元素里面必须有写content：“ ”；
2. e元素和冒号之间不能有空格
3. 伪元素默认是行内元素 设置高宽需转换块级模式

复习

过渡 ：将一个状态渐渐转换成另一个状态

ie9以下版本不支持

秒s单位必写

语法：

transition: 要过渡的属性  花费时间  运动曲线  何时开始
常用用法：transition: all .3s

• 属性=css属性 例transition: width .3s; 属性全过渡 all
• 运动曲线：
  • 默认：ease 逐渐慢下来
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速
  • linear 匀速
• 何时开始：默认0s
• 口诀：谁用给谁加