CSS HTML5 拓展

76433橘子
142 阅读6分钟

CSS HTML5

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类 以及 其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展 和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案

HTML5 新增元素 以及 新增属性

HTML5 新增语义化元素

  • 首先我们的网页是具备层级的，这个时候就可以使用我们的语义化的元素来实现具体的布局

  • header nav main footer

    • 以前的时候，我们实现布局一个网页是通过的我们的 div 中添加对应的属性来实现的，但是现在是可以直接通过这些元素替代

    • 使用过多的 div 的劣势

      • 使用过多的 id 或者 class 来实现区分元素
      • 浏览器中的元素不够语义化
      • 对于搜素引擎来说，不利于 SEO 优化

  • 对此，HTML5 为我们增加的元素含有

    • <headers> 头部元素
    • <nav> 导航元素
    • <section> 定义的某个区域的元素
    • <article> 内容区域
    • <aside> 侧边栏元素
    • <footer> 尾部元素
    • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 开始实现使用我们的语义化元素 -->
​
  <!-- div.header -->>
  <header></header>
  
  <!-- div.nav -->
  <nav></nav>
​
  <!-- div.section -->
  <section>
    <!-- div.article -->
    <article></article>
    <article></article>
    <article></article>
  </section>
​
  <!-- div.aside -->
  <aside></aside>
​
  <!-- div.footer -->
  <footer></footer>
</body>
</html>

image-20241011214435956.png

HTML5 视频和音频元素

  • 为了我们的网页中可以实现更好嵌入 音屏 和 视频，所以说就新增了两个元素: video 和 audio

    • 只要有了音频 和 视频，这个时候，我们就可以通过监听事件实现一些功能的

    • 音频 <audio> 和 视频<video>

      • 直接通过元素使用这两个
      • 或者说使用 javascript 的 API 实现特定的功能

  • video 元素的使用

    • 用来实现的是我们的在页面中实现嵌入媒体播放器，用于实现支持文档内的视频播放

    • <video src=""></video>

    • 当然我们的这个还是具有兼容性写法的

      • 就是当我们的 video 里面的 src 中的不支持播放的时候，我们是可以通过在里面添加其他格式的视频的

      • <source src=""> 可以多个

        • <video src=""><source src=""><p>视频格式当前浏览器不支持，请更换浏览器试试</p></video>

image-20241011221255578.png

  • audio 元素的使用

    • 这个就是我们的 audio 音频元素： mp3 的格式
    • 同时也是具有兼容性的写法的: <audio src=""><source src=""><audio>

image-20241012115437938.png

HTML5 新增属性

  • input 新增的内容

    • 表单新增属性

      • placeholder 输入框的占位文字
      • multiple 多个值，用于select的下面，这个时候就可以实现我们的多选
      • autofocus 实现的是自动聚焦

    • 表单新增type类型

      • color 颜色选择器
      • time 时间选择器
      • search 搜素框
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" placeholder="请输入文本内容">
  
  <select name="" id="" multiple>
    <option value="香蕉">香蕉</option>
    <option value="西瓜">西瓜</option>
    <option value="苹果">苹果</option>
  </select>
​
  <input type="text" autofocus>
</body>
</html>

  • 新增全局属性

    • data-*

      • 这个就是来实现的定义我们的自己的全局属性，这个就是为了方便我们可以实现在js中获取html中的数据
      • <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div data-name="juwenzhang" data-age="18" class="box"></div>
</body>
​
<script>
  // 开始实现通过我们的 js 获取得到 html 中的数据 
  // 通过 `.dataset` function 我们就可以实现获取得到我们的 html 中的数据了
  console.log(document.querySelector(".box").dataset)
</script>
</html>
      • 通过data 实现我们的设置属性，我们是可以实现的是在 JavaScript 的 DOM 来实现通过 .dataset实习那获取
      • 通常用于我们的 HTML 和 JavaScript 之间的数据传递
      • 然后这种方式也是我们实现小程序开发的时候，就可以通过 data-数据名 来实现的传递我们的数据（必须掌握）

CSS 函数拓展

  • 首先我们前面使用的 CSS 函数就包括了一些: rgba/rgb/translate/totate/scale/url，这些都是我们的函数

    • 为什么使用我们的 CSS函数，就是因为使用CSS函数，我们是可以实现的是更加灵活的来编写我们的样式的值

  • 拓展CSS函数

    • 常用CSS函数

    • var 用来实现定义 CSS 变量

      • 属性名必须是-- 开始的
      • 属性值可以是任意有效的 CSS 值
      • <!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 {
      /* 自定义我们的变量 */
      /* 又可以抽离代码了哟 nice!!! */
      --main-color: red;
      --main-font-size: 100px
    }
​
    .box {
      color: var(--main-color);
      font-size: var(--main-font-size)
    }
  </style>
</head>
<body>
  <div class="box">hello front-end</div>
</body>
</html>

    • calc 用来实现计算 CSS 值，用来实现的是计算元素的大小或者位置

      • <!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>
    html {
      /* 开始实现自定义属性 */
      --box-color: skyblue;
      --item-1-color: red;
      --item-2-color: orange;
​
      body {
        padding: 0;
        margin: 0;
        
        .box {
          width: 300px;
          height: 300px;
          background-color: var(--box-color); 
​
          .item1, .item2{
            width: calc(100%/3);
            height: calc(100%/2);
          }
​
          .item1 {
            background-color: var(--item-1-color);
          }
​
          .item2 {
            background-color: var(--item-2-color);
          }
        }
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item1"></div>
    <div class="item2"></div>
  </div>
</body>
</html>

    • blur 用来实现的是设置我们的模糊的效果（毛玻璃（高斯模糊）效果）

      • 使用的基本语法: blur(redius)

        • radius 就是设置的是模糊半径，值越大，越模糊

      • 通常会和两个属性一起连用

        • filter 将模糊或者颜色偏移等图形效果应用于元素
        • backdrop-filter 将元素后面区域添加模糊或者其他效果
      • <!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>
    html {
      /* 开始实现自定义属性 */
      --box-color: rgba(22, 161, 216, .5);
      --item-1-color: rgba(230, 20, 20, .5);
      --item-2-color: rgba(232, 159, 23, .5);
      --blur-value: 10px;
​
      body {
        padding: 0;
        margin: 0;
        
        .box {
          width: 300px;
          height: 300px;
          background-color: var(--box-color); 
​
          .item1, .item2{
            width: calc(100%/3);
            height: calc(100%/2);
            
          }
​
          .item1 {
            background-color: var(--item-1-color);
            backdrop-filter: var(--blur-value);
          }
​
          .item2 {
            background-color: var(--item-2-color);
          }
        }
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item1"></div>
    <div class="item2"></div>
  </div>
</body>
</html>

    • gradient 用来实现的是设置颜色渐变的效果

      • 用于实现的是我们的两种或者多种的颜色的过渡转变

      • 用于实现的是设计自己 2D 图像,我们是可以通过 <gradient>来实现一些过度渐变的,相当于就是设计的是一张图片<iamge>

      • 可以实现应用的地方是: background-image list-style-iamge border-iamge content

      • 我们需要注意的是我们的这个实际上是设计的是我们的图片的效果

      • 实现设计我们的渐变的方法

        • linear-gradient() 用来实现的是表示的是我们的线性渐变的效果
        • radial-gradient() 用来实现设计的是我们的那种辐射式渐变的样式的设计
        • repeating-linear-gradient() 重复线性渐变的实现
        • repeating=radial-geadient() 重复的辐射式渐变的实现
        • <!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 {
      /* 设置的是我们的线性渐变的图片设置 50% 就是设置的是颜色的位置 */
      --linear-gradient-image: linear-gradient(rgba(214, 27, 27, .5), rgba(32, 32, 200, .5) 50%, rgba(38, 154, 200, .5), rgba(135, 186, 35, .5));
      /* 开始实现从左到右的渐变 to 就是实现决定了颜色的渐变方向 */
      --linear-right-gradient-iamge: linear-gradient(to right bottom,rgba(214, 27, 27, .5), rgba(32, 32, 200, .5), rgba(38, 154, 200, .5), rgba(135, 186, 35, .5));
      /* 开始实现设置我们的辐射式的渐变过程 at 就是实现的是设置颜色渐变的原点设置 */
      --radial-gradient-image: radial-gradient(at 20% top,rgba(214, 27, 27, .5), rgba(32, 32, 200, .5), rgba(38, 154, 200, .5), rgba(135, 186, 35, .5));
​
      body {
        padding: 0;
        margin: 0;
        
        .box, .box01, .box02 {
          width: 300px;
          height: 200px;
          margin: 10px;
        }
​
        .box {
          background-image: var(--linear-gradient-image);
        }
​
        .box01 {
          background-image: var(--radial-gradient-image);
        }
​
        .box02 {
          background-image: var(--linear-right-gradient-iamge);
        }
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box01"></div>
  <div class="box02"></div>
</body>
</html>
avatar
文章
阅读
粉丝