HTML2

表格标签

jason 123 read
egon 123 dbj
tank  123 hecha
...
<table>
        <thead>
<tr>  一个tr就表示一行
               <th>username</th>  加粗文本
               <td>username</td>  正常文本
           </tr>
</thead>  表头(字段信息)
        <tbody>
       <tr>
                <td>jason</td>
                <td>123</td>
                <td>read</td>
            </tr>
        </tbody> 表单(数据信息)
</table>


<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看

表单标签

"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端

action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写  默认就是朝当前页面所在的url提交数据
   2.写全路径:https://www.baidu.com  朝百度服务端提交
   3.只写路径后缀action='/index/' 
   自动识别出当前服务端的ip和port拼接到前面
     host:port/index/

<label for="d1">  第一种 直接讲input框写在label内
           username:<input type="text" id="d1">
</label>
第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题
 
"""
label 和 input都是行内标签
"""



input标签 就类似于前端的变形金刚  通过type属性变形
text:普通文本
 password:密文
date:日期
 submit:用来触发form表单提交数据的动作
 button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的,学完js之后可以给它自定义各种功能
 reset:重置内容
 radio:单选
  默认选中要加checked='checked'
      <input type="radio" name="gender" checked='checked'>
     当标签的属性名和属性值一样的时候可以简写
     <input type="radio" name="gender" checked>
checkbox:多选
<input type="checkbox" checked>DBJ
 
  file:获取文件  也可以一次性获取多个
  <input type="file" multiple>
  hidden:隐藏当前input框
  钓鱼网站
   
 


select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
<select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>

textarea标签  获取大段文本
  <textarea name="" id="" cols="30" rows="10"></textarea>

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
1<input type="submit" value="注册">
2<button>点我</button>
   
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
  用户的数据就类似于字典的value
  <p>gender:
            <input type="radio" name="gender">
           <input type="radio" name="gender">
           <input type="radio" name="gender">其他
  </p>

原文地址:https://www.cnblogs.com/bailongcaptain/p/12879216.html