11-HTML补充

已注销
63 阅读2分钟

01 HTML新增元素

00001.png

02 HTML5其他新增元素

2.1 video

HTML 的video元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放 00002.png video常见的属性 00003.png

2.2 video支持的视频格式

00004.png

2.3 video的兼容性写法

00005.png

03 audio

HTML 的audio 元素用于在文档中嵌入音频内容, 和video的用法非常类似 00006.png 常见属性 00007.png

3.1 audio支持的音频格式

developer.mozilla.org/en-US/docs/… 00008.png

3.3 兼容性写法

00009.png

04 input元素的扩展内容

developer.mozilla.org/zh-CN/docs/… 00010.png

05 全局属性 data-*

00011.png

06 CSS属性(white-space)

00012.png

07 CSS函数

7.1 var

00013.png 代码示例

<!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>
    :root {
      --main-color: #f00;
    }

    .box {
      color: var(--main-color);
    }

    .title {
      color: var(--main-color);
    }
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="title">2</div>
</body>
</html>

7.2 cacl

00014.png

<!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>
    .box {
      width: 500px;
      height: 100px;
      background-color: pink;
    }

    .item {
      display: inline-block;
      height: 50px;
      background-color: red;
    }

    .item1 {
      width: calc(100% - 100px);
      background-color: aqua;
    }

    .item2 {
      width: 100px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item item1"></div>
    <div class="item item2"></div>
  </div>
</body>
</html>

00015.png

7.3 bulr函数

开发中的常见用法

<!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>
    .box {
      display: inline-block;
      position: relative;
    }
    .box .cover {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0,0,0,.2);
      backdrop-filter: blur(2px);
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="./imgs/kobe01.jpg" alt="">
    <div class="cover"></div>
  </div>
</body>
</html>

00016.png

7.4 gradient

开发中最常用的是线性渐变

7.4.1 默认值

从上到下

<!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>
    .box {
      margin: 50px auto;
      width: 200px;
      height: 100px;
      background-image: linear-gradient(blue, red);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

00017.png

7.4.2 从左到右

<!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>
    .box {
      margin: 50px auto;
      width: 200px;
      height: 100px;
      background-image: linear-gradient(to right, blue, red);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

00018.png

7.4.3 左下角到右上角

<!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>
    .box {
      margin: 50px auto;
      width: 200px;
      height: 100px;
      background-image: linear-gradient(to right top, blue, red);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

00019..png

7.4.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>
    .box {
      margin: 50px auto;
      width: 200px;
      height: 100px;
      background-image: linear-gradient(to right, orange 10%,blue 60%, red 100%);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

00020.png

08 html文件中head补充知识点

00035.png

09 站点图标

有的网站在页面上没有link这个图标，但是还是可以显示这是因为favicon.icon图标直接放在了根目录下
多数浏览器会自动检测,但是在实际开发种还是推荐在放在根目录下的同时在html文件中link站点图标
avatar
文章
阅读
粉丝