3 месяцев назад · e2422a0caf
--- a/9_HTML5/2_语意化标签.html
+++ b/9_HTML5/2_语意化标签.html
@@ -0,0 +1,15 @@
 
				+<!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>
			
 
				+    <header>头部</header>
			
 
				+    <nav>导航</nav>
			
 
				+    <section>内容</section>
			
 
				+    <aside>侧边栏</aside>
			
 
				+    <footer>底部</footer>
			
 
				+</body>
			
 
				+</html>
			
--- a/9_HTML5/3_媒体标签.html
+++ b/9_HTML5/3_媒体标签.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>
			
 
				+    <!-- <video src="./media/media.mp4"  width="400" id="video1"></video> -->
			
 
				+    <audio src="./media/song.mp3" onplay="playFun()"></audio>
			
 
				+    <button>播放</button>
			
 
				+    <script>
			
 
				+        var video = document.getElementById('video1');
			
 
				+        var audio = document.getElementsByTagName('audio')[0];
			
 
				+        var btn = document.getElementsByTagName('button')[0];
			
 
				+        btn.onclick = function(){
			
 
				+            audio.play();
			
 
				+        }
			
 
				+        function playFun(){
			
 
				+            console.log('播放了');
			
 
				+        }
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9_HTML5/4_新的选择器.html
+++ b/9_HTML5/4_新的选择器.html
@@ -0,0 +1,26 @@
 
				+<!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 class="box">hello</div>
			
 
				+    <ul>
			
 
				+        <li>1</li>
			
 
				+        <li>2</li>
			
 
				+        <li>3</li>
			
 
				+    </ul>
			
 
				+    <script>
			
 
				+        // var oBox = document.getElementsByClassName('box')[0];
			
 
				+        // var oBox = document.querySelector(".box");
			
 
				+        // console.log(oBox);
			
 
				+
			
 
				+        var aLi = document.querySelectorAll("li");
			
 
				+        // var aLi = document.querySelector("li");
			
 
				+
			
 
				+        console.log(aLi);
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9_HTML5/5_canvas.html
+++ b/9_HTML5/5_canvas.html
@@ -0,0 +1,25 @@
 
				+<!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>
			
 
				+        #canv{
			
 
				+            background-color: black;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <canvas id="canv" width="400" height="400"></canvas>
			
 
				+    <script>
			
 
				+        var canv = document.querySelector('#canv');
			
 
				+        var ctx = canv.getContext('2d');
			
 
				+        ctx.strokeStyle = 'white';
			
 
				+        ctx.lineWidth = 5;
			
 
				+        ctx.moveTo(100,100);
			
 
				+        ctx.lineTo(200,200);
			
 
				+        ctx.stroke();
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>