Home Explore Help
Sign In
lovecoding
/
VIP22
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

22

dongxiuling 2 years ago
commit
3c83ef5160
100 changed files with 3518 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      1_HTML/.DS_Store
  2. 33 0
      1_HTML/10_登录.html
  3. 95 0
      1_HTML/11_注册页.html
  4. 23 0
      1_HTML/1_first.html
  5. 20 0
      1_HTML/1_text.html
  6. 106 0
      1_HTML/3_html基础标签.html
  7. 42 0
      1_HTML/4_html基础标签.html
  8. 63 0
      1_HTML/5_杰伦demo.html
  9. 30 0
      1_HTML/6_圣诞老师demo.html
  10. 86 0
      1_HTML/7_复习.html
  11. 59 0
      1_HTML/8_表单元素.html
  12. 51 0
      1_HTML/9_表格.html
  13. BIN
      1_HTML/demo-img/1.jpg
  14. BIN
      1_HTML/demo-img/2.jpg
  15. BIN
      1_HTML/demo6.zip
  16. BIN
      1_HTML/demo6/.DS_Store
  17. 46 0
      1_HTML/demo6/6_demo.html
  18. BIN
      1_HTML/demo6/images/.DS_Store
  19. BIN
      1_HTML/demo6/images/img01.gif
  20. BIN
      1_HTML/demo6/images/img01.jpeg
  21. BIN
      1_HTML/demo6/images/img02.jpeg
  22. BIN
      1_HTML/demo6/images/img03.jpeg
  23. BIN
      1_HTML/demo6/images/img04.jpeg
  24. BIN
      1_HTML/demo6/music.mp3
  25. BIN
      1_HTML/images/img01.jpeg
  26. BIN
      1_HTML/images/jd.gif
  27. BIN
      1_HTML/images/logo.png
  28. BIN
      1_HTML/img02.jpeg
  29. BIN
      1_HTML/圣诞老人/.DS_Store
  30. 30 0
      1_HTML/圣诞老人/6_圣诞老师demo.html
  31. BIN
      1_HTML/圣诞老人/demo-img/1.jpg
  32. BIN
      1_HTML/圣诞老人/demo-img/2.jpg
  33. 26 0
      1_HTML/练习/2_test.html
  34. 63 0
      1_HTML/练习/3_test.html
  35. 76 0
      1_HTML/练习/4_test.html
  36. BIN
      1_HTML/练习/img01.jpg
  37. BIN
      2_CSS/.DS_Store
  38. 75 0
      2_CSS/10_浮动.html
  39. 72 0
      2_CSS/10浮动复习.html
  40. 23 0
      2_CSS/11_after.html
  41. 100 0
      2_CSS/12_练习.html
  42. 0 0
      2_CSS/13_test.css
  43. 243 0
      2_CSS/13_复习.html
  44. 44 0
      2_CSS/14_框模型.html
  45. 47 0
      2_CSS/15_两种盒模型.html
  46. 47 0
      2_CSS/15_两种盒模型例子.html
  47. 54 0
      2_CSS/16_margin 居中.html
  48. 32 0
      2_CSS/1_css的使用.html
  49. 3 0
      2_CSS/1_style.css
  50. 88 0
      2_CSS/2_选择器.html
  51. 49 0
      2_CSS/3_基础样式-背景.html
  52. 97 0
      2_CSS/4_复习.html
  53. 53 0
      2_CSS/5_基础样式-文本字体.html
  54. 40 0
      2_CSS/6_菜单.html
  55. 56 0
      2_CSS/7_基础样式-display.html
  56. 47 0
      2_CSS/8_inline-block元素中间空隙.html
  57. 31 0
      2_CSS/9_基础样式-列表outline.html
  58. BIN
      2_CSS/images/.DS_Store
  59. BIN
      2_CSS/images/img01.jpeg
  60. BIN
      2_CSS/images/img02.jpeg
  61. BIN
      2_baotu/.DS_Store
  62. 16 0
      2_baotu/css/common.css
  63. 51 0
      2_baotu/css/index.css
  64. BIN
      2_baotu/images/.DS_Store
  65. BIN
      2_baotu/images/logo.png
  66. 57 0
      2_baotu/index.html
  67. 56 0
      3_JS/10_分支判断.html
  68. 40 0
      3_JS/11_小例子.html
  69. 35 0
      3_JS/12_循环语句.html
  70. 50 0
      3_JS/13_函数.html
  71. 36 0
      3_JS/14_数组.html
  72. 43 0
      3_JS/15_对象.html
  73. 37 0
      3_JS/16_基本数据类型和引用数据类型.html
  74. 93 0
      3_JS/17_数组的方法.html
  75. 93 0
      3_JS/18_字符串的方法.html
  76. 19 0
      3_JS/19_日期.html
  77. 25 0
      3_JS/1_test.html
  78. 1 0
      3_JS/1_test.js
  79. 32 0
      3_JS/2_变量.html
  80. 37 0
      3_JS/3_数据类型.html
  81. 28 0
      3_JS/4_小练习.html
  82. 70 0
      3_JS/5_运算.html
  83. 18 0
      3_JS/6_运算小练习.html
  84. 42 0
      3_JS/7_运算2.html
  85. 18 0
      3_JS/8_运算3.html
  86. 20 0
      3_JS/9_时间的小例子.html
  87. 101 0
      4_Bom/1_test.html
  88. 20 0
      4_Bom/2_弹出框.html
  89. 20 0
      4_Bom/3_history.html
  90. 37 0
      4_Bom/4_location.html
  91. 14 0
      4_Bom/test.html
  92. BIN
      5_Dom/10_放大镜/images/.DS_Store
  93. BIN
      5_Dom/10_放大镜/images/1.jpg
  94. BIN
      5_Dom/10_放大镜/images/2.jpg
  95. 99 0
      5_Dom/10_放大镜/放大镜.html
  96. 22 0
      5_Dom/11_节点.html
  97. 56 0
      5_Dom/12_节点遍历.html
  98. 56 0
      5_Dom/13_垂直导航.html
  99. 39 0
      5_Dom/14_节点操作.html
  100. 87 0
      5_Dom/15_事件冒泡.html

BIN
1_HTML/.DS_Store
View File


+ 33 - 0
1_HTML/10_登录.html
View File 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>欢迎登陆HTML网站</title>
 
+</head>
 
+
 
+<body>
 
+    <!-- 加粗切重点 b   加粗strong    -->
 
+    <!-- 实体字符  空格: &nbsp;  大于号&gt; 小于号 &lt;-->
 
+    
+    <center>
 
+        <h2>欢迎登陆HTML网站</h2>
 
+        <a href="#"> <b>制作人：肖红</b></a>
 
+        <hr color="blue">
 
+        <div>
 
+            用户名: <input type="text"><br>
 
+            密码 &nbsp;&nbsp;: <input type="text"><br>
 
+            <br>
 
+            <input type="button" value="退出">
 
+            <input type="button" value="登录"><br>
 
+            <br>
 
+            <a href="#"> <b> <i>如果您是首次登陆，请点击这里注册您的登陆信息！！！</i></b></a>
 
+        </div>  
+
 
+    </center>
 
+
 
+</body>
 
+
 
+</html>

+ 95 - 0
1_HTML/11_注册页.html
View File 

@@ -0,0 +1,95 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>欢迎注册信息</title>
 
+</head>
 
+<body>
 
+    <center>
 
+        <h1>注册信息</h1>
 
+        <table>
 
+            <tr>
 
+                <td>
 
+                    用户名：
 
+                </td>
 
+                <td>
 
+                    <input type="text">
 
+                </td>
 
+            </tr>
 
+
 
+            <tr>
 
+                <td>
 
+                    密码：
 
+                </td>
 
+                <td>
 
+                    <input type="password">
 
+                </td>
 
+            </tr>
 
+
 
+            <tr>
 
+                <td>
 
+                    性别：
 
+                </td>
 
+                <td>
 
+                    <input type="radio" name="sex">男
 
+                    <input type="radio" name="sex">女
 
+                </td>
 
+            </tr>
 
+            <tr>
 
+                <td>
 
+                    兴趣爱好：
 
+                </td>
 
+                <td>
 
+                    <input type="checkbox" name="hobby">足球
 
+                    <input type="checkbox" name="hobby">篮球
 
+                    <input type="checkbox" name="hobby">排球
 
+                    <input type="checkbox" name="hobby">游泳 <br>
 
+                    <input type="checkbox" name="hobby">网球
 
+                    <input type="checkbox" name="hobby">旅游
 
+                    <input type="checkbox" name="hobby">绘画
 
+                    <input type="checkbox" name="hobby">读书
 
+                </td>
 
+            </tr>
 
+
 
+            <tr>
 
+                <td>最高学历</td>
 
+                <td>
 
+                    <select>
 
+                        <option value="">高中</option>
 
+                        <option value="">大专</option>
 
+                        <option value="">本科</option>
 
+                        <option value="">硕士</option>
 
+                        <option value="">博士</option>
 
+                    </select>
 
+                </td>
 
+            </tr>
 
+            <tr>
 
+                <td>个人说明</td>
 
+                <td>
 
+                    <textarea cols="30" rows="5">个人简介</textarea>
 
+                </td>
 
+            </tr>
 
+            <tr>
 
+                <td>
 
+                    <!-- 重置 -->
 
+                    <input type="reset">
 
+                </td>
 
+                <td>
 
+                    <input type="button" value="注册"> 
+                </td>
 
+            </tr>
 
+
 
+
 
+        </table>
 
+        <br>
 
+        <a href="#"><b>提示:</b>注册成功之后请点击这里您将直接登陆系统！</a>
 
+
 
+    </center>
 
+
 
+
 
+    
+</body>
 
+
 
+</html>

+ 23 - 0
1_HTML/1_first.html
View File 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+
 
+    <!-- https://www.w3school.com.cn/
 
+    HTML 指的是超文本标记语言 (Hyper Text Markup Language)
 
+
 
+    标记语言->标签 一般标签是由开始标签和结束标签组成 ，也有不是成对出现的
 
+    开始标签  <html> 
+    结束标签  </html>
 
+    
+
 
+    <meta charset="UTF-8">
 
+    属性： 属性名=属性值
 
+    
+    -->
 
+    
+</body>
 
+</html>

+ 20 - 0
1_HTML/1_text.html
View File 

@@ -0,0 +1,20 @@
 
+<!-- 声明文档类型 html5文档类型 -->
 
+<!DOCTYPE html>
 
+<!-- 属性名：lang  属性值：en -->
 
+<html lang="en">
 
+    <head>
 
+        <!-- charset 设置字符编码 -->
 
+        <meta charset="UTF-8">
 
+        <!-- 描述 -->
 
+        <meta name="description" content="鲜花网,选花礼网(鲜花礼品网)-国内领先的鲜花网领先品牌,专注鲜花速递服务17年,销量居鲜花礼品网站首位！鲜花网可24小时预订鲜花，同城送花、异地送花服务,网上订花后最快1-3小时即可将鲜花快递上门,送花网站覆盖国内2000多城市！" />
 
+        <!-- 关键字 -->
 
+        <meta name="keywords" content="花礼网Hua.com,鲜花礼品网,鲜花,鲜花网,鲜花快递,网上订花送花,网上订花,送花网站" />
 
+        <!-- 设置标题 -->
 
+        <title>淘宝网-淘！我喜欢</title>
 
+    </head>
 
+    <body>
 
+        <!-- 展示给用户的页面内容 -->
 
+        HELLO WORLD!!!!
 
+    </body>
 
+</html>
 
+<!-- 注释的快捷键 ctrl+? -->

+ 106 - 0
1_HTML/3_html基础标签.html
View File 

@@ -0,0 +1,106 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <!-- h1标题只能有一个 -->
 
+    <h1>我是页面的标题</h1>
 
+    <h2>我是页面的标题</h2>
 
+    <h3>我是页面的标题</h3>
 
+    <h4>我是页面的标题</h4>
 
+    <h5>我是页面的标题</h5>
 
+    <h6>我是页面的标题</h6>
 
+
 
+    <!-- 段落 -->
 
+    <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字字这是一段文字这是一段文字这是一段文字
 
+    </p>
 
+    <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
 
+    我是页面中的内容
 
+
 
+    <!-- 图片 src图片地址
 
+        图片地址：绝对路径 (不变)
 
+                相对路径  访问下一级目录/
 
+                         访问上一级../
 
+    -->
 
+    <img src="https://img2.baidu.com/it/u=4256448754,3459359052&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375">
 
+    <img src="images/img01.jpeg">
 
+
 
+    <img src="img02.jpeg">
 
+
 
+    <!--a 
+        超链接 
+        href属性 跳转地址 
+        target="_blank" 打开新窗口
 
+    -->
 
+    <!-- <a href="https://www.baidu.com/">百度</a> -->
 
+    <!-- 换行 -->
 
+    <br>
 
+    <a href="https://www.baidu.com/" target="_blank">百度</a>
 
+    <!-- 线 -->
 
+    <hr>
 
+
 
+    <!-- 无序列表 -->
 
+    <ul>
 
+        <li>111</li>
 
+        <li>222</li>
 
+        <li>333</li>
 
+        <li>444</li>
 
+    </ul>
 
+    <!-- 有序列表 -->
 
+    <ol>
 
+        <li>aaa</li>
 
+        <li>bbb</li>
 
+        <li>ccc</li>
 
+        <li>ddd</li>
 
+    </ol>
 
+
 
+    <!-- 区块 一般用来划分布局 DIV+CSS布局-->
 
+    <!-- div 宽度是充满父元素 -->
 
+    <div>我是一个div</div>
 
+    <div>我是一个div</div>
 
+    <!-- span 的宽度是内容撑的 -->
 
+    <span>我是一个span</span>
 
+    <span>我是一个span</span>
 
+
 
+    <hr>
 
+    <div>
 
+        锄禾<span style="color:red">日当午</span>， <br>
 
+        <strong>汗滴</strong>禾下土 <br>
 
+        谁知盘中餐,<br>
 
+        <i>粒粒</i>皆辛苦。
 
+    </div>
 
+
 
+    <!-- 
+        块级元素
 
+        自己占一行 宽度默认充满父元素
 
+        h1-h6  p  ul li div hr 
+
 
+        行级元素
 
+        可以多个占一行  宽度是内容撑的
 
+        span strong a i 
+
 
+     -->
 
+
 
+    <!-- 扩展 -->
 
+    <!-- audio音频 -->
 
+    <audio controls="controls">
 
+        <source src="https://www.w3school.com.cn/i/song.mp3" type="audio/mp3" />
 
+    </audio>
 
+
 
+    <!-- video视频 -->
 
+    <video controls="controls">
 
+        <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
 
+    </video>
 
+
 
+
 
+
 
+
 
+</body>
 
+
 
+</html>

+ 42 - 0
1_HTML/4_html基础标签.html
View File 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body style="background:green">
 
+    <!-- h1标题只能有一个 -->
 
+    <h1>我是页面的标题</h1>
 
+    <h2>我是页面的标题</h2>
 
+    <h3>我是页面的标题</h3>
 
+    <h4>我是页面的标题</h4>
 
+    <h5>我是页面的标题</h5>
 
+    <h6>我是页面的标题</h6>
 
+
 
+    <!-- 段落 -->
 
+    <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字字这是一段文字这是一段文字这是一段文字</p>
 
+    <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
 
+    我是页面中的内容
 
+
 
+    <!-- 图片 
+        src:图片地址：绝对路径 (不变)
 
+                相对路径  访问下一级目录/
 
+                         访问上一级../
 
+        alt:当图片加载不出来的时候，会显示alt中的内容
 
+
 
+        常见图片格式：
 
+            jpg|jpeg
 
+            png 透明底色
 
+            gif 动图 
+
 
+        
+    -->
 
+    <img src="../img02.jpeg" >
 
+    <img src="../images/img01.jpeg" alt="">
 
+    <img src="../images/logo1.png" >
 
+    <img src="../images/jdd.gif" alt="这是一个logo">
 
+
 
+</body>
 
+</html>

+ 63 - 0
1_HTML/5_杰伦demo.html
View File 

@@ -0,0 +1,63 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body >
 
+    <!-- 居中 -->
 
+    <center>
 
+        <h1 style="color:green">这是我的个人博客</h1>
 
+        <hr>
 
+        <h2>东风破</h2>
 
+        <a href="">周杰伦</a>
 
+        <p>
 
+            一盏离愁 孤单伫立在窗口<br>
 
+            我在门后 假装你人还没走<br>
 
+            旧地如重游 月圆更寂寞<br>
 
+            夜半清醒的烛火 不忍苛责我<br>
 
+            一壶漂泊 浪迹天涯难入喉<br>
 
+            你走之后 酒暖回忆思念瘦<br>
 
+            水向东流 时间怎么偷<br>
 
+            花开就一次成熟 我却错过<br>
 
+            谁在用琵琶弹奏 一曲东风破<br>
 
+            岁月在墙上剥落 看见小时候<br>
 
+            犹记得那年我们都还很年幼<br>
 
+            而如今琴声幽幽 我的等候你没听过<br>
 
+            <img src="demo-img/1.jpg" width="300px" alt=""><br>
 
+            谁在用琵琶弹奏 一曲东风破<br>
 
+            枫叶将故事染色 结局我看透<br>
 
+            篱笆外的古道我牵着你走过<br>
 
+            荒烟漫草的年头 就连分手都很沉默<br>
 
+            一壶漂泊 浪迹天涯难入喉<br>
 
+            你走之后 酒暖回忆思念瘦<br>
 
+            水向东流 时间怎么偷<br>
 
+            花开就一次成熟 我却错过<br>
 
+            谁在用琵琶弹奏 一曲东风破<br>
 
+            岁月在墙上剥落 看见小时候<br>
 
+            犹记得那年我们都还很年幼<br>
 
+            而如今琴声幽幽 我的等候你没听过<br>
 
+            谁在用琵琶弹奏 一曲东风破<br>
 
+            枫叶将故事染色 结局我看透<br>
 
+            篱笆外的古道我牵着你走过<br>
 
+            荒烟漫草的年头 就连分手都很沉默<br>
 
+            <img src="demo-img/2.jpg" width="300px" alt=""><br>
 
+            谁在用琵琶弹奏 一曲东风破<br>
 
+            岁月在墙上剥落 看见小时候<br>
 
+            犹记得那年我们都还很年幼<br>
 
+            而如今琴声幽幽 我的等候你没听过<br>
 
+            谁在用琵琶弹奏 一曲东风破<br>
 
+            枫叶将故事染色 结局我看透<br>
 
+            篱笆外的古道我牵着你走过<br>
 
+            荒烟漫草的年头 就连分手都很沉默<br>
 
+            <hr>
 
+            友情链接：<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br>
 
+            <br>
 
+            <a href="#">回到顶部</a> | <a href="#">联系我们</a>
 
+        </p>
 
+    </center>
 
+    
+</body>
 
+</html>

+ 30 - 0
1_HTML/6_圣诞老师demo.html
View File 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <h1>圣诞节的那些事</h1>
 
+    <div>1.圣诞是怎样由来的</div>
 
+    <a href="">2.圣诞老人的由来</a>  <br>
 
+    <a href="">3.圣诞树的由来</a>
 
+    <h2>圣诞是怎样由来的</h2>
 
+    <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>
 
+    <img src="demo6/images/img01.gif">
 
+    <h2>圣诞老人的由来</h2>
 
+    <p>圣诞节当然少不了<a href="https://baijiahao.baidu.com/s?id=1697283944177621537&wfr=spider&for=pc" target="_blank">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
 
+    <img src="demo6/images/img02.jpeg" width="400px" alt="">
 
+    <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>
 
+    <p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
 
+    <p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。 每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>
 
+    <img src="demo6/images/img03.jpeg" width="300px" alt=""> <br>
 
+    更多内容可以 <a href="https://www.baidu.com" target="_blank">百度一下</a>
 
+    <br>
 
+    <audio controls="controls">
 
+        <source src="demo6/music.mp3" type="audio/mp3">
 
+    </audio>
 
+</body>
 
+</html>

+ 86 - 0
1_HTML/7_复习.html
View File 

@@ -0,0 +1,86 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>这是我的第一个页面</title>
 
+</head>
 
+<body>
 
+    <h1>11</h1>
 
+    <h2>22</h2>
 
+    <h3>33</h3>
 
+    <h3>44</h4>
 
+    <h5>55</h5>
 
+    <h6>66</h6>
 
+
 
+
 
+    <p>
 
+        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
 
+    </p>
 
+
 
+    <p>
 
+        我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
 
+    </p>
 
+
 
+    <!-- 图片  src地址  alt当图片显示不出来的时候会显示alt中的内容
 
+        绝对路径 固定不变
 
+
 
+        相对路径  下一级/   上一级../
 
+
 
+    -->
 
+    <img width="400px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672016962&t=419a79bf18f9b8597e98528ca6a5b7fc" alt="这是一个图片">
 
+
 
+    <img src="images/img01.jpeg" alt="">
 
+    <!-- 换行 -->
 
+    <br>
 
+
 
+    <!-- 超链接  href跳转地址-->
 
+    <a href="http://www.baidu.com">Baidu</a>
 
+
 
+    <!-- 列表 -->
 
+    <ul>
 
+        <li>111</li>
 
+        <li>222</li>
 
+        <li>333</li>
 
+    </ul>
 
+
 
+    <ol>
 
+        <li>aaa</li>
 
+        <li>bbb</li>
 
+        <li>ccc</li>
 
+    </ol>
 
+
 
+    <!-- 用来布局 区块 -->
 
+    <div>
 
+        我是一个div
 
+    </div>
 
+
 
+    <div>
 
+        我是一个div
 
+    </div>
 
+    <!--  -->
 
+    <span>
 
+        我是span
 
+    </span>
 
+    <span>
 
+        我是span
 
+    </span>
 
+    <!-- b 加粗切重点    strong加粗-->
 
+    <div>如果他总为别人<i>撑伞</i>，你何苦非为他等在<b>雨中</b>————<strong>梁静茹“分手快乐”</strong></div>
 
+
 
+    <hr>
 
+
 
+    
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

+ 59 - 0
1_HTML/8_表单元素.html
View File 

@@ -0,0 +1,59 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 表单    -->
 
+    <form action="xx">
 
+        <!--文本框  type="text"-->
 
+        用户名：
 
+        <input type="text"><br>
 
+
 
+        <!-- 密码框  type=“password" -->
 
+        密码：
 
+        <input type="password"><br>
 
+
 
+        <!-- 单选框  type="radio"  单选需要有一个相同的name属性-->
 
+        性别：
 
+        <input type="radio" name="sex">男
 
+        <input type="radio" name="sex">女 <br>
 
+
 
+        <!--复选框 type=checkbox  需要有一个相同的name属性 -->
 
+        爱好：
 
+        <input type="checkbox" name="hobby">唱跳
 
+        <input type="checkbox" name="hobby">篮球
 
+        <input type="checkbox" name="hobby">敲代码  <br>
 
+
 
+        <!-- 下拉列表 -->
 
+        学校：
 
+        <select >
 
+            <option value="">理工</option>
 
+            <option value="">黑工程</option>
 
+            <option value="">黑大</option>
 
+        </select>
 
+        <br>
 
+
 
+        <!-- 文本域 -->
 
+
 
+        备注：
 
+        <textarea  cols="30" rows="10"></textarea><br>
 
+
 
+        <!-- 按钮  
+            type="submit" 提交按钮 自动提交form表单  
+            button普通按钮
 
+        -->
 
+
 
+        <input type="submit">
 
+        <input type="reset">
 
+        <input type="button" value="确定">
 
+
 
+    </form>
 
+
 
+    <hr color="red">
 
+    
+</body>
 
+</html>

+ 51 - 0
1_HTML/9_表格.html
View File 

@@ -0,0 +1,51 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+
 
+    <!-- 表格 
+        单元格边距(Cell padding)
 
+        本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
 
+        单元格间距(Cell spacing)
 
+        本例演示如何使用 Cell spacing 增加单元格之间的距离。
 
+    -->
 
+    <table border="1">
 
+        <tr><td>1</td><td>2</td></tr>
 
+        <tr><td>1</td><td>2</td></tr>
 
+    </table>
 
+    <table border="1">
 
+        <tr>
 
+            <td>11</td>
 
+            <td>22</td>
 
+            <td>22</td>
 
+        </tr>
 
+
 
+        <tr>
 
+            <td>11</td>
 
+            <td>22</td>
 
+            <td>22</td>
 
+        </tr>
 
+
 
+    </table>
 
+    <table border="1" cellpadding="10px" cellspacing="0">
 
+        <tr>
 
+            <th>姓名</th>
 
+            <th>学号</th>
 
+            <th>电话</th>
 
+        </tr>
 
+
 
+        <tr>
 
+            <td>张三</td>
 
+            <td>263646</td>
 
+            <td>15093877377</td>
 
+        </tr>
 
+
 
+    </table>
 
+    
+</body>
 
+</html>

BIN
1_HTML/demo-img/1.jpg
View File


BIN
1_HTML/demo-img/2.jpg
View File


BIN
1_HTML/demo6.zip
View File


BIN
1_HTML/demo6/.DS_Store
View File


+ 46 - 0
1_HTML/demo6/6_demo.html
View File 

@@ -0,0 +1,46 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <h1>圣诞节的那些事</h1>
 
+    1.圣诞是怎样由来的 <br>
 
+    2.<a href="#oldman">圣诞老人的由来</a> <br>
 
+    3.<a href="#tree">圣诞树的由来</a> <br>
 
+    <h2>圣诞是怎样由来的</h2>
 
+    <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。
 
+        这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas
 
+        Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。
 
+        在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>
 
+    <img src="images/img01.gif" alt="">
 
+    <h2 id="oldman">圣诞老人的由来</h2>
 
+    <p>圣诞节当然少不了<a href="圣诞老人的.html" target="_blank">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
 
+    <img src="images/img02.jpeg" width="400px" alt="">
 
+    <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>
 
+    <p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。
 
+    </p>
 
+    <p>在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。</p>
 
+    <h2 id="tree">圣诞树的由来</h2>
 
+    <p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>
 
+    <p>其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。
 
+    </p>
 
+    <p>另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。</p>
 
+    <p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。
 
+        每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>
 
+    <img src="images/img03.jpeg" width="300px" alt="">
 
+    <p>更多内容可以 <a href="https://www.baidu.com/">百度一下</a> </p>
 
+    <audio controls="controls" > 
+        <source src="music.mp3" type="audio/mp3">
 
+    </audio>
 
+
 
+   
+</body>
 
+
 
+
 
+</html>

BIN
1_HTML/demo6/images/.DS_Store
View File


BIN
1_HTML/demo6/images/img01.gif
View File


BIN
1_HTML/demo6/images/img01.jpeg
View File


BIN
1_HTML/demo6/images/img02.jpeg
View File


BIN
1_HTML/demo6/images/img03.jpeg
View File


BIN
1_HTML/demo6/images/img04.jpeg
View File


BIN
1_HTML/demo6/music.mp3
View File


BIN
1_HTML/images/img01.jpeg
View File


BIN
1_HTML/images/jd.gif
View File


BIN
1_HTML/images/logo.png
View File


BIN
1_HTML/img02.jpeg
View File


BIN
1_HTML/圣诞老人/.DS_Store
View File


+ 30 - 0
1_HTML/圣诞老人/6_圣诞老师demo.html
View File 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <h1>圣诞节的那些事</h1>
 
+    <div>1.圣诞是怎样由来的</div>
 
+    <a href="">2.圣诞老人的由来</a>  <br>
 
+    <a href="">3.圣诞树的由来</a>
 
+    <h2>圣诞是怎样由来的</h2>
 
+    <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>
 
+    <img src="demo6/images/img01.gif">
 
+    <h2>圣诞老人的由来</h2>
 
+    <p>圣诞节当然少不了<a href="https://baijiahao.baidu.com/s?id=1697283944177621537&wfr=spider&for=pc" target="_blank">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
 
+    <img src="demo6/images/img02.jpeg" width="400px" alt="">
 
+    <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>
 
+    <p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
 
+    <p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。 每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>
 
+    <img src="demo6/images/img03.jpeg" width="300px" alt=""> <br>
 
+    更多内容可以 <a href="https://www.baidu.com" target="_blank">百度一下</a>
 
+    <br>
 
+    <audio controls="controls">
 
+        <source src="demo6/music.mp3" type="audio/mp3">
 
+    </audio>
 
+</body>
 
+</html>

BIN
1_HTML/圣诞老人/demo-img/1.jpg
View File


BIN
1_HTML/圣诞老人/demo-img/2.jpg
View File


+ 26 - 0
1_HTML/练习/2_test.html
View File 

@@ -0,0 +1,26 @@
 
+<html>
 
+
 
+<head>
 
+    <title>欢迎登陆HTML网站</title>
 
+</head>
 
+
 
+<body>
 
+    <center>
 
+        <h2>欢迎登陆HTML网站</h2>
 
+
 
+        <p>
 
+            <a href="http://blog.csdn.net/xh921"><b>制作人：肖红</b><br></a>
 
+            <hr color="blue">
 
+            用户名：<input type="text" name="user" value="" width="30"><br>
 
+            密码：　<input type="password" name="pwd" value="" width="30"><br>
 
+
 
+            <br>
 
+            <input type="reset" value="退出">
 
+            <a href="网站首页.html"><input type="submit" value="登录"></a>
 
+        </p>
 
+        
+        <a href="注册信息.html"><b><i>如果您是首次登陆，请点击这里注册您的登陆信息！！！ </i></b></a>
 
+    </center>
 
+</body>
 
+
 
+</html>

+ 63 - 0
1_HTML/练习/3_test.html
View File 

@@ -0,0 +1,63 @@
 
+<html>
 
+	<head><title>欢迎注册信息</title></head>
 
+	<body>
 
+		<center>
 
+			<h1>注册信息</h1>
 
+			<p>
 
+			<form method="get" action="zhuce.html">
 
+				<table>
 
+					<tr>
 
+						<td>用户名：</td>
 
+						<td><input type="text" name="user" value="" width="30"></td>
 
+					</tr>
 
+					<tr>
 
+						<td>密码：</td>
 
+						<td><input type="password" name="pwd" value="" width="30"></td>
 
+					</tr>
 
+					<tr>
 
+						<td>性别：</td>
 
+						<td>
 
+							<input type="radio" name="sex" value="0" checked>男
 
+							<input type="radio" name="sex" value="1">女
 
+						</td>
 
+					</tr>
 
+					<tr>
 
+						<td>兴趣爱好：</td>
 
+						<td>
 
+							<input type="checkbox" name="interest" value="football">足球
 
+							<input type="checkbox" name="interest" value="basketball">篮球
 
+							<input type="checkbox" name="interest" value="volleyball">排球
 
+							<input type="checkbox" name="interest" value="swim">游泳<br>
 
+							<input type="checkbox" name="interest" value="tennis">网球
 
+							<input type="checkbox" name="interest" value="traveling">旅游
 
+						  <input type="checkbox" name="interest" value="painting">绘画
 
+						  <input type="checkbox" name="interest" value="reading">读书
 
+						</td>
 
+					</tr>
 
+					<tr>
 
+						<td>最高学历</td>
 
+						<td>
 
+							<select size="1" name="education">
 
+							<option value="" selected>...</optin>
 
+							<option value="高中">高中</option>
 
+							<option value="大专">大专</option>
 
+							<option value="大学">大学</option>
 
+							<option value="博士">硕士</option>
 
+							<option value="博士">博士</option>
 
+							</select>
 
+						</td>
 
+					</tr>
 
+					<tr>
 
+						<td valign="top">个人说明:</td>
 
+						<td><textarea name="personal" rows="5" cols="30">个人简介</textarea></td>
 
+					</tr>
 
+					<tr>
 
+						<td> <input type="reset" value="重置"></td>
 
+						<td><input type="submit" value="注册"></td>
 
+					</tr>
 
+				</table>
 
+			</form>
 
+			<a href="网站首页.html"><b>提示:</b>注册成功之后请点击这里您将直接登陆系统！</a>
 
+		</center>	
+	</body>
 
+</html>

+ 76 - 0
1_HTML/练习/4_test.html
View File 

@@ -0,0 +1,76 @@
 
+<html>
 
+
 
+<head>
 
+    <title>欢迎登陆HTML网站首页</title>
 
+</head>
 
+
 
+<body>
 
+    <a href="欢迎登陆HTML网站.html">
 
+        <img src="img01.jpg" width="80" height="50">
 
+    </a>
 
+    <center>
 
+        <h1>
 
+            HTML网站
 
+        </h1>
 
+        <hr color="blue">
 
+        <p>
 
+            <i>
 
+                <b>
 
+                    该网站资源丰富，包含了不同级别网页设计师需要的各种资源<br>
 
+                    有以系列为主的视频教程，有各种书籍以及各方专业人士的技<br>
 
+                    术博客，您所需要的应有尽有！学习HTML，我们永远陪伴您！！
 
+                </b>
 
+            </i>
 
+
 
+        </p>
 
+        <table border="1">
 
+            <tr align="center">
 
+                <td width="150" height="40">
 
+                    <b>
 
+                        基础学习知识
 
+                    </b>
 
+                </td>
 
+                <td width="150" height="40">
 
+                    <b>
 
+                        学习教程
 
+                    </b>
 
+                </td>
 
+                <td width="150" height="40">
 
+                    <b>
 
+                        在线书籍阅读
 
+                    </b>
 
+                </td>
 
+                <td width="150" height="40">
 
+                    <b>
 
+                        练习基地
 
+                    </b>
 
+                </td>
 
+            </tr>
 
+            <tr align="center">
 
+                <td width="150" height="40">
 
+                    <b>
 
+                        代码大全
 
+                    </b>
 
+                </td>
 
+                <td width="150" height="40">
 
+                    <b>
 
+                        最新文章
 
+                    </b>
 
+                </td>
 
+                <td width="150" height="40">
 
+                    <b>
 
+                        视频教程
 
+                    </b>
 
+                </td>
 
+                <td width="150" height="40">
 
+                    <b>
 
+                        技术博客
 
+                    </b>
 
+                </td>
 
+            </tr>
 
+        </table>
 
+    </center>
 
+
 
+</body>
 
+
 
+</html>

BIN
1_HTML/练习/img01.jpg
View File


BIN
2_CSS/.DS_Store
View File


+ 75 - 0
2_CSS/10_浮动.html
View File 

@@ -0,0 +1,75 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            float: left;
 
+            
+        }
 
+        #div2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+            float: left;
 
+        }
 
+
 
+        h1{
 
+            height: 100px;
 
+            background: orchid;
 
+        }
 
+        #div0{
 
+            /* height: 200px; */
 
+
 
+            /* overflow: hidden; */
 
+        }
 
+        /* 伪元素选择器  after在内部的后边生成元素 */
 
+        .clearfix::after{
 
+            content:''; /*after元素必须有*/
 
+            display: block;
 
+            clear: both;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 浮动  left左浮动 |right有浮动 |none不浮动
 
+
 
+        浮动的元素特点： 脱离文档流 空间释放；
 
+
 
+        子元素浮动导致父元素塌陷问题
 
+
 
+        解决方式：  
+            1 给父元素添加一个高度 (已知父元素的高度)
 
+            2 给父元素添加一个overflow：hidden
 
+            3 在浮动的元素下边添加一个 块级元素,通过clear 清除浮动
 
+            4 通过clearfix::after{
 
+                content:'';
 
+                display:block;
 
+                clear:both
 
+            }
 
+    -->
 
+    <div id="div0" class="clearfix">
 
+        <div id="div1"></div>
 
+        <div id="div2"></div>   
+        <!-- clear:left |right |both -->
 
+        <!-- <div style="clear:both ;"></div> -->
 
+        <!-- 自动生成一个块元素 -->
 
+    </div>
 
+
 
+    <h1></h1>
 
+   
+
 
+
 
+
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

+ 72 - 0
2_CSS/10浮动复习.html
View File 

@@ -0,0 +1,72 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+
 
+        #div0{
 
+            background: #ccc;
 
+            /* height: 200px; */
 
+            /* overflow: hidden; */
 
+        }
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+
 
+            float: left;
 
+        }
 
+        #div2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+
 
+            float: left;
 
+        }
 
+        h1{
 
+            height: 100px;
 
+            background: pink;
 
+        }
 
+
 
+        /* clearfix元素的内部、后边添加一个伪元素  */
 
+        .clearfix::after{
 
+            content:'';
 
+            display: block;
 
+            clear: both;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <div id="div0" class="clearfix">
 
+        <div id="div1"></div>
 
+        <div id="div2"></div>
 
+        <!-- 浮动的元素下边 块元素 -->
 
+        <!-- <div style="clear:both"></div> -->
 
+        <!-- ::after -->
 
+    </div>
 
+
 
+    <h1></h1>
 
+
 
+    <!-- div1和div2 浮动， 浮动的元素会脱离文档流 空间释放
 
+    
+        导致div0没有内容撑着--没有高度
 
+        
+        解决方式    
+            1 给父元素添加一个高度
 
+            2 给父元素添加一个overflow:hidden;
 
+            3 clear:both
 
+            4 clearfix
 
+
 
+    
+    -->
 
+
 
+
 
+    
+
 
+</body>
 
+</html>

+ 23 - 0
2_CSS/11_after.html
View File 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 伪元素 */
 
+        div::after{
 
+            content:''
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <div>
 
+        hahah 
+        <!--  -->
 
+    </div>
 
+    
+</body>
 
+</html>

+ 100 - 0
2_CSS/12_练习.html
View File 

@@ -0,0 +1,100 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #nav {
 
+            width: 1199px;
 
+            height: 35px;
 
+            line-height: 35px;
 
+            background: #EEEEEE;
 
+
 
+        }
 
+
 
+        .left {
 
+            float: left;
 
+        }
 
+
 
+        .right {
 
+            float: right;
 
+        }
 
+
 
+        #nav a {
 
+            text-decoration: none;
 
+            color: #888888;
 
+            font-family: PingFang SC;
 
+            font-size: 12px;
 
+        }
 
+
 
+        #nav .active {
 
+            color: #6F26BD;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+
 
+    <div id="nav">
 
+        <!-- 左边的 -->
 
+        <div class="left">
 
+            <a href="#">您好，欢迎进入包图购物网</a>
 
+            <a href="#" class="active">注册</a>
 
+            <a href="#">登录</a>
 
+        </div>
 
+
 
+        <!-- 右边的 -->
 
+        <div class="right">
 
+            <a href="#">设为首页 ☆</a>
 
+            <a href="#" class="active">加入收藏</a>
 
+            <a href="#">| 客户服务 </a>
 
+            <a href="#">| 关注官方微博：</a>
 
+        </div>
 
+    </div>
 
+
 
+    <script>
 
+        // var x = 3;
 
+        // function foo() {
 
+        //     var x = 1;
 
+        //     console.log(x); // 1
 
+
 
+        //     (function () {
 
+        //         var y = 2;
 
+        //         console.log(x);  // 1
 
+        //         console.log(y);  // 2
 
+        //     })();
 
+
 
+        //     console.log(y);
 
+        // }
 
+
 
+        // foo();
 
+        // console.log(x);
 
+
 
+
 
+        console.log(1);
 
+setTimeout(() => {
 
+    console.log(2);
 
+    Promise.resolve().then(() => {
 
+        console.log(3);
 
+    });
 
+});
 
+console.log(4);
 
+new Promise((resolve, reject) => {
 
+    console.log(5);
 
+    resolve();
 
+}).then(() => {
 
+    console.log(6);
 
+    setTimeout(() => {
 
+        console.log(7);
 
+    });
 
+});
 
+console.log(8);
 
+
 
+
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 0 - 0
2_CSS/13_test.css
View File


+ 243 - 0
2_CSS/13_复习.html
View File 

@@ -0,0 +1,243 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 内部选择器  例子-->
 
+    <style>
 
+        div{
 
+            /* background: blue; */
 
+        }
 
+        /* 内部的后边  生成的after元素是行级元素 */
 
+        #div5::after{
 
+            content:'哈哈';
 
+        }
 
+        /*  */
 
+        #div5::before{
 
+            content:'嘿嘿'
 
+        }
 
+        /* #div6{
 
+            background: red;
 
+        } */
 
+        /* .bb{
 
+            background: green;
 
+        } */
 
+
 
+        div{
 
+            background: purple;
 
+            font-family: 'Courier New', Courier, monospace;
 
+        }
 
+    </style>
 
+    <!-- 外部样式  项目 -->
 
+    <link rel="stylesheet" href="13_test.css">
 
+</head>
 
+<body>
 
+    <!-- 内联样式 -->
 
+    <div style="background:red"></div>
 
+    <!-- 
+        选择器 取到这个元素
 
+            1、id选择器 唯一
 
+            #div1{
 
+
 
+            }
 
+            2、class 选择器
 
+            .aa{
 
+
 
+            }
 
+            3、后代选择器
 
+            #ul1 li{ //101
 
+
 
+            }
 
+            #ul1 .list{ //110
 
+
 
+            }
 
+            4、子代选择器
 
+            #ul1 > li{
 
+
 
+            }
 
+            5、群组选择器
 
+            #div1,#ul1{
 
+                width:200px;
 
+                height:200px;
 
+            }
 
+            相当于：
 
+            #div1{
 
+                width:200px;
 
+                height:200px;
 
+            }
 
+            #ul1{
 
+                width:200px;
 
+                height:200px;
 
+            }
 
+            6、伪类选择器
 
+            :hover{
 
+                background:red;
 
+            }
 
+
 
+            7、伪元素选择器
 
+            内部的后边生成
 
+            ::after{
 
+
 
+            }
 
+            内部的前边生成
 
+            ::before{
 
+
 
+            }
 
+
 
+            选择器优先级：
 
+            style > id选择器  > class选择器 >标签选择器
 
+            1000    100       10          1
 
+
 
+            11个class选中 一个元素 是不是比直接通过id选中优先级要要 
+
 
+            不是，id永远大于class的优先级
 
+
 
+        css的基础样式：
 
+            宽高：
 
+                width:200px;
 
+                height:200px;
 
+
 
+            背景
 
+                background-color:red;
 
+                background-image:url(xx.jpg);
 
+                background-repeat:no-repeat|repeat;
 
+                背景图片位置  水平  垂直
 
+                background-position:x y;
 
+
 
+                简写为： backgroud:red  url(xx.jpg)  no-repeat x y;
 
+            
+            字体    
+                //最小12px
 
+                font-size:16px; 
+                font-family: 'Courier New', Courier, monospace;
 
+                100-900  400相当于默认值  
+                font-weight:400;
 
+                字体粗细：italic 斜体|normal 
+                font-style:italic;
 
+
 
+                color:red;
 
+
 
+
 
+            文本  
+                文本水平对齐
 
+                text-align:left|center|right;
 
+                文本垂直对齐 
+                line-height:高;
 
+                文本修饰
 
+                text-decoration:underline 下划线|line-through 中划线|none没有
 
+                文本缩进
 
+                text-indent:20;
 
+
 
+            ul相关
 
+                list-style:none;
 
+            input相关 外
 
+                outline:none;
 
+
 
+            专题：
 
+            浮动
 
+                float:left|right|none
 
+                浮动元素特点: 脱离文档流 空间释放
 
+
 
+                问题：塌陷问题 子元素浮动，脱离文档流 空间释放那个，导致父元素没有高度的问题
 
+
 
+                解决问题： 清除浮动的几种方式？
 
+                1 给父元素添加一个高度
 
+                2 给父元素添加一个overflow:hidden;
 
+                3 在浮动元素下边 添加一个块元素 clear：both
 
+                4 定义clearfix 的类
 
+                 .clearfix::after{
 
+                    content:'';
 
+                    display: block;
 
+                    clear: both;
 
+                }
 
+
 
+            框模型
 
+                
+
 
+
 
+
 
+            定位
 
+
 
+            
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+    
+    
+    -->
 
+    <div id="div1">1</div>
 
+    <div  class="aa">2</div>
 
+    <div  class="aa">3</div> 
+    <div  class="aa">4</div> 
+    <div></div>
 
+
 
+    <ul id="ul1">
 
+        <li>5</li>
 
+        <li>
 
+            6
 
+            <ul>
 
+                <li>6-1</li>
 
+            </ul>
 
+        </li>
 
+        <li>7</li>
 
+
 
+    </ul>
 
+    <ul id="ul2">
 
+        <li>8</li>
 
+        <li>9</li>
 
+        <li>10</li>
 
+
 
+    </ul>
 
+    <a href="#">aaa</a>
 
+
 
+    <div id="div5" >
 
+        ahahhahah
 
+    </div>
 
+
 
+    <div id="div6" class="bb" >
 
+        qqqqqqqqqqq
 
+    </div>
 
+
 
+<!--
 
+     .div1 .div2 。。。。。。.div11{
 
+
 
+    } 
+    #ee{
 
+
 
+    }
 
+-->
 
+    <div class="div1">
 
+        <div class="div2">
 
+            <div class="div3">
 
+                <div class="div4">
 
+                    <div class="div5">
 
+                        <div class="div6">
 
+                            <div class="div7">
 
+                                <div class="div8">
 
+                                    <div class="div9">
 
+                                        <div class="div10">
 
+                                            <div class="div11" id="ee">
 
+                                                aaa
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>  
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <input type="text">
 
+    
+</body>
 
+</html>

+ 44 - 0
2_CSS/14_框模型.html
View File 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>盒模型</title>
 
+    <style>
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            /*内边距 内容和边之前的空隙   */
 
+            /* padding:20px; */
 
+            /* 上 右 下 左 */
 
+            padding: 20px 30px 40px 50px;
 
+            /* 上下  左右 */
 
+            padding:20px 50px ;
 
+
 
+            padding: 20px 30px 40px ;
 
+
 
+            padding-top:20px;
 
+            padding-left:50px;
 
+            padding-right:30px;
 
+            padding-bottom:40px;
 
+
 
+            /* 边框 粗|细  实线solid|虚线dashed  颜色 */
 
+            border:10px solid #000;
 
+
 
+            /* 外边距 边框以外的距离  */
 
+            margin:50px;
 
+
 
+
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="div1">哈哈哈哈哈哈哈哈哈</div>
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

+ 47 - 0
2_CSS/15_两种盒模型.html
View File 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: green;
 
+            padding: 20px;
 
+            border:10px solid #000;
 
+   
+
 
+            /* css3中 语法 border-box怪异盒模型|content-box标准盒模型 */
 
+            box-sizing: border-box;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 盒模型
 
+
 
+        内容+padding+border+margin组成
 
+    
+        标准盒模型 
+            width:200px; 内容的宽高
 
+            元素占的宽度 =  内容的宽度(200)+padding+border
 
+
 
+        怪异盒模型 （ie6以及ie6以下版本的浏览器中，当我们不写doctype的时候会表现出怪异盒模型 ）
 
+            width:200px; 元素所占的宽度
 
+            元素占的宽度(200px) = 内容 + padding + border
 
+
 
+
 
+        两种盒模型的转化 
+            box-sizing:border-box 怪异盒模型|content-box标准盒模型
 
+
 
+        
+        
+    -->
 
+    <div id="div1">
 
+
 
+    </div>
 
+</body>
 
+</html>

+ 47 - 0
2_CSS/15_两种盒模型例子.html
View File 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: green;
 
+            padding:20px;
 
+            border:10px solid #000;
 
+        }
 
+
 
+        .content{
 
+            width: 1200px;
 
+            background: #CCC;
 
+            height: 370px;
 
+        }
 
+       .content div{
 
+            width: 290px;
 
+            height: 370px;
 
+            background: red;
 
+            float: left;
 
+            margin:0 5px;
 
+            /* padding: 0 15px; */
 
+            box-sizing: border-box;
 
+            padding: 0 15px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <div id="div1"></div> -->
 
+    <div class="content">
 
+        <div>
 
+            <h2>京东超市</h2>
 
+            <p>华为（HUAWEI）nova7 se 5G 手机【6期免息/30天价保/质保2年】 绮境森林 全网通8GB+128GB</p>
 
+        </div>
 
+        <div></div>
 
+        <div></div>
 
+        <div></div>
 
+    </div>
 
+    
+</body>
 
+</html>

+ 54 - 0
2_CSS/16_margin 居中.html
View File 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #div1{
 
+            height: 50px;
 
+            background: #00f;
 
+        }
 
+        ul{
 
+            background: #0f0;
 
+            list-style: none;
 
+        }
 
+        li{
 
+            background: #f00;
 
+        }
 
+
 
+        /* body{
 
+            margin:0;
 
+        }
 
+        ul{
 
+            padding-left: 0;
 
+        } */
 
+        /* 通配符 选择所有标签*/
 
+        *{
 
+            margin:0;
 
+            padding: 0;
 
+        }
 
+
 
+        #div3{
 
+            width: 1200px;
 
+            height:100px;
 
+            background: palevioletred;
 
+            /* margin-left:120px; */
 
+            /* 固定宽度的块级元素 水平居中 上线 0   左右自适应 */
 
+            margin:0 auto;
 
+        }
 
+
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <div id="div1"></div>
 
+    <ul>
 
+        <li>11</li>
 
+        <li>22</li>
 
+    </ul> -->
 
+    <!-- 宽度1200 高100 左右居中  -->
 
+    <div id="div3"></div>
 
+</body>
 
+</html>

+ 32 - 0
2_CSS/1_css的使用.html
View File 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 内部样式  一般简单的例子或者简单的页面-->
 
+    <style>
 
+        /* 通过div标签名 取到元素  */
 
+        div{
 
+            background: green;
 
+        }
 
+    </style>
 
+
 
+    <!-- 外部样式 一般写项目的时候会用到 通过link标签引入 -->
 
+    <link rel="stylesheet" href="1_style.css">
 
+ 
+
 
+</head>
 
+<body>
 
+    
+    <!-- 内联样式 不推荐-->
 
+    <!-- <div style="background: red; ">哈哈哈哈哈哈</div> -->
 
+    
+    <!-- <div>呵呵呵呵呵呵呵</div> -->
 
+
 
+    <div>嘻嘻嘻嘻嘻嘻嘻嘻嘻</div>
 
+
 
+       
+</body>
 
+</html>

+ 3 - 0
2_CSS/1_style.css
View File 

@@ -0,0 +1,3 @@
 
+div{
 
+    background: blue;
 
+}

+ 88 - 0
2_CSS/2_选择器.html
View File 

@@ -0,0 +1,88 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 标签选择器 */
 
+        /* div{
 
+            background: red;
 
+        } */
 
+     
+        /* id选择器 */
 
+        #div1{
 
+            background: purple;
 
+        }
 
+
 
+        /* li{
 
+            background: yellow;
 
+        } */
 
+
 
+        /* class 选择器|类选择器   选中多个 ，一类1 3黄色 */
 
+        /* .list1{
 
+            background: yellow;
 
+        }
 
+        .list2{
 
+            background: green;
 
+        } */
 
+
 
+        /* 后代选择器  找id为ul1 中所有class名为list1的元素  */
 
+        #ul1 .list1{
 
+            border:1px solid #000;
 
+        }
 
+
 
+        /* 子代选择器 */
 
+        /* #ul1 > .list1{
 
+            border:1px solid #000;
 
+        } */
 
+
 
+
 
+        /* 伪类选择器 :hover鼠标划入  */
 
+        a:hover{
 
+            background: red;
 
+        }
 
+        /* 群组选择器  */
 
+        #ul1,#div1{
 
+            background: red;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- id 一个页面中id 是唯一的标识 -->
 
+    <div id="div1">哈哈哈哈哈</div>
 
+    <div>呵呵呵呵呵呵呵</div>
 
+
 
+    <!-- class 一类 -->
 
+    <ul id="ul1">
 
+        <li class="list1">
 
+            1111
 
+            <ul>
 
+                <li class="list1">aaaa</li>
 
+                <li>bbbb</li>
 
+            </ul>
 
+        </li>
 
+        <li class="list2">222</li>
 
+        <li class="list1">333</li>
 
+        <li class="list2">444</li>
 
+    </ul>
 
+
 
+    <ul id="ul2">
 
+        <li class="list1">1111</li>
 
+        <li class="list2">222</li>
 
+        <li class="list1">333</li>
 
+        <li class="list2">444</li>
 
+    </ul>
 
+
 
+    <a href="#">hhahah </a>
 
+
 
+
 
+
 
+
 
+    
+
 
+
 
+</body>
 
+</html>

+ 49 - 0
2_CSS/3_基础样式-背景.html
View File 

@@ -0,0 +1,49 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+
 
+        /* 宽高 */
 
+
 
+
 
+
 
+        /* 背景 */
 
+        #div1{
 
+            /* 宽 度 */
 
+            width:1000px;
 
+            height:600px;
 
+
 
+            /* 背景 复合属性 */
 
+            /* background: red; */
 
+            background-color: red;
 
+            /* 背景图片  url(路径) */
 
+            background-image: url(images/img02.jpeg);
 
+            /* 背景图片重复 默认 repeat重复|no-reapeat 不重复 */
 
+            background-repeat:no-repeat ;
 
+            /* 背景图片位置 默认是0 0  第一个值水平 第二个值垂直
 
+                水平 left center right
 
+                垂直 top center bottom
 
+            */
 
+            background-position:center center;
 
+
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="div1">
 
+
 
+    </div>
 
+
 
+
 
+
 
+
 
+
 
+   
+
 
+</body>
 
+</html>

+ 97 - 0
2_CSS/4_复习.html
View File 

@@ -0,0 +1,97 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+
 
+</head>
 
+<body>
 
+    <!-- 基础标签 -->
 
+    <!-- 标题 -->
 
+    <h1>标题</h1>
 
+    <p> 我是一段文字</p>
 
+    <!-- 图片 -->
 
+    <img src="images/img02.jpeg" alt="我是一个图片">
 
+    <!-- 超链接 -->
 
+    <a href="http://www.baidu.com">百度</a>
 
+    <!-- 无序列表 -->
 
+    <ul>
 
+        <li>1111</li>
 
+        <li>2222</li>
 
+        <li>333</li>
 
+    </ul>
 
+
 
+    <!-- div 区块 -->
 
+    <div>
 
+        <!-- stong 加粗 -->
 
+        我<strong>是</strong><i>div</i>
 
+    </div>
 
+
 
+    <span>我是span</span><br>
 
+    <span>我是span</span>
 
+    
+    <hr>
 
+    <!-- 加粗切重点 -->
 
+    <b>加粗</b>
 
+
 
+    <!-- 表格 -->
 
+    <table border="1" cellspacing="0" cellpadding="10">
 
+        <tr>
 
+            <td>姓名</td>
 
+            <td>学校</td>
 
+        </tr>
 
+        <tr>
 
+            <td>张三</td>
 
+            <td>xx</td>
 
+        </tr>
 
+    </table>
 
+
 
+    <!-- 表单 -->
 
+    <form action="xx">
 
+        <!-- 文本框 -->
 
+        <input type="text" >
 
+        <!-- 密码框 -->
 
+        <input type="password">
 
+        <!-- 单选框 -->
 
+
 
+        <input type="radio" name="sex">男
 
+        <input type="radio" name="sex">女
 
+
 
+        <!-- 复选框 -->
 
+        <input type="checkbox" name="hobby">吃饭
 
+        <input type="checkbox" name="hobby">睡觉
 
+        <input type="checkbox" name="hobby">敲代码
 
+        <!-- 下拉框 -->
 
+
 
+        <select>
 
+            <option value="1">理工</option>
 
+            <option value="2">黑大</option>
 
+            <option value="3">黑工程</option>
 
+        </select>
 
+
 
+        <textarea name="" id="" cols="30" rows="10"></textarea>
 
+
 
+
 
+        <input type="button" value="按钮">
 
+        <input type="submit">
 
+        <input type="reset">
 
+
 
+
 
+        
+
 
+
 
+
 
+
 
+    </form>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

+ 53 - 0
2_CSS/5_基础样式-文本字体.html
View File 

@@ -0,0 +1,53 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        div{
 
+
 
+            width: 300px;
 
+            height: 50px;
 
+            background: #ccc;
 
+            /* 字体相关属性 */
 
+            font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
 
+            /* 字体大小 浏览器默认字体大小是16px  浏览器能支持的最小 12px */
 
+            font-size: 16px;
 
+            /* 字体粗细 100-900 没有单位  400|normal 默认值   700|bold  900|bolder */
 
+            font-weight:900 ;
 
+            /* 字体风格 italic 斜体|normal 正常 默认值*/
 
+            font-style: italic;
 
+
 
+            color:red;
 
+
 
+
 
+            /* 文本相关属性 */
 
+            /* 文本水平对齐 left 左|center中|right右 */
 
+            text-align: center;
 
+
 
+            /* 垂直对齐方式 行高=高 */
 
+            line-height: 50px;
 
+            /* 文本修饰 underline下划线 | line-through中划线|none没有 默认值 */
 
+            text-decoration: none;            
+            
+            /* 文本缩进 */
 
+            text-indent: 20px;
 
+        }
 
+        /* a标签 自带下划线 ； 可以通过 text-decoration: none 去掉*/
 
+        a{
 
+            text-decoration: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    
+    <div>
 
+        我是一个div 哈哈哈 
+    </div>
 
+    我是一个div 哈哈哈 
+
 
+    <a href="#">amjahhaj</a>
 
+</body>
 
+</html>

+ 40 - 0
2_CSS/6_菜单.html
View File 

@@ -0,0 +1,40 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        a{
 
+
 
+            width:94px;
 
+            height:33px;
 
+            background: #bebebe;
 
+
 
+            display: inline-block;
 
+
 
+            /* 居中 */
 
+            text-align: center;
 
+            line-height: 33px;
 
+
 
+            color: #fff;
 
+            font-family:  PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体;
 
+            font-size: 14px;
 
+            font-weight: 700;
 
+
 
+            text-decoration: none;
 
+
 
+
 
+        }
 
+        a:hover{
 
+            background: pink;
 
+        }
 
+
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <a href="#">HOME</a><a href="#">NEWS</a><a href="#">ARTICLES</a><a href="#">FORUM</a><a href="#">CONTACT</a><a href="#">ABOUT</a>
 
+</body>
 
+</html>

+ 56 - 0
2_CSS/7_基础样式-display.html
View File 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* div{
 
+            background: red;
 
+            width:200px;
 
+            height: 200px;
 
+        }
 
+        span{
 
+            background: green;
 
+            width: 200px;
 
+            height: 200px;
 
+        } */
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            display: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <div>哈哈</div>
 
+
 
+    <span>哈哈</span>
 
+    <span>哈哈</span>
 
+
 
+
 
+    <!-- 
+
 
+        元素 display: 
+            block:块级元素  自己占一行  可以设置宽高
 
+                div p  ul li table 
+
 
+            inline:行级元素  多个占一行  不可以设置宽高
 
+                span a i strong 
+
 
+            inline-block :行级块元素  即可以多个占一行  又可以设置宽高 
+                input  img 
+
 
+            none : 隐藏
 
+
 
+            
+     -->
 
+
 
+     <div id="div1">
 
+
 
+     </div>
 
+</body>
 
+</html>

+ 47 - 0
2_CSS/8_inline-block元素中间空隙.html
View File 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        body{
 
+            /* font-size: 0; */
 
+            color:#f00
 
+        }
 
+        a{
 
+            display: inline-block;
 
+            width: 94px;
 
+            height: 33px;
 
+            background: #ccc;
 
+            font-size: 16px;
 
+            color:green;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    hahha 
+    <div>哈哈哈</div>
 
+    <a href="#">HOME</a>
 
+    <a href="#">NEWS</a>
 
+    <a href="#">ARTICLES</a>
 
+    <a href="#">FORUM</a>
 
+    <a href="#">CONTACT</a>
 
+    <a href="#">ABOUT</a>
 
+    <!-- 
+
 
+        
+
 
+        1、inline-block元素之间空间 空隙怎么生成的原因？
 
+            回车+空格导致
 
+        2、inline-block元素之间空间 解决？
 
+            去掉回车+空格
 
+            将回车+空格注释掉
 
+            通过设置字体大小为0
 
+        
+        3、css中 有些属性是可以继承的，比如说字体相关 文本相关  列表
 
+     -->
 
+    
+</body>
 
+</html>

+ 31 - 0
2_CSS/9_基础样式-列表outline.html
View File 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 列表样式 */
 
+        ul{
 
+            /* 去掉ul的点 */
 
+            list-style: none;
 
+        }
 
+        /* input样式  */
 
+            /* 获取焦点的时候得蓝色的框 */
 
+        input{
 
+            outline: none;
 
+        }
 
+    </style>
 
+
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li>111</li>
 
+        <li>111</li>
 
+    </ul>
 
+
 
+    <input type="text">
 
+
 
+</body>
 
+</html>

BIN
2_CSS/images/.DS_Store
View File


BIN
2_CSS/images/img01.jpeg
View File


BIN
2_CSS/images/img02.jpeg
View File


BIN
2_baotu/.DS_Store
View File


+ 16 - 0
2_baotu/css/common.css
View File 

@@ -0,0 +1,16 @@
 
+/* 样式重置和公共样式 */
 
+body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
 
+body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
 
+h1,h2,h3,h4,h5,h6{font-size:100%;}
 
+address,cite,dfn,em,var{font-style:normal;}
 
+code,kbd,pre,samp{font-family:courier new,courier,monospace;}
 
+small{font-size:12px;}
 
+ul,ol{list-style:none;}
 
+a{text-decoration:none;}
 
+/* a:hover{text-decoration:underline;} */
 
+sup{vertical-align:text-top;}
 
+sub{vertical-align:text-bottom;}
 
+legend{color:#000;}
 
+fieldset,img{border:0;}
 
+button,input,select,textarea{font-size:100%;}
 
+table{border-collapse:collapse;border-spacing:0;}

+ 51 - 0
2_baotu/css/index.css
View File 

@@ -0,0 +1,51 @@
 
+/* 页面级css */
 
+.nav{
 
+    height: 35px;
 
+    background: #EEEEEE ;
 
+}
 
+.nav-center{
 
+    width: 1199px;
 
+    height: 35px;
 
+    /* background: #f00; */
 
+    margin:0 auto;
 
+    line-height: 35px;
 
+}
 
+.nav-left{
 
+    float: left;
 
+}
 
+.nav-right{
 
+    float: right;
 
+}
 
+.nav-center a{
 
+    color: #888888 ;
 
+}
 
+.welcome{
 
+    margin-right:20px;
 
+}
 
+.nav .active{
 
+    color: #6F26BD;
 
+}
 
+.nav-center span{
 
+    color: #888888 ;
 
+}
 
+#header{
 
+    width: 1199px;
 
+    margin:0 auto;
 
+    height: 151px;
 
+    background: red;
 
+}
 
+.logo-box,.search-box,.cart-box{
 
+    float: left;
 
+}
 
+.logo-box img{
 
+    margin-top:44px;
 
+}
 
+.search-box{
 
+    width: 536px;
 
+    background: #6F26BD ;
 
+    margin-top:43px;
 
+    margin-left:123px;
 
+}
 
+.cart-box{
 
+    margin:56px 0 0 52px;
 
+}

BIN
2_baotu/images/.DS_Store
View File


BIN
2_baotu/images/logo.png
View File


+ 57 - 0
2_baotu/index.html
View File 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="css/common.css">
 
+    <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+    <!-- 通栏显示背景灰色 -->
 
+    <div class="nav">
 
+        <!-- 宽度1199 居中 -->
 
+        <div class="nav-center">
 
+            <!-- 左边 -->
 
+            <div class="nav-left">
 
+                <a href="#" class="welcome">您好，欢迎进入包图购物网</a>
 
+                <a href="#">登录</a>
 
+                <span>|</span>
 
+                <a href="#" class="active">注册</a>
 
+            </div>
 
+            <!-- 右边 -->
 
+            <div class="nav-right">
 
+                <a href="#">设为首页 ☆</a>
 
+                <span>|</span>
 
+                <a href="#" class="active">加入收藏</a>
 
+                <span>|</span>
 
+                <a href="#"> 客户服务 </a>
 
+                <span>|</span>
 
+                <a href="#">关注官方微博：</a>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <!-- header头部开始 -->
 
+    <div id="header">
 
+        <!-- 左边logo -->
 
+        <div class="logo-box">
 
+            <img src="images/logo.png" alt="">
 
+        </div>
 
+        <!-- 中间搜索 -->
 
+        <div class="search-box">
 
+            <input type="text">
 
+        </div>
 
+        <!-- 右边购物车 -->
 
+        <div class="cart-box">
 
+            购物车
 
+        </div>
 
+    </div>
 
+
 
+
 
+
 
+
 
+    
+</body>
 
+</html>

+ 56 - 0
3_JS/10_分支判断.html
View File 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a = 8;
 
+    var b = 7;
 
+    // if(a>b){
 
+    //   alert('你算对了')
 
+    // } else {
 
+    //   alert('你算错了')
 
+    // }
 
+
 
+    // if(a == b){
 
+    //   console.log(a,b)
 
+    // } else if(a < b){
 
+    //   console.log(a)
 
+    // } else {
 
+    //   console.log(b)
 
+    // }
 
+
 
+    switch (b-a) {
 
+      case 1:
 
+      console.log(111)
 
+      break
 
+      case 2:
 
+      console.log(222)
 
+      break
 
+      case 3:
 
+      console.log(333)
 
+      break
 
+      default:
 
+      console.log('none')
 
+      break
 
+    }
 
+
 
+    /* 
+    switch (判断条件){
 
+      case 表达式1:
 
+      语句。。。
 
+      break
 
+      case 表达式2: 
+      语句。。。
 
+      default:
 
+      语句。。。
 
+      break
 
+    }
 
+    */
 
+  </script>
 
+</body>
 
+</html>

+ 40 - 0
3_JS/11_小例子.html
View File 

@@ -0,0 +1,40 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    /* 
+    使用window.prompt可以弹出包含输入框的窗口，用户输入的内容将是此函数的返回值
 
+          年份  判断 是不是闰年 如果是 返回一个 我是闰年  如果不是 返回一个  我不是闰年
 
+          要求：年份是4的倍数，且不是100的倍数的
 
+
 
+    记得要用条件运算符！！！
 
+    */
 
+    // var  year = window.prompt('请输入年份')
 
+    // if(year % 4 == 0 && year % 100 != 0){
 
+    //   alert('我是闰年')
 
+    // } else {
 
+    //   alert('我不是闰年')
 
+    // }
 
+    /* 
+    输入分数  分数在90-100之间  弹出为很优秀(包含90)
 
+    分数在 60-90之间 弹出为合格
 
+    分数小于60  弹出为挂科
 
+    */
 
+
 
+    var num = window.prompt('请输入分数')
 
+    if(num <= 100 && num >= 90){
 
+      alert('很优秀')
 
+    } else if(num <90 && num>=60){
 
+      alert('及格')
 
+    } else {
 
+      alert('不合格')
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 35 - 0
3_JS/12_循环语句.html
View File 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a = 8;
 
+    // for(var i=0;i<a;i++){
 
+    //   console.log('i当前的值为'+ i)
 
+    // }
 
+
 
+
 
+    // for(var i=0;i<6;i++){
 
+    //   console.log(i)
 
+    //   for(var j=0;j<6;j++){
 
+    //     console.log('j当前的值为'+ j)
 
+    //   }
 
+    // }
 
+
 
+    //条件符合  会一直执行内容
 
+    // while(a<9){
 
+    //   console.log(1)
 
+    // }
 
+    
+    /* 不管条件是否正确  都执行一次内容 */
 
+    do{
 
+      console.log(1)
 
+    }while(a<6)
 
+  </script>
 
+</body>
 
+</html>

+ 50 - 0
3_JS/13_函数.html
View File 

@@ -0,0 +1,50 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    // function fn1(){
 
+    //   console.log('hahahhahahhah')
 
+    // }
 
+    // fn1()
 
+    // /* 
+    // js函数 通过 function  关键词 进行定义 后面是 函数名和()
 
+    // 函数名可以包含字母、数字、下划线、$(规则和变量名称相同)
 
+    // 圆括号可以包括由逗号分隔的参数
 
+    // */
 
+    // /* 括号内接收参数 */
 
+    // function jiafa(a,b){
 
+    //   console.log(a+b)
 
+    // }
 
+    // /* 调用方法的时候 传递参数 */
 
+    // jiafa(10,20)
 
+
 
+
 
+
 
+    // var a =123;//全局变量
 
+    // function fn2(){
 
+    //   var b = 456// 局部变量
 
+    //   console.log(a,b) //123  456
 
+    // }
 
+    // fn2()
 
+    // console.log(a,b) // b is not defined
 
+    //全局变量 在任何地方都可以调用  但是局部变量 只能在局部使用
 
+
 
+
 
+    //例子： 在函数里面 写一个计算三角行的面积  要求输入宽高  自动计算面积  弹出内容拼接 三角形面积为xx
 
+
 
+    function area(){
 
+      var a = window.prompt('请输入底')
 
+      var b = window.prompt('请输入高')
 
+      var c = a*b/2
 
+      alert('三角形面积为' + c)
 
+    }
 
+    area()
 
+  </script>
 
+</body>
 
+</html>

+ 36 - 0
3_JS/14_数组.html
View File 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    /* 
+    索引  0  1 。。。
 
+    数值  1  2 。。。
 
+    length  数组的长度
 
+    */
 
+    // var a = [1,2,3,4,5]
 
+    // console.log(a)
 
+    // /* 数组中可以保存任意类型的数据 */
 
+    // var b = [111,true,'hahahahahha ']
 
+    // console.log(b)
 
+
 
+    /* 先创建一个空数组   然后进行赋值 */
 
+    /* 如果在括号内写上长度  那么就算数据不足数组的长度  数组长度也为输入的值  其他位置为empty*/
 
+    var c = new Array(5)
 
+    c[0] = 'hahhahah'
 
+    c[1] = 'xixixi'
 
+    c[2] = 'hehehhe'
 
+    console.log(c)
 
+
 
+
 
+    for(var i=0;i<c.length;i++){
 
+      console.log(c[i])
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 43 - 0
3_JS/15_对象.html
View File 

@@ -0,0 +1,43 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    // var person = {
 
+    //   name: 'zs',
 
+    //   age: 18
 
+    // }
 
+    // console.log(person.age)
 
+
 
+
 
+    var computer = new Object()
 
+    //对象.属性名 = 属性值
 
+    computer.cpu = 'i9-12'
 
+    computer.xianka = '4090'
 
+    computer.neicun = 'sanixng'
 
+    console.log(computer)
 
+
 
+
 
+    var person = new Array()
 
+    person[0] = 18
 
+    person[1] = 'zs'
 
+    console.log(person)
 
+
 
+
 
+    console.log(typeof person)  //数组  还是对象   数据类型都为object
 
+    console.log(typeof computer)
 
+
 
+
 
+    var x = new String()  //把x声明为string对象
 
+    var y = new Number()  //把y声明为number对象
 
+    var z = new Boolean() //把z声明为boolean对象
 
+
 
+    /* 尽量避免字符串、数值、逻辑对象  他们会增加代码的复杂性 并且降低执行速度 */
 
+  </script>
 
+</body>
 
+</html>

+ 37 - 0
3_JS/16_基本数据类型和引用数据类型.html
View File 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    /* 
+    基本数据类型:  number string boolean null undefined
 
+    引用数据类型:  object
 
+    */
 
+
 
+    var a = 123;
 
+    var b = a;
 
+    a = 111;
 
+    console.log(a,b)
 
+
 
+
 
+    var c = {
 
+      name:'zs',
 
+      age: 18
 
+    }
 
+    var d = c
 
+    c.name = 'lisi'
 
+    console.log(c,d)
 
+
 
+
 
+    var e = [0,1,2,3,4]
 
+    var f = e
 
+    e[0] = 99
 
+    console.log(e,f)
 
+  </script>
 
+</body>
 
+</html>

+ 93 - 0
3_JS/17_数组的方法.html
View File 

@@ -0,0 +1,93 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    /* 把数组转化为字符串
 
+    toString() 把数组转换为数组值(逗号分隔)的字符串
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    console.log(fruits.toString()) */
 
+
 
+    /* push()方法(在数组结尾处)向数组添加一个新的元素
 
+    返回新数组的长度
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    fruits.push('mango')
 
+    console.log(fruits) */
 
+
 
+    /* join()方法也可以将所有数组元素结合为一个字符串
 
+    行为类似toString()  但是可以自己设置分隔符 默认为,
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    console.log(fruits.join()) */
 
+
 
+    /* pop()方法从数组中删除最后一个元素
 
+    pop()方法返回被删除的值
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    var a = fruits.pop()
 
+    console.log(a) */
 
+
 
+    /* shift()方法会删除首个数组元素，并且元素往前串
 
+    shift()方法返回被删除的值
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    // fruits.shift()
 
+    var a = fruits.shift()
 
+    console.log(a) */
 
+
 
+    /* unshift()方法在开头像数组添加新元素  并且其他元素向后串
 
+    unshift() 返回新数组的长度
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    fruits.unshift('mango')
 
+    console.log(fruits) */
 
+
 
+    /* length 属性 提供了向数组添加新元素的方法  添加在数组结尾
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    fruits[fruits.length] = 'mango'
 
+    console.log(fruits) */
 
+
 
+    /* 使用Delete方法 会在数组留下未定义的空  建议使用pop() and  shift()取代
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    delete fruits[1]
 
+    console.log(fruits) */
 
+
 
+    /* 第一个参数(2) 定义了应该添加新元素的位置
 
+    第二个参数(0) 定义应该删除多少元素
 
+    添加的元素
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    fruits.splice(2,0,'mango','kiwi')
 
+    console.log(fruits) */
 
+
 
+    /* var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    fruits.splice(0,1)
 
+    console.log(fruits) */
 
+
 
+    /* concat()方法 通过合并现有的数组 来返回一个新数组
 
+    不会更改原先的数组  返回的是一个新数组
 
+    var myBoys = ['xiaoming','xiaoqiang']
 
+    var myGirls = ['xiaohong','xiaohua']
 
+    var myChildren = myBoys.concat(myGirls)
 
+    console.log(myChildren)
 
+    console.log(myBoys) */
 
+
 
+    /* slice()方法去创建新数组  不会从原数组中删除任何元素
 
+    var fruits = ['banana','orange','apple']
 
+    console.log(fruits)
 
+    var aaa = fruits.slice(1)
 
+    console.log(aaa)
 
+    console.log(fruits) */
 
+  </script>
 
+</body>
 
+</html>

+ 93 - 0
3_JS/18_字符串的方法.html
View File 

@@ -0,0 +1,93 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    /* length属性 返回字符串的长度
 
+    var text = 'asdasdasdasdasdasdasd'
 
+    var a = text.length
 
+    console.log(a) */
 
+
 
+    /* indexOf()方法 返回字符串中指定文本首次出现的索引位置
 
+    var str = "my name is xiaoming,I'm from china, is "
 
+    var a = str.indexOf('china')
 
+    console.log(a) */
 
+
 
+    /* lastIndexOf()方法  返回指定文本最后一次出现的索引
 
+    var str = "my name is xiaoming,I'm from china, is "
 
+    var a = str.lastIndexOf('is')
 
+    console.log(a) */
 
+
 
+    /* var str = "my name is xiaoming,I'm from china, is xiaoming"
 
+    var a = str.search('xiaoming')
 
+    console.log(a) */
 
+
 
+    /* var str = "my name is xiaoming,I'm from china, is xiaoming"
 
+    var a = str.indexOf('xiaoming',20)
 
+    console.log(a) */
 
+
 
+    /* slice()方法 提取字符串中某个部分  新的字符串中返回被提取的部分
 
+    var str = 'apple, banana, orange'
 
+    var a = str.slice(7,13)
 
+    console.log(a)
 
+    console.log(str) */
 
+
 
+    /* 参数为负数的时候  从字符串结尾开始倒数
 
+    var str = 'apple, banana, orange'
 
+    var a = str.slice(-13,-7)
 
+    console.log(a) */
 
+
 
+    /* substring() 方法 类似于slice()
 
+    但是  substring()不能接收负的索引
 
+    var str = 'apple, banana, orange'
 
+    var a = str.substring(7,13)
 
+    console.log(a) */
 
+
 
+    /* substr() 第一个参数 为起始索引
 
+    第二个参数 为裁剪的长度
 
+    var str = 'apple, banana, orange'
 
+    var a = str.substr(7,6)
 
+    console.log(a) */
 
+
 
+    /* replace()方法用于另一个值替换在字符串中指定的值
 
+    默认的  replace()只替换首个匹配
 
+    var str = 'please sit down'
 
+    var a = str.replace('please','Please')
 
+    console.log(a) */
 
+
 
+    /* toUpperCase() 把字符串转化为大写
 
+    var str = 'hello word'
 
+    var a = str.toUpperCase()
 
+    console.log(a) */
 
+
 
+    /* toLowerCase()把字符串转化为小写
 
+    var str = 'HELLO WORD'
 
+    var a = str.toLowerCase()
 
+    console.log(a) */
 
+
 
+    /* concat()用于连接
 
+    var a = 'hello'
 
+    var b = 'word'
 
+    c = a.concat(" ",b)
 
+    console.log(c) */
 
+
 
+    /* trim()方法 删除字符串两端的空白符
 
+    var str = '                  hello     word!                ';
 
+    alert(str.trim()) */
 
+
 
+    /* charAt()返回字符串中指定位置的字符串
 
+    var str = 'HELLO WORD'
 
+    var a = str.charAt(0)
 
+    console.log(a) */
 
+
 
+    /* split()方法 可以将字符串转为数组
 
+    var text = 'a,b,c,d,e,f'
 
+    console.log(text.split(",")) */
 
+  </script>
 
+</body>
 
+</html>

+ 19 - 0
3_JS/19_日期.html
View File 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    //Date 采取的是时间戳的形式 表示时间  所谓的时间戳就是指  从1970年1月1日0时0分0秒 开始经过毫秒来计算的时间
 
+    var a = new Date()
 
+    console.log(a.getTime())
 
+    console.log(a.getFullYear())
 
+    console.log(a.getMonth())
 
+    //getMonth() 以数字(0-11)返回日历的月份
 
+  </script>
 
+</body>
 
+</html>

+ 25 - 0
3_JS/1_test.html
View File 

@@ -0,0 +1,25 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      background: red;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    我是div
 
+  </div>
 
+  <!-- <script>
 
+    alert('欢迎使用JavaScript')
 
+    alert('哈哈哈')
 
+  </script> -->
 
+
 
+  <script src="1_test.js"></script>
 
+</body>
 
+</html>

+ 1 - 0
3_JS/1_test.js
View File 

@@ -0,0 +1 @@
 
+alert('我是js')

+ 32 - 0
3_JS/2_变量.html
View File 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a;//创建了一个变量    通过var 关键词
 
+    a = 123;//变量赋值
 
+    console.log(a)
 
+
 
+    // var $a;
 
+    // $a = 666;
 
+    // console.log($a)
 
+
 
+    var aZ  = 123;//简化
 
+    var az = 999;
 
+    console.log(aZ)
 
+    console.log(az)
 
+    
+    /* 
+      1、变量名称只能以字母、数字、下划线_、$作为变量名称
 
+      2、变量必须以字母、下划线、$作为开头
 
+      3、变量不能以关键词为名称
 
+      4、变量区分大小写
 
+    */
 
+  </script>
 
+</body>
 
+</html>

+ 37 - 0
3_JS/3_数据类型.html
View File 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a = 123;//数字 Number
 
+    console.log(a)
 
+
 
+    var b = '小明xxxx123!@#$%%';// 字符串 String   里面可以写任意内容
 
+    console.log(b)
 
+
 
+    var c = true;//布尔值  Boolean  只有两个值  一个是true  一个是false
 
+    console.log(c)
 
+
 
+    var d = '123'
 
+    console.log(d)
 
+
 
+    var e;//undefined   能找到变量名称  但是没有值
 
+    console.log(e)
 
+
 
+    //typeof 是检测一个变量的数据类型
 
+    console.log(typeof a)//number 
+    console.log(typeof b)//string
 
+    console.log(typeof c)//boolean
 
+    console.log(typeof e)//undefined
 
+
 
+
 
+    a = 'hahaha';
 
+    console.log(a)
 
+  </script>
 
+</body>
 
+</html>

+ 28 - 0
3_JS/4_小练习.html
View File 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a = 666;
 
+    var c = 777;
 
+    var h = 'true';
 
+    var b = false;
 
+    console.log(a)//666
 
+    console.log(b)//false
 
+
 
+    console.log(typeof b)//boolean
 
+    b = '123';
 
+    c = '666';
 
+    console.log(b)//'123'
 
+    console.log(c)//'666'
 
+    console.log(typeof b)//string   string boolean  
+    console.log(typeof a)//number
 
+
 
+  </script>
 
+</body>
 
+</html>

+ 70 - 0
3_JS/5_运算.html
View File 

@@ -0,0 +1,70 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    // var a = 1;
 
+    // var b = 2;
 
+    // console.log(a+b) // 3
 
+    // console.log(a-b) //-1
 
+    // console.log(a*b-c)//not defined
 
+    // console.log(c)// not defined
 
+
 
+    // var c;//undefined
 
+    // console.log(a*b-c) //NaN  运算不下去
 
+
 
+    // var d = a*7 + b;
 
+    // console.log(d)//9
 
+
 
+
 
+    // var a = 1;//number
 
+    // var b = '456';//string
 
+    // console.log(a+b)// 加法 当两种变量数据类型不统一的时候   一个为number 一个为string 默认进行拼接
 
+
 
+    // var c = '哈哈哈哈哈'
 
+    // console.log(b+c)//string 类型相加 默认进行拼接
 
+
 
+
 
+    // var a = 1;
 
+    // var b = true;
 
+    // console.log(a+b)// number + boolean boolean转化为number 类型 true = 1  fasle = 0
 
+
 
+    // var c = 'xxx'
 
+    // console.log(c+b)//string + boolean  进行拼接
 
+
 
+
 
+    // var a = 666;
 
+    // var b = '123';
 
+    // console.log(a-b)//string 参加减法运算 会把里面的内容转化为number类型  进行运算
 
+
 
+    // var c = 'hahahha777'
 
+    // console.log(a-c)//NaN  如果碰到非全数字的string  无法转化  无法参与计算
 
+
 
+    // var d = false;
 
+    // console.log(a-d)//boolean类型  参与减法运算 转化为number  true = 1   false = 0
 
+    
+    // var a = 666;
 
+    // ++a;
 
+    // console.log(a)//667
 
+
 
+    // a++;
 
+    // console.log(a)//668   
+
 
+    // --a;
 
+    // console.log(a)//667
 
+
 
+
 
+
 
+    // var c = 777
 
+    // // console.log(c++)//先输出 后++   输出之后  c = 778
 
+    // // console.log(++c)//先++  后输出  c = 779
 
+    // c++;// 输出  然后++   c = 778
 
+    // console.log(c)
 
+  </script>
 
+</body>
 
+</html>

+ 18 - 0
3_JS/6_运算小练习.html
View File 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a = 111;
 
+    console.log(a++)//111
 
+    a--;
 
+    console.log(++a);//112
 
+    console.log(--a)//111
 
+  </script>
 
+</body>
 
+</html>

+ 42 - 0
3_JS/7_运算2.html
View File 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a = 5;
 
+    // var b = 6;
 
+    // console.log(a<b)//true  
+
 
+    // console.log(a>b)//false
 
+
 
+    // console.log(a<=b)//true 
+
 
+    // 与 或 非
 
+
 
+
 
+    console.log((2<5)||(3>2)) //true
 
+    //逻辑与  只要有一个为false  那么就返回false   当都为true的时候 返回true
 
+    //逻辑或  当两边值都为false 返回false   只要有一个为true  那么返回true
 
+    //逻辑非  相当于取反  和等号一起  可以当作不等于
 
+    console.log(2<5 && 3>5)//fasle
 
+
 
+    console.log(a != 6)//true
 
+    
+
 
+    var c = 5;
 
+    var d = '5';
 
+    // console.log(c=d) //5 
+    console.log(c == d)//true  string里面如果为纯数字 会进行转换 从而进行判断
 
+    console.log(c === d)
 
+    // = 进行赋值 但是不进行判断
 
+    // == 进行判断 但是不判断数据类型
 
+    // ===  进行判断  同时判断数据类型
 
+
 
+  </script>
 
+</body>
 
+</html>

+ 18 - 0
3_JS/8_运算3.html
View File 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a = 4;
 
+    // a>5   a = -a
 
+    // a<5   a = a
 
+    console.log(a>5?-a:a)
 
+    //三目运算符  三元运算符   判断条件? true:false
 
+  </script>
 
+</body>
 
+</html>

+ 20 - 0
3_JS/9_时间的小例子.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    var a = window.prompt('输入你的年龄')
 
+    var b = a*365*24*60*60
 
+    alert('截止到现在共活了'+ b + '秒')
 
+    /* 
+    例如： 输入年龄为1岁
 
+    弹出显示   截止到现在共活了xxx秒
 
+    */
 
+  </script>
 
+</body>
 
+</html>

+ 101 - 0
4_Bom/1_test.html
View File 

@@ -0,0 +1,101 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <button id="btn">往下走</button>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <div>hahahahhahha</div>
 
+  <button id="btn2">往上走</button>
 
+  <script>
 
+    // document.write('bom')
 
+    // window.prompt('请输入',18)
 
+
 
+    var btn = document.getElementById('btn')
 
+    var btn2 = document.getElementById('btn2')
 
+    btn.onclick = function(){
 
+      // scrollTo(0,100)//scrollTo(x,y)  窗体高度为y个像素的位置
 
+      // scrollBy(0,-100) //相对于当前位置
 
+      var a = setInterval(function(){
 
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop //滚动条滚动的距离
 
+        console.log(scrollTop)  
+        if(scrollTop < 482.3999938964844){
 
+          scrollBy(0,30)
 
+        } else{
 
+          clearInterval(a)
 
+        }
 
+      },100)
 
+    }
 
+    btn2.onclick = function(){
 
+      var b = setInterval(function(){
 
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 
+        console.log(scrollTop)
 
+        if(scrollTop > 0){
 
+          scrollBy(0,-30)
 
+        } else {
 
+          clearInterval(b)
 
+          console.log('我到头了')
 
+        }
 
+      },100)
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 20 - 0
4_Bom/2_弹出框.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    // alert() 弹出消息对话框(对话框内有一个消息按钮)
 
+    // confirm() 弹出消息对话框(对话框内有一个确认和取消)
 
+    // prompt()弹出消息对话框 (对话框有一个文本输入框 确认和取消)
 
+
 
+    // alert(123)
 
+    // confirm('123')
 
+    prompt('请输入',18)
 
+  </script>
 
+</body>
 
+</html>

+ 20 - 0
4_Bom/3_history.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <h2>我是首页</h2>
 
+  <a href="test.html">附页</a>
 
+  <button id="btn">返回</button>
 
+  <script>
 
+    var btn = document.getElementById('btn')
 
+    btn.onclick = function(){
 
+      history.forward()
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 37 - 0
4_Bom/4_location.html
View File 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    /* 
+    Location 对象的属性
 
+      hash 设置或返回从井号 (#) 开始的 URL（锚）
 
+      host 设置或返回主机名和当前 URL 的端口号
 
+      hostname 设置或返回当前 URL 的主机名
 
+      href 设置或返回完整的 URL
 
+      pathname 设置或返回当前 URL 的路径部分
 
+      port 设置或返回当前 URL 的端口号
 
+      protocol 设置或返回当前 URL 的协议
 
+      search 设置或返回从问号 (?) 开始的 URL（查询部分）
 
+
 
+      Navigator 对象的属性
 
+        appCodeName 返回浏览器的代码名
 
+        appName 返回浏览器的名称
 
+        appVersion 返回浏览器的平台和版本信息
 
+        browserLanguage 返回当前浏览器的语言
 
+        cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
 
+        cpuClass 返回浏览器系统的 CPU 等级
 
+        onLine 返回指明系统是否处于脱机模式的布尔值
 
+        platform 返回运行浏览器的操作系统平台
 
+        systemLanguage 返回 OS 使用的默认语言
 
+        userAgent 返回由客户机发送服务器的 user-agent 头部的值
 
+        userLanguage 返回 OS 的自然语言设置
 
+    */
 
+  </script>
 
+</body>
 
+</html>

+ 14 - 0
4_Bom/test.html
View File 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <div>hahahaahhah</div>
 
+  <div>红红红红红红红红红</div>
 
+  
+</body>
 
+</html>

BIN
5_Dom/10_放大镜/images/.DS_Store
View File


BIN
5_Dom/10_放大镜/images/1.jpg
View File


BIN
5_Dom/10_放大镜/images/2.jpg
View File


+ 99 - 0
5_Dom/10_放大镜/放大镜.html
View File 

@@ -0,0 +1,99 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #container{
 
+      position: relative;
 
+    }
 
+    #smallBox{
 
+      width: 400px;
 
+      height: 400px;
 
+    }
 
+    #bigBox{
 
+      width: 400px;
 
+      height: 400px;
 
+      position: absolute;
 
+      left: 400px;
 
+      top: 0;     
+      overflow: hidden; 
+      display: none;
 
+    }
 
+    #drag{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: rgba(0,0,0,0.3);
 
+      position: absolute;
 
+      left: 0;
 
+      top: 0;
 
+      display: none;
 
+    }
 
+    #bigBox img{
 
+      position: absolute;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="container"> 
+    <div id="smallBox">
 
+      <img src="images/1.jpg" alt="">
 
+      <div id="drag"></div>
 
+    </div>
 
+    <div id="bigBox">
 
+      <img src="images/2.jpg" alt="" id="bigImg">
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var small = document.getElementById('smallBox')
 
+    var drag = document.getElementById('drag')
 
+    var big = document.getElementById('bigBox')
 
+    var bigImg = document.getElementById('bigImg')
 
+    small.onmouseover = function(){
 
+      drag.style.display = 'block'
 
+      big.style.display = 'block'
 
+    }
 
+    small.onmouseout = function(){
 
+      drag.style.display = 'none'
 
+      big.style.display = 'none'
 
+    }
 
+    small.onmousemove = function(e){
 
+      var smallLeft = e.clientX - drag.offsetWidth / 2
 
+      var smallTop = e.clientY - drag.offsetHeight / 2
 
+      console.log(smallLeft)
 
+      drag.style.left = smallLeft + 'px'
 
+      drag.style.top = smallTop + 'px'
 
+      if(drag.offsetLeft <= 0){
 
+        drag.style.left = 0
 
+      }
 
+      if(drag.offsetTop <=0){
 
+        drag.style.top = 0
 
+      }
 
+      var xLeft = small.offsetWidth - drag.offsetWidth//遮罩层移动的最大宽度
 
+      var xTop = small.offsetHeight - drag.offsetHeight
 
+      if(drag.offsetLeft > xLeft){
 
+        drag.style.left = xLeft + 'px'
 
+      }
 
+      if(drag.offsetTop > xTop){
 
+        drag.style.top = xTop + 'px'
 
+      }
 
+
 
+      var n = drag.offsetLeft / xLeft //遮罩层移动的距离 / 最大宽度 = 比例
 
+      var m = drag.offsetTop / xTop 
+
 
+
 
+      var zLeft = bigImg.offsetWidth - big.offsetWidth // 大图的宽度 - 大盒子的宽度 =  移动的最大距离
 
+      var zTop = bigImg.offsetHeight - big.offsetHeight 
+
 
+      bigImg.style.left = -zLeft * n + 'px' // 比例 * 最大的距离 = 当前的定位
 
+      bigImg.style.top = -zTop * m + 'px'
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 22 - 0
5_Dom/11_节点.html
View File 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <div id="div1">123123123</div>
 
+  <p id="p1">hahahahahahha</p>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var p1 = document.getElementById('p1')
 
+    /* 节点的名字  根据节点的类型定义  元素节点返回tagName 标签名 文本节点返回#text*/
 
+    console.log(div1.nodeName)
 
+    console.log(p1.nodeName)
 
+    console.log(div1.nodeType)
 
+    console.log(p1.nodeType)
 
+  </script>
 
+</body>
 
+</html>

+ 56 - 0
5_Dom/12_节点遍历.html
View File 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body> 
+  <p id="p1">22222</p>
 
+  <div id="div1">11111</div>
 
+  <h2>hhhhhhhh</h2>
 
+  <ul id="ul1">
 
+    <li>1</li>
 
+    <li>2</li>
 
+    <li>3</li>
 
+  </ul>
 
+  <script>
 
+    var p1 = document.getElementById('p1')
 
+    var ul1 = document.getElementById('ul1')
 
+    console.log(p1.nodeName)
 
+    // console.log(p1.nextSibling)
 
+    // console.log(p1.previousSibling)
 
+    //nextSibling  指向后一个兄弟节点   如果这个节点就是最后一个兄弟节点  那么该值为null
 
+    //previousSibling 指向前一个兄弟节点   如果这个节点就是第一个兄弟节点  那么该值为null
 
+    // nextElementSibling 指向以一个元素节点
 
+    // previousElementSibling 指向上一个元素节点
 
+    console.log(p1.nextElementSibling)
 
+    console.log(p1.previousElementSibling)
 
+
 
+
 
+    function next(elem){
 
+      do{
 
+        elem = elem.nextSibling
 
+      }while(elem.nodeType != 1)
 
+      return elem
 
+    }
 
+    console.log(next(p1))
 
+
 
+    //在列表里面第一个节点
 
+    console.log(ul1.firstChild)
 
+    console.log(ul1.lastChild)
 
+    console.log(ul1.firstElementChild)
 
+    console.log(ul1.lastElementChild)
 
+
 
+    function first(elem){
 
+      elem = elem.firstChild
 
+      if(elem.nodeType != 1){
 
+        elem = next(elem)
 
+      }
 
+      return elem
 
+    }
 
+    console.log(first(ul1))
 
+  </script>
 
+</body>
 
+</html>

+ 56 - 0
5_Dom/13_垂直导航.html
View File 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    ul{
 
+      list-style: none;
 
+    }
 
+    h2{
 
+      width: 300px;
 
+      height: 50px;
 
+      background: #000;
 
+      color: white;
 
+    }
 
+    ul{
 
+      display: none;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="container">
 
+    <h2>管理区</h2>
 
+    <ul>
 
+      <li>111</li>
 
+      <li>111</li>
 
+      <li>111</li>
 
+    </ul>
 
+    <h2>交流区</h2>
 
+    <ul>
 
+      <li>222</li>
 
+      <li>222</li>
 
+      <li>222</li>
 
+    </ul>
 
+  </div>
 
+  <script>
 
+    var h2 = document.getElementsByTagName('h2')
 
+    for(var i=0;i<h2.length;i++){
 
+      h2[i].onclick = function(){
 
+        var ul1 = this.nextElementSibling
 
+        if(ul1.style.display == 'block'){
 
+          ul1.style.display = 'none'
 
+        } else{
 
+          ul1.style.display = 'block'
 
+        }
 
+      }
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 39 - 0
5_Dom/14_节点操作.html
View File 

@@ -0,0 +1,39 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <p id="p1">123</p>
 
+    <p>456</p>
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var a = document.createElement('p') //创建一个什么元素 div? p?  <p></p>
 
+    var b = document.createTextNode('这是一个新的文本')//内容
 
+    // a.appendChild(b)//<p>这是一个新的文本</p>
 
+    /* 添加内容 */
 
+    a.innerHTML = '777'
 
+    console.log(a)
 
+    /* appendChild 添加节点  如果需要向HTML DOM添加新元素
 
+    必须先创建这个元素(元素节点)  然后将其追加到已有的元素里面
 
+    */
 
+    // div1.appendChild(a)
 
+    /* insertBefore(参数1，参数2)  向参数2前面添加参数1 */
 
+    var p1 = document.getElementById('p1')
 
+    // div1.insertBefore(a,p1)
 
+
 
+    //p1.remove() //在页面中删除某个节点
 
+
 
+    /* 父节点.removeChild */
 
+    // div1.removeChild(p1)
 
+
 
+    /* 父节点.replaceChild(新节点，旧节点) */
 
+    div1.replaceChild(a,p1)
 
+  </script>
 
+</body>
 
+</html>

+ 87 - 0
5_Dom/15_事件冒泡.html
View File 

@@ -0,0 +1,87 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 300px;
 
+      height: 300px;
 
+      background: green;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      width: 200px;
 
+      background: red;
 
+    }
 
+    #div3{
 
+      width: 100px;
 
+      height: 100px;
 
+      background: blue;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2">
 
+      <div id="div3">
 
+
 
+      </div>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var div2 = document.getElementById('div2')
 
+    var div3 = document.getElementById('div3')
 
+    // div1.onclick = function(){
 
+    //   console.log('div1')
 
+    // }
 
+    // div2.onclick = function(){
 
+    //   console.log('div2')
 
+    //   //阻止事件冒泡
 
+    //   event.stopPropagation()
 
+    // }
 
+    // div3.onclick = function(){
 
+    //   console.log('div3')
 
+    //   //阻止事件冒泡
 
+    //   event.cancelBubble = true
 
+    // }
 
+
 
+    /* 
+    参数一  事件名称 字符串 必填
 
+    参数二  执行函数  必填
 
+    参数三  触发类型  布尔值 可选 
+    */
 
+    div1.addEventListener('click',function(){
 
+      console.log('div1')
 
+    },false)
 
+    div2.addEventListener('click',function(){
 
+      console.log('div2')
 
+    },false)
 
+    div3.addEventListener('click',function(){
 
+      console.log('div3')
 
+    },false)
 
+    div1.addEventListener('click',function(){
 
+      console.log('div1')
 
+    },true)
 
+    div2.addEventListener('click',function(){
 
+      console.log('div2')
 
+    },true)
 
+    div3.addEventListener('click',function(){
 
+      console.log('div3')
 
+    },true)
 
+    /* 事件冒泡  从里到外  false*/
 
+    /* 事件捕获  从外到里  true */
 
+    /* 先捕获 后冒泡  先从外到里  然后从里到外 */
 
+  </script>
 
+</body>
 
+
 
+</html>

Some files were not shown because too many files changed in this diff