撑开一片天，划出一道云。欲求阴阳理，入我太极门----学的新知识，还数HTML5＋CSS3

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

2、新增特性

<1> 新增语义化标签

<header>头部标签、<nav> 导航标签;

<article>内容标签；<section>定义文档某个区域； <aside>侧边栏标签； <footer>尾部标签；

注意：这些新标签页面可以使用多次；在IE9中，需要把这些元素转换块级元素

<2> 新增媒体标签

视频标签：

<video>元素支持三种格式MP4、webm、ogg，尽量使用MP4格式

语法：<video src="文件地址" controls="controls"></video>

常见属性

autoplay 值autoplay 视频自动播放（谷歌需要添加muted来解决自动播放问题）
controls controls 向用户显示播放控件
width 设置高度 hight设置播放器高度
loop loop 播放完是否继续播放，循环播放
poster imgurl 加载等待的画面图片
muted muted 静音播放

音频标签：同上语法、格式类似

常见属性

autoplay 值autoplay 视频自动播
controls controls 向用户显示播放控件
width 设置高度 hight设置播放器高度
loop loop 播放完是否继续播放，循环播放
我们可以给视频标签添加muted属性静音，音频不可以；谷歌把音频和视频自动播放禁止了

<3> input类型

属性值 type=“emall/url/date/time/month/week/number/tel/search/color”，这些值都填写会显示想要的格式，如邮件、电话、日期等

新增表单属性：

属性值说明
required required 表单拥有的内容不能为空
placeholder 提示文本表单的提示信息
autofocus autofocus 页面加载完成自动聚焦到指定表单
autocomplete off、on 用户之前输入过的值出现在填写的选项，默认打开，关闭off

multiple multiple 可以多选文件提交

关于input类型新增属性的案例-登录表单，效果展示：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html {
           background: #E2E2E2;
}
        .big {
            background: #5170ad;
            border-radius: 5px;
            width: 360px;
            height: 380px;
             margin: 10px auto 20px auto;
             padding: 50px 30px 0 30px;
             text-align: center;
        }
        .big h1 {
            margin: 10px auto;
            color: blanchedalmond;
            text-align: center;
            padding: 30px 0;
            font-size: 26px;
        }
        .form {
            overflow: hidden;
        }
        .form h5{
            margin-top: 40px;
        }
        .form h5 a{
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            font-weight: 400;
        }

        div  input {
            width: 100%;
            border: 1px solid #314d89;
            padding: 12px 20px;
            outline: none;
            color: #afafaf;
            cursor: pointer;
            font-weight: 400;
 
        }
        .form .one {
            border-radius: 5px;
            padding-bottom: 13px;
            border-bottom: none;
        }
        .form .two {
            border-top: none;
            border-radius: 5px;
        }
        .form .three{
            display: block;
            font-weight: normal;
            background-color: #e0e0e0;
            margin: 20px auto 0 auto;
            width: 100%;
            border: none;
            border-radius: 5px;
            padding: 8px;
            font-size: 17px;
            color: #636363;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
        }
        .form .three:hover {
            background: #314d89;
        }
         



    </style>
</head>
<body>
    <section class="big">
        <h1>博学谷</h1>
        <form class="form">
            <div class="one">
                <input type="email" name="email" required placeholder="Email"> 
            </div>
             <div class="two">
                 <input type="password" name="password " required placeholder="password">
             </div>
             <input type="submit" value="登录" class="three">
             <h5><a href="#">忘记密码</a></h5>
            
        </form>
    </section>
    
</body>

结果：

二、 CSS3新特性

1、属性选择器

利用属性选择器就可以不用借助于类或者id选择选择符
E【att】选中具有属性的E元素
E【att=“val”】选择具有att属性值等于val的e元素
E【att^=”val“】匹配具有att属性值以val开头的e元素
E【att$="val"】匹配具有att属性值以val结尾的e元素
E【att*="val"】匹配具有att属性值中含有val的e元

2、结构伪类选择器

主要根据文档来选择器元素，常用于根据父级选择器里面的子元素

选择符简介
e:first-child 匹配父元素中的第一个子元素e
e:last-child 匹配父元素中的最后一个子元素e
e:nth-child(n) 匹配父元素中的第n个子元素e
e:first-of-type 指定类型e的第一个
e:last-of-type 指定类型e的最后一个
e:nth-of-type(n) 指定类型e的第n个

nth-child（n）选择某个父元素的一个或多个特定的子元素
n可以是数字，关键字和公式；数字是从第几个开始，关键字是even偶数，odd奇数；n可以是公式，如果是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略；如2n、2n-1、5n、n+5、-n+5
区别：nth-child对父元素里面所有孩子排序选择，序号是固定的，先找到第n个孩子，然后看看是否和e匹配
nth-of-type(n) ：对父元素里面指定子元素进行排序选择，失去匹配e，然后再根据e找第n个孩子
如果是无序列表nth-child用的多

3、伪元素选择器

可以帮助我们利用css创建新标签元素，不需要HTML标签，简化HTML的结构

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意：before和after创建一个元素，属于行内元素
新创建的这个元素是在文档树中找不到的，所以称为伪元素
before和after必须有content属性
伪元素选择器和标签选择器一样权重为1
伪元素选择器使用场景-配合字体图标，也可以伪元素清除浮动

4、css3盒子模型

可以通过box-sizing来指定盒模型，有两个值：可指定为content-box、border-box，这样我们计算盒子大小方式就发生了改变

分为两情况：一是 box-sizing：content-box盒子大小为width+padding+border默认的
二是 box-sizing：border-box盒子大小为width
如果盒子模型改为了、box-sizing：border-box，那padding和border就不会撑大盒子，前提是他们两个不会超过width宽度

5、css3 过渡

transition：属性花费时间运动曲线何时开始

属性：想要变化的css属性，宽度高度背景颜色内外边距都可以，想要所有属性都变化过渡，all就可以了
花费时间：单位是秒，必须写 s
运动曲线：默认是ease可以省略
何时开始：单位是s，可以设置延迟触发时间
谁过渡就给谁加

6、其他特性

图片模糊：滤镜filter：函数（）；如filter：blur（5px）；blur模糊处理数值越大越模糊

计算盒子宽度width：calc函数：width：calc（100%-89px）括号里面可以使用加减乘除计算

7、一个伪元素选择器的案例--太极图

style>
        body{
            background-color: #ccc;
        }
        div {
            position: relative;
            width: 150px;
            height: 300px;
            background-color: #fff;
            border-left: 150px solid #000;
            margin: 100px auto;
            border-radius: 50%;
        }
        div::before{
            position: absolute;
            right: 70px;
            height: 30px;
            width: 30px;
            border: 60px solid #000;
            content: '';
            background-color: #fff;
            border-radius: 50%;
        }
        div::after{
            position: absolute;
            right: 70px;
            height: 30px;
            width: 30px;
            border: 60px solid #fff;
            content: '';
            background-color: #000;
            border-radius: 50%;
            bottom: 0px;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>

效果图：