HTML5 CSS3新特性

一、HTML5新特性

• HTML5的新增特性主要是针对以前的不足，增加了新的标签、新的表单和表单属性等。
• 这些新的特性都有兼容性问题，基本上是IE9及以上浏览器才支持，如果不考虑兼容性，可大量使用这些新特性

1、HTML新增的语义化标签

2、新增多媒体标签

• video

<video src="" controls="controls"></video>

3、新增标签

• type=“search”
• type=“color”
  

4、新增表单属性

二、CSS3新特性

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

1、CSS3新增选择器

• 属性选择器：

 input[type=password]{}  /*type的值可用引号，也可不用  权重为11*/
input[type="password"]{}  /*type的值可用引号，也可不用  权重为11*/
 div[class^=icon] /*选择div的class值开头为icon的元素  权重为11*/

注：类选择器、伪类选择器、属性选择器的权重都为10，例如：div[class^=icon] 权重为11

• 结构伪类选择器

• E:first-child与E:first-of-type的区别
  • E:first-child先解析父元素中子元素的个数，再根据索引（从0开始）判断标签是否相等，相同则选中，否则不选中。
  • E:first-of-type 先接线父元素中E的个数，再根据索引选中。

下面例子选不中的原因：若选择子元素中第一个div,使用.select div:first-child {}则选不中2所在的标签，因为浏览器先解释:first-child，先解析父元素中子元素的个数，此时第一个元素是p，此时p与.select div:first-child {}中的div不匹配，所以无法选择，此时应使用first-of-type。

/*使2所在标签的背景颜色为红色*/
<style> /*无效*/
.select div:first-child{
	background-color: red;
}
</style>
<style> /*有效*/
.select div:first-{
	background-color: red;
}
</style>
<div class="select">
	<p>1</p>
	<div>2</div>
	<div>3</div>
</div>

• 伪元素选择器

• before和after前尽量使用双冒号
• before和after创建一个元素，但是属于行内元素
• 创建的这个元素在文档数中是找不的，所以称为伪元素
• 语法E::before{}
• before和after必须有content属性
• before在父元素前创建元素，after在父元素后创建元素
• 伪元素选择器和标签选择器一样，权重为1 所以div::after的权重为2

2、box-sizing

3、CSS3滤镜filter

4、过渡

.test {
    width: 200px;
    height: 200px;
    background-color: red;
    transition: all .5s;
}

.test:hover {
    width: 400px;
    height: 400px;
    background-color: blue;
}

5、transform 变形

• translate 移动
• rotate 旋转
• scale 缩放

.progress {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 200px;
    height: 30px;
    border-radius: 50px;
    border: 2px solid red;
    overflow: hidden;
    transition: all 0.5s;
}

.progress>div {
    width: 30%;
    background-color: tomato;
    height: 30px;
    transition: all 0.5s;
}

.progress:hover {
    transform: translateX(30px);
}

.progress:hover div {
    width: 100%;
}

• 盒子的居中

    <div class="outer">
        <div></div>
    </div>

.outer {
    position: relative;
    height: 500px;
    width: 500px;
    background-color: tomato;
}

.outer>div {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    background-color: teal;
}

6、3D导航栏及其实现

<ul>
        <li>
            <div class="box">
                <div>hello</div>
                <div>everyone</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>hello</div>
                <div>everyone</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>hello</div>
                <div>everyone</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>hello</div>
                <div>everyone</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div>hello</div>
                <div>everyone</div>
            </div>
        </li>
    </ul>

body {
    font: italic 25px 'Times New Roman';
    line-height: 50px;
    color: #fff;
    text-align: center;
}

ul {
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    /* transform-style: preserve-3d; */
    perspective: 300px;
}

ul li {
    float: left;
    width: 150px;
    height: 50px;
    perspective: 800px;
    margin-left: 3px;
}

.box {
    transform-style: preserve-3d;
    transition: all .5s;
}

.box div {
    position: absolute;
    width: 150px;
    height: 50px;
    transition: all 2s;
    cursor: pointer;
}

.box div:first-child {
    background-color: red;
}

.box div:last-child {
    background-color: blue;
    top: 50px;
    transform-origin: 0 0;
    transform: rotateX(-90deg);
}

.box:hover {
    transform-origin: 50px 25px;
    transform: translateY(-25px) rotateX(90deg);
}