H5C3-day01-小结

01-什么是HTML5

• HTML5是HTML的第五次升级
• 广义的HTML5指的是HTML本身＋CSS3＋js API
• HTML5暂未被所有浏览器兼容，但这是一个发展趋势

02-HTML5新增标签

• 语义化标签

  • header 头部
  • nav 导航
  • aside 侧边
  • article 内容
  • section 块级
  • footer 底部

• 优化搜索引擎SEO

• IE9里需要把这些元素转换成块级

• 一般喜欢在移动端使用这些标签，PC端暂时未全面铺开

03-多媒体音频标签

• audio

• 属性

  • src 指定文件路径
  • autoplay 自动播放
  • loop 循环播放，默认只播放一次
  • controls 是否显示操作控件

• 谷歌浏览器禁用了自动播放属性，而且暂时没有比较好的解决方案

• 各个浏览器的显示样式都不一样，我们一般在实际开发中都是自己写个控件，然后用js控制

• 我们一般在audio标签中会添加至少两种格式的音乐源文件，用source标签，这是一个单标签，来支持不同的浏览器

04-多媒体视频标签

• video
• 属性
  • src
  • autoplay
  • loop
  • controls 是否显示操作控件
  • muted 禁音
  • poster 预加载等待图片
• 同样在谷歌浏览器里面禁用了自动播放属性，可以通过添加muted属性解决
• 解决格式兼容问题和音频标签一样

05-HTML5新增input标签的type属性

• email 电子邮箱
• url 地址
• 日期
  • date
  • time
  • month
  • week
• number 数字
  • 移动端默认弹开数字键盘
• tel 电话号码
  • 移动端默认弹开数字键盘
• search 搜索框
• color 颜色
  • 格式#000000

06-HTML5新增表单属性

• required 必填
• autofocus 自动获取焦点
• placeholder 提示文本/占位符
• autocomplete 自动完成
  • on 默认值
  • off
  • 我们一般都会设为off，因为不想把用户的一些隐私信息直接暴露
• multiple 文件多选

07-结构伪类选择器

• 权值是10

08-属性选择器

• 权值是10
• 等于 E[attr='icon']
• 开头 E[attr^='icon']
• 结尾 E[attr$='icon']
• 包含 E[attr*='icon']

09-伪元素选择器

• 权值是1

• ::before 是在元素内部的前面插入一个元素

• ::after 是在元素内部的后面插入一个元素

• 插入的元素默认是行内元素

• content属性必写，就算没有内容也要写个空字符串“”

10-2D转换之translate

• 位移：translate

  • transform: translate(x, y);
  • transform: translateX(x);
  • transform: traslateY(y);
  • transform: translateX(x) translateY(y);

• 最大的特点是不会影响其他元素的位置

• 百分比单位是对于自身的width和height值

• 对行内元素没有效果