2 years ago · 3c5e1717ce
--- a/.DS_Store
+++ b/.DS_Store
--- a/css/1_test.css
+++ b/css/1_test.css
@@ -0,0 +1,4 @@
 
				+div{
			
 
				+    /* 背景：颜色 */
			
 
				+    background: blue;
			
 
				+}
			
--- a/css/1_设置css样式.html
+++ b/css/1_设置css样式.html
@@ -0,0 +1,26 @@
 
				+<!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>
			
 
				+    <!--2 内部样式 如果我们简单例子 -->
			
 
				+    <style>
			
 
				+        /* 选择器 选中所有标签名叫div的元素*/
			
 
				+        /* div{
			
 
				+            background: green;
			
 
				+        } */
			
 
				+    </style>
			
 
				+    <!-- 3 引入外部样式  开发项目或者页面比较大 -->
			
 
				+    <link rel="stylesheet" href="1_test.css">
			
 
				+
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 内联样式 -->
			
 
				+    <!-- <div style="background:red">我是一个div</div> -->
			
 
				+    <div>我是div2</div>
			
 
				+    <div>我是div3</div>
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/css/2_css选择器.html
+++ b/css/2_css选择器.html
@@ -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>
			
 
				+    <style>
			
 
				+        /* 标签选择器 选中页面中所有标签名为xx的元素 */
			
 
				+        /* div{
			
 
				+            background: red;
			
 
				+        }
			
 
				+         */
			
 
				+        /* id选择器  选中id为xx的，唯一的*/
			
 
				+        #div2{
			
 
				+            background: green;
			
 
				+        }
			
 
				+        /* 类选择器|class选择器  选中所有class名为xx的 */
			
 
				+        .aa{
			
 
				+            background: blue;
			
 
				+        }
			
 
				+        /* 后代选择器 */
			
 
				+        #ul1 li{
			
 
				+            background: pink;
			
 
				+        }
			
 
				+        /* 群组选择器 */
			
 
				+        .aa,#ul1{
			
 
				+            background: purple;
			
 
				+        }
			
 
				+       /* 伪类选择器 */
			
 
				+       /* :hover鼠标悬浮 */
			
 
				+       a:hover{
			
 
				+          background: aqua;
			
 
				+       }
			
 
				+        
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    
			
 
				+
			
 
				+    <div class="aa">111</div>
			
 
				+    <!-- 一个页面中id是唯一的 -->
			
 
				+    <div id="div2">111</div>
			
 
				+    <div class="aa">111</div>
			
 
				+    <div>111</div>
			
 
				+
			
 
				+    <ul id="ul1">
			
 
				+        <li>111</li>
			
 
				+        <li>111</li>
			
 
				+        <li>111</li>
			
 
				+    </ul>
			
 
				+    <ul>
			
 
				+        <li>111</li>
			
 
				+        <li>111</li>
			
 
				+        <li>111</li>
			
 
				+    </ul>
			
 
				+    <a href="">百度</a>
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/css/3_选择器优先级.html
+++ b/css/3_选择器优先级.html
@@ -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>
			
 
				+        #div1{
			
 
				+            background: green;
			
 
				+        }
			
 
				+        div{
			
 
				+            background: red;
			
 
				+        }
			
 
				+        .aa{
			
 
				+            background: blue;
			
 
				+        }
			
 
				+     
			
 
				+
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- css选择器的优先级
			
 
				+        style > id选择器 > class选择器 > 标签选择器 
			
 
				+    -->
			
 
				+    <div id="div1" class="aa" style="background:pink">
			
 
				+        你好 哈哈哈 
			
 
				+    </div>
			
 
				+    
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/html/1_test.html
+++ b/html/1_test.html
--- a/html/2_HTML页面组成.html
+++ b/html/2_HTML页面组成.html
--- a/html/4_images/.DS_Store
+++ b/html/4_images/.DS_Store
--- a/html/4_images/img01.gif
+++ b/html/4_images/img01.gif
--- a/html/4_images/img01.jpeg
+++ b/html/4_images/img01.jpeg
--- a/html/4_images/img02.jpeg
+++ b/html/4_images/img02.jpeg
--- a/html/4_images/img03.jpeg
+++ b/html/4_images/img03.jpeg
--- a/html/4_images/img04.jpeg
+++ b/html/4_images/img04.jpeg
--- a/html/4_圣诞老人.html
+++ b/html/4_圣诞老人.html
--- a/html/5_HTML基础标签2.html
+++ b/html/5_HTML基础标签2.html
--- a/html/6_表格.html
+++ b/html/6_表格.html
@@ -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>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        表格 border边框  
			
 
				+        cellspacing两个单元格之间的间距
			
 
				+        cellpadding内容和边框之间的距离
			
 
				+    -->
			
 
				+    <table border="1" cellspacing="0" cellpadding="10px">
			
 
				+        <!-- 行 -->
			
 
				+        <!-- <tr>
			
 
				+            <td>姓名</td>
			
 
				+            <td>电话</td>
			
 
				+        </tr> -->
			
 
				+        <tr>
			
 
				+            <th>姓名</th>
			
 
				+            <th>电话</th>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+            <td>张三</td>
			
 
				+            <td>15076676788</td>
			
 
				+        </tr>
			
 
				+    </table>
			
 
				+</body>
			
 
				+</html>
			
--- a/html/7_表单元素.html
+++ b/html/7_表单元素.html
@@ -0,0 +1,65 @@
 
				+<!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="后台提交地址">
			
 
				+        <!-- 文本框 type="text" -->
			
 
				+        用户名：
			
 
				+        <input type="text">
			
 
				+        <!-- 换行 -->
			
 
				+        <br>
			
 
				+        <!-- 密码框 type="password" -->
			
 
				+        密码：
			
 
				+        <input type="password">
			
 
				+        <br>
			
 
				+        <!-- 单选框 name属性="随便起"-->
			
 
				+        <!-- ctrl+? 注释 -->
			
 
				+        性别：
			
 
				+        <input type="radio" name="sex">男
			
 
				+        <input type="radio" name="sex">女
			
 
				+        <br>
			
 
				+
			
 
				+        <!-- 复选框 type="checkbox"-->
			
 
				+        爱好：
			
 
				+        <input type="checkbox" name="hobby">吃饭
			
 
				+        <input type="checkbox" name="hobby">睡觉
			
 
				+        <input type="checkbox" name="hobby">敲代码
			
 
				+        
			
 
				+        <br>
			
 
				+        <!-- 下拉框 
			
 
				+            开始和结束标签中的内容是展示给用户看的
			
 
				+            value中的值是最终提交给后台，存在数据库中的
			
 
				+        -->
			
 
				+        学校：
			
 
				+        <select>
			
 
				+            <option value="1">黑大</option>
			
 
				+            <option value="2">理工</option>
			
 
				+            <option value="3">农大</option>
			
 
				+        </select>
			
 
				+        <br>
			
 
				+        <!-- 文本域 -->
			
 
				+        备注：
			
 
				+        <textarea></textarea>
			
 
				+        <br>
			
 
				+        <!-- 普通按钮 -->
			
 
				+        <input type="button" value="确定">
			
 
				+        <!-- 或 -->
			
 
				+        <button>确定</button>
			
 
				+
			
 
				+        <!-- 提交按钮 type="submit" 提交按钮默认会提交表单 -->
			
 
				+        <input type="submit">
			
 
				+        <!-- 重置按钮 -->
			
 
				+        <input type="reset">
			
 
				+    </form>
			
 
				+
			
 
				+
			
 
				+
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/html/8_注册页面.html
+++ b/html/8_注册页面.html
--- a/html/images/img01.jpeg
+++ b/html/images/img01.jpeg