html5新特性 ( 全部带有兼容性问题 )

新增语义化标签

注意 :

这种语义化标准主要是针对搜索引擎的

这些新标签页面中可以使用多次

在IE9中，需要把这些元素转换为块级元素

其实，我们移动端更喜欢使用这些标签

HTML5还增加了很多其他标签，暂时就不提那么多了。

新增的头部、导航、定义块、侧边栏、尾部标签。

<header class="w">头部标签</header>
<div class="box w">
    <nav>
        导航栏标签
    </nav>
    <article>内容标签</article>
    <section>定义文档某区域</section>
    <aside>定义侧边栏标签</aside>
</div>
<footer class="w">
    定义尾部标签
</footer>

新增多媒体标签

audio 音频

属性	值	描述
autoplay	autoplay	自动播放(谷歌禁用了)
controls	controls	播放的控件
loop	loop	是否循环播放
src	url	视频地址

video 视频

属性	值	描述
autoplay	autoplay	自动播放(谷歌浏览器需要添加 muted=’muted’ 解决播放问题)
controls	controls	播放的按钮(控件)
width	像素	-
height	像素	-
loop	loop	是否循环播放
preload	auto	/none 预加载/不加载有autoplay则忽略该属性
src	url	视频地址
poster	imgurl	加载等待的画面图片(加载视频的封面)
muted	muted	静音播放

<style>
    audio {
        width: 400px;
        height: 50px;
        background-color: aqua;
    }

    video {
        width: 100%;
    }
</style>

<video controls="controls" muted='muted' loop="loop" poster="video/cs-v-01.png">
    <!-- <source>标签的作用:检测浏览器支持的视频版本,适合哪个取哪个出来用,保证了低版本浏览器的兼容性 -->
    <source src="video/cs-v-01.mp4" type="video/mp4">
    <source src="video/cs-v-01.ogg" type="video/ogg">
</video>

<!-- 音频和视频一样,也有为了兼容性而产生的source写法 -->
<audio src="music/Ikson-Paradise.mp3" controls="controls" autoplay="autoplay">音频</audio>

新增的input类型(type)

属性值	说明
email	邮箱类型
url	url类型
date	日期类型
time	时间类型
month	月类型
week	周类型
number	数字类型
tel	手机号码
search	搜索框
color	生成一个颜色表单

新增表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填 ==> 没填就没得交
placeholder	提示文	表单的提示信息，存在默认值将不显示 ★★ ==> 可以通过 input::placeholder {color:red;}修改这个属性的字体颜色(双伪类)
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单 ==> 自动把你的光标定进去.
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=”on”，关闭 autocomplete =”off”需要放在表单内，同时加上 name 属性，同时成功提交 ==>类似于你输入的历史记录,默认开启(不安全呐…)
multiple	multiple	可以多选文件提交 ★★

<style>
            li {
                list-style: none;
            }
        </style>
        <form action="">
            <ul>
                <li>邮箱:<input type="email" /></li>
                <li>网址:<input type="url" /></li>
                <li>日期:<input type="date" /></li>
                <li>日期: <input type="time" /></li>
                <li>数量: <input type="number" /></li>
                <li>手机号码: <input type="tel" /></li>
                <li>搜索: <input type="search" required="required" placeholder="请输入文本" autofocus="autofocus" /></li>
                <li>提交多文件 <input type="file" name="" id="" multiple="multiple"></li>
                <li>颜色: <input type="color" style="height: 60px;" /></li>
                <li>特殊文本框选项: <input type="text" value="请输入" style="height: 60px;"></li>
                <li><input type="submit" value="提交"></li>
            </ul>
        </form>

以下是CSS3的新特性(i9的版本才支持)

移动端兼容较好。

新增选择器

属性选择器/结构伪类选择器/伪元素选择器

新增属性选择器

可以根据元素的特定属性选择元素 ==> 可以到达不用借助类或id选择器

选择器写法	用法
E[att]	选择具有att属性的E元素
E[att=”val”]	选择具有att属性等于val值★★★★
E[att^=”val”]	匹配具有att属性且值以val开头的E元素
E[att$=”val”]	匹配具有att属性且值以val结尾的E元素
E[att*=”val”]	匹配具有att属性且值含有val的E元素

==> 注意!E是属性,方括号是选择器,都是要算权重的
    注意:类选择器/属性选择器/伪类选择器  权重都是10

新增结构伪类选择器

全部标号的选择器

选择器写法	用法
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个元素E

按所有的当前级标签取下标。
n的写法 ==> 数字/关键字(even<偶数>/odd<奇数>)/
公式(从0开始进行每次+1计算,公式带n,)  => 只能使用+-和 "数字n" 的方式使用n进行选择
下面是一些公式
2n      偶数
2n+1    奇数
5n      5  10  15 ...
n+5     从第5(含5)到最后
-n+5    只选前5个

有一点需要注意: 当父盒子下的子盒子包含不止一种类型的子盒子时,nth-child会给所有的盒子排序,也就是说,所有的盒子都占有序号!

=== 执行的顺序:先看:nth-child()查序号,后看前面的标签是否合标准
=== 把所有子盒子排列序号

按类型标号的选择器

选择器写法	用法
E:first-of-type	指定类型E的第1个
E:last-of-type	指定类型E的最后个
E:nth-of-type(n)	指定类型E的第n个
E:nth-last-of-type(n)	指定类型E的倒数第n个

==> 只会将指定子盒子排序，也就是按盒子类型取下标。
==> E:nth-last-of-type(n)和nth-child(n)差不多,只不过因为有last,是倒数的,举个例子:最后一个被n叫做1,倒数第二个为2...
==> 先匹配E,再匹配:nth-of-type()

新增伪元素选择器

创建新的标签，而非html本身已写入的标签，从而简化html结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意 :

before 和 after 创建一个元素，但是属于行内元素

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

语法 :

element:before

before和 after 必须有 content 属性

before在父元素内容的前面创建元素，after在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为1

新增的盒子模型

box-sizing:content-box;

属性值	说明
content-box	是默认值，它表示元素的宽度和高度仅包括元素的内容，不包括内边距和边框。 width+padding+border (以前默认的)
border-box	表示元素的宽度和高度包括元素的内容、内边距和边框。 (写多宽就多宽，不会被外边距和内边距挤到变形。)

box-sizing:border-box; ==> 盒子大小为width

CSS3其他特性(了解)

CSS滤镜filter

属性filter:blur(1px); ==> blur模糊处理函数,值越大越模糊(函数有很多个)

CSS calc函数

属性width:calc(100%-23px); ==> 实现数值的计算求解(日常偷懒不用算数,嘻嘻) ==> 实现 + - * / 计算

CSS 过渡 (重点)

一个状态慢慢的过渡到另一个状态 ==> 谁做变化给谁加

transition: 要过渡的属性  花费的时间 运动曲线 何时开始;
/*  单个写法 */
transition: width 0.5s 0.5s;
/* 多个并列写法  */
transition: width 0.5s 0.5s,height 0.5s 0.5s;

属性值	说明
过渡的属性:	可以指定全部属性>>all，也可以特指某个属性
时间	单位s(必须单位)
运动曲线:	默认ease(逐渐慢下来) linear匀速 ease-in 加速 ease-out减速 ease-in-out 先加速后减速
何时开始:	单位时s(触发的延迟时间,也就是什么时候开始)