关卡五：HTML5+CSS3

【学习前提】

1.  掌握CSS的使用；
2.  会使用CSS对页面进行合理的布局；

【阶段说明】

1. HTML5与CSS3是HTML、CSS的拓展补充。HTML5与CSS3比HTML、CSS新增了一些标签与布局的样式，在学习HTML5、CSS3的时候需要掌握一些新增的HTML5的标签以及一些CSS3的新特性。
2. 会使用HTML5与CSS3的新特性进行网页开发。

HTML5新特性

1、语义化标签

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

2、多媒体标签
        1.视频标签- video
            当前 <video> 元素支持三种视频格式： 尽量使用 mp4格式

<video src="/.mp4"></video>

兼容写法：

<video  controls="controls"  width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持 video 标签播放视频
</video>

                上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本。
video 常用属性

• autoplay  自动播放  注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性
• width  宽度
• height 高度
• loop  循环播放
• src  播放源

        2.音频标签- audio
            当前 <audio> 元素支持三种视频格式： 尽量使用 mp3格式

<audio src="/.mp3"></audio>

兼容写法:

<audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 audio 标签。
</audio>

                上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
audio 常用属性

• autoplay 自动播放
• controls 显示控件
• loop  循环播放
• src  播放源

小结

1. 音频标签和视频标签使用方式基本一致；
2. 浏览器支持情况不同；
3. 谷歌浏览器把音频和视频自动播放禁止了；
4. 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）；
5. 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性。

3、新增的表单元素

• 邮箱: <input type="email" />限制用户输入必需为Email类型
• 网址: <input type="url" /> 限制用户输入必需为URL类型
• 日期: <input type="date" /> 限制用户输入必需为日期l类型
• 时间: <input type="time" /> 限制用户输入必需为时间类型
• 时间: <input type="month" /> 限制用户输入必需为月类型
• 时间: <input type="week" /> 限制用户输入必需为周类型
• 颜色: <input type="color" /> 生成一个颜色选择表单
• 数量: <input type="number" /> 限制用户输入必需为数字类型（重点）
• 手机号码: <input type="tel" /> 手机号码（重点）
• 搜索: <input type="search" /> 搜索框（重点）

4、新增的表单属性

•  required="required"  表单拥有该属性表示其内容不能为空，必填
•  placeholder="提示文本"  表单的提示信息，存在默认值将不显示
•  autofous="autofous"  自动获得焦点
•  autocomplete  当用户在字段开始键入时，浏览器基于之前键入过的值，显示出在字段中填写的选项;默认已经打开，autocomplete="on"，关闭autocomplete="off";需要放在表单域form内，同时加上name属性，同时成功提交
• multiple="multiple"  可以多选文件提交

CSS3新特性

1、CSS3新增选择器
    1.属性选择器
        按照字面意思，就是根据标签中的属性来选择元素

• input[type=text]  只将 type=text 文本框的input选取出来
• div[class^=icon]  选择首先是div，然后具有class属性且属性值必须是 icon开头的这些元素
• section[class$=data]  选择首先是section 然后具有class属性且属性值必须是 data结尾的这些元素

        可以根据元素特定属性的来选择元素。 这样就可以不用借助于类/id选择器
        可以选择出来自定义的属性
        注意：类选择器、属性选择器、伪类选择器，权重为 10
    2.结构伪类选择器
        E:nth-child(n)  匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的）  先找到第n个孩子，然后看看是否和E匹配
        E:nth-of-type(n)  匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
        一般用于选择父级里面的第几个孩子
         nth-child（n） 要知道n是从0开始计算的：2n：偶数；2n+1：奇数；5n：5  10  15 ... ；n+5：从第5个开始（含第五个）到最后；-n+5：前5个（含第5个）
    3.伪元素选择器
    简介：
        ::before和::after创建了一个元素，但属于行内元素；新创建的这个元素在文档树中是找不到的，所以称之为伪元素。
        语法：element::before {}   
        ::before和::after必须有content 属性 
        ::before在父元素内容的前面创建元素，::after在父元素内容的后面插入元素
        伪元素选择器和标签选择器一样，权重为 1
    应用场景：
        1.字体图标
            在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的编码。
            步骤：
                结构中定义div盒子
                在style中先申明字体  @font-face
                在style中定义after伪元素 div::after{...}
                在after伪元素中 设置content属性，属性的值就是字体编码
                在after伪元素中 设置font-family的属性
                利用定位的方式，让伪元素定位到相应的位置；定位：子绝父相
        2..改善遮罩效果的代码
            步骤:
                找到之前写的遮罩结构和样式，拷贝到自己的页面中
                删除之前的mask遮罩
                在style中，给大的div盒子，设置 before伪元素
                这个伪元素充当的是遮罩的角色，所以我们不用设置内容，但是需要设置content属性，属性的值为空字符串
                给这个遮罩设置宽高，背景颜色，默认是隐藏的
                当鼠标移入到div盒子时候，让遮罩显示，利用hover来实现
       3.清除浮动

 2、盒子模型 box-sizing
    box-sizing: content-box  盒子最终大小为 width + padding + border  （以前默认的）
    box-sizing: border-box  盒子最终大小为 width
    如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
3、其他特性
    1.图标变模糊  -- CSS3滤镜filter
        filter: 函数();
        将模糊或颜色偏移等图形效果应用于元素
    2.计算盒子宽度 -- calc函数
        width: calc(100% + - *  / n);
4、CSS3 过渡
    可以在不使用Flash动画或JavaScript的情况下，将元素从一种样式变换为另一种样式时为元素添加效果
    过渡动画：是从一个状态渐渐的过渡到另外一个状态；常和:hover一起搭配使用
    transition: 要过渡的属性  花费时间  运动曲线  何时开始;
        属性： 想要变化的css属性，宽度高度、背景颜色、内外边距都可以 。如果想要所有的属性都变化过渡，写一个all就可以了
        花费时间：单位是秒（必须写单位）
        运动曲线：默认是ease（可以省略）
        何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）
        使用：谁做过渡就给谁加