html5css3

1.html5新增语义化标签

<header><nav><article><section><aside><footer>

2.新增多媒体标签

视频<video>格式:map4,webm,ogg

<video controls="controls" autoplay="autoplay" muted="muted" loop="loop"><source src="xxx.mp4" type="video/mp4"><source src="xxx.ogg" type="video/ogg">你的浏览器不支持video标签。
</video>

属性描述
autoplayautoplay自动播放(谷歌浏览器添加muted)
controlscontrols展示播放控件
widthpx宽度
heightpx高度
looploop循环播放
preload

auto预先加载视频

none不预先加载视频

是否预先加载(如果自动播放忽略该属性)
srcurl视频url地址
posterimgurl加载等待的画面图片
mutedmuted静音播放

音频<audio>格式:mp3,wav,ogg

<audio controls="controls" autoplay="autoplay" loop="loop"><source src="xxx.mp3" type="audio/mp3"><source src="xxx.ogg" type="audio/ogg">你的浏览器不支持audio 标签。
</audio >
属性描述
autoplayautoplay自动播放(谷歌浏览器添加muted)
controlscontrols展示播放控件
mutedmuted静音播放
preload

auto预先加载视频

none不预先加载视频

metadata

是否预先加载
looploop循环播放
srcurl视频url地址

总结:音频和视频标签的使用方式基本一致

          浏览器支持情况不同

          谷歌浏览器把音频视频自动播放禁止了

          视频标签添加muted属性静音播放,音频不可以要通过js

3.html5新增input 标签

属性值说明
type="email"邮箱类型
type="url"url类型
type="date"日期类型
type="time"时间类型
type="month"月类型
type="week"周类型
type="number"数字类型
type="tel"手机号码
type="search"搜索框
type="color"颜色选择表单
type="submit" value="提交"提交

验证的时候必须添加form表单域,点击提交按钮可以验证表单

4.html5新增表单属性

属性说明
requiredrequired必填
polaceholder提示文本表单提示信息
autofocusautofocus自动聚焦
autocompleteoff/on加上name属性,显示之前输入过的值,一般写off
multiplemultiple可以多选文件上传

5.css3新增选择器

属性选择器、结构伪类选择器权重为10、伪元素选择器权重为1

属性选择器
选择符简介
div[att]选择具有att属性的div元素
div[att=val]选择具有att属性且属性值等于val的div元素
div[att^=val]选择具有att属性且以val开头的div元素
div[att$=val]选择具有att属性且以val结尾的div元素
div[att*=val]选择具有att属性且值包含val的div元素
结构伪类选择器nth-child,nth-of-type

一般用于选择父级里面的第几个孩子

选择符简介
div:first-child匹配父元素中的第一个div元素
div:last-child匹配父元素中的最后一个div元素
div:nth-child(n)

匹配父元素中的第n个div元素,

even,odd,2n,2n+1,n+5,-n+5

div:first-of-type指定类型的第一个
div:last-of-type指定类型的最后一个
div:nth-of-type(n)指定类型的第n个

区别:nth-child会对父元素里面的所有元素的盒子都排列序号

          nth-of-type对父元素里面指定子元素的盒子排列序号

伪元素选择器::before,::after

利用css创建新标签元素,不需要html标签,简化html结构

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

注意:

        before和after创建的元素,属于行内元素

       新创建的这个元素在文档树中是找不到的,所以叫伪元素

         语法:e::before{}

        before和after必须有content属性

           伪元素选择器和标签选择器一样,权重为1

使用场景:字体图标,黑色半透明遮罩层效果,清除浮动

<style>@font-face{}div{position:relative;}div::after{content:'\e91e';font-family:'icomoon';position:absolute;top:10px;right:10px;}
</style>
<style>div{position:relative;}div::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4) url(img/png) no-repeat center;display:none;}div:hover::before{display:block;}
</style>
<style>.clearfix::after{clear:both;display:block;content:'';}
</style>

6.css3盒模型

box-sizing:border-box;不会撑大盒子

box-sizing:content-box;

7.css3filter滤镜

图片模糊处理filter:blur(5px);

8.计算盒子宽度calc函数

width:calc(100% - 80px)

9.新增属性过渡transition

transition:要过渡的属性 时间 运动曲线 何时开始;

谁做过渡给谁加,如果想要写多个属性,逗号隔开

<style>div{width:200px;height:30px;background-color:pink;/* transition: width .5s ease 0s,height.5s ease 0s; */transition: all .5s;}div:hover{width:400px;height:200px;}
</style>

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

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

相关文章

【超级详细】七牛云配置阿里云域名详细过程记录

0. 准备一个阿里云域名&#xff0c;记得要备案&#xff01;&#xff01;&#xff01;&#xff01; 1. 创建七牛云存储空间 首先&#xff0c;登录七牛云控制台&#xff0c;创建一个新的存储空间&#xff08;Bucket&#xff09;。这个存储空间将用于存放你的文件&#xff0c;并…

Cornerstone3D:了解Nifti文件,并查看元数据

Nifti 全称Neuroimaging Informatics Technology Initiative是一种专为存储医学和神经影像数据而设计的文件格式。设计目的是高效的存储三维或四维图像数据&#xff0c;同时将相关的元数据紧凑地嵌入文件中。Nifti文件的组成&#xff1a;头信息&#xff08;元数据&#xff09;…

【C++】2029:【例4.15】水仙花数

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目描述&#x1f4af;我的做法思路分析优势不足之处 &#x1f4af;老师的做法思路分析优势不足 &#x1f4af;对比和优化实现方式对比优化思路和操作1. 直接分解数字的各位…

形象地理解UE4中的数据结构 TLinkedListBase

大家都熟知链表&#xff0c;但不一定能快速看懂UE4中的数据结构。 TLinkedListBase表示“链接”中的一个结点&#xff0c;有三个成员&#xff1a; 一、ElementType Element; 表示具体的业务&#xff0c;例如int链条中的一个整数。 二、NextLink 表示 “下一个Node”&#…

RabbitMQ基础篇之Java客户端 Work Queues

文章目录 模型概述需求实现步骤创建队列定义消费者定义消息发送测试执行观察结论多消费者的作用性能差异生产环境中的应用 处理速度差异的情况 优化示例总结 模型概述 Work Queues 模型也称为任务模型&#xff0c;多个消费者绑定到同一个队列&#xff0c;共同消费队列中的消息…

CP AUTOSAR标准之FlexRayDriver(AUTOSAR_SWS_FlexRayDriver)(更新中……)

1 简介和功能概述 FlexRay驱动程序(Fr)抽象了特定FlexRay通信控制器(CC)的硬件相关实现细节。本规范主要依赖于符合FlexRay规范[13]的FlexRay CC。此外,本规范还支持符合FlexRay规范[14]的旧版FlexRay控制器。本SWS中因支持的FlexRay规范不同而导致的不同行为在适用的情况下以…

vscode代码AI插件Continue 安装与使用

“Continue” 是一款强大的插件&#xff0c;它主要用于在开发过程中提供智能的代码延续功能。例如&#xff0c;当你在编写代码并且需要进行下一步操作或者完成一个代码块时&#xff0c;它能够根据代码的上下文、语法规则以及相关的库和框架知识&#xff0c;为你提供可能的代码续…

ubuntu 如何使用vrf

在Ubuntu或其他Linux系统中&#xff0c;您使用ip命令和sysctl命令配置的网络和内核参数通常是临时的&#xff0c;这意味着在系统重启后这些配置会丢失。为了将这些配置持久化&#xff0c;您需要采取一些额外的步骤。 对于ip命令配置的网络接口和路由&#xff0c;您可以将这些配…

二、SQL语言,《数据库系统概念》,原书第7版

文章目录 一、概览SQL语言1.1 SQL 语言概述1.1.1 SQL语言的提出和发展1.1.2 SQL 语言的功能概述 1.2 利用SQL语言建立数据库1.2.1 示例1.2.2 SQL-DDL1.2.2.1 CREATE DATABASE1.2.2.2 CREATE TABLE 1.2.3 SQL-DML1.2.3.1 INSERT INTO 1.3 用SQL 语言进行简单查询1.3.1 单表查询 …

【ArcGIS Pro/GeoScene Pro】可视化时态数据

可视化过去二十年新西兰国际旅游业的发展变化 工程数据下载 ArcGIS Pro 快速入门指南—ArcGIS Pro | 文档 添加数据 数据为中国旅客数据 转置表字段 列数据转行数据

WebRTC :原理、协议和应用场景

WebRTC&#xff08;Web Real-Time Communication&#xff09;是一种用于在Web浏览器和移动应用程序之间进行实时通信的开放标准。它通过将音频、视频和数据传输集成到Web浏览器中&#xff0c;使得实时通信变得简单且无需任何插件或第三方软件。 一、WebRTC 的原理 WebRTC的实…

git在idea中操作频繁出现让输入token或用户密码,可以使用凭证助手(使用git命令时输入的用户密码即可) use credential helper

1、打开 idea 设置&#xff0c;找到 git 路径 File | Settings | Version Control | Git 2、勾选 Use credential helper 即可

CPT203 Software Engineering 软件工程 Pt.5 软件测试(中英双语)

文章目录 8. 软件测试8.1 Testing&#xff08;测试&#xff09;8.1.1 A note of testing under the V & A framework8.1.2 The Basics8.1.3 The Goals8.1.4 The Stages 8.2 Developing testing&#xff08;开发测试&#xff09;8.2.1 Unit testing&#xff08;单元测试&…

Docker基础知识 Docker命令、镜像、容器、数据卷、自定义镜像、使用Docker部署Java应用、部署前端代码、DockerCompose一键部署

目录 1.Docker 2.镜像和容器 2.1 定义 2.2 开机自动启动容器 3.docker命令 3.1 docker run 参数说明 3.2 常见命令 3.3 命令演示 3.4 命令别名 4.Docker命令详解 5.数据卷 5.1 定义 5.2 数据卷的相关命令 5.3 数据卷命令 5.4 挂载本地目录或文件 5.4.1 定义 5.4.2 mysql容器目录…

探索CSDN博客数据:使用Python爬虫技术

探索CSDN博客数据&#xff1a;使用Python爬虫技术 在数字化的浪潮中&#xff0c;数据的获取与分析变得日益关键。CSDN作为中国领先的IT社区和服务平台&#xff0c;汇聚了海量的技术博客与文章&#xff0c;成为一座蕴藏丰富的数据宝库。本文将引领您穿梭于Python的requests和py…

Python 自动化 打开网站 填表登陆 例子

图样 简价&#xff1a; 简要说明这个程序的功能&#xff1a; 1. **基本功能**&#xff1a; - 自动打开网站 - 自动填写登录信息&#xff08;号、公司名称、密码&#xff09; - 显示半透明状态窗口实时提示操作进度 2. **操作流程**&#xff1a; - 打开网站后自动…

2025常见的软件测试面试题

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 “ 今天我给大家介绍一些python自动化测试中常见的面试题&#xff0c;涵盖了Python基础、测试框架、测试工具、测试方法等方面的内容&#xff0c;希望能够帮助…

Markdown如何添加任务列表-复选框的添加

Markdown如何添加任务列表-复选框的添加 前言语法讲解使用场景及应用实例代码整和渲染结果小结其他文章快来试试吧☺️ Markdown如何添加任务列表-复选框的添加&#x1f448;点击这里也可查看 前言 To-do任务列表是一种很常见的时间管理工具&#xff0c;它适用于工作计划&…

机器学习笔记——正则化

大家好&#xff0c;这里是好评笔记&#xff0c;公主号&#xff1a;Goodnote&#xff0c;专栏文章私信限时Free。本笔记介绍机器学习中常见的正则化方法。 文章目录 正则化L1 正则化&#xff08;Lasso&#xff09;原理使用场景优缺点 L2 正则化&#xff08;Ridge&#xff09;原理…

详解MySQL在Windows上的安装

目录 查看电脑上是否安装了MySQL 下载安装MySQL 打开MySQL官网&#xff0c;找到DOWNLOADS 然后往下翻&#xff0c;找到MySQL Community(GPL) Downloads>> 然后找到MySQL Community Server 然后下载&#xff0c;选择No thanks,just start my download. 然后双击进行…