Accueil Explorer Aide
Connexion
lovecoding
/
vipAllDay
10
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

html5

e il y a 11 mois
Parent
4088f4bd41
commit
868fb26802
10 fichiers modifiés avec 304 ajouts et 1 suppressions
Vue séparée Afficher les stats Diff
  1. 78 0
      css3/20.照片墙.html
  2. BIN
      css3/images/1.png
  3. 1 1
      html/5.表单案例2.html
  4. 21 0
      html5/1.简介.html
  5. 34 0
      html5/2.标签.html
  6. BIN
      html5/222.mp4
  7. 46 0
      html5/3.输入类型.html
  8. 84 0
      html5/4.多媒体标签.html
  9. 40 0
      html5/5.属性.html
  10. BIN
      html5/周杰伦-花海.mp3

+ 78 - 0
css3/20.照片墙.html
Voir le fichier 

@@ -0,0 +1,78 @@
 
+<!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>
 
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+      }
 
+      body {
 
+        background: rgba(0, 0, 0, 0.3);
 
+      }
 
+      img {
 
+        width: 120px;
 
+        height: 120px;
 
+        position: absolute;
 
+        top: -120px;
 
+        left: -120px;
 
+        transition: all 2s ease-out;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <img src="./images/1.jpg" alt="" />
 
+    <img src="./images/2.jpg" alt="" />
 
+    <img src="./images/3.jpg" alt="" />
 
+    <img src="./images/4.jpg" alt="" />
 
+    <img src="./images/5.jpg" alt="" />
 
+    <img src="./images/6.jpg" alt="" />
 
+    <img src="./images/7.jpg" alt="" />
 
+    <img src="./images/8.jpg" alt="" />
 
+    <img src="./images/9.jpg" alt="" />
 
+    <img src="./images/10.jpg" alt="" />
 
+    <img src="./images/11.jpg" alt="" />
 
+    <img src="./images/12.jpg" alt="" />
 
+    <img src="./images/13.jpg" alt="" />
 
+    <img src="./images/14.jpg" alt="" />
 
+    <img src="./images/15.jpg" alt="" />
 
+    <img src="./images/16.jpg" alt="" />
 
+    <img src="./images/17.jpg" alt="" />
 
+    <img src="./images/18.jpg" alt="" />
 
+    <img src="./images/19.jpg" alt="" />
 
+    <img src="./images/20.jpg" alt="" />
 
+    <img src="./images/21.jpg" alt="" />
 
+    <img src="./images/22.jpg" alt="" />
 
+    <img src="./images/23.jpg" alt="" />
 
+    <img src="./images/24.jpg" alt="" />
 
+    <script>
 
+      var imgList = document.querySelectorAll("img");
 
+      var screenWidth =
 
+        document.body.clientWidth || document.documentElement.clientWidth;
 
+      var screenHeight =
 
+        document.body.clientHeight || document.documentElement.clientHeight;
 
+      /**
 
+       * 0   1  2  3  4  5
 
+       * 6   7  8  9 10 11
 
+       * 12 13 14 15 16 17
 
+       * 18 19 20 21 22 23
 
+       */
 
+      // 间隙大小
 
+      var gapX = (screenWidth - 120 * 6) / 7;
 
+      var gapY = (screenHeight - 120 * 4) / 5;
 
+
 
+      for (var i = 0; i < imgList.length; i++) {
 
+        //求出循环项在第几行第几列
 
+        var row = Math.floor(i / 6) + 1;
 
+        var col = (i % 6) + 1;
 
+        // row: 2 ; col:4
 
+        imgList[i].style.top = gapY * row + (row - 1) * 120 + "px";
 
+        imgList[i].style.left = gapX * col + (col - 1) * 120 + "px";
 
+        imgList[i].style.transitionDelay = (23 - i) * 100 + "ms";
 
+        imgList[i].style.transform = 'rotate(' + Math.random() * 45 + 'deg)';
 
+      }
 
+    </script>
 
+  </body>
 
+</html>

BIN
css3/images/1.png
Voir le fichier


+ 1 - 1
html/5.表单案例2.html
Voir le fichier 

@@ -9,7 +9,7 @@
 
     <div>
 
         <h2>欢迎注册网易免费邮箱</h2>
 
         <p>手机号码@163.com方便好记</p>
 
-        手机号：<input type="text" placeholder="手机号码">
 
+        <label>手机号：</label><input type="text" placeholder="手机号码">
 
         <br><br>
 
         密码：<input type="text" placeholder="密码">
 
         <br><br>

+ 21 - 0
html5/1.简介.html
Voir le fichier 

@@ -0,0 +1,21 @@
 
+<!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>
 
+        !DOCTYPE 声明文档规范 html5
 
+        <!-- 
+        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
+        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
+  -->
 
+<!-- <html xmlns="http://www.w3.org/1999/xhtml">
 
+    xml文档规范
 
+</html> -->
 
+  <!-- DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析
 
+  这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析  -->
 
+</body>
 
+</html>

+ 34 - 0
html5/2.标签.html
Voir le fichier 

@@ -0,0 +1,34 @@
 
+<!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>
 
+    <!-- 
+        标签：
 
+            1.文档标签：文档流
 
+            2.按是否换行分：块级元素 行内元素 行内块元素
 
+            3.按是否闭合分：闭合标签 空标签
 
+            4.H5新特性 
+        HTML标签为什么要语义化？
 
+            1.便携开发 提高开发效率
 
+            2.方便搜索引擎查找内容
 
+     -->
 
+     <div>
 
+        <!-- 定义页面头部内容 -->
 
+        <header></header>
 
+        <!-- 导航内容 -->
 
+        <nav></nav>
 
+        <!-- 定义文章标签 -->
 
+        <article></article>
 
+        <!-- 定义侧边栏标签 -->
 
+        <aside></aside>
 
+        <!-- 定义文章中一部分内容标签 -->
 
+        <section></section>
 
+        <!-- 定义页面尾部标签 -->
 
+        <footer></footer>
 
+    </div>
 
+</body>
 
+</html>

BIN
html5/222.mp4
Voir le fichier


+ 46 - 0
html5/3.输入类型.html
Voir le fichier 

@@ -0,0 +1,46 @@
 
+<!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>
 
+    <form>
 
+        <!-- text 文本类型 -->
 
+        <input type="text">
 
+        <!-- color 取色板 -->
 
+        <input type="color" value="#ff0000">
 
+        <!-- submit 提交按钮 -->
 
+        <input type="submit">
 
+        <!-- date 日期选择器 -->
 
+        <input type="date" value="2024-06-12">
 
+        <!-- time 时间选择器 -->
 
+        <input type="time" value="12:00">
 
+        <!-- search 搜索框 -->
 
+        <input type="search">
 
+        <!-- range 进度条 -->
 
+        <input type="range">
 
+        <!-- number 数字选择器 max 最大值 min最小值 value 默认值 -->
 
+        <input type="number" max="20" min="10" value="12">
 
+        <!-- tel 手机号 maxlength 最大长度 -->
 
+        <input type="tel" maxlength="11">
 
+        <!-- file 文件 accept 接收类型 -->
 
+        <input type="file" accept="image/jpg">
 
+        <select>
 
+            <option value="aa">1</option>
 
+            <option value="bb">2</option>
 
+            <option value="cc">3</option>
 
+        </select>
 
+        <input type="text" list="abc">
 
+        <datalist id="abc">
 
+            <option value="1">小学</option>
 
+            <option value="2">初中</option>
 
+            <option value="3">高中</option>
 
+            <option value="4">大学</option>
 
+        </datalist>
 
+        <!-- email 邮箱输入框 回车时触发 -->
 
+        <input type="email">
 
+    </form>
 
+</body>
 
+</html>

+ 84 - 0
html5/4.多媒体标签.html
Voir le fichier 

@@ -0,0 +1,84 @@
 
+<!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>
 
+    <!-- 
+        audio 音频 
+        video 视频
 
+        1.src 路径
 
+        2.controls 控件
 
+        3.loop 循环播放
 
+        4. 当前播放的时间：
 
+            dom.currentTime	
+            指示音频/视频播放的当前时间(以秒计);
 
+        5.playbackRate	
+            设置或返回音频/视频播放的速度
 
+            注意：
 
+                1. 设置播放的速度,1--16最大16倍速;
 
+        6.dom.duration	
+            返回当前音频/视频的长度（以秒计）
 
+        7.ended	返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
 
+        8.muted	设置或返回音频/视频是否静音
 
+        9.paused返回音频/视频是否暂停
 
+        10.volume设置或返回音频/视频的音量 0-1
 
+
 
+        方法
 
+        1.load()	重新加载音频/视频元素
 
+        2.play()	开始播放音频/视频
 
+        3.pause()	暂停当前播放的音频/视频
 
+
 
+        事件：
 
+        canplaythrough	音频/视频缓冲完成 当资源加载完毕 再触发这个事件          
+        timeupdate	(播放进度改变的时候触发);  正在播放的事件
 
+        ended	 当目前的播放列表已结束时 当播放结束的是
 
+
 
+
 
+     -->
 
+     <audio src="./周杰伦-花海.mp3" controls></audio>
 
+     <!-- <video src="./222.mp4" controls></video> -->
 
+     <button class="btn1">播放</button>
 
+     <button class="btn2">暂停</button>
 
+     <button class="btn3">重新加载</button>
 
+     <script>
 
+        var a1 = document.querySelector("audio");
 
+        var btn1 = document.querySelector(".btn1");
 
+        var btn2 = document.querySelector(".btn2");
 
+        var btn3 = document.querySelector(".btn3");
 
+        a1.muted = false;
 
+        a1.volume = 0.6;
 
+        console.log(a1.volume)
 
+        setInterval(()=>{
 
+            console.log(a1.ended);
 
+        // console.log(a1.duration);
 
+            // console.log(a1.currentTime);
 
+        },1000)
 
+        btn1.addEventListener("click",function(){
 
+            console.log("开始")
 
+            a1.play();
 
+        })
 
+        btn2.addEventListener("click",function(){
 
+            console.log("暂停")
 
+            a1.pause();
 
+        })
 
+        btn3.addEventListener("click",function(){
 
+            console.log("重新加载")
 
+            a1.load();
 
+        })
 
+        a1.addEventListener("canplaythrough",function(){
 
+            console.log("资源加载完成")
 
+        })
 
+        a1.addEventListener("ended",function(){
 
+            console.log("播放结束")
 
+        })
 
+        a1.addEventListener("timeupdate",function(){
 
+            console.log("正在播放")
 
+        })
 
+        
+        // a1.playbackRate = 16;
 
+     </script>
 
+</body>
 
+</html>

+ 40 - 0
html5/5.属性.html
Voir le fichier 

@@ -0,0 +1,40 @@
 
+<!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 id="box" data-name="哈哈" data-aa-bb="ab" style="color:red">这是一个盒子</div>
 
+    <p data-aa="哦哦">一个段落</p>
 
+    <!-- 
+        给元素自定义属性：
 
+            在标签中 添加data-xxx='xxx';
 
+     -->
 
+    <script>
 
+        /***
 
+         *  给元素自定义属性：
 
+         * 设置：
 
+         *      dom.属性名 = '属性值'
 
+         *      dom.dataset.属性名 = '属性值'
 
+         *      dom.setAttribute('属性名','属性值')
 
+         *  读取：
 
+         *      dom.dataset.属性名 
+         *      dom.getAttribute('属性名')
 
+         *      dom.属性名
 
+         */
 
+        var box = document.getElementById("box");
 
+        var p = document.querySelector("p");
 
+        p.oo = '哒哒哒';
 
+        box.dataset.c = 'OMyGod';
 
+        box.setAttribute("title",'Hello');
 
+        console.log(box.getAttribute("title"));
 
+        console.log(box.dataset.name);
 
+        console.log(box.dataset.aaBb);
 
+        console.log(box.dataset.c);
 
+        console.log(p.dataset.aa);
 
+        console.log(p.oo);
 
+    </script>
 
+</body>
 
+</html>

BIN
html5/周杰伦-花海.mp3
Voir le fichier