1 năm trước cách đây · 22a62f510a
--- a/.DS_Store
+++ b/.DS_Store
--- a/css/1_css的使用.html
+++ b/css/1_css的使用.html
@@ -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标签写样式 内部样式 -->
			
 
				+    <style>
			
 
				+        /* 选中h1 */
			
 
				+        h1{
			
 
				+           width: 300px;
			
 
				+           height: 300px;
			
 
				+           background: blue; 
			
 
				+        }
			
 
				+
			
 
				+    </style>
			
 
				+
			
 
				+    <!-- 通过link标签引入外部的样式 外部样式 -->
			
 
				+    <link rel="stylesheet" href="./1_test.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- style 写样式 -->
			
 
				+    <div style="width:200px; height:200px; background: red;">
			
 
				+        aaaa
			
 
				+    </div>
			
 
				+
			
 
				+    <h1>
			
 
				+        hytjjujuj
			
 
				+    </h1>
			
 
				+    
			
 
				+    <p>
			
 
				+        ggfdfdfddfghjkl
			
 
				+    </p>
			
 
				+
			
 
				+
			
 
				+
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/css/1_test.css
+++ b/css/1_test.css
@@ -0,0 +1,5 @@
 
				+p{
			
 
				+    width: 400px;
			
 
				+    height: 400px;
			
 
				+    background: green;
			
 
				+}
			
--- a/css/2_css选择器.html
+++ b/css/2_css选择器.html
@@ -0,0 +1,79 @@
 
				+<!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: 200px;
			
 
				+            height: 200px;
			
 
				+            background: red;
			
 
				+        } */
			
 
				+
			
 
				+        /* 选中id为div1的元素 */
			
 
				+        /* id选择器 一个页面中id是惟一的 只能选中一个  */
			
 
				+        /* #div1{
			
 
				+            width: 300px;
			
 
				+            height: 300px;
			
 
				+            background: green;
			
 
				+        } */
			
 
				+
			
 
				+        /* class 类 可以选中多个  */
			
 
				+        /* class|类选择器 */
			
 
				+        /* .list{
			
 
				+            background: blue;
			
 
				+        } */
			
 
				+
			
 
				+        /* 后代选择器 */
			
 
				+        /* 选中第一个ul中的list变色 */
			
 
				+        /* #ul1 .list{
			
 
				+            background: pink;
			
 
				+        } */
			
 
				+
			
 
				+        /* .ul2 li{
			
 
				+            background: purple;
			
 
				+        } */
			
 
				+
			
 
				+        /* 分组选择器|群组选择器 */
			
 
				+        #div1,#ul1 li{
			
 
				+            background: red;
			
 
				+        }
			
 
				+
			
 
				+        /* 伪类选择器 */
			
 
				+        a:hover{
			
 
				+            /* background: orange; */
			
 
				+            color: orange;
			
 
				+        }
			
 
				+        
			
 
				+      
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="div1">1111</div>
			
 
				+    <div>222</div>
			
 
				+    <div>333</div>
			
 
				+    <ul id="ul1">
			
 
				+        <li>1111</li>
			
 
				+        <li class="list">1111</li>
			
 
				+        <li>1111</li>
			
 
				+        <li class="list">1111</li>
			
 
				+        <li>1111</li>
			
 
				+        <li class="list">1111</li>
			
 
				+    </ul>
			
 
				+    <ul class="ul2">
			
 
				+        <li>1111</li>
			
 
				+        <li class="list">1111</li>
			
 
				+        <li>1111</li>
			
 
				+        <li class="list">1111</li>
			
 
				+        <li>1111</li>
			
 
				+        <li class="list">1111</li>
			
 
				+    </ul>
			
 
				+
			
 
				+    <a href="#">百度</a>
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/css/3_css优先级.html
+++ b/css/3_css优先级.html
@@ -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>
			
 
				+    <style>
			
 
				+        #div1{
			
 
				+            background: red;
			
 
				+        }
			
 
				+        .aa{
			
 
				+            background: green;
			
 
				+        }
			
 
				+        div{
			
 
				+            background: blue;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- css选择器的优先级 
			
 
				+    style在标签上的样式 > id选择器 >  class选择器 > 标签选择器 
			
 
				+    1000                 100        10          1
			
 
				+    -->
			
 
				+    <div id="div1" class="aa" style="background: orange;">qqqqgfhjkl;</div>
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/html/.DS_Store
+++ b/html/.DS_Store
--- a/html/3_基础标签.html
+++ b/html/3_基础标签.html
@@ -0,0 +1,62 @@
 
				+<!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-h6  h1最大-->
			
 
				+    <h1>这是一个标题</h1>
			
 
				+    <h2>这是一个标题</h2>
			
 
				+    <h3>这是一个标题</h3>
			
 
				+    <h4>这是一个标题</h4>
			
 
				+    <h5>这是一个标题</h5>
			
 
				+    <h6>这是一个标题</h6>
			
 
				+    <!-- 段落 一整段文字 -->
			
 
				+    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
			
 
				+    <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
			
 
				+
			
 
				+    <!-- 超链接 a
			
 
				+        href属性：跳转地址
			
 
				+        target:_blank 打开新窗口-->
			
 
				+    <a href="http://www.baidu.com" target="_blank">百度</a>
			
 
				+    <!-- 图片  img
			
 
				+        src 图片地址
			
 
				+            图片路径：绝对路径（写死的路径）
			
 
				+            相对路径：./当前路径 /下一级路径 上一级目录../
			
 
				+    -->
			
 
				+    <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="">
			
 
				+    <img src="./images/111/img01.jpeg" alt="">
			
 
				+    <img src="../images/111/img01.jpeg" alt="">
			
 
				+
			
 
				+    <!-- 列表 -->
			
 
				+    <!-- 无序列表 -->
			
 
				+    <ul>
			
 
				+        <li>aaaa</li>
			
 
				+        <li>bbb</li>
			
 
				+        <li>ccc</li>
			
 
				+    </ul>
			
 
				+    <!-- 有序列表 -->
			
 
				+    <ol>
			
 
				+        <li>aaaa</li>
			
 
				+        <li>bbb</li>
			
 
				+        <li>ccc</li>
			
 
				+    </ol>
			
 
				+    <!-- 换行 -->
			
 
				+    <br>
			
 
				+
			
 
				+    <!-- 区块 一般用来布局 -->
			
 
				+    <!-- div 块级元素 宽度充满父元素，自己占一行 -->
			
 
				+    <div>这是一个div</div>
			
 
				+    <div>这是一个div</div>
			
 
				+    
			
 
				+    <!-- div 行级元素 宽度内容撑的，多个占一行 -->
			
 
				+    <span>我是一个span</span>
			
 
				+    <span>我是一个span</span>
			
 
				+    
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/html/4_表单.html
+++ b/html/4_表单.html
@@ -0,0 +1,52 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 表单元素 -->
			
 
				+    <form action="xx后台地址">
			
 
				+        <!-- 文本框 -->
			
 
				+        姓名：
			
 
				+        <input type="text">
			
 
				+        <!-- 密码框 -->
			
 
				+        密码：
			
 
				+        <input type="password">
			
 
				+        <br>
			
 
				+        <!-- 单选框 相同的name属性 -->
			
 
				+        <input type="radio" name="sex">男
			
 
				+        <input type="radio" name="sex">女
			
 
				+        <br>
			
 
				+        <!-- 复选框 checkbox -->
			
 
				+        爱好：
			
 
				+        <input type="checkbox" name="hobby">吃饭
			
 
				+        <input type="checkbox" name="hobby">睡觉
			
 
				+        <input type="checkbox" name="hobby">敲代码
			
 
				+        <br>
			
 
				+        <!-- 下拉框 -->
			
 
				+        请选择学校：
			
 
				+        <select >
			
 
				+            <option>黑大</option>
			
 
				+            <option>理工</option>
			
 
				+            <option>黑工程</option>
			
 
				+        </select>
			
 
				+        <br>
			
 
				+
			
 
				+        备注：
			
 
				+        <!-- 文本域 -->
			
 
				+        <textarea name="" cols="30" rows="20"></textarea>
			
 
				+
			
 
				+        <!-- <button>按钮</button> -->
			
 
				+        <!-- 普通按钮 type属性button -->
			
 
				+        <input type="button" value="登录">
			
 
				+        <!-- 提交按钮type属性 submit -->
			
 
				+        <input type="submit">
			
 
				+
			
 
				+        
			
 
				+    </form>
			
 
				+
			
 
				+
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/html/5_表格.html
+++ b/html/5_表格.html
@@ -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>
			
 
				+    <!-- border 边框 -->
			
 
				+    <table border="1">
			
 
				+        <!-- tr代表行 -->
			
 
				+        <tr>
			
 
				+            <!-- td代表列 -->
			
 
				+            <td>111</td>
			
 
				+            <td>222</td>
			
 
				+
			
 
				+        </tr>
			
 
				+    </table>
			
 
				+
			
 
				+    <!-- 
			
 
				+        tr行  td列 th表头
			
 
				+        border边框
			
 
				+        cellpadding 内容和边框之间的距离
			
 
				+        cellspacing 边框之间的距离
			
 
				+    -->
			
 
				+    <table border="1" cellpadding="10px" cellspacing="0" width="400px" height="300px">
			
 
				+        <tr>
			
 
				+            <th>姓名</th>
			
 
				+            <th>年龄</th>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+            <td>张三</td>
			
 
				+            <td>18</td>
			
 
				+        </tr>
			
 
				+        <tr>
			
 
				+            <td>李四</td>
			
 
				+            <td>20</td>
			
 
				+        </tr>
			
 
				+     </table>
			
 
				+    
			
 
				+</body>
			
 
				+</html>
			
--- a/images/.DS_Store
+++ b/images/.DS_Store
--- a/images/111/img01.jpeg
+++ b/images/111/img01.jpeg
--- a/test1.html
+++ b/test1.html
@@ -0,0 +1,17 @@
 
				+<!-- 什么文档类型 -->
			
 
				+<!DOCTYPE html>
			
 
				+<!-- 标签 -->
			
 
				+<!-- 标签一般是成对出现 开始标签结束标签-->
			
 
				+<!--html元素 根元素 -->
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <!-- meta   charset属性字符编码设置为UTF-8 -->
			
 
				+        <meta charset="UTF-8">
			
 
				+        <!-- 网站的标题 -->
			
 
				+        <title>标题</title>
			
 
				+    </head>
			
 
				+    <body>
			
 
				+        <!-- 网页的内容 -->
			
 
				+    </body>
			
 
				+</html>
			
 
				+
			
--- a/笔记.txt
+++ b/笔记.txt
@@ -0,0 +1,4 @@
 
				+HTML  超文本标记语言（标签 写网页的内容）
			
 
				+CSS 层叠样式表 （样式）
			
 
				+Javascript 交互 
			
 
				+