Python-web开发学习笔记（2）— HTML基础

先回顾一下上一篇文章：Python-web开发学习笔记（1）— HTML基础_python web开发笔记_尚拙谨言的博客-CSDN博客

中讲了哪几个常用的HTML标签：

---

：头声明

• 无序小标题1
• 无序小标题2
• 无序小标题3

-------------------

1. 有序小标题1
2. 有序小标题2
3. 有序小标题3

2. 表格：<table>

有的时候，页面上需要展示表格，在HTML中，表格用

修饰。而表格有三大要素：表头、行、列，在HTML中，表头用

表示，表头的列用

表示，表列用

标签将表的内容部分包裹起来：

表示，表行用
表示。此外，还需要用

表头1行1列	表头1行2列	表头1行3列
1行1列	1行2列	1行3列
2行1列	2行2列	2行3列
3行1列	3行2列	3行3列

好像和我们认知中的表格长的不一样，表格至少得有个框好看点吧，那么这里我们在

中加入属性border=”1″：

表头1行1列	表头1行2列	表头1行3列
1行1列	1行2列	1行3列
2行1列	2行2列	2行3列
3行1列	3行2列	3行3列

虽然看上去哪儿奇奇怪怪的，但至少让人一看就知道是个表格了，至于哪儿奇奇怪怪，等到我们学完css后再优化它。

3. 文本输入：<input>

还记得你填写过的调查问卷么？页面上不仅有各种让你选择的条目，有些是单选，有些是多选，也有一些让你自己输入文字的框框，它们是怎么来的呢？这就用到了HTML中的标签了。input标签通过type属性的设置，将呈现不同的input类别：

男女篮球足球乒乓球棒球

针对上述结果简单概括一下type不同值：

• text
  纯文本输入框，可在框内输入任意文字。例如登录页面的账户、一些让你提交意见或建议的位置等。但是提交建议这种可能需要输入多行文字的，一般不建议用text，而改用多行文本输入框标签：<pre><code class="language-html"><title>我的主题</title><textarea>

• password
  密码输入框，在框内输入的内容将会被脱敏，最常见的就是用“·”来替换原文字；
• file
  点击可选本地文件，例如一些让你上传文件的位置；
• radio
  单选。作为单选，必须同时加上name属性，且name值在同一单选项中必须一致，如上述代码中，男女只能选其一，那么男女的name都为“n1”
• checkbox
  复选框，可选多个选项。

其实标签还有一个大家熟悉的功能，就是按钮功能，此时，type的值为“button”或“submit”：

“button”和“submit”两种按钮设置方式还真有点区别，前者就是个常规的按钮功能，例如可以用它来触发一些事件；后者就多用于表单的提交了，它可以将表单的内容与后台数据库进行一些交互。

4. 下拉框：<select>

标签用于下拉框的实现，当该标签没有写任何属性时，它就是个单选下拉框；当该标签配上multiple字段时，它就是个多选下拉框了：

北京上海深圳北京上海深圳广东厦门

有个小细节，如上图，我们要选上海和广东时，需要按住Ctrl（Windows）或者command（Mac）。操作比较骚，因此这里不建议使用这种作为下拉框，我们应该使用复选框，但如果确实有很多下拉选项，而且是复选需求，那么就不再是简单的下拉框了，需要用到更复杂的样式，这里暂时不做重点介绍。

5. 表单：<form>

既然上文我们提到了表单，那就不得不介绍一个非常重要的标签：。该标签修饰的表单能够向后台服务器传输表单数据：

姓名: 
职业: 
点击"提交"按钮，页面将会显示"表单提交成功！"。

其中，『action』写的是我们要提交表单数据到服务器的地址，『method』是服务请求方式，主要分为POST请求和GET请求，这里只需记住，表单的提交大多使用POST请求。

这里我们假设后台服务器地址是另一个HTML文件：”/html_classes/templates/表单提交结果.html”，点击『提交』后将会显示“表单提交成功！”。

注意，在实际业务中，我们的表单提交目的地，应该是服务器的地址，这里我们图方便，举个例子而已。

关于POST和GET请求的一点补充：

• GET请求
  浏览器通过用户的页面操作发起请求，并将请求的数据拼接在URL上传输给后台服务，后台服务对URL进行相关解析，得到请求结果，并将结果返回给浏览器（称之为响应）。

​

URL地址中，从“” />二、总结

至此，我们便已将几个常用的HTML标签学完。但特别强调，HTML标签远远不止我介绍的这些，且我介绍的这些标签的用法也不止于本系列文章，但各位没必要全部记住，也不可能全部记住，大家只需要对这些常用的HTML标签有个大概的掌握即可，最重要的是知道HTML标签究竟是怎么回事。至于其它更多的标签以及标签的不同用法，各位今后在学习工作中用到了再查就行。

：头声明