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

admin

fengchuanyu 2 months ago
parent
a097828f98
commit
201db4b9d1
3 changed files with 154 additions and 0 deletions
Unified View Show Diff Stats
  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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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>