html5 (前端语义化标签)

最新推荐文章于 2025-03-04 08:52:45 发布

xuemen11

最新推荐文章于 2025-03-04 08:52:45 发布

阅读量563

点赞数 12

文章标签：前端 html5 css3

本文链接：https://blog.youkuaiyun.com/xuemen11/article/details/136653115

版权

概念：html5css3是一种用于网页设计和开发的技术语言，它是HTML（超文本标记语言）和CSS（层叠样式表）的最新版本。它结合了HTML5的新特性和CSS3的强大功能，使得网页可以更加美观、交互性更强，并且能够适应不同的设备和屏幕大小。

一. html5

语义化结构：

header 头部标签，nav导航标签，aside侧栏标签

main主体标签，footer尾部标签，article文章标签

//HTML5引入了一系列的语义化元素，如
<article>  <aside>  <details>  <figcaption>  <figure>  <footer>  
<header>  <main>  <mark>  <nav>  <section>和<summary>
//这些元素有助于更清晰地描述网页的结构和内容，提高可读性和搜索引擎优化。

语义化好处

 <!-- 引入bootstrap  css文件 -->
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <!-- 自定义语义化标签的高度 -->
    <style>
      header {
        height: 100px;
      }
      nav {
        height: 50px;
      }
      aside {
        height: 100px;
      }
      main {
        height: 300px;
      }
      article {
        height: 50px;
      }
      footer {
        height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 此类是语义化标签 -->
    <header class="container bg-success"></header>
    <nav class="container bg-danger"></nav>

    <aside class="container bg-warning"></aside>
    <main class="container bg-primary">
      <article class="bg-danger w-25 float-left mt-5"></article>
      <article class="bg-success w-75 float-right mt-5"></article>
    </main>
    <footer class="container bg-success"></footer>

1.有利于页面结构清晰

2.有利于搜索引擎优化（seo)

二.多媒体标签

img (图片) (在input框获取图片，能显示到页面中预览)

 <body>
    <input type="file" />
    <img src="" alt="" />

    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>
      var input = document.querySelector("input[type=file]");
      var img = document.querySelector("img");
      // 做图片预览
      // input做监听事件改变
      input.addEventListener("change", function () {
        var photo = input.files[0];
        // 判断是否为图片
        // console.log(photo.name);
        // 判断图片的大小
        console.log(photo.size); //图片尺寸字节
        v = photo.size / 1024; //千字节
        console.log(v);

        // 获取读取文件的实例
        var reader = new FileReader();

        // 把文件转字符串信息
        if (photo) {
          reader.readAsDataURL(photo);
        }

        // 监听文件加载
        reader.onload = function () {
          // 获取转成字符串的图片信息，可以直接渲染
          console.log(reader.result);
          img.src = reader.result;
        };
      });
    </script>
  </body>

audio (音频) (controls 显示控件 loop 循环轮播 muted设置静音)

播放音频：play() ,暂停音频pause() ,获取音频总时长audio.duration ,获取当前音频播放更新时长audio.currentTime，监听音频文件播放事件:oncanplay

监听音频播放的当前更新时长:ontimeupdate , 监听音频结束事件:onended

  //特别注意一般做音频隐藏！！
 <style>
      /* 一般都把audio隐藏 */
      .audio {
        width: 0;
        height: 0;
        opacity: 0;
        /* 不可以用display :none  不然就是直接去除了这个元素 */
      }
    </style>

  <!-- controls 显示控件   loop 循环轮播   muted 设置静音 -->
<audio src="./music/haiuotiankong.mp3 " controls class="audio"></audio>

// 1.做点击按钮播放暂停音频
      $('.btn-success').on('click',function(){
        // console.log(1);
        audio.play()
      })
      $('.btn-danger').on('click',function(){
        
        audio.pause()
      })

//2.  处理时间

      // 3.监听音频文件播放事件
      audio.oncanplay=function(){
        // 总时长
        d = audio.duration  //秒数

        // console.log(d);
      //  获取后渲染到第二个警示框时间中
      time_box_d.innerHTML=formatime(d)

      }

      // 4.监听音频播放的当前更新时长
      audio.ontimeupdate=function(){
        c = audio.currentTime  //秒数
        // 更新进度条
        var demo = c / d * 100;

       // 设置进度条的宽度
        progress_bar.style.width = `${demo}%`;
        time_box_c.innerText=formatime(c)

      }

      // 5.监听音频结束事件
      audio.onended=function(){
      
        console.log('播放结束');
      
      }

video（视频）同理视频也是如此

(controls 显示控件 loop 循环轮播 muted设置静音)