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

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

时间：2023-06-05 04:32:25

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

文章目录

HTML5的新特性HTML5新增的语义化标签HTML5新增的多媒体标签HTML5新增的input表单HTML5新增的表单属性 CSS3的新特性CSS3新增选择器CSS3新增选择器：属性选择器CSS3新增选择器：结构伪类选择器CSS3新增选择器：伪元素选择器 CSS3盒子模型CSS3其他特性：模糊、calc函数、过渡图片变模糊 filtercalc函数CSS3过渡

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

HTML5的新特性

HTML5新增的语义化标签

<header>：头部标签

<nav>：导航标签

<article>：内容标签

<section>：定义文档某个区域

<aside>：侧边栏标签

<footer>：尾部标签

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

HTML5新增的多媒体标签

<video>：视频

<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在不使用插件的情况下，也可以原生的支持视频格式文件的播放

<audio>：音频

<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在不使用插件的情况下，也可以原生的支持音频格式文件的播放

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

HTML5新增的input表单

<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新增的表单属性

修改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;}

<input type="text" value="请输入用户名"><input type="text"><input type="text"><input type="password"><div class="icon1">小图标</div><div class="icon2">小图标</div><div class="icon3">小图标</div><div class="icon4">小图标</div><div>我是打酱油的</div><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;}

<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创建一个元素，但是属于行内元素新创建的这个元素在文档树中是找不到的，所以称为伪元素语法：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;}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。