电脑  pc端页面布局（html+css）

移动端页面布局（html5 + css3 ）
        手机
        ipad


HTML5：
   1）新增的语义化标签
        验证一下这些标签是不是块标签【练】
        header
        nav
        aside
        footer....
  2）音频标签
        1）语法     <audio src="文件地址"> </audio>
        2）属性
        3）浏览器兼容性处理
        4）游戏官网、宣传页面，加背景音乐
  3）视频标签
        1）语法    <video src ="文件地址"> </video>
        2）属性
        3）浏览器兼容性处理
        4）解决谷歌不能自动播放
  4）新增的input表单标签
        1】限制输入内容时的格式
        2】提交表单是，校验内容并提示
        <input type="number">
        <input type="search">....
  5）新增的表单属性
        提示内容：placeholder
        自动获得焦点
        不能为空
        自动记录输入的内容
        一次上传多个文件
css3：

  1）属性选择器
        根据属性名
        根据属性值
  2）结构伪类选择器
        :first-child
        :last-child
        :nth-child(n)
                n可以是数字、单词、公式（从0开始）
                不考虑元素的类型
                指定父元素
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型
3）伪元素选择器
        ::before
        ::after
                content不能省略，可以设置为空
4）2D转换
        1）移动 transform:translate(x,y)
                x,y可以是具体的像素值，还可以是百分比（是自身宽度或高度的百分比）

作业：
        1）伪元素实现字体图标
        2）定位+translate实现盒子水平或垂直居中
        3）自己总结今天的内容【格式不限】
        4）复习一下过渡的使用

电脑  pc端页面布局（html+css）

移动端页面布局（html5 + css3 ）
        手机
        ipad


HTML5：
   1）新增的语义化标签
        验证一下这些标签是不是块标签【练】
        header
        nav
        aside
        footer....
  2）音频标签
        1）语法     <audio src="文件地址"> </audio>
        2）属性
        3）浏览器兼容性处理
        4）游戏官网、宣传页面，加背景音乐
  3）视频标签
        1）语法    <video src ="文件地址"> </video>
        2）属性
        3）浏览器兼容性处理
        4）解决谷歌不能自动播放
  4）新增的input表单标签
        1】限制输入内容时的格式
        2】提交表单是，校验内容并提示
        <input type="number">
        <input type="search">....
  5）新增的表单属性
        提示内容：placeholder
        自动获得焦点
        不能为空
        自动记录输入的内容
        一次上传多个文件
css3：

  1）属性选择器
        根据属性名
        根据属性值
  2）结构伪类选择器
        :first-child
        :last-child
        :nth-child(n)
                n可以是数字、单词、公式（从0开始）
                不考虑元素的类型
                指定父元素
        :first-of-type
        :last-of-type
        :nth-of-type()
                考虑元素的类型
3）伪元素选择器
        ::before
        ::after
                content不能省略，可以设置为空
4）2D转换
        1）移动 transform:translate(x,y)
                x,y可以是具体的像素值，还可以是百分比（是自身宽度或高度的百分比）

作业：
        1）伪元素实现字体图标
        2）定位+translate实现盒子水平或垂直居中
        3）自己总结今天的内容【格式不限】
        4）复习一下过渡的使用