【HTML5、CSS3】新增特性总结！

文章目录

    • 23 HTML5 新增特性
      • 23.1 语义化标签
      • 23.2 多媒体标签
        • 23.2.1 视频`<video>`标签
        • 23.2.2 音频`<audio>`标签
      • 23.3 `input`属性值
      • 23.4 表单属性
    • 24 CSS3 新增特性
      • 24.1 属性选择器
      • 24.2 结构伪类选择器
        • 24.2.1 选择第n个元素
        • 24.2.2 常用的6个结构伪类选择器
      • 24.3 伪元素选择器
      • 24.5 盒子模型
      • 24.6 模糊滤镜 `filter:blur(5px); `
      • 24.7 calc 函数 `calc() `
      • 24.8 过渡效果 `transition: width 1s;`

23 HTML5 新增特性

23.1 语义化标签

image-20231211144818808

以前我们布局基本上都是使用div盒子，但是div盒子对于搜索引擎而言没有任何语义。我们可以将div再细分一下，生成一些语义化的布局标签。于是，HTML5新增加了一些新的标签、新的表单和新的表单属性等。

image-20231211145147040

注意，这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持。

23.2 多媒体标签

使用多媒体标签可以很方便地在页面中嵌入音频和视频，不再使用flash和其他浏览器插件。

23.2.1 视频<video>标签
<video src="文件路径" controls="controls"></video>

里面可以添加的属性（部分）：

  • autoplay: autoplay 视频自动播放（谷歌浏览器还需要添加“静音播放”）
  • controls: controls 显示播放控件
  • width: 100% 设置播放器的宽度
  • height: 400 设置播放器的高度
  • loop: loop 设置循环播放
  • src: “xxx” 视频的url地址
  • poster: imgurl 加载等待的画面图片
  • muted: muted 静音播放
<video src="move.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" width="500px">
</video>

尽量使用mp4格式，对各个浏览器兼容性更好，不行再执行ogg格式的视频，还是不行就显示文字，写法如下：

image-20231211151900092
23.2.2 音频<audio>标签
<audio src="文件路径" controls="controls"></audio>

里面可以添加的属性（部分）：

  • autoplay: autoplay 自动播放（谷歌禁用了，JS可以解决）
  • controls: controls 显示控件
  • loop: loop 循环播放
image-20231211152258736

23.3 input属性值

之前的input无论是啥都为text，满足不了所有的需求。于是HTML5新增了以下input属性值：
image-20231211153205789

将这些放到input里面，就会有新的效果。

image-20231211153400995

23.4 表单属性

image-20231211154156155

image-20231211154545983

image-20231211154649468

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {color: pink;
}

同时注意：search和submit是一对的，这两个都需要在form盒子里面，才能够成为一对。

 <form action=""><input type="search" name="搜索" id="搜索" required="required"><input type="submit" value="提交"></form>

24 CSS3 新增特性

  • 新增的CSS3特性有兼容性问题，ie9+才支持
  • 移动端支持优于PC端

24.1 属性选择器

image-20231211162323294

  1. 通过属性选择 input[id]
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input[id] {    /* 有id属性的input才会被选中 */background-color: pink;}</style>
</head><body><form action=""><input type="search" name="搜索" id="搜索"><input type="text" name="搜索" ></form>
</body></html>
  1. 通过属性值选择 input[type="text"]
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input[type="text"] {    /* type="text"的input才会被选中 */background-color: pink;}</style>
</head><body><form action=""><input type="search" name="搜索" id="搜索"><input type="text" name="搜索" ></form>
</body></html>
  1. 选择属性值开头/结尾名称相同的标签 input[class^=icon]/ input[class$=icon]
  • 如果想要选取下面前3个text表单，可以使用^，选择属性值为icon开头的所有元素：
<form action=""><input type="text" class="icon1"><input type="text" class="icon2"><input type="text" class="icon3"><input type="text" class="lihaile">
</form>

input[class^=icon]{background-color: pink;}
  • 使用$,选择属性值为icon**结尾**的所有元素：
<form action=""><input type="text" class="1icon"><input type="text" class="2icon"><input type="text" class="3icon"><input type="text" class="lihaile">
</form>

input[class$=icon]{background-color: pink;}
  1. 选择包含某些元素的属性值 input[class*=icon]
<form action=""><input type="text" class="1icon1"><input type="text" class="2icon2"><input type="text" class="3icon3"><input type="text" class="lihaile">
</form>

选取前三个元素，使用 input[class*=icon]，选择属性值中包含icon的元素：

input[class*=icon]  /*此处权重为 标签选择器1+属性选择器10=11*/{background-color: pink;}

注意：类选择器、属性选择器、伪类选择器，权重都是10

24.2 结构伪类选择器

主要根据文档结构来选择某个元素，常用于选择父级选择器里面的某个子元素

image-20231211163803742

24.2.1 选择第n个元素

当遇到这种情况，我们选择里面的某个元素时，使用class会非常麻烦。

<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
  • 选择里面的第一个元素 li:first-child
ul li:first-child {background-color: pink;}
  • 选择里面的最后一个元素 li:last-child
ul li:last-child {background-color: pink;}
  • 选择中间的第几个元素 li:nth-child(3)
ul li:nth-child(3){background-color: aqua;}
  • 选择里面的所有偶数元素 li:nth-child(even)
ul li:nth-child(even){background-color: aqua;}
  • 选择里面的所有奇数元素 li:nth-child(odd)
ul li:nth-child(odd){background-color: aqua;}
  • 依据公式进行选择 li:nth-child(n)
ul li:nth-child(n){background-color: aqua;}

这里的变量必须用n来表示，用n来表示公式，如：2n，(2n)^2等，其中，n从0开始增加，每次增加1。

image-20231211165838488

24.2.2 常用的6个结构伪类选择器
  • :first-child 得到父元素中的第一个子元素
  • :last-child 得到父元素中最后一个子元素
  • :nth-child(n) 得到父元素中第n个子元素
  • :first-of-type 得到指定类型的第一个子元素
  • :last-of-type 得到指定类型的最后一个子元素
  • :nth-of-type(n) 得到指定类型的第n个子元素

注意：:nth-child(n)和:nth-of-type (n) 的区别：

image-20231211171107050

div: nth-child(1)是先从所有子元素中拿到第一个子元素，然后判断是不是div，是则选中，不是则不选。

div: nth-of-type(1)是先拿出父元素中所有的div盒子，然后再选择第一个子div。

24.3 伪元素选择器

当我们想要实现这个小三角image-20231211172353742

或者实现鼠标放在图片上，图片就会有一个小的遮罩的效果image-20231211172448066

往常我们是需要给小三角和遮罩一个div，放到html结构中，很麻烦。

现在，可以利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构，语法: element::before {}

image-20231211172150375

  • before和after会创建一个行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • before和after必须有content属性
  • before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为1
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div::before{    /* 权重为1+1=2 */content: "你";}div::after{content: "猪";}</style>
</head><body><div>是</div>
</body></html>

伪元素就是在父级元素里面的前面/后面插入一个行内元素，如上，我们在父级元素的前面插入一个你，在父级元素的后面插入一个猪。

其中伪元素里面必须包含content属性。

24.5 盒子模型

原来的盒子模型：边框和padding都会撑大盒子。

现在：

  • box-sizing: content-box; （默认）

    盒子大小为width+padding+border，padding和border会撑开盒子

  • box-sizing: border-box;

    盒子大小为width和height，padding和border不会撑开盒子

如下div，最终大小为300*300：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;background-color: aqua;border: 20px solid black;padding: 5px;box-sizing: border-box;}</style>
</head><body><div></div>
</body></html>

24.6 模糊滤镜 filter:blur(5px);

filter属性：将元素加上模糊/颜色偏移等效果

filter:函数（）;

filter:blur(5px);    blur模糊处理，数值越大越模糊
image-20231211183848027

24.7 calc 函数 calc()

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

width: calc(100% - 80px);

效果：子盒子永远比父盒子小80像素

注意：括号里面可以使用＋- */来计算

24.8 过渡效果 transition: width 1s;

不使用Flash动画和JavaScript就可以实现动画效果（一个样式变化为另一个样式）

transition：变化的属性 花费时间 运动曲线 何时开始
  • 变化的属性：如果宽度变化，那么这里就为width
  • 花费时间：完成变化所需要的时间0.5s
  • 运动曲线：默认为ease
  • 何时开始：默认为0s
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;transition: width 1s ease 0s;background-color: blueviolet}div:hover{width: 600px;}</style>
</head><body><div></div>
</body></html>

我们定义了一个300X300px的紫色盒子，这个盒子加了一个过渡动画：当鼠标放到盒子上时，就将宽度变为600px，执行时间为1s。

注意：过渡一般搭配hover进行使用

如果想要多个属性同时过渡变化，有两种方式：

  • ①加逗号
transition: width 1s, height 1s;
  • ②直接all
transition: all 1s ease 0s;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/282986.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据仓库与数据挖掘c5-c7基础知识

数据仓库与数据挖掘c5-c7基础知识

chapter5 分类 内容 分类的基本概念 分类 数据对象 元组(x,y) X 属性集合 Y 类标签 任务 基于有标签的数据&#xff0c;学习一个分类模型&#xff0c;通过这个分类模型&#xff0c;可以把一组属性x映射到一个特定的类别y上 类别y 提前设定好的--如&#xff1a;学生…
阅读更多...
人工智能与自动驾驶：智能出行时代的未来之路

人工智能与自动驾驶：智能出行时代的未来之路

一、前言 首先&#xff0c;我们先来说下什么是人工智能&#xff0c;人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一门研究如何使计算机系统能够模拟、仿真人类智能的技术和科学领域。它涉及构建智能代理&#xff0c;使其能够感知环境、理解和…
阅读更多...
服务端主动给客户端发消息？实战教学：使用Nestjs实现服务端推送SSE

服务端主动给客户端发消息？实战教学：使用Nestjs实现服务端推送SSE

前言 服务端消息推送SSE是常用的服务器消息通信手段&#xff0c;适用于服务器主动给客户端发送消息的场景&#xff0c;例如私信通知&#xff0c;扫描登录等都可以使用SSE实现。SSE的底层原理是客户端与服务端建立 HTTP 长链接。 Nestjs 框架内置了对SSE的支持&#xff0c;本文…
阅读更多...
分布式定时任务系列7：XXL-job源码分之任务触发

分布式定时任务系列7：XXL-job源码分之任务触发

传送门 分布式定时任务系列1&#xff1a;XXL-job安装 分布式定时任务系列2&#xff1a;XXL-job使用 分布式定时任务系列3&#xff1a;任务执行引擎设计 分布式定时任务系列4&#xff1a;任务执行引擎设计续 分布式定时任务系列5&#xff1a;XXL-job中blockingQueue的应用 …
阅读更多...
Python 爬虫之简单的爬虫（二）

Python 爬虫之简单的爬虫（二）

爬取百度热搜榜 文章目录 爬取百度热搜榜前言一、展示哪些东西二、基本流程三、前期数据获取1.引入库2.请求解析获取 四、后期数据处理1.获取保存 总结 前言 每次打开浏览器&#xff0c;我基本上都会看一下百度热搜榜。这篇我就写一下如何获取百度的热搜榜信息吧。 如果到最后…
阅读更多...
【复杂网络分析与可视化】——通过CSV文件导入Gephi进行社交网络可视化

【复杂网络分析与可视化】——通过CSV文件导入Gephi进行社交网络可视化

目录 一、Gephi介绍 二、导入CSV文件构建网络 三、图片输出 一、Gephi介绍 Gephi具有强大的网络分析功能&#xff0c;可以进行各种网络度量&#xff0c;如度中心性、接近中心性、介数中心性等。它还支持社区检测算法&#xff0c;可以帮助用户发现网络中的群组和社区结构。此…
阅读更多...
饥荒Mod 开发(十三)：木牌传送

饥荒Mod 开发(十三)：木牌传送

饥荒Mod 开发(十二)&#xff1a;一键制作 饥荒Mod 开发(十四)&#xff1a;制作屏幕弹窗 一键传送源码 饥荒的地图很大&#xff0c;跑地图太耗费时间和饥饿值&#xff0c;如果大部分时间都在跑图真的是很无聊&#xff0c;所以需要有一个能够传送的功能&#xff0c;不仅可以快速…
阅读更多...
IDEA2023 + spring cloud 工程热部署设置方法

IDEA2023 + spring cloud 工程热部署设置方法

基于spring cloud 工程进行热部署 &#xff0c;实现每次修改工程源文件&#xff0c;后台自动启动&#xff0c;方便开发测试工作。具体分为5步骤即可&#xff1a; 1、修改工程的pom文件&#xff0c;增加adding devtools 工具包。 <dependency> <groupId>org.s…
阅读更多...
为什么该团队A做的事情，却被其它团队做了

为什么该团队A做的事情，却被其它团队做了

第一种原因&#xff0c;原本方案只需要直接改动系统 service1&#xff0c;但由于团队1并没有解决该问题的动力&#xff0c;其他人不得不绕道去修改系统 service2&#xff0c;service3&#xff0c;service4 来解决该问题。 在一个大型电商系统中&#xff0c;有四个团队负责不同的…
阅读更多...
ElasticSearch学习篇8_Lucene之数据存储（Stored Field、DocValue、BKD Tree）

ElasticSearch学习篇8_Lucene之数据存储（Stored Field、DocValue、BKD Tree）

前言 Lucene全文检索主要分为索引、搜索两个过程&#xff0c;对于索引过程就是将文档磁盘存储然后按照指定格式构建索引文件&#xff0c;其中涉及数据存储一些压缩、数据结构设计还是很巧妙的&#xff0c;下面主要记录学习过程中的StoredField、DocValue以及磁盘BKD Tree的一些…
阅读更多...
neuq-acm预备队训练week 10 P3386 【模板】二分图最大匹配

neuq-acm预备队训练week 10 P3386 【模板】二分图最大匹配

题目描述 给定一个二分图&#xff0c;其左部点的个数为 n&#xff0c;右部点的个数为 m&#xff0c;边数为 e&#xff0c;求其最大匹配的边数。 左部点从 1 至 n 编号&#xff0c;右部点从 1至 m 编号。 题目限制 输入格式 输入的第一行是三个整数&#xff0c;分别代表 n&a…
阅读更多...
【微服务】Spring Aop原理深入解析

【微服务】Spring Aop原理深入解析

目录 一、前言 二、aop概述 2.1 什么是AOP 2.2 AOP中的一些概念 2.2.1 aop通知类型 2.3 AOP实现原理 2.3.1 aop中的代理实现 2.4 静态代理与动态代理 2.4.1 静态代理实现 三、 jdk动态代理与cglib代理 3.1 jdk动态代理 3.1.1 jdk代理示例 3.1.2 jdk动态代理模拟实现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023