HTML5和CSS3提高

一、HTML5的新特性

增加了一些新的标签,新的表单,新的表单属性,IE9+以上版本的浏览器才支持

注意:

这些语义化标准主要针对搜索引擎的

新标签可以使用多次

在IE9中需要把这些元素转化为块级元素

新增的多媒体标签

主要包含两个

1、音频:<audio>

2、视频:<video>

1、视频<video>

语法:

<video src="文件地址"  controls="controls"></video>

谷歌浏览器把autoplay属性给我们禁用了,IE可以用

2、音频<audio>

新增的input类型

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

新增的表单属性

二、CSS的新特性

css新增选择器
1、属性选择器

根据元素特定属性来选择元素

2、结构伪类选择器

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

nth-child(n)里面的n可以是数字(选择第n个子元素,从1开始)、关键字(even偶数,odd奇数)、公式(从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)

nth-child会把所有的盒子都排列序号,执行的时候首先看   :nth-child(1) 之后回去看前面div

nth-of-type 会把指定的盒子排列序号,执行时候先看 div指定的元素  之后看  :nth-of-type(1)第几个盒子

3、伪元素选择器

帮助我们利用CSS创建新标签元素不需要HTML标签

显示隐藏遮罩案例

伪元素选择器案例

CSS盒子模型

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

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

2、box-sizing: border-box 盒子大小为width

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

CSS3的其他特性
1、图片变模糊

CSS3滤镜filter:

filter css 属性将模糊或颜色偏移等图形效果应用于元素

filter: 函数();   例如: filter: blur(5px);模糊处理  数值越大越模糊

2、计算盒子宽度 width:calc函数

width: calc(100%-80px);括号里面可以使用加减乘除计算

CSS3过渡 transition

过渡是CSS3中具有颠覆性的特征之一,

过渡动画:从一个状态 渐渐地过渡到另一个状态

我们现在经常和 :hover 一起搭配使用

过渡使用口诀:谁做过渡给谁加

如果想要写多个属性利用逗号进行分割

三、广义的HTML5

广义的HTML5是HTML5+CSS3+JavaScript

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

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

相关文章

PPT复制粘贴后背景变没了怎么处理

目录 1.问题描述&#xff1a;2.解决方法&#xff1a;小结&#xff1a; 1.问题描述&#xff1a; 把一个ppt中的一张ppt粘贴到另一个ppt中&#xff0c;背景变没了&#xff0c;如下所示&#xff1a; 复制&#xff1a; 粘贴&#xff1a; 2.解决方法&#xff1a; 粘贴完后点击 保…

vscode 如何连接 WSL (不能通过 IP 地址连接)

来源&#xff1a;https://www.cnblogs.com/wxdblog/p/17234342.html vscode (remote-ssh) 连接 WSL 不能使用 IP地址 连接&#xff0c;需要安装 WSL 扩展才行

yolov9目标检测报错AttributeError: ‘list‘ object has no attribute ‘device‘

最近微智启软件工作室在运行yolov9目标检测的detect.py测试代码时&#xff0c;报错&#xff1a; File “G:\down\yolov9-main\yolov9-main\detect.py”, line 102, in run pred non_max_suppression(pred, conf_thres, iou_thres, classes, agnostic_nms, max_detmax_det) Fil…

猫头虎分享已解决Bug || ValueError: Data cardinality is ambiguous ‍

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

使用Python制作进度条有多少种方法?看这一篇文章就够了!

前言 偶然间刷到一个视频&#xff0c;说到&#xff1a;当程序正在运算时&#xff0c;会有一个较长时间的空白期&#xff0c;谁也不知道程序运行的进度如何&#xff0c;不如给他加个进度条。 于是我今个就搜寻一下&#xff0c;Python版的进度条都可以怎么写&#xff01; 送书…

多线程和并发

线程 进程&#xff1a;在操作系统中运行的程序&#xff0c;一个进程可以包含多个线程 程序就是指令和数据的有序集合&#xff0c;静态概念 进程就是执行程序的一次执行过程&#xff0c;动态概念系统资源分配的单元 一个进程中包含多个线程&#xff0c;一个进程至少包含一个线…

大蟒蛇(Python)笔记(总结,摘要,概括)——第9章 类

目录 9.1 创建和使用类 9.1.1 创建Dog类 9.1.2 根据类创建实例 9.2 使用类和实例 9.2.1 Car类 9.2.2 给属性指定默认值 9.2.3 修改属性的值 9.3 继承 9.3.1 子类的_init_()方法 9.3.2 给子类定义属性和方法 9.3.3 重写父类中的方法 9.3.4 将实例用作属性 9.3.5 模拟实物 9.…

现货黄金中短线投资该怎么做?

要明确什么是现货黄金的中短线投资&#xff0c;中短线投资是指在短期内&#xff08;一般为几天至几周&#xff09;对现货黄金进行买卖操作&#xff0c;以期获得收益的投资方式。相较于长线投资&#xff0c;中短线投资的风险相对较大&#xff0c;但同时收益也更为可观。那么&…

二手货wordpress企业网站主题模板

二手车wordpress主题模板 简洁的二手车wordpress主题模板&#xff0c;适合做二手车业务的公司官方网站使用。 https://www.jianzhanpress.com/?p3473 wordpress二手物资回收主题 绿色wordpress二手物资回收主题&#xff0c;用于二手物资回收公司WP建站使用。 https://www.…

自动化行业文件数据\资料防泄密软件——天锐绿盾|@德人合科技

天锐绿盾是一款自动化行业文件数据防泄密软件&#xff0c;由德人合科技提供。该软件采用动态加解密技术&#xff0c;能够有效防止公司内部数据泄密&#xff0c;同时支持各种文件格式加密&#xff0c;如CAD、OFFICE、PDF、图纸等。 PC端&#xff1a;https://isite.baidu.com/sit…

Linux RocketMQ 安装及卸载(附控制台搭建)

一、前言 在安装 RocketMQ 前需要确保 JDK 已安装并正确配置环境变量 二、下载安装 1.下载 下载 | RocketMQ 2.安装 # 打开存放目录 cd /usr/local # 创建目录 mkdir rocketMQ # 进入目录 cd rocketMQ # 把下载的压缩包上传到 rocketMQ 目录中 # 解压 $ unzip rocketmq-all-…

高级RAG:揭秘PDF解析

原文地址&#xff1a;https://pub.towardsai.net/advanced-rag-02-unveiling-pdf-parsing-b84ae866344e 2024 年 2 月 3 日 附加内容&#xff1a;揭秘PDF解析&#xff1a;如何从科学pdf论文中提取公式 对于RAG&#xff0c;从文档中提取信息是一个不可避免的场景。确保从源头…

Python 在Word中创建表格并填入数据、图片

在Word中&#xff0c;表格是一个强大的工具&#xff0c;它可以帮助你更好地组织、呈现和分析信息。本文将介绍如何使用Python在Word中创建表格并填入数据、图片&#xff0c;以及设置表格样式等。 Python Word库&#xff1a; 要使用Python在Word中创建或操作表格&#xff0c;需…

OpenCV 4基础篇| OpenCV图像基本操作

目录 1. 图像读取1.1 cv2.imread() 不能读取中文路径和中文名称1.2 cv2.imdecode() 可以读取中文路径和中文名称 2. 图像的显示2.1 openCV显示图像 cv2.imshow()2.2 matplotlib显示图像 plt.imshow() 3. 图像的保存 cv2.imwrite()4. 图像的复制4.1 img.copy()4.2 np.copy()4.3 …

【C++STL】STL容器详解

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

个性化纹身设计,Midjourney带你探索独一无二的艺术之美

hello,大家好&#xff0c;欢迎回来。 在当今社会&#xff0c;纹身已经变得非常常见。 在寻求与众不同的个性化纹身时&#xff0c;你是否曾经为了找不到独特的设计而苦恼&#xff1f; 现在&#xff0c;Midjourney将为你打开一扇全新的艺术之门&#xff0c;引领你探索纹身设计…

高通 Android 12 Settings不显示版本号问题

1、最近项目遇到一个奇葩问题&#xff0c;编译系统版本号不见了&#xff1f; 2、一开始我想着可能是自己代码没有make clean结果编译几个小时&#xff0c;然后烧录固件发现还是未生效。 3、然后这时候我又去看git log review最近修改也没有太大发现&#xff08;待定&#xff…

docker安装flink

docker安装flink 5.1、拉取flink镜像&#xff0c;创建网络 docker pull flink docker network create flink-network5.2、创建 jobmanager # 创建 JobManager docker run \-itd \--namejobmanager \--publish 8081:8081 \--network flink-network \--env FLINK_PROPERTIES&…

ArcgisForJS如何在线编辑ArcGIS Server发布的几何要素?

文章目录 0.引言1.ArcGIS创建几何要素2.ArcGIS Server发布几何要素3.ArcgisForJS在线编辑ArcGIS Server发布的几何要素 0.引言 ArcGIS For JS 是一种用于创建和编辑地理信息的 JavaScript 库&#xff0c;它允许用户在线编辑 ArcGIS Server 发布的几何要素。本文从ArcGIS创建几…

07 MyBatis之高级映射 + 懒加载(延迟加载)+缓存

1. 高级映射 例如有两张表, 分别为班级表和学生表 自然, 一个班级对应多个学生 像这种数据 , 应该如果如何映射到Java的实体类上呢? 这就是高级映射解决的问题 以班级和学生为例子 , 因为一个班级对应多个学生 , 因此学生表中必定有一个班级编号字段cid 但我们在学生的实体…