新增语义标签：
header（头部标签）
nav （导航标签）
article (内容标签)
section （内容标签）
a'side （侧边栏标签）
footer （尾部标签）

新增多媒体标签：
1. 音频标签：
格式：大部分支持ogg与MP3格式。只需设置这两种格式就可以。
        音频标签书写格式：<audio src="文件地址"controls="controls" ></audio>
        浏览器不支持格式的解决方式：   <audio controls="controls" >
                                <source src="文件地址" type="audio/ogg"/>
                                <source src="文件地址与格式" type="audio/mpeg"/>
                                </audio>

             autoplay：



如果出现该属性，则音频在就绪后马上播放。            书写方式
:<audio src="文件地址" controls="controls"  autoplay="autoplay" >
             controls:   

如果出现该属性，则向用户显示控件，比如播放按钮。书写方式：<audio src="文件地址"controls="controls" ></audio>

              loop：      

如果出现该属性，则每当音频结束时重新开始播放。         
书写方式：<audio src="文件地址"loop="loop" ></audio>
             preload:

  如果出现该属性，则音频在页面加载时进行加载，并预备播放。   如果使用 "autoplay"，则忽略该属性。

              src  :        

url

要播放的音频的 URL。



2.视频标签：
        视频标签书写格式：<video src="文件地址"controls="controls" ></video>
        浏览器不支持格式的解决方式：   <video controls="controls" >
                                <source src="文件地址" type="video/ogg"/>
                                <source src="文件地址与格式" type="video/mpeg4"/>
                                </video>
        autoplay:  值：

autoplay

视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
书写方式
:<video src="文件地址" controls="controls"  autoplay="autoplay" >
        poster=“

Imgurl”

（图片地址）加载等待的画面图片

        muted=“

muted

”静音播放

        preload ：

auto（预先加载视频）none（不应加载视频）

规定是否预加载视频(如果有了autoplay   就忽略该属性

        loop=“

loop”

播放完是否继续播放该视频，循环播放


        可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

3.新增input标签：
        1>  type="email"

限制用户输入必须为Email类型

        2>  type="url"     

限制用户输入必须为URL类型（必须是网址）

        3>  type="date"  

限制用户输入必须为日期类型

        4>  type="time"  

限制用户输入必须为时间类型

        5>  type="month"

  限制用户输入必须为月类型

        6>  type="week"

    限制用户输入必须为周类型

        7>  type="number"

  限制用户输入必须为数字类型
(e也可以输入)
        8>  type="tel"  

手机号码

        9>  type="search"

  搜索框

               10> type="color"

生成一个颜色选择表单 (很少用)

新增input值：
        1><input type="" placeholder="输入需要输入的文字"> 占位符-提示信息(文字为灰色，输入时不会进行删除，存在默认值将不显示)
        2><input type="

" required="required">  表单拥有该属性表示其内容不能为空，必填

             （novalidate:关闭验证

- 在表单上添加该属性，那么在提交的时候就不会再执行 required验证
）
             （pattern：自定义验证-通过编写正则表达式自定义验证规则 一般和required同时使用）
        3><input type="" autofocus="autofocus"> 光标直接定位到表单
        4><input type="" autocomplete="on/off"> 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。（必须有name，一般都是关闭）
        5><input type="" multiple="multiple">  可以上传多个文件，而<input type="file">只能上传一个文件

4.新增选择器：
        结构伪类选择器：
                1> 父元素 子元素：first-child{样式} 选择了第一个子元素（子元素后面必须贴紧）
                     父元素 子元素：last-child{样式} 选择了最后一个子元素               
                2>数字：父元素 子元素：nth-child（数字）{样式}
                     字母：父元素 子元素：nth-child（odd/2n）{样式} 选中全部为奇数的子元素
                        父元素 子元素：nth-child（even/2n+1）{样式} 选中全部为偶数的子元素
                3>公式：父元素 子元素：nth-child（-n+从第几个开始）{样式} +几，就是选择从这个子元素之前的全部元素（包括这个元素）
                        父元素 子元素：nth-child（n+从第几个开始）{样式} +几，就是选择从这个子元素之后的全部元素（包括这个元素）
                        父元素 子元素：nth-child（数字n）{样式} 数字代表选中这个数的倍数的子标签
                        【n是从零开始计算，一直递增】
                4>在一个标签中选择一个不一样类型的子元素：of-type
                         【E:nth-child(n)  和 E:nth-of-type(n)的区别在于第一个选择器不分类型直接选择】
                        父元素 不一样类型的子元素：first-of-type 【选中的是不一样类型的子元素的第一个】
                        父元素 不一样类型的子元素：last-of-type 【选中的是不一样类型的子元素的最后一个】
                        父元素 不一样类型的子元素：nth-of-type（n） 【n代表的是第几个子元素】
        属性选择器：
                        子元素/父元素[att]   选择具有att属性的E元素。       
                        子元素/父元素class=“”] 选择具有class属性且属性值为class=“”的元素
                        子元素/父元素class^=“”]  选择具有class属性且属性值为class=“”开头的元素
                        子元素/父元素class$=“”]  选择具有class属性且属性值为class=“”结束的元素
                        子元素/父元素class*=“”]  选择具有class属性且属性值为class=“”任何位置的元素
        伪元素选择器：
                  1>
                        ::before 在元素内部的前面插入内容
                        ::after        在元素内部的后面插入内容
                        注意事项：1.必须是双冒号。
                                2.必须有content属性。伪元素里面必须写上属性 content:"";
                                3.添加的元素是行内元素。

                6.2D转换：盒子的移动方式共有：1.定位   2.盒子的外边距，内边距 3.2d转换
                       
                        tiansform:translate(x,y) x轴代表往左右移动   y轴代表往上下移动
                        简写：tiansform:translateX(数据)
                                  tiansform:translateY(数据)
                        水平垂直居中方式：
                        必须和定位一起做：
                        position：absolute；
                        tiansform:translate（-50%，-50%）
                       

新增语义标签：
header（头部标签）
nav （导航标签）
article (内容标签)
section （内容标签）
a'side （侧边栏标签）
footer （尾部标签）

新增多媒体标签：
1. 音频标签：
格式：大部分支持ogg与MP3格式。只需设置这两种格式就可以。
        音频标签书写格式：<audio src="文件地址"controls="controls" ></audio>
        浏览器不支持格式的解决方式：   <audio controls="controls" >
                                <source src="文件地址" type="audio/ogg"/>
                                <source src="文件地址与格式" type="audio/mpeg"/>
                                </audio>

             autoplay：



如果出现该属性，则音频在就绪后马上播放。            书写方式
:<audio src="文件地址" controls="controls"  autoplay="autoplay" >
             controls:   

如果出现该属性，则向用户显示控件，比如播放按钮。书写方式：<audio src="文件地址"controls="controls" ></audio>

              loop：      

如果出现该属性，则每当音频结束时重新开始播放。         
书写方式：<audio src="文件地址"loop="loop" ></audio>
             preload:

  如果出现该属性，则音频在页面加载时进行加载，并预备播放。   如果使用 "autoplay"，则忽略该属性。

              src  :        

url

要播放的音频的 URL。



2.视频标签：
        视频标签书写格式：<video src="文件地址"controls="controls" ></video>
        浏览器不支持格式的解决方式：   <video controls="controls" >
                                <source src="文件地址" type="video/ogg"/>
                                <source src="文件地址与格式" type="video/mpeg4"/>
                                </video>
        autoplay:  值：

autoplay

视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
书写方式
:<video src="文件地址" controls="controls"  autoplay="autoplay" >
        poster=“

Imgurl”

（图片地址）加载等待的画面图片

        muted=“

muted

”静音播放

        preload ：

auto（预先加载视频）none（不应加载视频）

规定是否预加载视频(如果有了autoplay   就忽略该属性

        loop=“

loop”

播放完是否继续播放该视频，循环播放


        可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

3.新增input标签：
        1>  type="email"

限制用户输入必须为Email类型

        2>  type="url"     

限制用户输入必须为URL类型（必须是网址）

        3>  type="date"  

限制用户输入必须为日期类型

        4>  type="time"  

限制用户输入必须为时间类型

        5>  type="month"

  限制用户输入必须为月类型

        6>  type="week"

    限制用户输入必须为周类型

        7>  type="number"

  限制用户输入必须为数字类型
(e也可以输入)
        8>  type="tel"  

手机号码

        9>  type="search"

  搜索框

               10> type="color"

生成一个颜色选择表单 (很少用)

新增input值：
        1><input type="" placeholder="输入需要输入的文字"> 占位符-提示信息(文字为灰色，输入时不会进行删除，存在默认值将不显示)
        2><input type="

" required="required">  表单拥有该属性表示其内容不能为空，必填

             （novalidate:关闭验证

- 在表单上添加该属性，那么在提交的时候就不会再执行 required验证
）
             （pattern：自定义验证-通过编写正则表达式自定义验证规则 一般和required同时使用）
        3><input type="" autofocus="autofocus"> 光标直接定位到表单
        4><input type="" autocomplete="on/off"> 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。（必须有name，一般都是关闭）
        5><input type="" multiple="multiple">  可以上传多个文件，而<input type="file">只能上传一个文件

4.新增选择器：
        结构伪类选择器：
                1> 父元素 子元素：first-child{样式} 选择了第一个子元素（子元素后面必须贴紧）
                     父元素 子元素：last-child{样式} 选择了最后一个子元素               
                2>数字：父元素 子元素：nth-child（数字）{样式}
                     字母：父元素 子元素：nth-child（odd/2n）{样式} 选中全部为奇数的子元素
                        父元素 子元素：nth-child（even/2n+1）{样式} 选中全部为偶数的子元素
                3>公式：父元素 子元素：nth-child（-n+从第几个开始）{样式} +几，就是选择从这个子元素之前的全部元素（包括这个元素）
                        父元素 子元素：nth-child（n+从第几个开始）{样式} +几，就是选择从这个子元素之后的全部元素（包括这个元素）
                        父元素 子元素：nth-child（数字n）{样式} 数字代表选中这个数的倍数的子标签
                        【n是从零开始计算，一直递增】
                4>在一个标签中选择一个不一样类型的子元素：of-type
                         【E:nth-child(n)  和 E:nth-of-type(n)的区别在于第一个选择器不分类型直接选择】
                        父元素 不一样类型的子元素：first-of-type 【选中的是不一样类型的子元素的第一个】
                        父元素 不一样类型的子元素：last-of-type 【选中的是不一样类型的子元素的最后一个】
                        父元素 不一样类型的子元素：nth-of-type（n） 【n代表的是第几个子元素】
        属性选择器：
                        子元素/父元素[att]   选择具有att属性的E元素。       
                        子元素/父元素class=“”] 选择具有class属性且属性值为class=“”的元素
                        子元素/父元素class^=“”]  选择具有class属性且属性值为class=“”开头的元素
                        子元素/父元素class$=“”]  选择具有class属性且属性值为class=“”结束的元素
                        子元素/父元素class*=“”]  选择具有class属性且属性值为class=“”任何位置的元素
        伪元素选择器：
                  1>
                        ::before 在元素内部的前面插入内容
                        ::after        在元素内部的后面插入内容
                        注意事项：1.必须是双冒号。
                                2.必须有content属性。伪元素里面必须写上属性 content:"";
                                3.添加的元素是行内元素。

                6.2D转换：盒子的移动方式共有：1.定位   2.盒子的外边距，内边距 3.2d转换
                       
                        tiansform:translate(x,y) x轴代表往左右移动   y轴代表往上下移动
                        简写：tiansform:translateX(数据)
                                  tiansform:translateY(数据)
                        水平垂直居中方式：
                        必须和定位一起做：
                        position：absolute；
                        tiansform:translate（-50%，-50%）