第一天：HTML5+CSS3

第一天：HTML5+CSS3

01-什么是HTML5

• HTML5就是HTML的第五次升级
• 添加了一些新的元素、属性、行为
• 广义的HMLT5指的是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 预加载等待图片

• 代码

  <video src="media/xxxx.mp4" autoplay="autoplay" loop="loop" controls="controls" muted="muted" poster="img/xxx.jpg"></video>
  

• 同样在谷歌浏览器里面禁用了自动播放属性，可以通过添加muted属性解决

• 解决格式兼容问题和音频标签一样

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

• email 电子邮箱

• url 地址

• date 日期(熟记)

• number 数字(熟记)

• tel 电话号码(熟记)

• search 搜索框(熟记)

• color 颜色

• 代码

  <form action="">
      邮箱：<input type="email"><br />
          
  	网址：<input type="url"><br />
  
      日期：<input type="date"><br />
  
      数字：<input type="number"><br />
  
      号码：<input type="tel"><br />
  
      搜索：<input type="search"><br />
  
      颜色：<input type="color"><br />
  
      <input type="submit" value="提交">
  
  </form>
  

• 在移动端用number或tel可以默认弹开数字键盘

06-HTML5新增表单属性

• required 必填

• autofocus 自动获取焦点

• placeholder 提示文本/占位符

• autocomplete 自动完成

  • on 默认值
  • off
  • 我们一般都会设为off，因为不想把用户的一些隐私信息直接暴露

• multiple 文件多选

• 代码

  <form action="">
    用户名：<input type="text" equired="required" autofocus="autofocus" placeholder="请输入内容" name="username" autocomplete="off">
  		<input type="file" multiple="multiple">
    		<input type="submit" value="提交">  
  </form>
  

07-CSS3属性选择器

• 属性选择器的权值是10
• 包含某个属性E[attr]
• 匹配属性值等于 E[attr='icon']
• 匹配属性值以什么开头 E[attr^='icon']
• 匹配属性值以什么结尾 E[attr$='icon']
• 匹配属性值包含 E[attr*='icon']

08-CSS3结构伪类选择器

• :first-child 第一个

• :last-child 最后一个

• :nth-child(n) 第N个

  还可以写关键字

  • even 偶数
  • odd 奇数

  还可以用公式

  • 如果是公式，里面的n是从0开始的，超出的范围会被忽略
  • 2n 偶数
  • 2n+1 奇数
  • -n+3 前三个
  • n+3 第三个之后

09-nth-child和nth-of-type的区别

• nth-child 不关心元素的类型
• nth-of-type 匹配指定元素的类型

10-CSS3伪元素选择器

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

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

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

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

• 代码

11-2D转换之translate

• transform 2d转换
• 位移：translate
  • transform: translate(x, y);
  • transform: translateX(x);
  • transform: traslateY(y);
  • transform: translateX(x) translateY(y);
  • 注意点：
    • 最大的特点是不会影响其他元素的位置

12-让一个盒子水平垂直居中

• translate里面是可以写 % 号的，如果是 %，那么是相对于自身的宽高

• 它对行内元素是没有效的

• 代码

      .box {
          position: relative; 
          width: 500px; 
          height: 500px; 
          background: #000;
  }
      .son {
          position: absolute; //子绝父相
          top: 50%; 
          left: 50%; 
          transform: translate(-50%,-50%); 
          width: 200px; 
          height: 200px; 
          background: blue;
  }
  <div class="box">
    <div class="son"></div>
  </div>