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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java JDBC:林浩然与杨凌芸的编程奇缘

Java JDBC&#xff1a;林浩然与杨凌芸的编程奇缘 Java JDBC: The Programming Odyssey of Lin Haoran and Yang Lingyun 在那个充满二进制和算法符号的世界里&#xff0c;我们的男主角林浩然&#xff0c;一个热爱Java的码农新秀&#xff0c;正准备踏上他的JDBC探险之旅。他那双…

【vscode】按F5无法执行调试python或go

原因&#xff1a; 找不到解析器&#xff0c;需要安装插件&#xff08;python&#xff0c;或go 等&#xff09; 安装插件后&#xff0c;还是无法执行&#xff0c;按 ctrlshiftp,看不到解析器 正常应该是&#xff1a; 解决方法&#xff1a; 1、判断python是否安装成功 pyth…

Selenium(简单入门)

请直接看原文:selenium 使用教程详解-java版本 - 小葛师兄 - 博客园 (cnblogs.com) -------------------------------------------------------------------------------------------------------------------------------- 第一章 Selenium 概述# 1.1.Selenium 发展史# ​ …

“从根到叶:深入理解排序数据结构“

一.排序的概念及引用 1.1排序的概念 排序是指将一组数据按照一定的规则重新排列的过程。排序的目的是为了使数据具有有序性&#xff0c;便于查找、插入、删除等操作&#xff0c;提高数据的组织和管理效率。 稳定性是指如果序列中存在相等元素&#xff0c;在排序完成后&#…

五、矩阵的运算

1、矩阵的加减&#xff1a; 前提&#xff1a;两个矩阵必须是同形矩阵。 矩阵加减具有交换律&#xff0c;矩阵矩阵相乘没有交换律。 计算结果&#xff1a;元素级运算。 2、矩阵的数乘&#xff1a; 计算结果&#xff1a;元素级运算。这里要区别与行列式的数乘。 3、矩阵与向量的乘…

fiddler抓取,Android真机测试

1.配置Fiddler抓取并解密HTTPS包 Fiddler默认是不抓取HTTPS包的&#xff0c;需要进行相应的配置。 打开Fiddler&#xff0c;选择“Tools->Fiddler Options...” 2.在弹出的对话框中选择“HTTPS”选项卡&#xff1a; 3.勾选“Capture HTTPS CONNECTs”&#xff0c;接着勾选…

多人协作记账账本小程序开源版开发

多人协作记账账本小程序开源版开发 支持多人协作的记账本小程序&#xff0c;可用于家庭&#xff0c;团队&#xff0c;组织以及个人的日常收支情况记录&#xff0c;支持周月年度统计 便捷记账 便捷的记账方式&#xff0c;支持多种记账类型&#xff0c;快捷切换账本等 多账本 支…

springboot751社区维修平台

springboot751社区维修平台 获取源码——》公主号&#xff1a;计算机专业毕设大全

Element使用Message消息提示

Element使用Message消息提示 一、导入Element1、npm 安装2、引入 Element3、实现代码4、效果 一、导入Element 1、npm 安装 推荐使用 npm 的方式安装 npm i element-ui -S2、引入 Element 在 main.js 中写入以下内容 import ElementUI from element-ui; import element-ui…

内核解读之内存管理(6)address_space建立文件索引结点inode和页page、虚拟地址空间vma的映射

内存管理和文件系统总会交织在一起&#xff0c;所以我们今天聊的内容和文件系统有关。 上一节的struct page结构体中&#xff0c;我们看到了一个成员struct address_space*。很明显是用于建立page和address_space的关联。 它是代表某个地址空间吗&#xff1f;实际上不是的&am…

新版Java面试专题视频教程——虚拟机篇②

新版Java面试专题视频教程——虚拟机篇② 3 垃圾收回3.1 简述Java垃圾回收机制&#xff1f;&#xff08;GC是什么&#xff1f;为什么要GC&#xff09;3.2 对象什么时候可以被垃圾器回收3.2.1 引用计数法3.2.2 可达性分析算法 3.3 JVM 垃圾回收算法有哪些&#xff1f;——4种3.3…

4 buuctf解题

[CISCN 2019 初赛]Love Math1 打开题目 题目源码 <?php error_reporting(0); //听说你很喜欢数学&#xff0c;不知道你是否爱它胜过爱flag if(!isset($_GET[c])){show_source(__FILE__); }else{//例子 c20-1$content $_GET[c];if (strlen($content) > 80) {die("…

如何查看网络,管理网络,以及虚拟网络

一 网络 1 怎么查看网卡&#xff1f;看是千兆还是万兆&#xff1f;是全双工还是半双工&#xff0c;丢包率怎么样&#xff1f;品牌厂家是什么&#xff1f; 用lspci 可以查看网卡的信息 千兆&#xff1a;Gigabit 万兆&#xff1a;10-Gigabit 百兆&#xff1a;100MEther net if…

【Java程序设计】【C00288】基于Springboot的篮球竞赛预约平台(有论文)

基于Springboot的篮球竞赛预约平台&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的篮球竞赛预约平台 本系统分为前台功能模块、管理员功能模块以及用户功能模块。 前台功能模块&#xff1a;用户进入到平台首页&a…

Spring篇----第四篇

系列文章目录 文章目录 系列文章目录前言一、区分构造函数注入和 setter 注入二、spring 中有多少种 IOC 容器?三、区分 BeanFactory 和 ApplicationContext。四、列举 IoC 的一些好处。前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大…

最新授权系统源码,代理分销,盗版检测,盗版密码查看

级授权源码 – 高价值企业授权系统&#xff0c;内含授权系统、代理分销、工单系统和盗版检测功能 功能简介&#xff1a; 1、网站管理&#xff1a;包括基本管理、系统设置、公告设置、接口设置、价格设置和下载设置等。 2、内容管理&#xff1a;包括文章管理和广告轮图管理&am…

IT廉连看——C语言——循环语句

IT廉连看——C语言——循环语句 循环语句分为三种&#xff1a; while for do while 一、while循环 我们已经掌握了&#xff0c;if语句&#xff1a; if(条件)语句; 当条件满足的情况下&#xff0c;if语句后的语句执行&#xff0c;否则不执行。 但是这个语句只会执行一次…

工作睡觉监测识别摄像机

工作睡觉监测识别摄像机是一种用于监测员工是否在工作时间内偷懒、打瞌睡或者进行其他不合规行为的智能监控设备。这种摄像机利用先进的人工智能和图像识别技术&#xff0c;能够实时监测员工的工作状态&#xff0c;发现异常行为并采取相应的措施。 工作睡觉监测识别摄像机的工作…

智能风控体系之PagePank算法应用

PageRank算法&#xff0c;即网页排名算法&#xff0c;由Google创始人Larry Page在斯坦福上学的时候提出来的。该算法用于对网页进行排名&#xff0c;排名高的网页表示该网页被访问的概率高。PageRank算法计算每一个网页的PageRank值&#xff0c;然后根据这个值的大小对网页的重…