表单

html/html简介.md

@@ -164,7 +164,7 @@
 
 
 
-#### HTML 特殊符号：
+#### HTML 特殊符号
 
 HTML 常用的特殊字符：
 

html/表单.md

@@ -0,0 +1,108 @@
+# 表单（form）
+
+### form 简介
+
+form元素表示文档中的一个区域，此区域包含交互控件，用于向web 服务器提交信息
+
+### form 常用属性
+
+- action 处理表单提交的url
+
+  > action 这个属性可以被<button>,<input type="submit">,或者<input type="image">元素上的formaction 属性覆盖
+
+- method
+
+  - 属性值：
+    - get
+    - post
+
+- target 
+
+  - 属性值：
+    - _blank  在新页面中打开
+    - _self 在同一页面中打开
+
+
+
+### form 常用控件
+
+- ​	input 
+
+  - 属性 
+
+    - type
+
+      - text  单行的文本区域，输入中的换行会被自动清除  （默认值）
+
+      - password 密码框
+
+      - tel 用于输入电话号码的控件，拥有动态键盘的设备（如手机）上会显示电话数字键盘
+
+      - button  没有默认行为的按钮 
+
+        > type =button 时，按钮中的文字是 value 属性的值，默认为空
+
+      - radio 单选框
+
+        > type=radio 时，显示的效果为单选框 属性有： name，value
+        >
+        > 属于一组的选项的name的值必须要统一 才能实现单选的效果
+        >
+        > 为了保证给后台的值是不同的，要定义不同的value  value 属性的值指代的是选择后取出的值
+
+      - checkbox  复选框 
+
+        > type=checkbox 时，显示的效果为多选框，属性为name, value
+        >
+        > 相同name的选项为同一组复选,checked="checked" 表示选中某复选项
+        >
+        > value也需要定义不同的值
+
+      - hidden 隐藏
+
+      - file  文件上传
+
+        > 包含文件上传功能的表单 需要在form 表单的form 标签中添加 enctype="multipart/form-data" 
+
+- select 下拉框
+
+  - 具体用法：
+
+    ```
+    <select name="pets" id="pet-select">
+        <option value="">选项的值</option> <!-- value 的值是选中后传到服务器的值 -->
+    </select>
+    ```
+
+    
+
+    效果如下：
+
+    ![image-20201217171232851](表单.assets/image-20201217171232851.png)
+
+  - 常用属性 （针对select 标签)
+
+    - multiple   能不能同时选中多个
+    - size          一次显示多少个选项
+    - selected="selected"  默认选中 针对  option
+
+- label   
+
+  - 表示用户界面中某个元素的说明
+  - 可以放在任何input 控件元素附近
+  - label 是行内样式
+
+- textarea  多行文本框
+
+  - 属性：
+    - rows 定义文本框输入行数  即显示的高度
+    - cols 定义文本框输入列数  即显示宽度
+
+
+
+### form控件的公用属性：
+
+- ​	placeholder 提供可描述输入字段预期值的提示信息
+- ​    disabled 禁用
+- ​    autofocus 自动聚焦
+

html/表格.md

@@ -0,0 +1,55 @@
+# 表格（table）
+
+### 表格简介
+
+html的table元素表示表格数据  ——即通过二维数据表表示的信息
+
+### 简单的表格
+
+```
+<table>									<!-- table 声明是一个表格 -->
+  <tr>									<!-- tr 声明一行 -->
+    <td>第一行第一列格中的内容</td>		 <!--td 声明一列 -->
+  </tr>
+</table>
+```
+
+效果如下：
+
+![image-20201217144534429](表格.assets/image-20201217144534429.png)
+
+
+
+### 表格（table） 的相关标签
+
+| table   | 声明是个表格       |
+| ------- | ------------------ |
+| tr      | 声明一行           |
+| td      | 声明一列           |
+| caption | 声明表格标题       |
+| th      | 声明表格表头单元格 |
+| thead   | 表格头部           |
+| tbody   | 表格主体           |
+| tfoot   | 表格结尾           |
+
+> thead, tbody, tfoot 没有实际效果  只是响应 html5的语义化标签
+
+
+
+### 表格 合并单元格
+
+table 通过colspan 属性实现横向合并
+
+​		  通过rowspan 属性实现纵向合并
+
+> colspan和rowspan 的属性值都是数字
+>
+> 如： colspan="3"
+>
+> ​		rowspan="4"
+
+效果如下：
+
+![image-20201217150855004](表格.assets/image-20201217150855004.png)
+
+​