fengchuanyu 2 weeks ago
parent
commit
201db4b9d1
3 changed files with 154 additions and 0 deletions
  1. 30 0
      1-html/7_行块元素.html
  2. 70 0
      1-html/8_表格.html
  3. 54 0
      1-html/9_表单标签.html

+ 30 - 0
1-html/7_行块元素.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <!-- span 行级元素 -->
+     <!-- 行元素:相邻多个行元素在同一行展示 -->
+    <!-- <span>hello</span>
+    <span>world</span> -->
+
+
+    <!-- 块元素 p 自己独占一行 -->
+    <!-- <span>你好</span>
+    <p>世界</p>
+    <span>hello world</span> -->
+
+    <!-- 块元素  p div 列表-->
+    <!-- 行元素 span i b u -->
+
+
+    <span>hello</span>
+    <!-- br 换行标签 -->
+    <br/>
+    <span>world</span>
+
+</body>
+</html>

+ 70 - 0
1-html/8_表格.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <!-- table 表格标签 -->
+    <table border="1" cellspacing = "0" cellpadding = "0">
+        <!-- 表头 -->
+        <thead>
+            <!-- 行 -->
+            <tr>
+                <!-- 列(特殊样式的列) -->
+                <th>姓名</th>
+                <th>年龄</th>
+                <th>性别</th>
+                <th>地址</th>
+            </tr>
+        </thead>
+        <!-- 表格主体 -->
+        <tbody>
+            <!-- 行 -->
+             <tr>
+                <!-- 列 -->
+                <td>张三</td>
+                <td>18</td>
+                <td>男</td>
+                <td>北京</td>
+             </tr>
+             <tr>
+                <!-- 列 -->
+                <td>李四</td>
+                <td>20</td>
+                <td>女</td>
+                <td>上海</td>
+             </tr>
+             <tr>
+                <!-- 列 -->
+                <td>王五</td>
+                <td>22</td>
+                <td colspan="2">无</td>
+             </tr>
+             <tr>
+                <!-- 列 -->
+                <td>赵六</td>
+                <td>24</td>
+                <td>男</td>
+                <td rowspan="2">广州</td>
+             </tr>
+             <tr>
+                <!-- 列 -->
+                <td>钱七</td>
+                <td>
+                    <ul>
+                        <li>1</li>
+                        <li>2</li>
+                    </ul>
+                </td>
+                <td>
+                    <div>
+                        <span>女</span>
+                    </div>
+                </td>
+             </tr>
+        </tbody>
+    </table>
+</body>
+</html>

+ 54 - 0
1-html/9_表单标签.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+    <!-- 表单标签  inpu tyep="text" 文本框 -->
+    <input type="text">
+    <!-- 密码框 -->
+    <input type="password">
+    <!-- 按钮 -->
+    <input type="button" value="按钮">
+    <button>按钮</button>
+    <!-- 单选框 -->
+     <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 multiple>
+        <option value="001">黑大</option>
+        <option value="002">黑工程</option>
+        <option value="">理工</option>
+        <option value="">华德</option>
+    </select>
+
+    <!-- 文本域 -->
+    <textarea cols="20" rows="5"></textarea>
+
+    <!-- 文本上传 -->
+    <input type="file">
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+
+
+
+    <!-- form 表单 -->
+     <!-- action 提交数据的服务器地址 method请求方式 -->
+    <form action="http://localhost:4000" method="get">
+        用户名:<input type="text" name="username">
+        密码:<input type="password" name="password">
+        <!-- submit 表示提交按钮 仅在form表单内生效 -->
+        <input type="submit" value="提交">
+    </form>
+</body>
+</html>