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.rhkb.cn/news/498720.html

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

相关文章

STM32 高级 物联网通讯之LoRa通讯

目录 LoRa通讯基础知识 常见的3种通讯协议 远距离高速率的传输协议 近距离高速率传输技术 近距离低功耗传输技术 低功耗广域网 采用授权频段技术 非授权频段 LoRa简介 LoRa的特点 远距离 低功耗 安全 标准化 地理定位 移动性 高性能 低成本 LoRa应用 LoRa组…

基于51单片机的教学用自动光学演示装置设计

视频演示效果&#xff1a; 基于51单片机的教学用自动光学演示装置设计 目录&#xff1a; 目录 视频演示效果&#xff1a; 目录&#xff1a; 前言&#xff1a; 一、项目介绍 1.1 项目背景 1.2 项目研究内容 二、相关光学实验理论 2.1 光的反射 2.2 光的折射 2.3 光的漫反射 三、…

YK人工智能(三)——万字长文学会torch深度学习

2.1 张量 本节主要内容&#xff1a; 张量的简介PyTorch如何创建张量PyTorch中张量的操作PyTorch中张量的广播机制 2.1.1 简介 几何代数中定义的张量是基于向量和矩阵的推广&#xff0c;比如我们可以将标量视为零阶张量&#xff0c;矢量可以视为一阶张量&#xff0c;矩阵就是…

百度热力图数据获取,原理,处理及论文应用

目录 0、示例数据1、百度热力图数据日期如何选择1.1、看日历1.2、看天气 2、百度热力图几天够研究&#xff1f;部分文章统计3、数据原理3.1.1 定位都包含哪些数据&#xff1f;3.1.2 ** 这个比较重要&#xff0c;后面还会再次出现。核密度的值怎么理解&#xff1f;**3.1.3 Csv-&…

电池放电仪在各领域的作用

电池放电仪广泛应用于各个领域。其主要功能是模拟电池在实际应用中的放电过程&#xff0c;通过测量电池的电压、电流、容量等参数&#xff0c;来评估电池的性能和寿命。以下是电池放电仪在各领域的作用&#xff1a; 1. 电动汽车领域&#xff1a;电动汽车需要大量的电池来提供动…

android studio gradle 如何解决下载依赖一直卡住的问题

解决Android studio中下载gradle慢的方法 gradle下载的配置 终极解决方案 在 Android studio 中配置http代理 2. 配置clash verge 然后重新点击构建gradle就可以了

Cesium 实战 27 - 三维视频融合(视频投影)

Cesium 实战 27 - 三维视频融合(视频投影) 核心代码完整代码在线示例在 Cesium 中有几种展示视频的方式,比如墙体使用视频材质,还有地面多边形使用视频材质,都可以实现视频功能。 但是随着摄像头和无人机的流行,需要视频和场景深度融合,简单的实现方式则不能满足需求。…

Three.js教程002:Three.js结合Vue进行开发

文章目录 Three.js结合Vue开发创建Vue项目安装依赖运行项目安装three使用three.js完整代码下载Three.js结合Vue开发 创建Vue项目 创建命令: npm init vite@latest框架这里选择【Vue】: 安装依赖 安装命令: cd 01-vueapp npm install运行项目 npm run dev

图像处理-Ch7-小波函数

个人博客&#xff01;无广告观看&#xff0c;因为这节内容太多了&#xff0c;有点放不下&#xff0c;分了三节 文章目录 多分辨率展开(Multi-resolution Expansions)序列展开(Series Expansions)尺度函数(Scaling Function)例&#xff1a;哈尔尺度函数(Haar scaling func)多分…

手机h5加桌面图标

手机h5应用1&#xff0c;网址浏览器添加到桌面&#xff0c;修改图标 关键代码 <!-- 手机h5加桌面图标 --> <!-- 安卓平台 chrome --> <link relapple-touch-icon-precomposed href<% BASE_URL %>logonew.png> <meta name"mobile-web-app-capab…

【数据可视化-10】国防科技大学录取分数线可视化分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…

【数据库初阶】MySQL数据类型

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; 数据库初阶 &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 亲爱的小伙伴们&#xff0c;大家好&#xff01;在这篇文章中&#xff0c;我们将深入浅出地为大家讲解 MySQL…

【UVM】搭建一个验证平台

UVM环境组件 组件功能 sequence_item&#xff1a;包装数据 UVM中&#xff0c;所有的transaction都要从uvm_sequence_item派生sequence item是每一次driver与DUT互动的最小粒度内容sequence&#xff1a;产生数据 uvm_sequence是一个参数化的类&#xff0c;其参数是transactio…

小程序租赁系统开发的优势与应用探索

内容概要 在如今这个数码科技飞速发展的时代&#xff0c;小程序租赁系统开发仿佛是一张神奇的魔法卡&#xff0c;能让租赁体验变得顺畅如丝。想象一下&#xff0c;无论你需要租用什么&#xff0c;从单车到房屋&#xff0c;甚至是派对用品&#xff0c;只需动动手指&#xff0c;…

活动预告 | Microsoft Azure 在线技术公开课:使用 Azure OpenAI 服务构建生成式应用

课程介绍 通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课&#xff0c;掌握创造新机遇所需的技能&#xff0c;加快对 Microsoft Cloud 技术的了解。参加我们举办的“使用 Azure OpenAI 服务构建生成式应用”活动&#xff0c;了解如何使用包括 GPT 在内的强大的…

小程序信息收集(小迪网络安全笔记~

免责声明&#xff1a;本文章仅用于交流学习&#xff0c;因文章内容而产生的任何违法&未授权行为&#xff0c;与文章作者无关&#xff01;&#xff01;&#xff01; 附&#xff1a;完整笔记目录~ ps&#xff1a;本人小白&#xff0c;笔记均在个人理解基础上整理&#xff0c;…

Jenkins管理多版本python环境

场景&#xff1a;项目有用到python3.8和3.9&#xff0c;python环境直接安装在jenkins容器内。 1、进入jenkins容器 docker exec -it jenkins /bin/bash 2、安装前置编译环境 # 提前安装&#xff0c;以便接下来的配置操作 apt-get -y install gcc automake autoconf libtool ma…

【PCIe 总线及设备入门学习专栏 4.2 -- PCI 总线的三种传输模式 】

文章目录 OverviewProgrammed I/O&#xff08;PIO&#xff09;Direct Memory Access (DMA)Peer-to-Peer 本文转自&#xff1a;https://blog.chinaaet.com/justlxy/p/5100053095 Overview 本文来简单地介绍一下PCI Spec规定的三种数据传输模型&#xff1a;Programmed I/O&…

抖音电商全年销售154亿单产业带商品,830个产业带销售额过亿

发布 | 大力财经 12月31日&#xff0c;抖音电商发布《直播间里的中国制造——2024抖音电商产业带发展报告》&#xff0c;全面盘点2024年全国产业带地区实体经济和中小商家在该平台的发展情况。 报告披露&#xff0c;过去一年&#xff0c;来自全国产业带地区的1.7亿款商品&…

前端页面展示本电脑的摄像头,并使用js获取摄像头列表

可以通过 JavaScript 使用 navigator.mediaDevices.enumerateDevices() 获取电脑上的摄像头列表。以下是一个示例代码&#xff0c;可以展示摄像头列表并选择进行预览。 HTML JavaScript 实现摄像头列表展示和预览 <!DOCTYPE html> <html lang"zh-CN">…