1 dzień temu · 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