Головна сторінка Огляд Довідка
Увійти
lovecoding
/
Vip0525
10
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Переглянути джерело

html

e 1 рік тому
батько
8f6b7de7e1
коміт
8d92850f9b
5 змінених файлів з 204 додано та 0 видалено
Розділений вигляд Показати статистику Diff
  1. 2 0
      html/4.表单标签.html
  2. 49 0
      html/5.表单练习1.html
  3. 25 0
      html/6.表单练习.html
  4. 39 0
      html/7.表格标签.html
  5. 89 0
      html/8.表格练习.html

+ 2 - 0
html/4.表单标签.html
Переглянути файл 

@@ -50,6 +50,8 @@
 
             下拉框
 
                 select 与 option 搭配使用
 
                 option中value的值是绑定数据进行联调
 
+                disabled 禁止选择
 
+                selected 默认选中
 
           -->
 
       <select>
 
         <option value="1">小学</option>

+ 49 - 0
html/5.表单练习1.html
Переглянути файл 

@@ -0,0 +1,49 @@
 
+<!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>
 
+    <div>
 
+        <h1>注册信息</h1>
 
+        <form>
 
+            <p>用户名:<input placeholder="请输入用户名" /></p>
 
+            <p>密码：<input type="password" placeholder="请输入密码"></p>
 
+            <p>性别：
 
+                <input type="radio" name="121">男
 
+                <input type="radio" name="121">女
 
+            </p>
 
+            <p>
 
+                兴趣爱好:
 
+                <input type="checkbox">足球
 
+                <input type="checkbox" checked>蓝球
 
+                <input type="checkbox">排球
 
+                <input type="checkbox">游泳
 
+                <input type="checkbox" disabled>网球
 
+                <input type="checkbox">旅游
 
+                <input type="checkbox">绘画
 
+                <input type="checkbox">读书
 
+            </p>
 
+            <p>
 
+                最高学历:
 
+                <select>
 
+                    <option value="1">小学</option>
 
+                    <option value="2" disabled>初中</option>
 
+                    <option value="3" selected>高中</option>
 
+                    <option value="4">大学</option>
 
+                </select>
 
+            </p>
 
+            <p>
 
+                个人说明：
 
+                <textarea cols="30" rows="10"></textarea>
 
+            </p>
 
+            <input type="reset">
 
+            <button>注册</button>
 
+            <br>
 
+            <a href="">提示：注册成功后点击这里你将直接登录系统！</a>
 
+        </form>
 
+    </div>
 
+</body>
 
+</html>

+ 25 - 0
html/6.表单练习.html
Переглянути файл 

@@ -0,0 +1,25 @@
 
+<!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>
 
+    <div>
 
+        <h1>欢迎注册网易免费邮箱</h1>
 
+        <p>手机号码@163.com方便好记</p>
 
+        <p>手机号:
 
+            <input type="text" placeholder="手机号码">
 
+        </p>
 
+        <p>
 
+            密码：
 
+            <input type="password" placeholder="密码">
 
+        </p>
 
+        <p>
 
+            <input type="checkbox">同意《服务条款》、《隐私政策》和《儿童隐私政策》
 
+        </p>
 
+        <button>立即注册</button>
 
+    </div>
 
+</body>
 
+</html>

+ 39 - 0
html/7.表格标签.html
Переглянути файл 

@@ -0,0 +1,39 @@
 
+<!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
 
+            tr 表格中的单元行
 
+            th 表头单元格
 
+            td 单元格
 
+            border 边框
 
+            cellspacing 单元格与边框的距离
 
+            cellpadding 文本内容与单元格距离
 
+            align 单元格对齐方式 center/left/right
 
+            caption 表格标题
 
+     -->
 
+    <table border="1" cellpadding="30" >
 
+       <caption> 一个表格</caption>
 
+      <tr>
 
+        <th colspan="2">wwww</th>
 
+        <!-- <th>2</th> -->
 
+        <th rowspan="3">3</th>
 
+      </tr>
 
+      <tr>
 
+        <td rowspan="2" align="left">d</td>
 
+        <td>b</td>
 
+        <!-- <td>c</td> -->
 
+      </tr>
 
+      <tr>
 
+        <!-- <td >d</td> -->
 
+        <td>e</td>
 
+        <!-- <td>f</td> -->
 
+      </tr>
 
+    </table>
 
+  </body>
 
+</html>

+ 89 - 0
html/8.表格练习.html
Переглянути файл 

@@ -0,0 +1,89 @@
 
+<!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
 
+            tr 表格中的单元行
 
+            th 表头单元格
 
+            td 单元格
 
+            border 边框
 
+            cellspacing 单元格与边框的距离
 
+            cellpadding 文本内容与单元格距离
 
+            align 单元格对齐方式 center/left/right
 
+            caption 表格标题
 
+     -->
 
+     <table border="1" cellpadding="15">
 
+        <caption>课程表</caption>
 
+        <!-- 8行6列 -->
 
+        <tr>
 
+            <th>课程\星期</th>
 
+            <th>星期一</th>
 
+            <th>星期二</th>
 
+            <th>星期三</th>
 
+            <th>星期四</th>
 
+            <th>星期五</th>
 
+        </tr>
 
+        <tr>
 
+            <td>第一节</td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <td>第二节</td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <td colspan="5" rowspan="2" align="center">大课间</td>
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <!-- <td colspan="5">大课间</td> -->
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <td colspan="6" align="center">午休</td>
 
+            <!-- <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td> -->
 
+        </tr>
 
+        <tr>
 
+            <td>第五节</td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <td>第六节</td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+        </tr>
 
+     </table>
 
+</body>
 
+</html>