HTML番外篇(四)-HTML5新增元素-CSS常见函数-理解浏览器前缀-BFC

一、HTML5新增元素

1.HTML5语义化元素

在HMTL5之前,我们的网站分布层级通常包括哪些部分呢?

  • header、nav、main、footer

◼ 但是这样做有一个弊端:

  • 我们往往过多的使用div, 通过id或class来区分元素;
  • 对于浏览器来说这些元素不够语义化
  • 对于搜索引擎来说, 不利于SEO的优化

◼ HTML5新增了语义化的元素:

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <div class="header"></div> --><header></header><!-- div.nav --><nav></nav><!-- section --><section><article>1</article><article>2</article><article>3</article></section><!-- aside --><aside></aside><!-- footer --><footer></footer></body>
</html>

二、video、audio元素

Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易.

  • 在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题;

  • 比如无法很好的支持HTML/CSS特性, 兼容性问题等等;

HTML5增加了对媒体类型的支持:

  • 音频:<audio>

  • 视频:<video>

Video和Audio使用方式有两个:

  • 一方面我们可以直接通过元素使用video和autio;

  • 另一方面我们可以通过JavaScript的API对其进行控制;

1.HTML5新增元素 - video

HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。

在这里插入图片描述

video常见的属性:

在这里插入图片描述

2.video支持的视频格式

每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式

在这里插入图片描述

3.video的兼容性写法

<video>元素中间的内容,是针对浏览器不支持此元素时候的降级处理。

  • 内容一:通过<source>元素指定更多视频格式的源;

  • 内容二:通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- <img src="" alt=""> --><!-- 基本使用 --><!-- <video src="./assets/fcrs.mp4" width="600" controls muted></video> --><!-- 兼容性写法 --><video src="./assets/fcrs.mp4" width="600" controls muted><source src="./asset/fcrs.ogg"><source src="./asset/fcrs.webm"><p>当前您的浏览不支持视频的播放, 请更换更好用的浏览器!</p></video></body>
</html>

4.HTML5新增元素 - audio

HTML <audio> 元素用于在文档中嵌入音频内容, 和video的用法非常类似

常见属性:

在这里插入图片描述

5.audio支持的音频格式

每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式

具体的支持的格式可以通过下面的链接查看:

  • https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

<audio>元素中间的内容,是针对浏览器不支持此元素时候的降级处理

在这里插入图片描述

三、input、全局data-*元素

1.input元素的扩展内容

◼ HTML5 对 input 元素也进行了扩展,在之前我们已经学习过的其中几个属性也是HTML5的特性:

  • placeholder:输入框的占位文字
  • multiple:多个值
  • autofocus:最多输入的内容

◼ 另外对于 input 的 type 值也有很多扩展:

  • date
  • time
  • number
  • tel
  • color
  • email
  • 等等…

◼ 查看MDN文档:

  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

2.新增全局属性 data-*

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:

  • data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到;
  • 通常用于HTML和JavaScript数据之间的传递

在小程序中, 就是通过data-来传递数据的, 所以该全局属性必须要掌握.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {}</style>
</head>
<body><div class="box" age="18" data-name="why" data-age="18" data-height="1.88"></div><h1 class="title"></h1><script>const boxEl = document.querySelector(".box")console.log(boxEl.dataset)</script></body>
</html>

四、white-space、text-overflow

1.CSS属性 - white-space

white-space用于设置空白处理和换行规则

  • normal:合并所有连续的空白,允许单词超屏时自动换行

  • nowrap:合并所有连续的空白,不允许单词超屏时自动换行

  • pre:阻止合并所有连续的空白,不允许单词超屏时自动换行

  • pre-wrap:阻止合并所有连续的空白,允许单词超屏时自动换行

  • pre-line:合并所有连续的空白(但保留换行),允许单词超屏时自动换行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;background: orange;/* white-space *//* nowrap不换行, 合并: 会合并 *//* pre: 不换行, 合并: 不合并 *//* pre-wrap: 换行, 合并: 不合并 *//* pre-line: 换行, 合并: 合并连续的空白, 但保留换行符 */white-space: pre-line;}</style>
</head>
<body><div class="box">我是box       kobe boxboxbox哈哈哈哈哈       呵呵呵呵和 my name is why</div></body>
</html>

2.CSS属性 - text-overflow

text-overflow 通常用来设置文字溢出时的行为

  • clip:溢出的内容直接裁剪掉(字符可能会显示不完整)
  • ellipsis:溢出那行的结尾处用省略号表示

text-overflow 生效的前提是 overflow 不为 visible

常见的是将white-space、text-overflow、overflow一起使用:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 150px;background-color: #f00;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}</style>
</head>
<body><div class="box">my name is why, nickname is box, age is 18</div></body>
</html>

在这里插入图片描述

五、CSS 常见函数扩展

在前面我们有使用过很多个CSS函数:

  • 比如rgb/rgba/translate/rotate/scale等;
  • CSS函数通常可以帮助我们更加灵活的来编写样式的值

下面我们再学习几个非常好用的CSS函数:

  • var: 使用CSS定义的变量;
  • calc: 计算CSS值, 通常用于计算元素的大小或位置;
  • blur: 毛玻璃(高斯模糊)效果;
  • gradient:颜色渐变函数;

1.CSS函数 - var

CSS中可以自定义属性

  • 属性名需要以两个减号(–)开始;
  • 属性值则可以是任何有效的CSS值;

在这里插入图片描述

我们可以通过var函数来使用:

在这里插入图片描述

规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)

  • 所以推荐将自定义属性定义在html中,也可以使用 :root 选择器;

2.CSS函数 -calc

calc() 函数允许在声明 CSS 属性值时执行一些计算。

  • 计算支持加减乘除的运算;
    • +-运算符的两边必须要有空白字符
  • 通常用来设置一些元素的尺寸或者位置

在这里插入图片描述

3.CSS函数 - blur

blur() 函数将高斯模糊应用于输出图片或者元素;

  • blur(radius)
  • radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;

通常会和两个属性一起使用:

  • filter: 将模糊或颜色偏移等图形效果应用于元素;
  • backdrop-filter: 为元素后面的区域添加模糊或者其他效果;

在这里插入图片描述

4.linear-gradient的使用

linear-gradient:创建一个表示两种或多种颜色线性渐变的图片;

在这里插入图片描述

radial-gradient:创建了一个图像,径向渐变,该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成;

在这里插入图片描述

六、理解浏览器前缀

有时候可能会看到有些CSS属性名前面带有:-o-、-xv-、-ms-、mso-、-moz-、-webkit-

官方文档专业术语叫做:vendor-specific extensions(供应商特定扩展)

为什么需要浏览器前缀了?

  • CSS属性刚开始并没有成为标准,浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀;

上述前缀叫做浏览器私有前缀,只有对应的浏览器才能解析使用

  • -o-、-xv-:Opera等
  • -ms-、mso-:IE等
  • -moz-:Firefox等
  • -webkit-:Safari、Chrome等

注意:不需要手动添加,后面学习了模块化打包工具会自动添加浏览器前缀

七、深入理解BFC

1.FC – Formatting Context

什么是FC呢?

  • FC的全称是Formatting Context,元素在标准流里面都是属于一个FC的;

在这里插入图片描述

块级元素的布局属于Block Formatting Context(BFC)

  • 也就是 block level box 都是在BFC中布局的;

行内级元素的布局属于Inline Formatting Context(IFC)

  • 而inline level box都是在IFC中布局的;

2.BFC – Block Formatting Context

block level box都是在BFC中布局的,那么这个BFC在哪里呢?拿出来给我看看。

在这里插入图片描述

MDN上有整理出在哪些具体的情况下会创建BFC:

  • 根元素(<html>
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值),表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、 row、tbody、thead、tfoot 的默认属性)或 inline-table)
  • overflow 计算值(Computed)不为 visible 的块元素
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
  • display 值为 flow-root 的元素

3.BFC有什么作用呢?

◼ 我们来看一下官方文档对BFC作用的描述:

在这里插入图片描述

简单概况如下:

  • 在BFC中,box会在垂直方向上一个挨着一个的排布;
  • 垂直方向的间距由margin属性决定;
  • 在同一个BFC中,相邻两个box之间的margin会折叠(collapse);
  • 在BFC中,每个元素的左边缘是紧挨着包含块的左边缘的;

那么这个东西有什么用呢?

  • 解决margin的折叠问题;
  • 解决浮动高度塌陷问题;

4.BFC的作用一:解决折叠问题(权威)

在同一个BFC中,相邻两个box之间的margin会折叠(collapse)

官方文档明确的有说

The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

那么如果我们让两个box是不同的BFC呢?那么就可以解决折叠问题。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* .box {overflow: auto;} */.container {overflow: auto;}.box1 {height: 200px;width: 400px;background-color: orange;margin-bottom: 30px;}.box2 {height: 150px;background-color: purple;margin-top: 50px;}</style>
</head>
<body><div class="container"><div class="box1"></div></div><div class="box2"></div><p><a href=""></a><span></span></p></body>
</html>

5.BFC的作用二:解决浮动高度塌陷(权威)

网上有很多说法,BFC可以解决浮动高度塌陷,可以实现清除浮动的效果。

  • 但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明
  • 他们也压根没有办法解释,为什么可以解决浮动高度的塌陷问题,但是不能解决绝对定位元素的高度塌陷问题呢?

事实上,BFC解决高度塌陷需要满足两个条件

  • 浮动元素的父元素触发BFC,形成独立的块级格式化上下文(Block Formatting Context);
  • 浮动元素的父元素的高度是auto的;

BFC的高度是auto的情况下,是如下方法计算高度的

  1. 如果只有 inline-level,是行高的顶部和底部的距离;
  2. 如果有 block-level,是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离
  3. 如果有绝对定位元素,将被忽略;
  4. 如果有浮动元素,那么会增加高度以包括这些浮动元素的下边缘
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {overflow: auto;background-color: #ccc;}span {display: inline-block;width: 50px;height: 50px;background-color: #aaa;}.box1 {float: left;width: 200px;height: 200px;background-color: #666;}.box2 {float: left;width: 100px;height: 100px;background-color: #999;}</style>
</head>
<body><div class="container"><span>我是span内容</span><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

在这里插入图片描述

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

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

相关文章

HCIP-OpenStack组件之neutron

neutron&#xff08;ovs、ovn&#xff09; OVS OVS(Open vSwitch)是虚拟交换机&#xff0c;遵循SDN(Software Defined Network&#xff0c;软件定义网络)架构来管理的。 OVS介绍参考&#xff1a;https://mp.weixin.qq.com/s?__bizMzAwMDQyOTcwOA&mid2247485088&idx1…

无人机航管应答机 ping200XR

产品概述 ping200XR是一个完整的系统&#xff0c;旨在满足航管应答器和自动相关监视广播(ADS-B)的要求&#xff0c;在管制空域操作无人航空系统(UAS)。该系统完全可配置为模式A&#xff0c;模式C&#xff0c;模式S转发器和扩展ADS-B发射机的任何组合。ping200XR包括一个精度超…

01 java 学习 数据类型、基础语法、封装、继承、多态、接口、泛型、异常等

目录 环境搭建和基础知识 什么是JRE: 什么是JDK: 基础数据类型 分支选择if else switch和c一毛一样 for和while循环还有数组基本和c一样 封装 函数调用、传参、命名规范、数组新命名规范 java输入Scanner scanner new Scanner(System.in); 类的创建和使用以及封装修饰符…

14-redis

一 Redis概述 1 为什么要用NoSQL 单机Mysql的美好年代 在90年代&#xff0c;一个网站的访问量一般都不大&#xff0c;用单个数据库完全可以 轻松应付。在那个时候&#xff0c;更多的都是静态网页&#xff0c;动态交互类型的网站不多。 遇到问题&#xff1a; 随着用户数的增长…

数据通信——TCP(三次握手及基础特性)

引言 TCP&#xff08;传输控制协议&#xff09;&#xff0c;不像之前的UDP那样&#xff0c;因为这个协议要将很多复杂的东西&#xff0c;所以这次的特性是简单的特性&#xff0c;后续会讲一些复杂难懂的知识&#xff0c;这次先说一些TCP明显的特性 面向连接 TCP提供了对连接的管…

TCP性能机制

延迟应答 为什么有延迟应答 发送方如果长时间没有收到ACK应答&#xff0c;则会触发超时重传机制&#xff0c;重新发送数据包。但如果接收数据的主机立刻返回ACK应答, 这时候返回的窗口可能比较小&#xff0c;发送方一次只能发少量数据&#xff0c;效率较低。 举个例子理解一…

wazuh环境配置和漏洞复现

1.wazuh配置 虚拟机 &#xff08;OVA&#xff09; - 替代安装 (wazuh.com)在官方网页安装ova文件 打开VMware选择打开虚拟机&#xff0c;把下载好的ova文件放入在设置网络改为NAT模式 账号:wazuh-user 密码:wazuh ip a 查看ip 启动小皮 远程连接 账号admin …

BMP图片读写实践:rgb转bgr

本实理论上支持24位图和32位图&#xff0c;实际上只测试了24位。原理很简单&#xff0c;就是RGB中的蓝色字节和红色字节交换。 测试代码1&#xff1a; #include <stdio.h> #include <unistd.h> #include <sys/stat.h> #include <stdlib.h> #include &l…

pdf.js构建时,报Cannot read property ‘createChildCompiler‘ of undefined #177的解决方法

在本地和CI工具进行构建时&#xff0c;报如下错误。 Cannot read property createChildCompiler of undefined #177解决方法&#xff1a; 找到vue.config.js&#xff0c;在 module.exports {parallel: false, //新增的一行chainWebpack(config) {....config.module.rule(&…

Docker搭建Redis集群

Docker搭建Redis集群 一 、搭建Redis集群的优点 先说说单个redis的缺点&#xff1a; 1、单个redis具有不稳定性。当redis服务死机了或者redis服务被kill掉了&#xff0c;就没有可用的redis服务了。 2、单个redis的读写能力是有限的。 再根据单个redis服务的缺点谈谈redis集群的…

计算机视觉 – Computer Vision | CV

计算机视觉为什么重要&#xff1f; 人的大脑皮层&#xff0c; 有差不多 70% 都是在处理视觉信息。 是人类获取信息最主要的渠道&#xff0c;没有之一。 在网络世界&#xff0c;照片和视频&#xff08;图像的集合&#xff09;也正在发生爆炸式的增长&#xff01; 下图是网络上…

LVS集群 (四十四)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、集群概述 1. 负载均衡技术类型 2. 负载均衡实现方式 二、LVS结构 三、LVS工作模式 四、LVS负载均衡算法 1. 静态负载均衡 2. 动态负载均衡 五、ipvsadm命令详…

【分析绘图】R语言实现一些常见的绘图

微生信-在线绘图网站 线性图 library(ggplot2)x <- rnorm(100, 14, 5) # rnorm(n, mean 0, sd 1) y <- x rnorm(100, 0, 1) ggplot(data NULL, aes(x x, y y)) # 开始绘图geom_point(color "darkred") # 添加点annotate("text",x 13,…

Mybatis小记

目录 Mybatis第一个程序 xml文件 测试类 错误排查 Mybatis第一个程序 1.搭建实验数据库 2.导入MyBatis相关jar包 3.编写MyBatis核心配置文件 4.编写MyBatis工具类 5.创建实体类、 6.编写Mapper接口类 7.编写Mapper.xml配置文件 8.编写测试类 对象传参只引用需要的属性就可…

springcloud3 GateWay章节-Nacos+gateway(跨域,filter过滤等5

一 常用工具类 1.1 结构 1.2 跨域 Configuration public class CorsConfig {Beanpublic CorsWebFilter corsFilter() {CorsConfiguration config new CorsConfiguration();config.addAllowedMethod("*");config.addAllowedOrigin("*");config.addAllowe…

lua的函数

1.一个示例实现列表的元素的求和 [root]# more funcAdd.lua function add(a)local sum 0for i 1,#a dosum sum a[i]endreturn sum enda {1,2,3,4,5,6}local sum add(a)print(sum)

Flask入门一 ——虚拟环境及Flask安装

Flask入门一 ——虚拟环境及Flask安装 在大多数标准中&#xff0c;Flask都算是小型框架&#xff0c;小到可以称为“微框架”&#xff0c;但是并不意味着他比其他框架功能少。Flask自开发伊始就被设计为可扩展的框架。Flask具有一个包含基本服务的强健核心&#xff0c;其他功能…

大模型理解之CLIP

前言 2021年2月份&#xff0c;CLIP模型被提出&#xff0c;想法很简单&#xff0c;性能高效&#xff0c;而且具备很好的泛化性。我在这里简单谈论下我对CLIP模型的理解&#xff0c;以及发现的一些问题。 我是在沐神的视频中了解的CLIP, 里面提到CLIP最大的贡献在于打破了固定类…

ELK之LogStash介绍及安装配置

一、logstash简介 集中、转换和存储数据 Logstash 是免费且开放的服务器端数据处理管道&#xff0c;能够从多个来源采集数据&#xff0c;转换数据&#xff0c;然后将数据发送到您最喜欢的“存储库”中。 Logstash 能够动态地采集、转换和传输数据&#xff0c;不受格式或复杂度的…

10.Oracle中decode函数

【函数格式】&#xff1a; decode ( expression, condition_01, result_01, condition_02, result_02, ......, condition_n, result_n, result_default) 【函数说明】&#xff1a; 若表达式expression值与condition_01值匹配&#xff0c;则返回result_01&#xff0c;…