HTML
本文主要是记录一些HTML中的语法使用；
推荐好用的链接：https://www.w3school.com.cn/index.html
HTML标准结构：
<!DOCTYPE html> <!--通知浏览器使用html来解析本文-->
<html lang="en"> <!--文档的开始标记，该页面html语言为英文，中文：zh--><!---->
<head> <!--请求头-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--请求体-->
<H1>您好</H1>
</body>
</html> <!--文档的结束标记-->
基本标签：
标题标签：
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
段落标签：
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
换行标签：
窗前明月光<br>
疑是地上霜<br>
举头望明月<br>
低头思故乡
文本格式化标签：
<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />
特殊符号链接：
http://tool.chinaz.com/tools/htmlchar.aspx
div&&span标签：
<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
超链接标签：
<a href="https://www.baidu.com/">点击跳转到百度首页</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
<a href="https://www.baidu.com/" target="_top" title="跳转百度">点击跳转到百度首页</a>
target参数说明：
_blank 在新建窗口中打开网页
_parent 在父级框架中打开网页
_self 默认值，覆盖自身窗口打开网页
_top 在顶级框架中打开网页
framename 在指定的框架中打开网页
<a href="https://www.baidu.com/" target="_top" title="跳转百度">点击跳转到百度首页</a>
title参数说明：链接的提示信息
锚点标签：
## 跳转章节所在位置，返回顶部快捷按钮
<a href="#c1">第一章</a>
<a href="#c2">第二章</a>
<a href="#c3">第三章</a>
<span id="top"></span>
<div id="c1">第一章 <a href="#top">返回顶部</a> </div>
<div id="c2">第二章 <a href="#top">返回顶部</a> </div>
<div id="c3">第三章 <a href="#top">返回顶部</a> </div>
img标签：
<!--
src属性： 可以指定本地图片，也可以指定网络上的图片，当图片无法正常显示，则显示裂图
title属性： 悬浮图片上的提示文字
alt： 指定图像无法显示时的替换文本
width属性： 指定引入图片的显示宽度。
height属性： 指定引入图片的显示高度。
border属性： 指定引入图片的边框宽度，默认为0。
-->
<img src="https://img0.baidu.com/it/u=1545652653,1430553056&fm=26&fmt=auto" title="这是一个图片" alt="元旦图片">
<!--点击图片跳转至相关链接-->
<a href="https://www.baidu.com"><img src="https://img0.baidu.com/it/u=1545652653,1430553056&fm=26&fmt=auto"></a>
列表标签：
## 有序无序指有木有数字序号
<!--无序列表-->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<!--有序列表-->
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
表格标签：
## 表格结构：
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>女</td>
</tr>
</table>
## 表格解释：
<tr>: 表行
<th>: 表头（颜色会比td深一点）
<td>:表数据
表单标签：
表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.
form标签属性：
action属性:访问服务器地址
method属性：post、get[默认]
target属性：参考超链接的target属性
enctype属性：
application/x-www-form-urlencoded[默认值]
multipart/form-data [用于文件上传]
text/plain [用于纯文本数据发送]
input标签属性：
<1> 表单类型
type:
# 文本输入框
text
# 密码输入框
password
# 单选框
radio
# 多选框
checkbox
# 日期
date
# 提交按钮
submit
# 按钮(需要配合js使用.) button和submit的区别
button
# form表单需要加上属性enctype="multipart/form-data"
file 提交文件：
上传文件注意两点：
请求方式必须是post
enctype="multipart/form-data"
<2> 表单属性
name:
表单提交项的键.
注意和id属性的区别：name属性是和服务器通信时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value:
表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
select下拉标签属性：
# 下拉菜单
select:
name:表单提交项的键.
size：选项个数
multiple：multiple（多选属性）
optgroup：每一项加上分组
option：下拉选中的每一项属性：
value：表单提交项的值
selected: 下拉选默认被选中
多行文本标签属性：
<textarea name="" id="1" cols="30" rows="10" placeholder="个人简介"></textarea>
placeholder: 提醒信息
按钮标签属性：
## 清空已输入信息
<p><input type="reset" value="重置"></p>
## 普通的按钮，可自己关联事件
<p><input type="button" value="普通按钮"></p>
## 提交事务
<p><input type="submit" value="提交"></p>
lable标签属性：
## 点击文本可以直接进入到输入框
<p><label for="user">姓名</label>
<input type="text" name="user" id="user"></p>
完整示例：
import socket
sock=socket.socket()
sock.bind(("127.0.0.1",8800))
sock.listen(5)
while True:
print("server is working...")
conn,addr=sock.accept()
recv_data=conn.recv(1024)
print("data:",recv_data.decode())
with open('index.html') as f:
html=f.read()
conn.send("HTTP/1.1 200 OK\r\nContent_Length:11\r\n\r\n{}".format(html).encode())
conn.close()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8800" method="get" >
<p><label for="user">姓名</label>： <input type="text" name="user" id="user"></p>
<p>密码： <input type="password" name="pwd"></p>
<p>爱好：
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="shuangseqiu" checked>双色球
</p>
<p>性别：
<input type="radio" name="gender" value="men">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="qita">其他
</p>
<p>生日：<input type="date" name="birth"></p>
<p>籍贯：
<select name="province" id="2" multiple size="2">
<option value="guang">广东省</option>
<option value="shan" selected>山东省</option>
<option value="he">河北省</option>
</select>
</p>
<p>
<textarea name="" id="1" cols="30" rows="10" placeholder="个人简介"></textarea>
</p>
<div>
<p><input type="reset" value="重置"></p>
<p><input type="button" value="普通按钮"></p>
<p><button>普通按钮</button></p>
<p><input type="submit" value="提交"></p>
</div>
</form>
</body>
</html>
效果图：
服务器收到请求信息：
user=zz&pwd=123&hobby=basketball&hobby=shuangseqiu&gender=female&birth=2022-01-13&province=he
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了