（九）HTML5+CSS3新特性：语义标签、多媒体标签、表单、新增选择器、盒子模型、模糊、calc函数、过渡

最新推荐文章于 2023-09-13 10:33:36 发布

he_hongyu

最新推荐文章于 2023-09-13 10:33:36 发布

阅读量241

点赞数

分类专栏：前端学习文章标签： html5 css3 css

本文链接：https://blog.csdn.net/he_hongyu/article/details/127811714

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文仅用作学习记录，学习视频为B站的pink老师

文章目录

注：新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，在不考虑兼容性的情况下，可以大量使用这些新特性

HTML5的新特性

HTML5新增的语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
在这里插入图片描述

这种语义化标准主要是针对搜索引擎的
这些新标签，页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素

HTML5新增的多媒体标签

<video>：视频

<!-- autoplay="autoplay" 视频就绪自动播放
controls="controls" 向用户显示播放控件
width height 播放器宽高
loop="loop" 播放完是否继续播放该视频，循环播放
preload="auto|none" 是否预加载视频，auto预加载，none不预加载
poster="Imgurl" 加载等待的画面图片
src="url" 视频url地址
muted="muted" 静音播放 -->
<video src="media/mi.mp4" autoplay="autoplay" controls="controls"></video>
<!-- 为了浏览器兼容 -->
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持video元素
</video>

HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES(从Firefox 21版本开始，Linux系统从Firefox 30版本开始)	YES	YES
Safari	YES	NO	NO
Opera	YES(从Opera 25版本开始)	YES	YES

<audio>：音频

<!-- autoplay="autoplay" 音频就绪自动播放
controls="controls" 向用户显示播放控件
loop="loop" 播放完是否继续播放该音频，循环播放
src="url" 音频url地址   -->
<audio src="media/music.mp3" autoplay="autoplay"></audio>
<!-- 为了浏览器兼容 -->
<audio controls>
    <source src="horse.mp3" type="audio/mp3">
    <source src="horse.ogg" type="audio/ogg">
    您的浏览器不支持audio元素
</audio>

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

注：谷歌浏览器将video和audio的自动播放禁止了

HTML5新增的input表单

<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
   <ul>
       <li>邮箱：<input type="email" name="" id=""></li>
       <li>网址：<input type="url" name="" id=""></li>
       <li>日期：<input type="date" name="" id=""></li>
       <li>月：<input type="month" name="" id=""></li>
       <li>周：<input type="week" name="" id=""></li>
       <li>时间：<input type="time" name="" id=""></li>
       <li>数量：<input type="number" name="" id=""></li>
       <li>手机号码：<input type="tel" name="" id=""></li>
       <li>搜索：<input type="search" name="" id=""></li>
       <li>颜色：<input type="color" name="" id=""></li>
       <!-- 当我们点击提交按钮就可以验证表单了 -->
       <li><input type="submit" value="提交"></li>
   </ul>
</form>

HTML5新增的表单属性

属性	值	说明
required	required	表单拥有该属性，表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	显示以前输入过的值，默认已经打开，需要放到表单内，加上name属性
multiple	multiple	可以多选文件提交

修改placeholder里面的字体颜色：input::placeholder {color: skyblue; }

CSS3的新特性

CSS3新增选择器

CSS3新增选择器：属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器。
注：类选择器、属性选择器、伪类选择器的权重为0，0，1，0

/* 必须是input，同时具有value属性 */
input[value] {
    color: palegoldenrod;
}

/* 属性type=text的input */
input[type=text] {
    color: pink;
}

/* 选择具有class属性,且属性值以icon开头的div */
div[class^=icon] {
    color: pink;
}

/* 选择具有class属性,且属性值以data结尾的section */
section[class$=data] {
    color: skyblue;
}

/* 选择具有class属性,且属性值包含icon的div和section标签 */
div[class*=icon],
section[class*=icon] {
    color: greenyellow;
}

<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<input type="text" value="请输入用户名">
<input type="text">

<!-- 2. 属性选择器可以选择 属性=值 的某些元素 重点 -->
<input type="text">
<input type="password">

<!-- 3. 属性选择器可以选择 属性值开头 的某些元素 -->
<div class="icon1">小图标</div>
<div class="icon2">小图标</div>
<div class="icon3">小图标</div>
<div class="icon4">小图标</div>
<div>我是打酱油的</div>

<!-- 4. 属性选择器可以选择 属性值开头 的某些元素 -->
<section class="icon1-data">我是安琪拉</section>
<section class="icon2-data">我是妲己</section>
<section class="icon3-ico">我是王昭君</section>

CSS3新增选择器：结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素
注：结构伪类选择器属于伪类选择器，权重为0，0，1，0

/* 1. 选择ul里面的第一个孩子，小li */
ul li:first-child {
    color: pink;
}
ul li:first-of-type {
    background-color: skyblue;
}

/* 2. 选择ul里面的最后一个孩子，小li */
ul li:last-child {
    color: skyblue;
}
ul li:last-of-type {
    background-color: pink;
}

/* 3. 选择ul里面的第n个孩子，小li */
/* n可以是数字、关键字、公式 */
/* n如果是数字，就是选择第n个子元素，里面数字从1开始 */
ul li:nth-child(5) {
    color: greenyellow;
}
ul li:nth-of-type(6) {
    color: greenyellow;
}
/* n如果是关键字：even偶数、odd奇数 */
ul li:nth-child(even) {
    background-color: #ccc;
}
ul li:nth-of-type(odd) {
    background-color: #ccc;
}
/* n如果是公式，常用nth-child(n) 从0开始，每次加1。 这里面必须是n，不能是其他的字母。 */
/* 第0个元素或者超出了元素的个数会被忽略 */
ol li:nth-child(n) {
    background-color: pink;
}
ol li:nth-of-type(n) {
    background-color: pink;
}

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 …
n+5	从第5个开始(包含第五个)到最后
-n+5	前5个(包含第五个)

<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>

nth-child 和 nth-of-type 的区别:

/* nth-child会把所有的盒子都排列序号 */
/* 执行的时候，首先看nth-child(1), 之后去看 前面div 看是否匹配 */
section div:nth-child(1) {
    background-color: red;
}

/* nth-of-type 会把指定元素的盒子都排列序号 */
/* 执行的时候，首先看 div指定的元素 之后去看 nth-of-type(1)*/
section div:nth-of-type(1) {
    background-color: blue;
}

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

CSS3新增选择器：伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

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

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以称为伪元素
语法：element::before{}
before和after必须有content属性
伪元素选择器和标签选择器一样，权重为0，0，0，1

div {
    width: 300px;
    height: 300px;
    background-color: pink;
}

div::before {
    /* content 必须要有 */
    content: '我是';
}

div::after {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    content: '小猪佩奇';
}

伪元素选择器的应用：
（1）添加字体图标：content: "\e600";
（2）添加遮罩层：

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

/* 鼠标经过.tudou这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {
    display: block;
}

（3）清除浮动，原理类似于添加额外标签
方法一：

.clearfix::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

方法二：

.clearfix::before,
.clearfix::after {
    content: '';
    /* 转化为块级元素并且在一行显示 */
    display: table;
}
.clearfix::after {
    clear: both;
}

CSS3盒子模型

CSS3可以通过box-sizing来指定盒模型

box-sizing:content-box 盒子大小为width+padding+border(默认)
box-sizing:border-box 盒子大小为width，padding和border不会撑大盒子，前提是padding和border不会超过width

CSS3其他特性：模糊、calc函数、过渡

图片变模糊 filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素
语法：filter:函数()

img {
	/* 数值越大，越模糊 */
    filter: blur(15px);
}

calc函数

calc()：在声明CSS属性值时执行一些计算

width: calc(100% - 30px);

括号内可以使用 + - * / 来进行计算

CSS3过渡

过渡(transition)是CSS3中具有颠覆性的特征之一，可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时，为元素添加效果，让页面更好看，更动感十足。低版本浏览器(IE9以下版本)不支持，但不会影响页面布局
过渡动画：从一个状态逐渐过渡到另外一个状态
经常和:hover搭配使用

div {
    width: 200px;
    height: 300px;
    background-color: skyblue;

    /* transition:过渡的属性 花费时间 运动曲线 何时开始; */
    /* 过渡的属性：想要变化的css属性，宽度、高度、背景、内外边距都形。所有属性:all */
    /* 花费时间：单位是秒(必须写单位) 0.5s */
    /* 运动曲线：默认是ease  linear:匀速  ease:逐渐慢下来 ease-in:加速 ease-out:减速 ease-in-out:先加速后减速 */
    /* 何时开始：单位是秒(必须写单位) 可以设置延迟触发时间 默认是0s */
    transition: width 1s ease .3s, height .5s ease-in-out 2s;
    /* transition: all 1s; */
}

div:hover {
    width: 400px;
    height: 800px;
    background-color: pink;
}