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://xiahunao.cn/news/2806077.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Ansible 更换aliyun 镜像 并下载tree

目录 查看系统版本找到对应 的版本对当前镜像进行备份下载aliyuan更换成功安装扩展源更换源之后 的三个命令 这里安装一个aliyun 的镜像 本案例 仅供实验参考 生产环境中请谨慎使用 查看系统版本 先查看linux 的系统 版本 ansible slave -m shell -a uname -a找到对应 的版本…

【Vue渗透】Vue Devtools 浏览器插件

下载地址 Vue Devtools 浏览器插件 Vue站点渗透思路 【Vue渗透】Vue站点渗透思路 简介 Vue Devtools 是 Vue 官方发布的调试浏览器插件&#xff0c;可以安装在 Chrome 和 Firefox 等浏览器上&#xff0c;直接内嵌在开发者工具中&#xff0c;使用体验流畅。Vue Devtools 由…

私域运营-需要认清的事实

一、私域不能单纯依靠微信渠道 误区&#xff1a;很多企业仍停留在如何让用户在微信去分享裂变&#xff0c;然后带动新用户的阶段。 私域的核心在于“开源节流”&#xff0c;就是如何通过更多渠道获取更多客户&#xff0c;并且避免客户的批量流失。 私域讲究的是如何从公域的“…

ETL:数据转换与集成的关键过程

ETL&#xff1a;数据转换与集成的关键过程 在现代数据驱动的世界中&#xff0c;有效地管理和处理数据对于企业的成功至关重要。ETL&#xff08;提取、转换、加载&#xff09;是一种关键的数据处理过程&#xff0c;有助于将数据从源系统提取、清洗、转换并加载到目标系统中&…

电商数据API接口 | 节省你的电商数据采集成本

1、将数据采集的整体成本降低55%。在电商API接口负责了整个数据采集流程后&#xff0c;这家电商公司成功节约了维护和开发上的成本。 2、电商爬虫API可以从极复杂的来源中采集数据&#xff0c;确保完整交付。在电商爬虫API的帮助下&#xff0c;该公司现在可以获取完成业务目标所…

MySQL数据库调优之关联查询、排序查询、分页查询、Group by优化

关联查询优化 1.准备工作 CREATE TABLE IF NOT EXISTS type(id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,card INT(10) UNSIGNED NOT NULL,PRIMARY KEY(id));CREATE TABLE IF NOT EXISTS book( bookid INT(10) UNSIGNED NOT NULL AUTO_INCREMENT, card INT(10) UNSIGNED N…

JavaSE-04笔记【面向对象01】

文章目录 1. final 关键字1.1 采用final修饰的类不能被继承1.2 采用 final 修饰的方法不能被覆盖1.3 采用 final 修饰的变量(基本类型)不能被修改1.4 采用final 修饰的变量必须显示初始化1.5 如果修饰的引用&#xff0c;那么这个引用只能指向一个对象&#xff0c;也就是说这个引…

利用LaTex批量将eps转pdf、png转eps、eps转png、eps转svg、pdf转eps

1、eps转pdf 直接使用epstopdf命令&#xff08;texlive、mitex自带&#xff09;。 在cmd中进入到eps矢量图片的目录&#xff0c;使用下面的命令&#xff1a; for %f in (*.eps) do epstopdf "%f" 下面是plt保存eps代码&#xff1a; import matplotlib.pyplot as…

STP基本计算过程——选举非根交换机的根端口(二)

点赞关注&#xff0c;持续更新STP专题 选举非根交换机的根端口 1.STP为每个非根交换机选举根端口&#xff08;Root Port&#xff09;。 2. 交换机的每个端口都有一个端口开销&#xff08;Port Cost&#xff09;的参数&#xff0c;此参数表示数据从该端口发送时的开销值&#x…

2024年度中国5G随身WiFi品牌排行榜

【中国品牌网中国3C质量评测中心权威榜单联合发布】 第一名&#xff1a;格行 优势&#xff1a;作为随身WiFi行业的佼佼者&#xff0c;格行凭借其15年的物联网行业经验&#xff0c;在技术研发、产品创新及客户服务上均享有盛誉。其5G随身WiFi产品网络稳定&#xff0c;客户满意度…

windows 中, bash: conda: command not found(已解决)

git bash 中运行conda命令&#xff0c;出现这种错误&#xff0c;原因是你没有在git bash中 配置conda&#xff0c;导致git bash无法找到conda 那就配置一下&#xff0c;找到你的conda的安装位置下的bash.sh文件&#xff0c;一般在安装位置&#xff08;我的安装在C盘的自定义路径…

一个div最简方法画太极图

一个div最简方法画太极图 直接上代码&#xff0c;一目了然 html <div class"太极图"/>css .太极图 {position: relative;width: 400px;height: 400px;background: linear-gradient(to right,white 50%,black 50%);border-radius: 50%;box-shadow:0 0 12px …

第10讲用户登录SpringSecurity查库实现

用户登录SpringSecurity查库实现 security包下新建MyUserDetailServiceImpl Service public class MyUserDetailServiceImpl implements UserDetailsService {AutowiredSysUserService sysUserService;Overridepublic UserDetails loadUserByUsername(String username) throw…

DBAPI如何使用数组类型参数

DBAPI如何使用数组类型参数 需求 根据多个id去查询学生信息 API创建 在基本信息标签&#xff0c;创建参数ids &#xff0c;参数类型选择 Array<bigint> 在执行器标签&#xff0c;填写sql&#xff0c;使用in查询 select * from student where id in <foreach ope…

仿12306校招项目-前后端运行

目录 1.git 克隆 2.设置JDK版本 3.sql脚本导入数据 4.启动中间件 5.运行后端 6.运行前端 1.git 克隆 打开 IntelliJ IDEA&#xff0c;菜单栏顶部找到 Git -> Clone 选项。找到 Clone 这个按钮输入 gitgitee.com:nageoffer/12306.git或者https://gitee.com/nageoffer/…

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

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

数据结构-二分搜索树(Binary Search Tree)

一,简单了解二分搜索树 树结构: 问题:为什么要创造这种数据结构 1,树结构本身是一种天然的组织结构,就好像我们的文件夹一样,一层一层的. 2,树结构可以更高效的处理问题 二,二分搜索树的基础 1、二叉树 2,二叉树的重要特性 满二叉树 总结: 1. 叶子结点出现在二叉树的最…

上班族如何选择待办事项时间管理APP

上班族如何选择待办事项时间管理APP&#xff1f;对于我们这些上班族来说&#xff0c;待办事项时间管理是一种非常重要的效率提升和成长的方式。作为一名追求进步的上班族&#xff0c;我总是想要在繁忙的工作之余&#xff0c;找到高效方法来提升工作效率。那么&#xff0c;上班族…

故障诊断 | 一文解决,PSO-BP粒子群算法优化BP神经网络模型的故障诊断(Matlab)

文章目录 效果一览文章概述模型描述源码设计参考资料效果一览 文章概述 故障诊断 | 一文解决,PSO-BP粒子群算法优化BP神经网络模型的故障诊断(Matlab) 粒子群优化算法(Particle Swarm Optimization, PSO)是一种群体智能优化算法,用于求解优化问题。BP神经网络是一种用于模…

【JavaEE】_smart tomcat常见问题

目录 1. 插件安装故障问题 2. 端口占用问题 3. 乱码问题 1. 插件安装故障问题 如果由于网络问题在IDEA中无法直接安装插件&#xff0c;可以去IDEA官网进行下载&#xff1a; 进入官网后点击Install安装&#xff0c;得到一个jar包&#xff1a; 把jar包拖拽到idea上即可自动安装…