先回顾一下上一篇文章：Python-web开发学习笔记（1）--- HTML基础_python web开发笔记_尚拙谨言的博客-CSDN博客
中讲了哪几个常用的HTML标签：
<head>：头声明
<title>：网页标题
<h1>~<h6>：内容标题
<div>：块级标签，用于内容单独成块，使用该标签后，内容强制占用网页的一整行
<span>：行内标签，也用于内容单独成块，但该标签中的内容不强制占用一整行
<a href=' '>：超链接，用于跳转网页
<img src=' '>：图片链接，用于插入网页
- <img src="" style="height:200px; width:200px;" /> /* 第一种设置图片尺寸方法 */
- <img src="" style="height:5%; width:5%;" /> /* 第二种设置图片尺寸方法 */
接着上一篇，我们继续讲几个常用的HTML标签
目录
一、HTML标签
1. 列表：<ul>、<ol>、<li>
2. 表格：<table>
3. 文本输入：<input>
4. 下拉框：<select>
5. 表单：<form>
二、总结
一、HTML标签
1. 列表：<ul>、<ol>、<li>
列表分为有序列表和无序列表，像word中这种：
看上图就一目了然。
HTML中，无序列表用<ul>修饰，有序列表用<ol>修饰，修饰中的列表内容，用<li>，括起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的主题</title>
</head>
<body>
<ul>
<li>无序小标题1</li>
<li>无序小标题2</li>
<li>无序小标题3</li>
</ul>
<div>-------------------</div>
<ol>
<li>有序小标题1</li>
<li>有序小标题2</li>
<li>有序小标题3</li>
</ol>
</body>
</html>
2. 表格：<table>
有的时候，页面上需要展示表格，在HTML中，表格用<table>修饰。而表格有三大要素：表头、行、列，在HTML中，表头用<thead>表示，表头的列用<th>表示，表行用<tr>表示，表列用<td>表示。此外，还需要用<tbody>标签将表的内容部分包裹起来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的主题</title>
</head>
<body>
<table>
<thead>
<tr> <th>表头1行1列</th> <th>表头1行2列</th> <th>表头1行3列</th> </tr>
</thead>
<tbody>
<tr> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> </tr>
<tr> <td>2行1列</td> <td>2行2列</td> <td>2行3列</td> </tr>
<tr> <td>3行1列</td> <td>3行2列</td> <td>3行3列</td> </tr>
</tbody>
</table>
</body>
</html>
好像和我们认知中的表格长的不一样，表格至少得有个框好看点吧，那么这里我们在<table>中加入属性border="1"：
<table border="1">
<thead>
<tr> <th>表头1行1列</th> <th>表头1行2列</th> <th>表头1行3列</th> </tr>
</thead>
<tbody>
<tr> <td>1行1列</td> <td>1行2列</td> <td>1行3列</td> </tr>
<tr> <td>2行1列</td> <td>2行2列</td> <td>2行3列</td> </tr>
<tr> <td>3行1列</td> <td>3行2列</td> <td>3行3列</td> </tr>
</tbody>
</table>
虽然看上去哪儿奇奇怪怪的，但至少让人一看就知道是个表格了，至于哪儿奇奇怪怪，等到我们学完css后再优化它。
3. 文本输入：<input>
还记得你填写过的调查问卷么？页面上不仅有各种让你选择的条目，有些是单选，有些是多选，也有一些让你自己输入文字的框框，它们是怎么来的呢？这就用到了HTML中的<input>标签了。input标签通过type属性的设置，将呈现不同的input类别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的主题</title>
</head>
<body>
<div>
<input type="text">
</div>
<div>
<input type="password">
</div>
<div>
<input type="file">
</div>
<div>
<input type="radio" name="n1">男
<input type="radio" name="n1">女
</div>
<div>
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球
</div>
</body>
</html>
针对上述结果简单概括一下type不同值：
- text
纯文本输入框，可在框内输入任意文字。例如登录页面的账户、一些让你提交意见或建议的位置等。但是提交建议这种可能需要输入多行文字的，一般不建议用text，而改用多行文本输入框<textarea>标签：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的主题</title> </head> <body> <textarea></textarea> </body> </html>
- password
密码输入框，在框内输入的内容将会被脱敏，最常见的就是用“·”来替换原文字； - file
点击可选本地文件，例如一些让你上传文件的位置； - radio
单选。作为单选，必须同时加上name属性，且name值在同一单选项中必须一致，如上述代码中，男女只能选其一，那么男女的name都为“n1” - checkbox
复选框，可选多个选项。
其实<input>标签还有一个大家熟悉的功能，就是按钮功能，此时，type的值为“button”或“submit”：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的主题</title>
</head>
<body>
<input type="button" value="确定">
<input type="submit" value="提交">
</body>
</html>
“button”和“submit”两种按钮设置方式还真有点区别，前者就是个常规的按钮功能，例如可以用它来触发一些事件；后者就多用于表单的提交了，它可以将表单的内容与后台数据库进行一些交互。
4. 下拉框：<select>
<select>标签用于下拉框的实现，当该标签没有写任何属性时，它就是个单选下拉框；当该标签配上multiple字段时，它就是个多选下拉框了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的主题</title>
</head>
<body>
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广东</option>
<option>厦门</option>
</select>
<input type="button" value="提交">
</body>
</html>
有个小细节，如上图，我们要选上海和广东时，需要按住Ctrl（Windows）或者command（Mac）。操作比较骚，因此这里不建议使用这种作为下拉框，我们应该使用复选框，但如果确实有很多下拉选项，而且是复选需求，那么就不再是简单的下拉框了，需要用到更复杂的样式，这里暂时不做重点介绍。
5. 表单：<form>
既然上文我们提到了表单，那就不得不介绍一个非常重要的标签：<form>。该标签修饰的表单能够向后台服务器传输表单数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的主题</title>
</head>
<body>
<form action="/html_classes/templates/表单提交结果.html" method="post">
姓名: <input type="text" name="Name" value="Django"><br>
职业: <input type="text" name="Job" value="IT"><br>
<input type="submit" value="提交">
</form>
<p>点击"提交"按钮，页面将会显示"表单提交成功！"。</p>
</body>
</html>其中，『action』写的是我们要提交表单数据到服务器的地址，『method』是服务请求方式，主要分为POST请求和GET请求，这里只需记住，表单的提交大多使用POST请求。
这里我们假设后台服务器地址是另一个HTML文件："/html_classes/templates/表单提交结果.html"，点击『提交』后将会显示“表单提交成功！”。
注意，在实际业务中，我们的表单提交目的地，应该是服务器的地址，这里我们图方便，举个例子而已。
关于POST和GET请求的一点补充：
- GET请求
浏览器通过用户的页面操作发起请求，并将请求的数据拼接在URL上传输给后台服务，后台服务对URL进行相关解析，得到请求结果，并将结果返回给浏览器（称之为响应）。
URL地址中，从“?”后面都是浏览器为了向服务器发起请求以及返回结果时拼接的一些必要的字段，比如这里有个“wd=什么是爱”，这是请求和响应URL中包含了的你搜索的问题。大家可以直接在url中将“什么是爱”改成其它你要搜索的问题，然后回车，这将会得到与你在百度搜索框中搜索相同问题时一样的结果。其实通过URL并拼接上请求字段向后台服务器发起请求才是我们百度搜索发起和结果返回的本质。
- POST请求
其实本质上和GET请求一样，只不过在POST请求中，我们额外拼接的请求字段将不会在URL中显示，而是会以JSON结构体的形式在后台交互，所以POST请求你是无法直接在页面上看到具体信息的，它多用于表单的提交、身份登录等场景。小伙伴们可以自己找个登录页面试一试。
二、总结
至此，我们便已将几个常用的HTML标签学完。但特别强调，HTML标签远远不止我介绍的这些，且我介绍的这些标签的用法也不止于本系列文章，但各位没必要全部记住，也不可能全部记住，大家只需要对这些常用的HTML标签有个大概的掌握即可，最重要的是知道HTML标签究竟是怎么回事。至于其它更多的标签以及标签的不同用法，各位今后在学习工作中用到了再查就行。
<head>：头声明
<title>：网页标题
<h1>~<h6>：内容标题
<div>：块级标签，用于内容单独成块，使用该标签后，内容强制占用网页的一整行
<span>：行内标签，也用于内容单独成块，但该标签中的内容不强制占用一整行
<a href=' '>：超链接，用于跳转网页
<img src=' '>：图片链接，用于插入网页
- <img src="" style="height:200px; width:200px;" /> /* 第一种设置图片尺寸方法 */
- <img src="" style="height:5%; width:5%;" /> /* 第二种设置图片尺寸方法 */
<ul>：无序列表<ol>：有序列表
<li>：列表项，与<ul>或<ol>搭配使用
<table>：表格。其内嵌标签中，表头用<thead>表示，表头的列用<th>表示，表行用<tr>表示，表列用<td> 表示。此外，还需要用<tbody>标签将表的内容部分包裹起来。
<input>：通过type属性的不同，其有7个不同样式：
-text：纯文本输入，注意与<textarea>区分开；
-password：密码输入框，会隐掉输入；
-file：文件选择框；
-radio：单选框，必须有相同的name值；
-checkbox：复选框；
-button：普通按钮；
-submit：提交按钮，用于提交表单数据；
<select>：下拉框，下拉选项需要与<option>搭配使用，单选；加上“multiple”为多选下拉框；
<form>：表单。能够将表单数据发送给后台，如Django；
