HTML续2

前端知识点

HTML续

一些标签总结

跳转页面

  • a 发起get请求
  • form 发起post请求(默认get但是谁这么无聊)

回忆知识点：get是获取内容，post是上传内容

form 标签

  • 如果form 里没有提交按钮就无法提交，除非你用JS
  • method 请求方式(没人用get)只有两个值 get/post
  • action 请求路径
1
2
3
4
5
<form action="index2.html" method="post">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" value="提交">
</form>

如上你点击提交后我们在chrome里点击Network

如果提交的是中文,就把对应字符的UTF-8编码每个字节分开并加一个%

1
Content-Type: application/x-www-form-urlencoded

问题1 form 标签在哪些情况下可以被用户提交

  1. form 标签里面有一个 input type=submit 的元素
  2. form 标签里面有一个 button 元素，button 的 type 属性为空

详细讲一下第二种

form里存在一个button它会升级为提交按钮

1
2
3
4
<form action="index2.html" method="post">
     <input type="text" name="username">
     <button>提交</button>
</form>
  • 如果你添加了 type=”button” 就无法提交
1
<button type="button">提交</button>
  • 如果你是 input的button也是无法提交的
1
<input type="button" value="提交">

问题2 form 标签里面的 input 加不加 name 属性由什么区别？

如果 input 不加 name，那么在表单提交时，input 的值就不会出现在请求里

form与 a标签一样 也有target属性

行为同 a标签一样 具体看上一篇博客

  • _blank
  • _slef
  • _parent
  • _top

checkbox

问题1 有时候你想点击「免单」也会勾选此时发现无法勾选

  • 给input添加id=”xxx”
  • 给触发的文本套上 label标签并指定 for=”xxx”
1
2
3
4
5
<input type="checkbox">免单

<!-- 你应该这样 -->
<input type="checkbox" id="free">
<label for="free">免单</label>

老司机应该这样,直接用label把整体包起来

1
2
3
<label>账号<input type="text" name="username"></label>
<label>密码<input type="password" name="password"></label>
<label><input type="checkbox">免单</label>

问题2 如果是多个复选框

你应该让它们的name相同

1
2
3
4
<label><input type="checkbox" name="fruit" value="apple">苹果</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>

提交后参数会形如  fruit=apple&fruir=banana

radio 单选框

1
2
<label><input type="radio" name="gender" value="man">男</label>
<label><input type="radio" name="gender" value="woman">女</label>

select 下拉选

如果想多选请添加 multiple属性

1
2
3
4
5
<select name="local">
    <option value=""></option>
    <option value="1">北京</option>
    <option value="2">天津</option>
</select>

textarea 文本域

  1. 默认它可以拖动的 要用style控制 resize:none;
  2. 建议用CSS控制它的宽高
  3. 它提供的cols和rows是不准的 列和行设置
1
<textarea name="" cols="30" style="resize:none;"rows="10"></textarea>

table 标签 (用的很少)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
    <thead>
      <tr>
        <th>姓名</th><th>班级</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hjx</td><td>1</td>
      </tr>
      <tr>
        <td>aaa</td><td>2</td>
      </tr>
    </tbody>
    <tfoot></tfoot>
</table>

table之慎用标签 colgroup col

之所以慎用，就因为2017年11月某天我知道它的用法然后就用了，结果导致一个bug(firefox里不支持这个标签#仅对应2017年11月那个我使用的firefox版本)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table border=1>
    <colgroup>
      <col width=100>
      <col width=200>
    </colgroup>
    <thead>
      <tr>
        <th>姓名</th>
        <th>班级</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>hjx</td>
        <td>1</td>
      </tr>
      <tr>
        <td>aaa</td>
        <td>2</td>
      </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>xxx</td>
            <td>22</td>
        </tr>
    </tfoot>
</table>

PS建议控制 td 样式还是追随大众使用 class

thead tbody tfoot如果顺序错了会咋样

不管你怎样放置它们的顺序，即使F12里查到对应标签顺序是你写的顺序，但是浏览器会自动纠错依然会以thead tbody tfoot的顺序展现在表格上

不写thead/tfoot 会咋样

没有问题

不写tbody会咋样

它会自动帮你生成tbody 并把 tr放在里面

最后说一下默认表格设置了边框是很丑的，一般要设置边框融合

1
table{border-collapse:collapse}