HTML5,CSS3新特性-CSDN博客

本文链接：https://blog.csdn.net/qq_61324100/article/details/124184855

HTML5,CSS3新特性

文章目录

HTML5,CSS3新特性

一.HTML5新特性

1.HTML5新增加的语义化标签

在HTML5中,新增加的语义化标签有头部标签<header>,导航栏标签<nav>,内容标签<article>,区域标签<section>,侧边栏标签<aside>,尾部标签<footer>。
语义化标签主要是针对搜索引擎的，在新标签页面中可以使用多次。
在IE9中，需要把这些元素转换为块级元素。

移动端更喜欢使用这些标签。

头部标签

<header>头部标签</header>

导航栏标签

<nav>导航栏标签</nav>

内容标签

<article>内容标签</article>

区域标签

<section>某个区域</section>

侧边栏标签

<aside>侧边栏标签</aside>

尾部标签

<footer>尾部标签</footer>

2.HTML5新增的多媒体标签

1.视频标签

在视频标签中，使用的是<video>标签。
视频标签<video>含有的属性: src,autoplay,controls,muted,preload,loop,poster,width,height。

各属性使用方式:

src: url (视频的url地址)

autoplay: autoplay (自动播放)

controls: controls (播放控件)

muted: muted (静音播放。谷歌关闭了自动播放,所以想要播放要使用到muted属性)

preload: auto/none (预先加载视频。如果已经有了autoplay就忽略掉这个属性)

loop: loop (循环播放)

poster: url (预加载图片的url)

width: px (视频宽度)

height: px (视频高度)

<video src="media/mi.mp4" 
       autoplay="autoplay" 
       muted="muted" 
       controls="controls" 
       loop="loop"
       poster="media/mi9.jpg">
</video>

2.音频标签

在音频标签中,使用的标签是<audio>。

音频标签<audio>含有的属性: src,autoplay,controls,loop。

<audio src="media/music.mp3" 
       autoplay="autoplay" 
       controls="controls" 
       loop="loop">
</audio>

3.多媒体标签总结

音频标签和视频标签使用方式基本一致。
浏览器支持情况不同,谷歌浏览器把音频和视频的自动播放给禁止了。
视频标签可通过muted属性来静音播放视频,而音频标签则需要通过js来解决。
在使用上,我们经常设置自动播放,不使用控件,循环和设置大小属性。

3.HTML5新增的input类型

在HTML5中,新增加的input类型有: search,number,tel,email,url,month,date,time,week,color。

<form action="">
        <ul>
            <li>搜索: <input type="search"></li>
            <li>数字: <input type="number"></li>
            <li>电话: <input type="tel"></li>
            <li>邮箱: <input type="email"></li>
            <li>网址: <input type="url"></li>
            <li>月份: <input type="month"></li>
            <li>日期: <input type="date"></li>
            <li>时间: <input type="time"></li>
            <li>周期: <input type="week"></li>
            <li>颜色: <input type="color"></li>
            <li><input type="submit"></li>
        </ul>
</form>

4.HTML5新增的表单属性

在HTML5中,新增加的,新增的表单属性有: required,placeholder,autofocus,autocomplete,mutiple。

各属性使用方式:

required: required (表单内容必填,不能为空。)

placeholder: 值 (表单的提示信息,存在默认值后将不显示)

autofocus: autofocus (自动聚焦光标)

autocomplete: on/off (显示浏览器之前键过并提交成功过的值,需要同时给上name属性)

mutiple: mutiple (可以多选文件提交)

<form action="">
        <input type="search" 
               id=""
               name="sear" 
               required="required" 
               placeholder="i7 10700F" 
               autofocus="autofocus"
               autocomplete="on">
        <input type="submit" value="提交">
        <input type="file" multiple="multiple">
</form>

二.CSS3新特性

在CSS3中新增的CSS3特性有兼容性问题,IE9+才支持。
移动端支持优于PC端。
现仍在不断改进中，应用相对广泛。
现阶段主要学习：新增的选择器和盒子模型以及其他特性

1.CSS3新增的选择器

CSS3中新增的选择器有: 属性选择器,结构伪类选择器,伪元素选择器。

1.属性选择器

1.属性选择器可以根据元素特定的属性来选择元素。这样就可以不用借助于类或者id选择器了。

<input type="text" value="请输入用户名" name="" id="">

/* input标签中，同时具有value这个属性的标签*/
input[value] {
            color: deeppink;
        }

2.属性选择器可以选择属性=值的某些元素。

<input type="search" name="" id="">

/* input元素中 只选择type=search文本框*/
input[type=search] {
            color: aqua;
        }

3.属性选择器可以选择属性值是以什么开头的某些元素。

<div class="incon1">小图标1</div>
<div class="incon2">小图标2</div>
<div class="incon3">小图标3</div>

/* 选择属性是class并且属性值是以incon开头的元素 */
div[class^=incon] {
            color: blue;
        }

4.属性选择器可以选择属性值是以什么结尾的某些元素。

<span class="incon-date">我是安其拉</span>
<span class="incon-date">我是哥斯拉</span>
<span class="incon-time">who am I?</span>

/* 选择属性是class并且属性值是以date结尾的元素 */
span[class$=date] {
            color: chartreuse;
        }

5.属性选择器可以选择属性值中含有的某些元素。

<p class="mycss-java">我是java</p>
<p class="mycss-python">我是python</p>
<p class="mycss-mysql">我是mysql</p>

/* 选择属性是class并且属性值含有mycss的某些元素 */
p[class*=mycss] {
            color: orangered;
        }

类选择器,属性选择器和伪类选择器的权重都是0010。

2.结构伪类选择器

1.结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。

2.关于nth-child(n)我们要知道n是从0开始计算的，记住常用的公式。

<ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>

/* 选择ul里的第一个孩子 li */
ul li:first-child {
            color: greenyellow;
        }

/* 选择ul里最后一个孩子 li */
ul li:last-child {
            color: red;
        }

/* 选择ul中的第5个孩子 li */
        ul li:nth-child(5) {
            color: orchid;
        }

2.其中,括号里的值可以为even(偶数孩子),odd(奇数孩子),n(可以是数字，关键字和公式)。

<ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>

<ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>

ul li:nth-child(even) {
            background-color: #ccc;
        }
ul li:nth-child(odd) {
            background-color: gray;
        }
/* 常用公式:
        2n(偶数)  2n+1(奇数)  3n(3的倍数) n+3(从3开始) -n+3(前3个)   */
ol li:nth-child(n+3) {
            background-color: deeppink;
        }

3.nth-child和nth-of-type的区别

nth-child 对父元素里面所有孩子排序选择，先找到第n个孩子，然后看看是否和E匹配。

nth-of-type 对父元素里面指定子元素进行排序。先去匹配E，然后再根据E找第n个孩子。

<section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
</section>

/* nth-child()会把所有孩子都顺序排列出来，然后选出第一个孩子来与div(E)匹配--找到了p发现与前面的div不一致 */
section div:nth-child(1) {
            background-color: deeppink;
        }
/* nth-of-type()会先指定子元素div 然后再匹配E 然后再找相关的孩子--找到了div，忽略带p标签*/
section div:nth-of-type(1) {
            background-color: orange;
        }

3.伪元素选择器

CSS3中before和after创建一个元素，属于行内元素。

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

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

1.伪元素选择器的使用

语法:element::before{}。
before和after必须有content属性。
before和after是放在父元素里的。

伪元素清除浮动其实就是额外标签法的一个升级和优化。

<div>自来也</div>

 div::before {
            /* before和after是放在父元素里的(这里的父元素是div) */
            content: '六道佩恩';
            background-color: pink;
        }

        div::after {
            content: '旋涡鸣人';
        }

2.伪元素选择器的应用场景

用于定位的元素中

<div></div>

@font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?nqdbnz');
            src: url('fonts/icomoon.eot?nqdbnz#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?nqdbnz') format('truetype'),
                url('fonts/icomoon.woff?nqdbnz') format('woff'),
                url('fonts/icomoon.svg?nqdbnz#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }


div {
            position: relative;
            width: 200px;
            height: 30px;
            border: 1px solid red;
        }

div::before {
            /* 子绝父相 */
            position: absolute;
    		content: '\e909';
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            
        }

用于隐藏遮挡元素

<div class="tudou">
        <img src="images/tudou.jpg" alt="">
</div>

.tudou::before {
            content: '';
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;
        }

/* 鼠标经过父类盒子的时候父类盒子里的before遮挡层显示出来 */
.tudou:hover::before {
            display: block;
        }

3.伪元素清除浮动的本质

/* 伪元素清除浮动其实就是额外标签法的一个升级和优化 */
        .clearfix:after {
            /* 伪元素必须写的属性 */
            content: "";
            /* 插入的元素必须是块级       */
            display: block;
            /* 不要看见这个伪元素 */
            height: 0;
            /* 清除浮动的核心代码 */
            clear: both;
            /* 不要看见这个伪元素 */
            visibility: hidden;
        }

/* 双伪元素法--闭环清除浮动(before在前，after在后) */
        .clearfix:before,
        .clearfix:after {
            content: "";
            /* 转为块级元素并且一行显示--before、after */
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

2.CSS3新增的盒子模型

CSS3中盒子模型使用box-sizing属性，这样最终都不会撑大盒子了。

box-sizing: content-box(默认值) | boder-box;

p {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 20px solid red;
            padding: 50px;
            /* CSS3中的盒子模型,这样最终都不会撑大盒子了  盒子的大小还是200px 100px */
            box-sizing: border-box;
        }

3.CSS3新增的其他特性

1.CSS3图片模糊

CSS3中使用filter属性,可以使图片变得模糊。
blur()函数,里面的数值越大图片越模糊。

filter: blur(px);

<img src="images/man.jpg" alt="">

img {
            /* blur()函数  里面的数值越大越模糊 */
            filter: blur(5px);
        }

img:hover {
            filter: blur(0);
        }

2.CSS3宽度计算

CSS3中使用width属性，可以计算盒子的宽度。
calc()函数可做宽度的+ - * / 运算。

width: cacl();

 <!-- 需求: 父盒子的宽度永远要比子盒子的宽度大30px -->
    <div class="fater">
        <div class="son"></div>
    </div>

.fater {
            width: 300px;
            height: 180px;
            background-color: pink;
        }

.son {
            /* cacl()函数用来计算盒子的宽度 记得100 - 30 有空格哦 */
            width: calc(100% - 30px);
            height: 100px;
            background-color: aqua;
        }

3.CSS3过渡

过渡是CSS3中具有颠覆性的特征之一。
我们可以在不使用flash动画或者js的情况下，当元素从一种样式变化成另一种样式时为其添加效果。
过渡动画:是从一个状态渐渐的过渡到另一个状态。
可以让我们页面更好看，动感十足，虽然低版本浏览器不支持，但是不会影响页面布局。
经常和:hover一起搭配使用。
transition: 要过渡的属性 | 花费时间 | 运动曲线 | 何时开始;

属性: 想要变化的css属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性
都变化过渡，写一个all就可以。

花费时间:单位是秒(必须写单位)。

运动曲线:默认是ease。

何时开始:单位是秒，可以设置延迟触发时间。

transition: width 0.5s ease 1s;

<div></div>

div {	
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 如果想要多个属性进行过渡，则用 , 分隔 */
            transition: width 0.5s, height 0.5s;
            /* 如果想要多个属性(全部的css属性)，用all即可 */
            transition: all 0.5s;
        }

        div:hover {
            width: 400px;
            height: 150px;
            background-color: aqua;
        }