HTML5+CSS3新特性

最新推荐文章于 2024-02-15 09:15:57 发布

辕小白

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量420

点赞数

分类专栏： web前段笔记文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/qq_43711676/article/details/121141735

版权

笔记同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

web前段

8 篇文章 1 订阅

订阅专栏

一、HTML5 的新特性

1.1 HTML5 新增的语义化标签

在这里插入图片描述
注意: 这种语义化标准主要是针对搜索引擎的，在页面中可以多次使用。在IE9中，需要把这些元素转换为块级元素。

1.2 HTML5 新增的多媒体标签

① 视频< video>

语法： < video src = “文件地址” controls = “controls” > < /video >

在这里插入图片描述
实例

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

考虑兼容性问题使用：

<video width="320" height="240" comtrols>
	<source src="./movie.mp4" type="video/mp4">
	<source src="./movie.ogg" type="video/ogg">
	您的浏览器不支持video标签。
</video>

在这里插入图片描述

② 音频< audio>

语法： < audio src = “文件地址” controls = “controls” > < /audio >

在这里插入图片描述

1.3 HTML5 新增的 input 类型

在这里插入图片描述

<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="month"></li>
       <li>周：<input type="week"></li>
       <li>手机号码：<input type="tel"></li>
       <li>搜索：<input type="search"></li>
       <li>颜色：<input type="color"></li>
       <li><input type="submit" value="提交"></li>
   </ul>
</form>

结果演示：
在这里插入图片描述

1.4 HTML5 新增的表单属性

在这里插入图片描述

二、CSS3 的新特性

2.1 圆角边框 border-radius（重点）

border-radius 属性用于设置元素的外边框圆角。

语法：border-radius: length;

参数值可以为数值或百分比的形式，
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是个矩形,设置为高度的一半就可以做
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写: border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius

2.2 盒子阴影 box-shadow（重点）

在这里插入图片描述

2.3 文字阴影 text-shadow（了解）

在这里插入图片描述

2.4 CSS3 新增选择器

① 属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>新增选择器</title>
	    <style>
	        input[value] {
	            color: pink;
	        }
	        
	        input[type=text] {
	            color: red;
	        }
	        
	        /* 选择div中具有class的属性值以icon开头的元素 */
	        div[class^=icon] {
	            color: seagreen;
	        }
	        
	        /* 选择div中具有class的属性值以data结尾的元素 */
	        section[class$=data] {
	            color: blue;
	        }
	    </style>
	</head>
	<body>
	    <!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
	    <!-- <input type="text" value="请输入用户名">
	    <input type="text"> -->
	    <!-- 2.属性选择器可以选择属性=值的某些属性 -->
	    <input type="text">
	    <input type="password">
	    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
	    <div class="icon1">小图标1</div>
	    <div class="icon2">小图标2</div>
	    <div class="icon3">小图标3</div>
	    <div class="icon4">小图标4</div>
	    <div>我是打酱油的</div>
	    <!-- 3.属性选择器可以选择属性值开结尾的某些元素 -->
	    <section class="icon1-data">五</section>
	    <section class="icon2-data">四</section>
	    <section class="icon3-data">三</section>
	</body>
</html>

② 结构伪类选择器

在这里插入图片描述
:nth-child(n)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.选择偶数的孩子 */
        
        ul li:nth-child(even) {
            background-color: #ccc;
        }
        /* 2.选择奇数的孩子 */
        
        ul li:nth-child(odd) {
            background-color: green;
        }
        /* 3.nth-child(n):选择所有的孩子 ，只能写n*/
        
        ol li:nth-child(n) {
            background-color: pink;
        }
        /* 4.nth-child(2n): 选择偶数的孩子*/
        
        ol li:nth-child(2n) {
            background-color: blue;
        }
        /* 4.nth-child(2n+1): 选择奇数的孩子*/
        
        ol li:nth-child(2n+1) {
            background-color: purple;
        }
        /* 5.nth-child(n+3): 选择从第三个孩子开始*/
        
        ol li:nth-child(n+3) {
            background-color: skyblue;
        }
        /* 6.nth-child(-n+3): 选择前三个孩子*/
        
        ol li:nth-child(-n+3) {
            background-color: orange;
        }
    </style>
</head>

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

总结：

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
关于nth-child ( n )我们要知道n是从О开始计算的，要记住常用的公式
如果是无序列表，我们肯定用nth-child更多

③ 伪元素选择器（重点）

在这里插入图片描述

2.5 CSS3 盒子模型

CSS3中可以通过 box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况∶

box-sizing: content-box盒子大小为width + padding + border (以前默认的)
box-sizing: border-box盒子大小为width

如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

2.6 图片变模糊

在这里插入图片描述

2.7 CSS3 过渡 transition（重点）

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3过渡</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 要过渡的属性  花费时间 运动曲线 何时开始 */
            /* 如果想写多个属性利用逗号进行隔开 */
            /* 如果想要所有属性都变写个all就行了 */
            transition: width 1s, height 1s;
            /* transition: all 1s; */
        }
        
        div:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

进度条案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条</title>
    <style>
        .bar {
            overflow: hidden;
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 8px;
        }
        
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: width 1s;
        }
        
        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

结果演示：
在这里插入图片描述

2.8 CSS3 2D转换 transform

转换(transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移(translate)、旋转( rotate)、缩放( scale)等效果转换( transform )你可以简单理解为变形
在这里插入图片描述

① 移动：translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法

transform: translate(x,y);或者分开写
transform: translatex(n) ;
transform: translateY(n) ;
重点
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点∶不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果

水平和垂直居中方法：

margin-left margin-top
定位：left 50% 左走自己宽度的一半（top50%上走自己高度的一半）
转换：先定位走父级元素的一半，再用转换x,y轴都-50%。

.yidong {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: pink;
    transform: translate(150px, 50px);
    /* transform: translateX(100px) translateY(100px); */
}

.yidong p {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    background-color: blue;
    transform: translate(-50%, -50%);
}

② 旋转：rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法

transform : rotate(度数)
重点
- rotate里面跟度数，单位是deg 比如rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点

③ 2D转换中心点：`transform-origin`

我们可以设置元素转换的中心点

语法

transform-origin: x y;
重点
- 注意后面的参数×和y用空格隔开
- x y默认转换的中心点是元素的中心点(50%50%)
- 还可以给x y设置像素或者方位名词( top bottom left right center)

④ 缩放：scale

在这里插入图片描述

⑤ 2D转换综合写法及顺序问题

注意:

同时使用多个转换，其格式为:transform: translate()、rotate()、scale() …等，
其顺序会影响转换的效果。（先旋转会改变坐标轴方向)
当我们同时有位移和其他属性的时候，记得要将位移放到最前

⑥ 2D转换总结

转换transform 我们简单理解就是变形有2D和3D之分
我们暂且学了三个分别是位移、旋转和缩放
2D移动translate(x y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
可以分开写比如translateX(x)和translateY(y)
2D旋转rotate(度数)可以实现旋转元素度数的单位是deg
2D缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子
设置转换中心点transform-origin : x y;参数可以百分比、像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

2.9 CSS3 动画 animation

动画( animation )是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

① 动画的基本使用

制作动画分为两步:

先定义动画用keyframes定义动画（类似定义类选择器)
再使用（调用)动画

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        /* 1.定义动画 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 100px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            animation-name: move;
            animation-duration: 1s; //
        }
    </style>
</head>

<body>
    <div></div>
</body>

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在 @keyframes`中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词"from“和”to”，等同于0%和100%。

② 动画的常见属性

在这里插入图片描述

③ 速度曲线细节

在这里插入图片描述

④ 动画简写属性

animation :动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含animation-play-state
暂停动画: animation-play-state: puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来: animation-direction : alternate
盒子动画结束后，停在结束位置: animation-fill-mode : forwards

2.10 CSS3 3D转换

在这里插入图片描述

① 3D位移：translate3d（x,y,z）

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

translform:translateX(100px)∶仅仅是在x轴上移动
translform:translateY(100px)∶仅仅是在Y轴上移动
translform:translateZ(100px)∶仅仅是在Z轴上移动(注意:translateZ一般用px单位)
transform:translate3d(x,y,z)∶其中x、y、z分别指要移动的轴的方向的距离。

② 3D旋转：rotate3d（x,y,z）

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法

transform:rotateX(45deg):沿着x轴正方向旋转45度
transform:rotateY(45deg):沿着y轴正方向旋转45deg
transform:rotateZ(45deg):沿着Z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可)

在这里插入图片描述

③ 透视：perspective

在这里插入图片描述

④ 3D呈现 transform-style

在这里插入图片描述

三、浏览器私有前缀

私有前缀网站查询
在这里插入图片描述

四、媒体查询

4.1 媒体查询的历史：

很多朋友认为媒体查询是css3新增，事实并非如此。媒体查询在css3之前早已存在，知识比较粗糙一些，仅仅是用来区分媒体的类型。

看如下简单代码实例：

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

上述代码分析如下：

link元素的media属性用来规定上述CSS代码应用的媒体类型。
screen表示对应CSS文件应用于显示设备。
all表示对应CSS文件应用于所有媒体设备.
print表示对应CSS文件应用于打印机。
即便当前媒体不符合要求，也会下载对应的CSS文件，只是不应用。
media属性也可以用于style元素，规定当前css代码应用的媒体类型，本文就不再演示。

CSS3之后，媒体查询功能得到了增强，不但可以查询媒体类型，而且还可以查询媒体的相关属性。比如可以根据当前浏览器视口的尺寸的大小，来应用不同的CSS代码或者CSS文件。

4.2 媒体类型与媒体属性

上文已经介绍，CSS2媒体查询只能区分媒体类型，CSS3得到了进一步加强，可以区分媒体的属性。

CSS3 中Media Queries的使用方法如下：

@media 媒体类型 and (媒体属性) {你的样式}

注意：

使用Media Queries必须要使用@media开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体属性（也可以称之为设备属性）。
媒体属性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体属性，第二部分为媒体属性所指定的值，而且这两个部分之间使用冒号分隔。

下面罗列一下当前媒体查询常见的媒体类型与媒体属性：

主要的媒体类型有：

screen：显示屏幕，比如电脑、手机或者pad屏幕。
tty：电传打字机已经等宽字符网格类的设备。
tv：电视等类型的设备。
projection：投影仪等设备。
handheld：一些手持设备。
print：打印机。
braille：盲人专用的一些设备。
aural：语音合成器。
all：表示适用于所有设备。

主要媒体属性有：

宽度属性：width | min-width | max-width。
高度属性：height | min-height | max-height。
设备宽度：device-width | min-device-width | max-device-width。
设备高度：device-height | min-device-height | max-device-height。
视口宽高比：aspect-ratio | min-aspect-ratio | max-aspect-ratio。
设备宽高比：device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio。
颜色属性：color | min-color | max-color。
颜色索引属性：color-index | min-color-index | max-color-index。
黑白属性：monochrome | min-monochrome | max-monochrome。
方向属性：orientation。
分辨率属性：resolution | min-resolution | max-resolution。
网格属性：grid。

但与CSS属性不同的是，媒体属性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。

4.3 具体使用（两种场所）

媒体查询有两种应用场所，一种用在<link>与<style>元素之上，一种是CSS代码内部。

下面抛开媒体查询具体的语法不谈，首先演示一下使用场所。
style或者link标签上(这种主要针对媒体类型做区分)

<style media="screen and (max-width:1000px)" >
div{
  color:red;
}
</style>

通过media属性规定媒体查询的具体内容，对于<link>标签也是同样的道理。
上述代码规定必须是显示器屏幕且视口尺寸小于等于1000px时候，能够将div字体颜色设置为红色。

通过@media来使用

@media screen and (max-width:1000px){
  div{
    color:red;
  }
}

上述代码应用于CSS代码内部，功能与前面的完全一样，以@media作为媒体插件的语法标记。

具体语法分析如下：

当媒体查询为true时，就会应用对应的CSS样式。
无论是通过media还是@media规定媒体查询，语法都一致，且媒体属性一定要用小括号包裹。
媒体查询中有如果有逻辑操作符，在构建多条件查询的时候非常有用，属于语法的一部分。
但是考虑到比较重要，下面单独拿出来进行一下详细介绍。

4.4 逻辑操作符：

1. and操作符：

与JavaScript中的逻辑与操作符一个道理，比如两侧的条件都满足时，才会返回true。

代码片段如下：

@media screen and (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

上述代码规定当前媒体必须满足如下条件，才会将div颜色设置为红色：

媒体类型必须是screen，也就是必须是显示器，比如电脑或者手机登。
视口的尺寸必须大于等于800像素，小于等于1200像素，比如调整浏览器视口到此尺寸。

注意：如果操作符不是not或者only，那么媒体类型是可选的，如果省略，那么默认值是screen。

所以上述代码可以修改如下：

@media (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

上面效果和带screen一致。

2.not操作符：

此操作符用于对一个媒体查询语句进行取反操作，类似于JavaScript中的逻辑非运算符。

代码片段如下：

@media not screen and (min-width:800px) and (max-width:1200px) {
  div{
    color:red;
  }
}

对上述代码分析如下：

not是对整个媒体查询语句的一个取反，而不是对某一个媒体属性取反。
所以上述代码等同于@media not( screen and (min-width:800px) and (max-width:1200px))。

3.or操作符：

与JavaScript逻辑或操作符相同道理，只要两侧满足一条，那么整个媒体查询语句返回值为true。

代码片段如下：

@media (max-width:500px) , (orientation: landscape) {
  div{
    color:red;
  }
}

特别说明：or操作符用逗号表示，否则会报错。

只要满足视口宽度小于等于500像素或者横屏的任意一条，那么div字体颜色就会被设置为红色。

4.only操作符：

此操作符可能未来就会被淘汰了，它是为了兼容低版本的浏览器而存在的。

随着软硬件的发展进步，它可能就逐步失去存在的意义，下面简单介绍一下。
在这里插入图片描述

4.5 媒体属性：

媒体属性比较多，下面只介绍一些比较常用的几种。

且大多数支持min-或者max-前缀，比如与width属性关联的属性还有min-width和max-width。

为了节省篇幅和时间，只以width属性为例子进行介绍，其他属性也是如此。

1.最大宽度max-width

max-width是媒体属性中最常用的一个属性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

2.最小宽度min-width

min-width与max-width相反，指的是媒体类型大于或等于指定宽度时，样式生效。

3.多个媒体属性使用

Media Queries可以使用关键词and将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示：

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4.设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

5.内容显示区域宽高比：

aspect-ratio属性描述了内容输出区域的宽高比，属性值是以斜杠（/）分隔的整数。

代码片段如下：

@media (aspect-ratio: 1/2) {
  div{
    color:red;
  }   
}

6.设备宽高比：

和内容区域宽高比比较相似，属性值格式相同。

关于它们之间的区别，以电脑端为例子，显示器屏幕宽高比就是设备宽高比。

但是浏览器客户区的宽高比就是内容内容宽高比，是不是很容易理解了。

@media (device-aspect-ratio:16/9) {
  div{
    color:red;
  }
}

7.内容高度与内容宽度：

height与width描述了媒体内容输出区域的高度和宽度，比如浏览器客户区的高度和宽度。

@media (height:800px) {
  div{
    color:red;
  }      
}

宽度是同样的道理，就不再举例子了。

8.设备高度与设备宽度：

device-height与device-width描述了设备的高度和宽度，比如显示器屏幕的高度和宽度。

@media (device-width: 1200px) {
  div{
    color:red;
  }     
}

9.方向:

orientation规定了设备是处于横屏状态还是竖屏状态。

具有两个属性值，landscape表示横屏，portrait表示竖屏。

@media (orientation: portrait) {
  div{
    color:red;
  }    
}

辕小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3新特性

一、HTML5 的新特性1.1 HTML5 新增的语义化标签注意: 这种语义化标准主要是针对搜索引擎的，在页面中可以多次使用。在IE9中，需要把这些元素转换为块级元素。1.2 HTML5 新增的多媒体标签① 视频< video>语法： < video src = “文件地址” controls = “controls” > < /video >考虑兼容性问题使用：<video width="320" height="240" comtrol
复制链接

扫一扫