浏览器其实就是一个解释器，专门用来解释HTML文件。用浏览器浏览网页就是向服务器发送请求，然后服务器返回html文件由浏览器进行解释输出到屏幕上就是我们看见的网页。（在网页右键——检查就可以看见HTML代码）
例如：
import socket
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost',8089))
sock.listen(5)
while True:
connection, address = sock.accept()
buf = connection.recv(1024)
connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))
connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))
connection.close()
if __name__ == '__main__':
main()用浏览器打开输入自己的IP：8089，就能在网页上看见Hello World！
HTML
什么是HTML？
htyper text markup language 即超文本标记语言
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.
网页==HTML文档，由浏览器解析，用来展示的
静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成的（大多数网页都是动态，可以进行交互）
一个最简单的HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
html文档树形结构图：
标签
- 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
- 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
- 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
- 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
标签的属性
- 通常是以键值对形式出现的. 例如 name="alex" ，<h1 name='alex'>
- 属性只能出现在开始标签 或 自闭和标签中.例如</h1 name='alex'>是不合法的
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 <h1 readonly等价于< h1 readonly='readonly'>
下面对每个标签进行说明
<!DOCTYPE html>标签
由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standarsmode)，这就是二者最简单的区别。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用，所以最好添加上<!DOCTYPE html>避免出现意想不到的错误。
head标签
<meta>
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1: name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
以京东网页为例
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"当name等于keywords时，content里的内容是搜索引擎时搜索的关键词，比如百度搜索网上购物时就能找到京东
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">当name等于description时，content内容将显示在搜索页面的简介里
2: http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)（表示2秒后跳转到百度，如果后面不加网址表示两秒后刷新）
<meta http-equiv="content-Type" charset=UTF8">//(用utf8编码）<title>
以京东为例
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>title里的内容及网页标签上的内容
body标签
一 基本标签（块级标签和内联标签）
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div><span>块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
block（块）元素的特点
总是在新行上开始；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素
inline元素的特点
和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
特殊字符
< >；"；©®
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="搜索关键字">
<meta name="description" content="搜索页面简述">
<meta http-equiv="Refresh" content="10;http:\\www.baidu.com">//10秒后转到百度
<title>这个是标签Title</title>
</head>
<body>
<h1 style="background-color:green">n的取值范围是1~6; 从大到小. 用来表示标题</h1><h2>标题加粗独占一行hello world h2</h2>
<h3>标题加粗独占一行hello world h3</h3><h4>标题加粗独占一行hello world h3</h4>
<h5>标题加粗独占一行hello world h3</h5><h6>n的取值范围是1~6; 从大到小. 用来表示标题.</h6>
<p style="background-color:green">咏鹅(用p)</p>
<p >鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
<p>段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.</p>
咏鹅(不用p,用br进行换行)<br>
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮绿水<br>
红掌拨清波<br>
<b>用b加粗</b>
<strong>用strong加粗</strong>
<strike>用stricke把文字加上中线</strike>
<em style="background-color:blue">用em把文字变成斜体</em>
sub<sub style="background-color:blue">用sub的下角标</sub>
sup<sup style='background-color:blue'>用sup的上角标</sup>
水平线hr<hr>
<div style="background-color:green">div没有特殊功能,用于之后的css,js加工</div>
<span style="background-color:blue">span标签也没有特殊功能，与div不同的是span标签是内联标签</span>
无论中间有多少个空格 输出只有一个空格,除非加上特殊字符nbsp 这样就可以实现多个空格<br>
还有特殊字符<br>
quot"<br>
lt<<br>
gt><br>
copy©<br>
reg®<br>
从颜色可以分辨出块级标签：(p,h1,table,ol,ul,form,div)块级标签可以嵌套块级标签和内联标签<br>
内联标签：(a,input,img,sub,sup,textarea,span)内联标签只能嵌套内联标签
</body>
</html>
二 图形标签: <img>
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)<img src="E:\python3.6\Select_FTP\Server\download\1.jpg" alt="图片不存在" title="壁纸">三 超链接标签(锚标签)<a>
href:要连接的资源路径 格式如下: href="http://www.baidu.com"
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签.
用于跳转 href : #id.（锚）<a href="http://www.baidu.com" target="_blank">百度</a><a href="http://www.baidu.com" target="_blank"><img src="E:\python3.6\Select_FTP\Server\download\1.jpg" alt="图片不存在" title="壁纸"></a>如果想在同一个页面内进行跳转可以在需要跳转到的地方附上id属性，然后在让<a href="#id"></a>就会返回到指定的id部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img</title>
</head>
<body>
<img id="123" src="E:\python3.6\Select_FTP\Server\download\1.jpg" alt="图片不存在" title="壁纸"><!--要跳转到这，添加id='123'-->
<a href="http://www.baidu.com" target="_blank"><img src="E:\python3.6\Select_FTP\Server\download\1.jpg" alt="图片不存在" title="壁纸"></a>
<p><a href="http://www.baidu.com" target="_blank">百度</a></p>
<p><a href="#123">返回顶部</a></p><!--href='#123'就会跳到id为123的地方-->
</body>
</html>
四 列表标签：
<ul>: 无序列表
<ol>: 有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>ol</li>
<li>order list</li>
<li>有序列表</li>
</ol>
<ul>
<li>ul</li>
<li>unorder list</li>
<li>无序列表</li>
</ul>
<dl>
<dt>自定义列表dl</dt>
<dd> 第一行</dd>
<dd>第二行</dd>
<dd>第三行</dd>
</dl>
</body></html>六 表单标签<form>
表单用于向服务器传输数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label 元素。
1.表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值 就是 get（信封）get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
2.表单元素
type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别？
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客
户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
?12345type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<!--需要上传文件时必须要有enctype="multipart/form-data"且method为post-->
<form action="" method="post" enctype="multipart/form-data">
<!--以键值对name:输入的内容的形式发送到服务端,placeholder为输入框内显示的内容-->
<p>姓名<input type="text" name="username" placeholder="姓名"></p>
<p>密码<input type="password" name="password" placeholder="密码"></p>
<!--checkbox为多选模式,以name:value形式发送给服务端,checked参数意思是默认选择-->
<p>爱好: 音乐<input type="checkbox" name="hobby" value="music" checked>电影<input type="checkbox" name="hobby" value="movie"></p>
<!--radio为单选模式以name:value形式发送给服务端,当name值一样时只能选一个-->
<p>性别 男<input type="radio" name="gender" value="male">女<input type="radio" name="gender" value="female"></p>
<!--file为上传文件-->
<p>上传文件<input type="file" name="upload"></p>
<!--reset重置写入的内容,value为需要显示的字符-->
<p><input type="reset",value="重置"></p>
<!--botton只是按钮没作用需要配合js使用-->
<p><input type="botton" value="提交注册"></p>
<!--submit将上面的内容上传给服务端-->
<p><input type="submit" value="提交注册"></p>
</form>
</body>
</html>
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：
value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组 <!--select以键值对name:value发送到服务端，参数size为显示选项个数，multiple为多选模式-->
省<select name="province" size="2" multiple>
<!--option为选项，selected为默认选择-->
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="hubei" selected>湖北省</option>
<option value="hubei">湖南省</option>
<option value="fujian">福建省</option>
</select>name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行<!--textarea为文本输入框，rows设置行，cols设置列-->
<p>简介<textarea name="desc" rows="5" cols="20"></textarea></p><table>表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--table表格，参数border表示框，cellpadding表示字体到内边框距离，cellspacing表示内边框到外边框的距离-->
<table border="1px" cellpadding="50px" cellspacing="5px">
<!--thead:table head表格头-->
<thead>
<!--tr:table row 表示表格的一行-->
<tr>
<!--th表示加粗-->
<th>111</th>
<th>222</th>
<th>333</th>
</tr>
</thead>
<!--tbody:table body表格主体-->
<tbody>
<tr>
<!--td表示正常字体-->
<!--rowspan表示占两行-->
<td rowspan="2">111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>111</td>
<!--colspan表示占两列-->
<td colspan="2">444</td>
</tr>
</tbody>
</table>
<h2>其实有没有thead/tbody都一样，只是为了更好的看出每个部分</h2>
<table border="1px" cellspacing="5px" cellpadding="50px">
<tr>
<th>111</th>
<th>222</th>
<th>333</th>
</tr>
<tr>
<td rowspan="2">111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>111</td>
<td colspan="2">444</td>
</tr>
</table>
</body>
</html>
总结：
不一定需要name属性的标签：不需要上传至服务端，只需与客户端交互的标签但是需要value值来显示，如submit，botton，reset等。
不一定需要value属性的标签：需要输入或者上传的标签，其value值默认为输入或上传的内容但是需要name值当键值，如text，password，file，textarea等。
必须要name与value属性的标签：选择类，如CheckBox，radio，select等
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
