一、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
- 等等…
◼ 查看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的情况下,是如下方法计算高度的
- 如果只有 inline-level,是行高的顶部和底部的距离;
- 如果有 block-level,是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离
- 如果有绝对定位元素,将被忽略;
- 如果有浮动元素,那么会增加高度以包括这些浮动元素的下边缘
<!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>