hai 1 día · 50069d3d22
--- a/css3/14.照片墙.html
+++ b/css3/14.照片墙.html
@@ -0,0 +1,73 @@
 
															+<!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>
														
 
															+        body {
														
 
															+            background: #ccc;
														
 
															+        }
														
 
															+
														
 
															+        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>
														
 
															+        const imgList = document.querySelectorAll("img");
														
 
															+        const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
														
 
															+        const screenHeight = document.documentElement.clientHeight || document.body.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
														
 
															+        */
														
 
															+        const x = (screenWidth - 120 * 6) / 7;
														
 
															+        const y = (screenHeight - 120 * 4) / 5;
														
 
															+
														
 
															+        for (let i = 0; i < imgList.length; i++) {
														
 
															+            const row = Math.floor(i / 6) + 1;
														
 
															+            const col = i % 6 + 1;
														
 
															+            imgList[i].style.top = row * y + (row - 1) * 120 + 'px';
														
 
															+            imgList[i].style.left = col * x + (col - 1) * 120 + 'px';
														
 
															+            imgList[i].style.transitionDelay = (23 - i) * 100 + 'ms';
														
 
															+            imgList[i].style.transform = 'rotate(' + Math.random() * 180 + 'deg)'
														
 
															+        }
														
 
															+    </script>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/css3/images/.DS_Store
+++ b/css3/images/.DS_Store
--- a/css3/images/1.jpg
+++ b/css3/images/1.jpg
--- a/css3/images/10.jpg
+++ b/css3/images/10.jpg
--- a/css3/images/11.jpg
+++ b/css3/images/11.jpg
--- a/css3/images/12.jpg
+++ b/css3/images/12.jpg
--- a/css3/images/13.jpg
+++ b/css3/images/13.jpg
--- a/css3/images/14.jpg
+++ b/css3/images/14.jpg
--- a/css3/images/15.jpg
+++ b/css3/images/15.jpg
--- a/css3/images/16.jpg
+++ b/css3/images/16.jpg
--- a/css3/images/17.jpg
+++ b/css3/images/17.jpg
--- a/css3/images/18.jpg
+++ b/css3/images/18.jpg
--- a/css3/images/19.jpg
+++ b/css3/images/19.jpg
--- a/css3/images/2.jpg
+++ b/css3/images/2.jpg
--- a/css3/images/20.jpg
+++ b/css3/images/20.jpg
--- a/css3/images/21.jpg
+++ b/css3/images/21.jpg
--- a/css3/images/22.jpg
+++ b/css3/images/22.jpg
--- a/css3/images/23.jpg
+++ b/css3/images/23.jpg
--- a/css3/images/24.jpg
+++ b/css3/images/24.jpg
--- a/css3/images/3.jpg
+++ b/css3/images/3.jpg
--- a/css3/images/4.jpg
+++ b/css3/images/4.jpg
--- a/css3/images/5.jpg
+++ b/css3/images/5.jpg
--- a/css3/images/6.jpg
+++ b/css3/images/6.jpg
--- a/css3/images/7.jpg
+++ b/css3/images/7.jpg
--- a/css3/images/8.jpg
+++ b/css3/images/8.jpg
--- a/css3/images/9.jpg
+++ b/css3/images/9.jpg
--- a/css3/images/a.jpg
+++ b/css3/images/a.jpg
--- a/css3/images/b.jpg
+++ b/css3/images/b.jpg
--- a/css3/images/c.jpg
+++ b/css3/images/c.jpg
--- a/css3/images/d.jpg
+++ b/css3/images/d.jpg
--- a/css3/images/e.jpg
+++ b/css3/images/e.jpg
--- a/css3/images/f.jpg
+++ b/css3/images/f.jpg
--- a/html5/1.简介.html
+++ b/html5/1.简介.html
@@ -0,0 +1,24 @@
 
															+<!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>
														
--- a/html5/2.标签.html
+++ b/html5/2.标签.html
@@ -0,0 +1,32 @@
 
															+<!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>
														
 
															+        <!-- 
														
 
															+        HTML为什么要语义化？
														
 
															+            1.便携开发，提高开发效率 
														
 
															+            2.方便搜索引擎查找内容
														
 
															+        <header> 定义页面头部内容
														
 
															+        <nav>    定义导航内容
														
 
															+        <article> 定义文章内容
														
 
															+        <aside>   定义侧边框
														
 
															+        <section> 定义文章中的一块内容
														
 
															+        <footer>  定义页尾内容
														
 
															+     -->
														
 
															+        <header></header>
														
 
															+        <nav></nav>
														
 
															+        <aside></aside>
														
 
															+        <article></article>
														
 
															+        <section></section>
														
 
															+        <footer></footer>
														
 
															+    </div>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/html5/222.mp4
+++ b/html5/222.mp4
--- a/html5/3.多媒体标签.html
+++ b/html5/3.多媒体标签.html
@@ -0,0 +1,87 @@
 
															+<!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:显示控件：
														
 
															+                    属性值 ：controls 
														
 
															+        3. 是否循环播放：
														
 
															+                    属性名：loop;
														
 
															+                    属性值：loop;
														
 
															+        4.视频当前播放的时间：
														
 
															+                    dom.currentTime	
														
 
															+                    指示音频/视频播放的当前时间(以秒计);
														
 
															+        5.playbackRate	
														
 
															+            设置或返回音频/视频播放的速度
														
 
															+            注意：
														
 
															+                设置播放的速度,1--16最大16倍速;
														
 
															+        6.dom.duration	
														
 
															+            返回当前音频/视频的长度（以秒计）
														
 
															+        7.ended	
														
 
															+            返回音频/视频的播放是否已结束(结束返回true 没结束返回false);
														
 
															+        8.muted	
														
 
															+            设置或返回音频/视频是否静音 布尔值
														
 
															+        9.paused
														
 
															+            返回音频/视频是否暂停 布尔值
														
 
															+        10.volume
														
 
															+            设置或返回音频/视频的音量
														
 
															+
														
 
															+        方法：
														
 
															+            1.load()	重新加载音频/视频元素
														
 
															+            2.play()	开始播放音频/视频
														
 
															+            3.pause()	暂停当前播放的音频/视频
														
 
															+        事件:
														
 
															+            canplaythrough	音频/视频缓冲完成 当资源加载完毕 再触发这个事件          
														
 
															+            timeupdate	(播放进度改变的时候触发);  正在播放的事件
														
 
															+            ended 当目前的播放列表已结束时 当播放结束的是
														
 
															+
														
 
															+    -->
														
 
															+    <audio src="./周杰伦-花海.mp3" controls ></audio>
														
 
															+    <button id="btn1">播放</button>
														
 
															+    <button id="btn2">暂停</button>
														
 
															+    <button id="btn3">加载</button>
														
 
															+    <!-- <video src="./222.mp4" controls></video> -->
														
 
															+    <script>
														
 
															+        const audio = document.querySelector("audio");
														
 
															+        const btn1 = document.getElementById("btn1");
														
 
															+        const btn2 = document.getElementById("btn2");
														
 
															+        const btn3 = document.getElementById("btn3");
														
 
															+        btn1.onclick = function () {
														
 
															+            audio.play();
														
 
															+        }
														
 
															+        btn2.onclick = function () {
														
 
															+            audio.pause();
														
 
															+        }
														
 
															+        btn3.onclick = function () {
														
 
															+            audio.load();
														
 
															+        }
														
 
															+        audio.addEventListener('canplaythrough',function() {
														
 
															+            console.log("11")
														
 
															+        })
														
 
															+        audio.addEventListener('timeupdate',function() {
														
 
															+            console.log("22")
														
 
															+        })
														
 
															+        audio.addEventListener('ended',function() {
														
 
															+            console.log("33")
														
 
															+        })
														
 
															+        // audio.volume = 20
														
 
															+        // audio.playbackRate = 0.5;
														
 
															+        // audio.volume = 0.4
														
 
															+        // setInterval(()=>{
														
 
															+        //     console.log(audio.volume)
														
 
															+        //     // console.log(audio.currentTime)
														
 
															+        //     // console.log(audio.ended)
														
 
															+        // // console.log(audio.duration)
														
 
															+        // },1000)
														
 
															+        // audio.muted = true;
														
 
															+    </script>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/html5/4.输入类型.html
+++ b/html5/4.输入类型.html
@@ -0,0 +1,63 @@
 
															+<!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 action="">
														
 
															+        <!-- text 文本类型 -->
														
 
															+        <input type="text">
														
 
															+        <br>
														
 
															+        <!-- value 内容值 color 颜色类型 调色板-->
														
 
															+        <input type="color" value="#ff0000">
														
 
															+        <br>
														
 
															+        <!-- submit 提交按钮 -->
														
 
															+        <input type="submit">
														
 
															+        <br>
														
 
															+        <!-- date 日期  -->
														
 
															+        <input type="date" value="2024-02-21">
														
 
															+        <br>
														
 
															+        <!-- time 时间 -->
														
 
															+        <input type="time" value="12:00">
														
 
															+        <br>
														
 
															+        <!-- search 搜索 -->
														
 
															+        <input type="search">
														
 
															+        <br>
														
 
															+        <!-- range 进度条 -->
														
 
															+        <input type="range" value="100">
														
 
															+        <br>
														
 
															+        <!-- number 数值 max 最大值 min 最小值 -->
														
 
															+        <input type="number" value="3" max="10" min="1">
														
 
															+        <br>
														
 
															+        <!-- tel　手机号　
														
 
															+            maxlength 最大可输入的范围
														
 
															+        -->
														
 
															+        <input type="tel" maxlength="11">
														
 
															+        <br>
														
 
															+        <!-- 
														
 
															+            file 文件类型
														
 
															+            accept 接收文件类型
														
 
															+         -->
														
 
															+        <input type="file" accept="image/jpg,image/png">
														
 
															+        <br>
														
 
															+        <select>
														
 
															+            <option value="1">1</option>
														
 
															+            <option value="11">11</option>
														
 
															+            <option value="1111">1111</option>
														
 
															+        </select>
														
 
															+        <input type="text" list="abc">
														
 
															+        <datalist id="abc">
														
 
															+            <option value="112">11</option>
														
 
															+            <option value="11112">1111</option>   
														
 
															+        </datalist>
														
 
															+        <br>
														
 
															+        <!-- 邮箱校验 email
														
 
															+            回车执行
														
 
															+            输入内容一定要包含@符号
														
 
															+        -->
														
 
															+        <input type="email">
														
 
															+    </form>
														
 
															+</body>
														
 
															+</html>
														
--- a/html5/周杰伦-花海.mp3
+++ b/html5/周杰伦-花海.mp3