HTML5 新增元素

HTML5语义化元素

在HTML5之前,我们的网站分布层级通常包括那些部分呢
- headernavmainfooter

但是它们都是通过 div 来实现的,有一个弊端
- 过多的使用 div,通过 id 或者 class 来区分元素
- 对于浏览器来说这些元素不够语义化
- 对于搜索引擎来说,不利于 SEO 的优化

HTML5新增了语义化的元素
- <header>:头部元素
- <nav>:导航元素
- <section>:定义文档某个区域的元素
- <article>:内容元素
- <aside>:侧边栏元素
- <footer>:尾部元素

HTML5其他新增元素

Web端事实上一直希望可以更好的嵌入音频和视频, 特别是近几年用户带宽的不断提高,浏览音频和视频变得非常容易
- 在 HTML5 之前是通过 flash 或者其他插件实现的,但是会有很多问题
- 比如无法很好的支持 HTML/CSS 特性,兼容性问题等待

HTML5 增加了对媒体类型的支持
- 音频:<audio>
- 视频:<video>

Video 和 Audio 使用方式用两种
- 一方面我们可以直接通过元素使用 videoaudio
- 另一方面我们可以通 JavaScriptAPI 进行控制

HTML5 新增元素 - video

HTML <video> 元素,用于在 HTML 或者 XHTML 文档中嵌入媒体播放器,用于支持文档内的视频备份
- <video src="./assets/fcrs.mp4"></video>

video 常见的属性

<!-- 基本使用 -->  
<!-- <video src="./assets/fcrs.mp4" width="600px" controls autoplay muted></video> -->  
<!-- 兼容性写法 -->  
<video src="./assets/fcrs.mp4" width="600px">  
 <source src="./assets/fcrs.ogg">  
 <source src="./assets/fcrs.webm">  
  
 <p>当前浏览器不支持视频的播放,请更换新版本的 Chrome 浏览器</p>  
</video>

video 支持的视频格式

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

video 的兼容性写法

<video> 元素中间的内容,是针对浏览器不支持此元素时候的降级处理
- 内容1:通过 <source> 元素指定更多视频格式的源
- 内容2:通过 p/div 等元素指定在浏览器不支持 video 元素的情况,显示的内容

HTML5 新增元素 - audio

HTML <audio> 元素用于在文档中嵌入音频内容,和 video 的用法十分相似
- <audio src="./assets/yhbk.mp3" controls></audio>

常见属性

audio 支持的音频格式

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

具体的支持的格式可以通过下面的链接查看
- https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

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

<!-- <audio src="./assets/yhbk.mp3" controls></audio> -->  
<!-- 兼容性写法 -->  
<audio src="./assets/yhbk.mp3" controls autoplay muted>  
 <source src="./assets/yhbk.ogg">  
  
 <p>当前浏览器不支持HTML5的audio播放,请更换新版本的 Chrome 浏览器</p>  
</audio>

input、全局属性 data-*

input元素的扩展内容

HTML5input 元素也进行了扩展如下几个属性也是 HTML5 的特性
- placehodler:输入框的占位文字
- multiple:在使用select + option 多选框的时候给 select 添加 multiple 可以多选
- autofocus:自动聚焦

另外对于 inputtype 值也有很多扩展
- date
- time
- number
- tel
- color
- email
- range
- 等等…

全局属性 data-*

在 HTML5 中,新增的一种全局属性格式 data-*,用于自定义数据属性
- data 设置的属性可以在 javascriptDOM 操作中通过 dataset 轻松获取到
- 通常用于 HTMLjavascript 数据之间的传递
- 在小程序中,就是通过 data- 来传递数据的,所以这个属性非常重要

<!doctype html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <meta name="viewport"  
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
 <meta http-equiv="X-UA-Compatible" content="ie=edge">  
 <title>Document</title>  
</head>  
<body>  
<div class="box" data-name="rin" data-age="18" data-height="1.88"></div>  
<div class="title"></div>  
  
<script>  
const boxE1 = document.querySelector('.box')  
console.log(boxE1.dataset)  
</script>  
</body>  
</html>

white-space/text-overflow

CSS属性 white-space

white-space 用于设置空白处理和换行规则
- normal:合并所有连续的空白,允许单词超屏时自动换行
- nowrap::合并所有连续的空白,不允许单词超屏时自动换行
- pre:阻止合并所有连续的空白,不允许单词超屏时自动换行
- pre-wrap:阻止合并所有连续的空白,允许单词超屏时自动换行
- pre-line:合并所有连续的空白(但保留换行),允许单词超屏时自动换行

CSS属性 text-overflow

text-overflow 通常用来设置文本溢出时的行为
- clip:溢出的内容直接剪切掉(字符可能显示不完整)
- ellipsis:溢出那行的结尾用省略号表示

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

<!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: orange;

  

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis;

    }

  </style>

</head>

  

<body>

  <div class="box">

    my name is rin, nickname is rinsan,age is 18

  </div>

</body>

  

</html>

CSS 常见的函数扩展

CSS中的函数

可能经常使用的 CSS 函数:
- 比如 rgb/rgba/translate/rotate/scale
- CSS 函数通常可以帮助我们更加灵活的来编写样式的值

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

CSS 函数 - var

CSS 中可以自定义属性
- 属性名需要以两个减号(–)开始
- 属性值则可以是任何有效的 css

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

规则集定义的选择器,是自定义属性的可见作用域(只在选择器内部有效)
- 所以推荐将自定义属性定义在 html 中,也可以使用 :root 选择器

CSS函数 - calc(calculate)

calc() 函数允许在声明 CSS 属性值时执行一些计算
- 计算支持加减乘除的运算
- +- 运算符两边必须有空白字符
- 通常用来设置一些元素的尺寸或者位置

<!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: 300px;
      height: 100px;
      background-color: orange;
    }
    .item {
      display: inline-block;
      height: 50px;
    }

    .item1 {
      /* width的百分比相对于包含块(父元素) */
      width: calc(100% - 100px);
      background-color: #f00;

    }

    .item2 {
      width: 100px;
      background-color: #0f0;
    }
  </style>

</head>

<body>
  <div class="box">
    <div class="item item1"></div><div class="item item2"></div>
  </div>
</body>
</html>

CSS函数 - blur

blur() 函数将高斯模糊应用于输出图片或者元素
- blur(radius)
- radius,模糊的半径,用于定义高斯函数的偏差值,偏差值越大,图片越模糊

通常会和两个属性一起使用
- filter:将模糊或者颜色偏移等图形效果应用于元素
- backdrop-filter:为元素后面的区域添加模糊或者颜色偏移,因为它适合用于元素背后的所有元素,为了看到效果,必须使元素或者其背景部分透明

<!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>

    /* img {

      filter: blur(3px);

    } */

  

    .box{

      display: inline-block;

      position: relative;

      /* filter: blur(3px); */

    }

  

    .cover{

      position: absolute;

      left: 0;

      right: 0;

      top: 0;

      bottom: 0;

      /* backdrop-filter 和 background-color需要结合使用 */

      background-color: rgba(255,255,255,0.2);

      backdrop-filter: blur(10px);

    }

  </style>

</head>

<body>

  <!-- filter -->

  <!-- <img src="./assets/kobe01.jpg" alt=""> -->

  <div class="box">

    <img src="./assets/kobe01.jpg" alt="">

    <div class="cover"></div>

  </div>

</body>

</html>

CSS函数 - gradient

<gradient> 是一种 <image> CSS 数据类型的子类型,用于表现两种或者多种颜色的过渡转变
- CSS 的 <image> 数据类型描述的是 2D 图形
- 比如 background-imagelist-style-imageborder-imagecontent
- <image>常见的方式是通过 URL 来引入一个图片资源
- 它也可以通过 CSS的 <gradient> 函数来设置颜色的渐变

<gradient> 常见的函数实现有下面几种
- linear-gradient():创建一个表示两种或者多种颜色线性渐变的图片
- radial-gradient():创建一个图像,该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成的
- repeating-gradient():创建一个由重复线性渐变组成的 <image>
- repeating-linear-gradient():创建一个重复的原点触发渐变组成的 <image>
- 等等…

linear-gradient() 的使用

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

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

<!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;

      height: 100px;

  

      /* background-image: linear-gradient(red,blue); */

      /* 改变方向 */

      /* background-image: linear-gradient(to right,red,blue); */

      /* background-image: linear-gradient(to right top,red,blue); */

      /* background-image: linear-gradient(-45deg,red,blue); */

      background-image: linear-gradient(to right,red,blue 40px,orange 60%,purple 100%);

    }

  </style>

</head>

<body>

  <div class="box"></div>

</body>

</html>

理解浏览器前缀

浏览器前缀的前世今生

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

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

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

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

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

注意:不需要手动添加,使用模块化打包工具 (webpackvite) 会自动添加浏览器前缀

深入理解BFC

FC - Formatting Context

什么是 FC

FC 的全称是 Formatting context
- 官方的解释:Boxes in the normal flow belong to a formatting context which may be block or inline but not both simultaneously. Block-level boxes participate in a block formatting context. inline-level boxes participate in an inline formatting context

块级元素的布局属于 Block Formatting context(BFC)
- 也就是 block level box 都在 BFC 中布局的

行内级元素的布局属于 inline formatting context(IFC)
- 而 inline level box 都是在 IFC 中布局的

BFC - Block Formatting Context

block level box 都是在 BFC 中布局的,那么这个 BFC 在哪里呢?
- 9.4.1 Block formatting contexts
- Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

MDN 上有整理出在那些具体的情况下会创建 BFC
- 根元素(<html>
- 浮动元素(float 值不为 none
- 绝对定位元素(position 值为 absolute 或 fixed
- 行内块元素(display 值为 inline-block
- 表格单元格(display 值为 table-cell,HTML 表格单元格默认值)
- 表格标题(display 值为 table-caption,HTML 表格标题默认值)
- 匿名表格单元格元素(display 值为 tabletable-row、 table-row-grouptable-header-grouptable-footer-group(分别是 HTML table、tr、tbody、thead、tfoot 的默认值)或 inline-table
- overflow 值不为 visibleclip 的块元素
- display 值为 flow-root 的元素
- contain 值为 layoutcontent 或 paint 的元素
- 弹性元素(display 值为 flex 或 inline-flex 元素的直接子元素),如果它们本身既不是 flexgrid 也不是 table 容器
- 网格元素(display 值为 grid 或 inline-grid 元素的直接子元素),如果它们本身既不是 flexgrid 也不是 table 容器
- 多列容器(column-count 或 column-width (en-US) 值不为 auto,包括column-count 为 1
- column-span 值为 all 的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中

BFC 有什么作用呢

我们来看看官方文档对 BFC 作用的描述
- In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. 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.
- In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

简单概况以下 BFC 的作用
- 在 BFC 中,box 会在垂直方向上一个挨着一个的排布
- 垂直方向的间距由 margin 属性决定
- 在同一个 BFC 中,相邻的两个 box 之间的 margin 会折叠(collapse
- 在 BFC 中,每个元素的左边缘是紧挨着包含块的左边缘的。

那么这个东西有什么用
- 解决 margin 的折叠问题
- 解决浮动高度塌陷的问题

BFC 的作用一:解决折叠问题

官方文档中明确的有说:
- 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>
    .container {
      /* overflow: auto; 在这里设置 BFC 可以解决折叠问题*/
    }
    .box1 {
      width: 400px;
      height: 200px;
      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>
</body>
</html>

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 http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      position: relative;
      background-color: orange;
      overflow: auto;  
    }
    .item{
      /* position: absolute; 可以解决float元素,但是解决不了绝对定位元素塌陷 */
      float: left;
      width: 400px;
      height: 200px;
      box-sizing: border-box;
      border: 1px solid #000;
      
      background-color: #f00;

    }
    /* .clear_fix::after{
      content: "";
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
    } */
  </style>
</head>

<body>
  <div class="container clear_fix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口

你可以根据设备的类型(比如屏幕设备、打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面

媒体查询的使用方式主要有三种
1. 通过 @media 和 @import 使用不同的 CSS 规则(常用)
2. 使用 media 属性为 <style>/<link>/<source> 和其他 HTML 元素指定特定的媒体类型
3. 使用 Window.mathcMedia()MediaQueryList.addListener() 方法来测试和监控媒体状态

比较常见的还是通过 @media 来使用不同的 CSS 规则

方法一
<style>
    /* @import 是可以和媒体查询结合使用 */
    @import url(./css/body-bgc.css) (max-width: 800px);
</style>

方法二
<link rel="stylesheet" href="./css/body-bgc.css" media="(max-width: 800px)">

方法三
  <style>
    @media (max-width: 800px) {
      body{
        background-color: orange;
      }
    }
  </style>

媒体查询-媒体类型(Media types)

在使用媒体查询时,你必须指定要使用的媒体类型
- 媒体类型是可选的,并且会(隐式的)应用 all 类型

常见的媒体类型值如下
- all:适用于所有的设备
- print:适用于在打印预览模式下在屏幕上查看的分页材料和文档
- screen:主要用于屏幕
- speech:主要用于语言合成器

被废弃的媒体类型
- CSS2.1 和 Media Queries 3 定义了一些额外的媒体类型(tty,tv,projection,handheld,braille,embossed,以及 aural)
- 但是它们在 Media Queries 4 中已经被废弃,并且不应该使用
- aural 类型被替换为具有相似效果的 speech

媒体查询-媒体特性(Media features)

媒体特性(Media features)描述了浏览器、输出设备,或者预览环境的具体特征
- 通常会将媒体特性描述为一个表达式
- 每条媒体特性表达式都必须用括号括起来

媒体查询-逻辑操作符(logical operators)

媒体查询的表达式最终会获得一个 Boolean 值,也就是真(true)或者假(false)
- 如果结果为真(true),那么就会生效
- 如果结果为假(false),那么就不会生效

如果有多个条件,我们可以通过逻辑操作符联合复杂的媒体查询

  • andand 操作符用于将多个媒体查询规则组合成单条媒体查询
  • notnot 运算符用于否定媒体查询,如果不满足这个条件返回 true,否则返回 false
  • onlyonly 仅在整个查询匹配的时才用于应用样式
  • ,(逗号):逗号用于将多个媒体查询合并为一个规则

常见的移动端设备

这里以 iPhone 为例

<!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>
    /* @media (min-width: 320px) and (max-width: 374px){
      .box{
        font-size: 15px;
      }
    }
    @media (min-width: 375px) and (max-width: 414px){
      .box{
        font-size: 18px;
      }
    }
    
    @media (min-width: 414px) and (max-width: 480){
      .box{
        font-size: 21px;
      }
    }

    @media (min-width: 480px) {
      .box{
        font-size: 24px;
      }
    } */

  

    @media (min-width: 320px){
      .box{
        font-size: 15px;
      }
    }

    @media (min-width: 375px) {
      .box{
        font-size: 18px;
      }
    }

    @media (min-width: 414px) {
      .box{
        font-size: 21px;
      }
    }

    @media (min-width: 480px) {
      .box{
        font-size: 24px;
      }
    }

  </style>
</head>
<body>
  <div class="box">我是box</div>
</body>
</html>

Q.E.D.