【 CSS 】HTML5、CSS3 提高

人生犹如航海，不在于船在港口的安全，而在于船能否顺利航行，穿越重重风浪，抵达梦想的彼岸。

1. HTML5新特性

1.1 概述

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

1.2 语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签。

  • <header> 头部标签
  • <nav> 导航标签
  • <article> 内容标签
  • <section> 定义文档某个区域
  • <aside> 侧边栏标签
  • <footer> 尾部标签

1.3 多媒体标签

多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。

因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。

1.3.1 视频标签- video

基本使用

当前 <video> 元素支持三种视频格式： 尽量使用 mp4 格式

使用语法：

 <video src="media/mi.mp4"></video>
兼容写法

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

<video  controls="controls"  width="300"><source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" >您的浏览器暂不支持 <video> 标签播放视频
</ video >

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

video 常用属性
属性值描述
autoplayautoplay视频就绪自动播放（谷歌浏览器需要添加 muted 来解决自动播放问题）
controlscontrols向用户显示播放控件
widthpixels（像素）设置播放器宽度
heightpixels（像素）设置播放器高度
looploop播放完是否继续播放该视频，循环播放
preloadauto（预先加载视频）none（不应加载视频）规定是否预加载视频（如果有了 autoplay 就忽略该属性）
srcurl视频 url 地址
posterImgurl加载等待的画面图片
mutedmuted静音播放

属性很多，有一些属性需要大家重点掌握：

  • autoplay 自动播放
    • 注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性
  • width 宽度
  • height 高度
  • loop 循环播放
  • src 播放源
  • muted 静音播放

示例代码：

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

1.3.2 音频标签- audio

音频标签- audio

基本使用

当前 元素支持三种视频格式： 尽量使用 mp3格式

使用语法：

<audio src="media/music.mp3"></audio>
兼容写法

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

< audio controls="controls"  ><source src="happy.mp3" type="audio/mpeg" ><source src="happy.ogg" type="audio/ogg" >您的浏览器暂不支持 <audio> 标签。
</ audio>

上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

audio 常用属性
属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
looploop如果出现该属性，则每当音频结束时重新开始播放。
srcurl要播放的音频 URL。

示例代码：

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

小结

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
  • 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性。

1.4 新增的表单元素

在 H5 中，帮我们新增加了很多类型的表单，这样方便了程序员的开发

<!-- 我们验证的时候必须添加form表单域 -->
<form action=""><ul><li>邮箱: <input type="email" /></li><li>网址: <input type="url" /></li><li>日期: <input type="date" /></li><li>时间: <input type="time" /></li><li>数量: <input type="number" /></li><li>手机号码: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>颜色: <input type="color" /></li><!-- 当我们点击提交按钮就可以验证表单了 --><li> <input type="submit" value="提交"></li></ul>
</form>

1.4.1 常见输入类型

text password radio checkbox button file hidden submit reset image

1.4.2 新的输入类型

属性值说明
type="email"限制用户输入必须为 Email 类型
type="url"限制用户输入必须为URL 类型
type="date"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="number"限制用户输入必须为数字类型
type="tel"手机号码
type="search"搜索框
type="color"生成一个颜色选择表单

2. CSS3 新特性

2.1 CSS3 的现状

  • 新增的CSS3特性有兼容性问题，ie9+才支持
  • 移动端支持优于 PC 端
  • 不断改进中
  • 应用相对广泛
  • 现阶段主要学习：新增选择器和盒子模型以及其他特性

2.2 CSS3 新增选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

  • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器

2.2.1 属性选择器

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

选择符简介
E[att]选择具有 att 属性的 E 元素
E[att=“val”]选择具有 att 属性且属性值等于 val 的 E 元素
E[att^=“val”]匹配具有 att 属性且值以 val 开头的 E 元素
E[att$=“val”]匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*=“val”]匹配具有 att 属性且值中含有 val 的 E 元素

示例代码：

 /* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {color: red;
}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {color: blue;
}
  • 属性选择器，按照字面意思，都是根据标签中的属性来选择元素
  • 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
  • 属性选择器也可以选择出来自定义的属性
  • 注意： 类选择器、属性选择器、伪类选择器，权重为 10。

2.2.2 结构伪类选择器

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

选择符简介
E:first-child匹配父元素中的第一个子元素 E
E:last-child匹配父元素中最后一个 E 元素
E:nth-child(n)匹配父元素中的第 n 个子元素
E:first-of-type指定类型 E 的第一个
E:last-of-type指定类型 E 的最后一个
E:nth-of-type(n)指定类型 E 的第 n 个
E:nth-child(n)（★★★）

匹配到父元素的第n个元素

  • 匹配到父元素的第2个子元素

    ul li:nth-child(2){}

  • 匹配到父元素的序号为奇数的子元素

    ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ）

  • 匹配到父元素的序号为偶数的子元素

    ul li:nth-child(even){} even（4个字母 ）

  • 匹配到父元素的前3个子元素

    ul li:nth-child(-n+3){}

    选择器中的 n 是怎么变化的呢？

    因为 n是从 0 ，1，2，3… 一直递增

    所以 -n+3 就变成了

    • n=0 时 -0+3=3
    • n=1时 -1+3=2
    • n=2时 -2+3=1
    • n=3时 -3+3=0
    • …

一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码

| 公式 | 取值 |
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 … |
| n+5 | 从第5个开始（包含第5个）到最后 |
| -n+5 | 前5个（包含第5个） |

常用的结构伪类选择器是： nth-child(n) {...}

E:nth-child 与 E:nth-of-type 的区别

这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可

<style>ul li:nth-child(2){/* 字体变成红色 */color: red;}ul li:nth-of-type(2){/* 背景变成绿色 */background-color: green;}</style><ul><li>列表项一</li><p>乱来的p标签</p><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>

在这里插入图片描述

也就是说：

  • E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
小结
  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
  • nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
  • 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式
  • 如果是无序列表，我们肯定用 nth-child 更多
  • 类选择器、属性选择器、伪类选择器，权重为 10

2.2.3 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

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

注意：

  • before 和 after 创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法： element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
    伪元素选择器和标签选择器一样，权重为 1

3. 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

  • box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
  • box-sizing: border-box 盒子大小为 width

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

4. 其他特性

4.1 图标变模糊 – CSS3滤镜 filter

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

语法：

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

4.2 计算盒子宽度 – calc 函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

语法：

width: calc(100% - 80px);

括号里面可以使用 + - * / 来进行计算

5. CSS3 过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。

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

语法：

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
  • 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
  • 花费时间： 单位是 秒（必须写单位） 比如 0.5s
  • 运动曲线： 默认是 ease （可以省略）
  • 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
  • 后面两个属性可以省略
  • 记住过渡的使用口诀： 谁做过渡给谁加

在这里插入图片描述

6. 广义 H5 说法

在这里插入图片描述

  • 广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
  • 这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5 。
  • 虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
  • HTML5 MDN 介绍：
    https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

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

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

相关文章

Webpack5 基本使用 - 2

Webpack5 基本使用 - 2

常用 loader loader 是辅助打包工具。webpack 默认只能打包 js 文件&#xff0c;打包其它模块就需要配置 loader 来告诉 webpack 该怎么去打包其它文件。loader 可以将文件从不同的语言转换为 JavaScript。一类文件如果需要多个 loader 处理&#xff0c;loader 的执行顺序是从…
阅读更多...
变压器消谐电阻器测试仪

变压器消谐电阻器测试仪

产品概述 KDZD3000X消谐电阻器参数测试仪能实现自动检测消谐器在电流峰值为0.3mA、0.5mA 、1mA 、3mA 、5mA、10mA时相对应的电压峰值或有效值&#xff0c;并能自动绘制出消谐器伏安特性曲线图。 仪器依据的标准 Q/GDW415-2010《电磁式电压互感器用非线性电阻性消谐器技术规…
阅读更多...
畅聊未来：低代码打造在线聊天系统

畅聊未来：低代码打造在线聊天系统

前言 现代社交网络的普及使得在线聊天成为人们日常生活中不可或缺的一部分。然而&#xff0c;传统的开发方式往往复杂且耗时&#xff0c;因此寻找一种更快捷、灵活且可视化的方法来构建在线聊天系统变得尤为重要。本文将介绍如何利用低代码平台来快速搭建一个功能齐全的在线聊…
阅读更多...
存内计算引领新一代技术革新，开启算力新时代

存内计算引领新一代技术革新，开启算力新时代

文章目录 存内计算与传统计算的区别 存内计算与传统计算的区别 存内计算芯片的优势 存内计算在各个领域的应用 存内计算技术对未来发展的影响 CSDN存内计算开发者社区&#xff1a;引领新一代技术革新的最前沿 社区内容专业度 社区具备的资源 社区的开放性 社区招募令…
阅读更多...
JVM篇----第三篇

JVM篇----第三篇

系列文章目录 文章目录 系列文章目录前言一、解释 Java 堆空间及 GC？二、JVM 内存区域三、程序计数器(线程私有)前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。 一…
阅读更多...
Intel NUC x15电池独立显卡功耗异常解决办法

Intel NUC x15电池独立显卡功耗异常解决办法

买了Intel NUC x15&#xff0c;所有驱动都是安装的官方的驱动&#xff0c;但是电池续航一直尿崩。经过查找资料&#xff0c;发现是独立显卡功耗异常导致&#xff0c;也有用户给出了解决办法&#xff0c;参考NUC X15 显卡待机功耗异常解决方案 - 哔哩哔哩 (bilibili.com)。https…
阅读更多...
canvas绘制美国国旗（USA Flag）

canvas绘制美国国旗（USA Flag）

查看专栏目录 canvas实例应用100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…
阅读更多...
8 容器化微服务

8 容器化微服务

文章目录 DockerSpring Boot和Buildpacks在Docker中运行系统Docker化微服务Docker化前端Docker化配置导入器Docker Compose使用Docker扩展系统共享Docker镜像小结 前面的文章&#xff1a; 1、1 一个测试驱动的Spring Boot应用程序开发 2、2 使用React构造前端应用 3、3 试驱动的…
阅读更多...
通信入门系列——复变函数

通信入门系列——复变函数

本节目录 一、复变函数 1、复数 2、复数的四则运算 二、复指数函数 三、欧拉公式本节内容 一、复变函数 1、复数 复数单位i&#xff0c;也就是满足i^2-1&#xff0c;将zxiy表示为复数z&#xff0c;x和y为任意的实数&#xff0c;称为复数z的实部和虚部。由复数zxiy对应的点(x,y…
阅读更多...
虚拟歌姬学习：DiffSinger，让GitHub下载快的方法！

虚拟歌姬学习：DiffSinger，让GitHub下载快的方法！

《三分钟上手DiffSinger》系列 ——基础篇https://www.bilibili.com/video/BV1ug4y1S7Dk/?spm_id_from333.337.search-card.all.click&vd_source124076d7d88eee393a1d8bf6fc787efa 下载DiffSinger 建议用edge浏览器还有steam&#xff0c;有时只是慢&#xff0c;但是还是…
阅读更多...
# 安徽锐锋科技IDMS系统简介

# 安徽锐锋科技IDMS系统简介

IDMS 由安徽锐锋科技独立开发 该系统负责和海算以及UE\UNITY的无缝衔接并具备远程数据库访问、高速数据库的自动创建及数据存储、支持MQTT等多种物联网接口&#xff0c;支持多种算法。主要完成由于物料、人员、生产、故障、不良异常、订单异常带来的生产损失&#xff0c;通过海…
阅读更多...
macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例 一&#xff1a; 简介 Socket 是 网络传输的抽象概念。 一般我们常用的有Tcp Socket和 UDP Scoket&#xff0c; 和类Unix 系统&#xff08;包括Mac&#xff09;独有的 Unix Domain Socket&#xff08;UDS&#xff09;。 Tcp Socket 能够…
阅读更多...
web安全学习笔记【05】——反弹Shell、正反向连接

web安全学习笔记【05】——反弹Shell、正反向连接

思维导图 #知识点&#xff1a; 1、Web常规-系统&中间件&数据库&源码等 2、Web其他-前后端&软件&Docker&分配站等 3、Web拓展-CDN&WAF&OSS&反向&负载均衡等 ----------------------------------- 1、APP架构-封装&原生态&H5&am…
阅读更多...
解决TCP粘包问题

解决TCP粘包问题

粘包问题已经在上一篇博客中写到具体可以看----------- 以下是利用分包解决粘包问题的步骤&#xff1a; 消息长度前缀&#xff1a; 在每个数据包前加入消息长度信息。 定义协议格式&#xff1a; 明确定义通信协议的格式&#xff0c;包括消息头和消息体。 封包&#xff1a; 将…
阅读更多...
Java研学-代理模式

Java研学-代理模式

一 概述 1 分类 静态代理&#xff1a;在程序运行前就已经存在代理类的字节码文件&#xff0c;代理对象和真实对象的关系在运行前就确定了。&#xff08;代理类及对象要自行创建&#xff09;   动态代理&#xff1a;代理类是在程序运行期间由 JVM 通过反射等机制动态的生成的…
阅读更多...
电脑数据恢复软件哪个有效好用?十大电脑数据恢复软件排行

电脑数据恢复软件哪个有效好用?十大电脑数据恢复软件排行

在数字时代&#xff0c;数据就是一切。从珍贵的家庭照片和重要的工作文档到最喜欢的音乐和电影&#xff0c;我们的生活越来越多地存储在各种设备上。系统崩溃、意外删除或恶意病毒都可能使您的宝贵数据瞬间消失。这就是数据恢复工具的用武之地。 十大电脑数据恢复软件排行 这些…
阅读更多...
Integer.valueOf方法详解

Integer.valueOf方法详解

Integer.valueOf 是 Java 中 Integer 类的一个静态方法&#xff0c;它用于将给定的字符串或基本数据类型转换成一个 Integer 对象。 使用场景 从字符串转换&#xff1a;将字符串形式的数字转换为 Integer 对象。 Integer num Integer.valueOf("123");从基本数据类…
阅读更多...
论文阅读2---多线激光lidar内参标定原理

论文阅读2---多线激光lidar内参标定原理

前言&#xff1a;该论文介绍多线激光lidar的标定内参的原理&#xff0c;有兴趣的&#xff0c;可研读原论文。 1、标定参数 rotCorrection&#xff1a;旋转修正角&#xff0c;每束激光的方位角偏移&#xff08;与当前旋转角度的偏移&#xff0c;正值表示激光束逆时针旋转&…
阅读更多...
关于一个QT程序的简单破解思路(不需要分析信号和槽的方法,通用所有程序的破解思路)

关于一个QT程序的简单破解思路(不需要分析信号和槽的方法,通用所有程序的破解思路)

几年前,公司买了台国产贴片机,里面的主程序是QT编写,运行在WINDOW XP系统上。主程序打开的界面,如图: 我来简单介绍下程序界面,各位读者不需要搞明白功能,只要知道大体的流程即可。 分析主界面: 一、左边的列表&#xff1a; 贴片生产文件,里面包括了贴片时元器件的坐标、飞达…
阅读更多...
C#winform上位机开发学习笔记11-串口助手接收数据用波形显示功能添加

C#winform上位机开发学习笔记11-串口助手接收数据用波形显示功能添加

1.功能描述 接收串口数据&#xff0c;并将收到的十六进制数据用坐标系的方式将数据波形展示出来 2.代码部分 步骤1&#xff1a;定义链表&#xff0c;用于数据保存 //数据结构-线性链表private List<byte> DataList new List<byte>(); 步骤2&#xff1a;定义波…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023