一.前言
上节和大家讲了http协议，以及手搓了一个socket框架让大家理解，而本章内容我将也围绕这socket后端和大家讲，方便大家理解
二.HTML概述
了解了web相关基本概念以后，我们开始正式接触网页开发，网页开发的基础是HTML，所以，本章内容主要分两部分，一是介绍HTML的相关概念、发展历史，二是 创建HTML网页文档和认识HTML的基本结构。我们学会如何新建一个 HTML 页面和熟记HTML文档的基本结构和主要标签。
HTML，即超文本标记语言（HyperText Markup Language ]），由SGML (标准通用标记语言) 发展而来，也叫web页面。扩展名是 .html 或是 .htm 。
HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。
HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。
自1990年以来HTML就一直被用作WWW（World Wide Web的缩写，也可简写WEB，中文叫做万维网）的信息表示语言，使用HTML语言描述的文件，需要通过网页浏览器显示出效果。用户在访问网页时，是把服务器的HTML文档下载 到本地客户设备中，然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果。
网页本身是一种文本文件，通过在文本文件中添加各种各样的标记标签，可以告诉浏览器如何显示标记中的代表的内容，如：HTML中有的标签可以告诉浏览器要把字体放大，就像word一样，也有的标签可以告诉浏览器显示指定的图片，还有的标签可以告诉浏览器把内容居中或者倾斜等等。
每一个HTML标签代表的意义都不一样。同样，他们在浏览器中表现出来的外观也是不一样的。
三.HTML标准结构
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>1、
<!DOCTYPE html>告诉浏览器使用什么样的html或者xhtml来解析html文档2、
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个HTML文档，在它们之间是文档的头部<head>和主体<body>。3、
<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。4、
<title></title>定义网页标题，在浏览器标题栏显示。5、
<body></body>之间的文本是可见的网页主体内容6、
<meta charset="UTF-8">声明编码方式用utf8
四.标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
1、HTML标签是由尖括号包围的特定关键词
2、标签分为闭合和自闭合两种标签
3、HTML不区分大小写
4、标签可以有若干个属性,也可以不带属性,比如<head>就不带任何属性
5、标签可以嵌套,但是不可以交叉嵌套
6、在很早以前HTML4的时候，HTML的标签是大写的，但在后面的发展中，人们发现HTML仍然存在很多不足，标签不区分大小写和标签可以胡乱嵌套都在其中，于是1998 年语法更为完的XML（ The Extensible Markup Lanxguage 可扩展标记语言 ）成为推荐标准，意在替代HTML。和HTML一样，XML同样来源于SGML，但当时已有成千上万的站点，因此直接使用XML作为网页开发技术根本就不可能。因此，后面W3C就在HTML4.0的基础上，参照XML的语法规则对HTML进行扩展，形成了XHTML （ The Extensible HyperText Markup Language ，可扩展超文本标记语言 ）的1.0版本。所以，XHTML是实现 HTML 到 XML的 过渡。
五.基本标签
5.1 标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
这个的效果不就是标题么，简简单单
5.2 段落标签
<p>大家好，我是段落1。</p>
<p>大家好，我是段落2。</p>
<p>大家好，我是段落3。</p>
段落标签很简单，就只有一个p，但是我们学习这个标签不仅得知道这个，还得知道他和不加这个的区别
如上图，我们给一段话中间加了很多空格，然后还加上了一个换行符，我们去浏览器看看效果
发现多个空格都只能显示一个空格，换行也是默认一个空格
而p标签我们看看效果，他就相当于是独占一行，同时，他的换行符和多个空格都默认是一个空格，这种独占一行的也就是我们的块级标签，反之则是内联标签，这个一会和大家介绍的，至于如何实现多个空格，也会和大家介绍的
5.3 换行标签
<br/>
换行标签很简单，就一个这个，就把他当成编程中的 \n 就行了 、
5.4 文本格式化标签
HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字。如果需要在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化，这个就像是world文档中的字体的格式
<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />
效果分别是上面这样的，可以发现这个每个我都加了个br换行，这是因为这些都是内联标签
5.5 特殊字符
® ©
我们看看效果
这几个是常用的特殊符号，如果遇到相用的直接去搜索html特殊符号大全，中间的哪个 也就是空格，可以记忆成牛逼space，那我们现在不就可以实现中间有多个空格的嘛
5.6 div和span标签
在介绍这两个标签之前，我们首先得知道我们前面说的块级标签和内联标签，这个是从格式把标签大致分为两类
块级标签(block) -- 独占一行
内联标签(inline) -- 按文本内容占位
这个非常简单，但是要记忆起来还是很难的，我们先记下每个标签的具体功能，然后最后再汇总哪些是块级标签，哪些是内联标签
<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
块级元素与行内元素的区别所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的，我们到后面css的时候就重点讲这两个标签了
六.超链接标签
6.1 超链接的基本使用
超链接是浏览者和服务器的交互的主要手段，也叫超级链接或a链接，是网页中指向一个目标的连接关系，这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。
超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的，用户通过点击超链接可以从一个网页跳转到另一个网页。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时，遇到一个不认识的英文，你只要在这个单词上单击一下，即可跳转到它的翻译页面中，看完单词的解释后点一下返回按钮，又可继续阅读，这就是超链接的常见用途。还有经常到购物网站中去，我们都是在百度搜索，然后点击对应的搜索项进入到对应的购物网站的，这也是超链接的作用。
<a href="https://blog.csdn.net/weixin_74178589?spm=1011.2124.3001.5343">往日情怀酿作酒的博客</a>
这个就是最基本的使用，当然里面还有其他的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| href | 网络链接 [ 例如: 百度一下，你就知道 ] 本地链接 [ 例如：F:\html\index.html ] | 规定链接的跳转目标 |
| title | 百度 | 链接的提示信息 |
| target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过 |
这就是 基本的效果了，大家可以去测试一下其他的效果
6.2 锚点
点( anchor )是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运用相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。又例如，我们页面中，有个链接需要跳转到另一个页面的中间或者脚部去，这时候也可以运用上锚点技术来解决这个问题。
这里我直接给代码，大家自己演示一下
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{height: 1600px;background-color: aquamarine;}</style>
</head><body><a href="#i1">第一章</a><span id="top"></span><a href="#i2">第二章</a><a href="#i3">第三章</a><div id="i1"><p>第一章内容</p></div><a href="#top">跳转到开头</a><div id="i2"><p>第二章内容</p></div><a href="#top">跳转到开头</a><div id="i3"><p> 第三章内容</p></div><a href="#top">跳转到开头</a></body>
</html>这个前面的style里面是css内容，大家不知道的话就不用管，主要是要页面间隔比较大，能够跳转，我们可以给div绑定一个id，然后a标签的hred=#id 这样就可以跳转了，大家测试下就知道了
a标签在我们后续中应用非常广泛，因为基本上网页里面都会有跳转链接，也就是客户端像浏览器发送请求的，一共只有四种
1、地址栏请求 get请求
2、超链接标签 get请求
3、form表单 get、post请求
4、ajax
而第一种大家都知道，第二种也就是a标签，第三种是我们今天后面重点介绍的，第四种就是学js学到的。
七.img标签
<img src="" alt="">
img标签的属性：
/*
src属性：
指定图像的URL地址，是英文source的简写，表示引入资源。
src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。
width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
*/当然，这些width属性我们一般都是在css里面使用的
点击图片跳转可以配合a标签使用
<a href=""><img src="" alt=""></a>
八.列表标签
<ul type="square">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul><ol start="100">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
大家可能不好记忆，但是记住名字就行了
ul：unorder list
ol：order list
li：list
这样就非常好记忆了
九.表格标签
9.1 table结构
table的结构有两种，我们常见的是第一种
第一种：
<table border="1">
<tr>
<td>单元格的内容</td>
……
</tr>
……
</table>第二种：
<table border="1"><thead><tr><th>单元格的内容</th>......</tr>......</thead><tbody><tr><td>单元格的内容</td>......</tr>......</tbody> </table>
第二种只是更完整 一个tr代表一行 th和td的区别就是th是加粗的
1、
<table>和</table>表示一个表格的开始和结束。一组<table>...</table>表示一个表格。2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。
3、
<tr>和</tr>表示表格中的一行的开始和结束。一组<tr>...</tr>，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。4、
<td>和</td>表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了
9.2 table的属性
| 属性 | 值 | 描述 |
|---|---|---|
| width | px、% | 规定表格的宽度。 |
| height | px、% | 规定表格的高度。 |
| align | left、center、right | 规定表格相对周围元素的对齐方式。 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 规定表格的背景颜色。 |
| background | url | 规定表格的背景图片。 |
| border | px | 规定表格边框的宽度。 |
| cellpadding | px、% | 规定单元格边框与其内容之间的空白。 |
| cellspacing | px、% | 规定单元格之间的空隙。 |
9.3 td的属性
表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。
| 属性 | 值 | 描述 |
|---|---|---|
| height | px、% | 规定单元格的高度。 |
| width | px、% | 规定单元格的宽度。 |
| align | left、center、right | 规定单元格内容的对齐方式。 |
| valign | top、middle、bottom | 规定单元格内容的垂直对齐方式。 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 规定单元格的背景颜色。 |
| background | url | 规定单元格的背景图片。 |
| rowspan | number | 规定单元格合并的行数 |
| colspan | number | 规定单元格合并的列数 |
十.表单标签
表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.
表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。
一个表单元素有三个基本组成部分：
-
表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
-
表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
-
表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性：
| 属性 | 值 | 描述 |
|---|---|---|
| action | 访问服务器地址 | 服务器端表单处理程序的URL地址 |
| method | post、get[默认值] | 表单数据的提交方法 |
| target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 |
| enctype | application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] | 表单提交数据时的编码方式 |
然后在我们form表单下面常见的有input select textarea button四个标签，input不同的类型有不同的功能，然后在讲这个的时候，我可能不会讲的特别的到位，因为文字不好描述完全，这里我采用前后端一起方便大家理解，我们拿出昨天讲http的那个socket代码，我们稍微更改一下作为我们的服务端
我们创建一个index.html
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- 这个就是防止服务端发送需要图标的处理方式--><link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon">
</head>
<body>
<h1>欢迎来到往日情怀酿作酒的博客</h1></body>
</html>服务端：
import socketsock=socket.socket()
sock.bind(("0.0.0.0",8800))
sock.listen(5)with open(file='./index.html',mode='r',encoding='utf-8') as f:data=f.read()
while 1:print("server is working...")conn,addr=sock.accept()recv_data=conn.recv(1024)print(recv_data.decode())conn.send(b"HTTP/1.1 200 OK\r\n\r\n"+data.encode())conn.close()sock.close()这样我们就把后端准备好了，我这里直接把所有的作用写成代码和数据，大家可以试一下
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><h3>用户注册</h3><form action="http://127.0.0.1:8800" method="post" enctype="application/x-www-form-urlencoded"><!-- type=text 显示明文 如果提交的话一定要加上这个name 这样才能打包过去 placeholder=代表框中灰色显示--><p>姓名：<input type="text" name="user" placeholder="用户名"></p><!-- type=password 显示密文 如果提交的话也一定要加上name --><p>密码：<input type="password" name="pwd"></p><!-- type=checkbox 复选框 必须得带上name和value 如果选中就代表把键值拼接在一起发给服务端 checked是bool标签 写上就代表默认选中--><p>爱好：篮球：<input type="checkbox" name="hobby" value="basketball">足球：<input type="checkbox" name="hobby" value="football">双色球：<input type="checkbox" name="hobby" value="shuangseqiu" checked></p><!-- type=radio 单选框 他会给name一样的值只能选择一个 --><p>性别：男：<input type="radio" name="gender" value="boy">女：<input type="radio" name="gender" value="girl">其他：<input type="radio" name="gender" value="other"></p><!-- type=date 日期表单 一定要有name才能发给服务器 但是发给服务器的形式是 2020-1-1 中间用-作为分隔符 一会看后端就知道了--><p>生日：<input type="date" name="birthday"></p><!-- 下拉菜单 select里面加上multiple (bool类型)就可以多选 size=3代表展示多少个 -->
<!-- option里面加上selected（bool类型）代表默认选中，如果是多选 可以加上多个selected--><p>籍贯：<select name="pronvice"><option value="anhi">安徽省</option><option value="dongbei">东北省</option><option value="beijing">北京市</option></select></p><p><!-- type=submit 提交按钮 form表单下面一定要加上这个 不然的话数据无法发送给服务端--><input type="submit"><!-- type=button代表这个是一个普通标签 没有绑定事件 后续学js可以给他绑定许多事件 --><input type="button" value="按钮"><!-- type=reset 重置按钮 --><input type="reset"><!-- 在form里面充当submit功能 在form外面就是button的作用 --><button>提交数据包</button></p></form><p><!-- label的作用就是用for绑定一个id 然后点击这一块区域都可以点击到 可以给用户很好的体验感--><label for="xxx">label的作用</label>： <input type="text" name="label" id="xxx"></p></body>
</html>
我们把这个提交了
可以发现我们的数据也都拿到了，大家可以拿着这个代码去试试，我也给了详细的注释，这里给大家总结一下
input标签 type类型：
text：明文 常用于用户登录
password：密文 常用于密码
checkbox：复选框 常用于兴趣爱好
radio：单选框 常用于性别
date：日历选择 常用于生日
reset：重置按钮 重置form页面所有元素
buutton：普通按钮 绑定js的功能
submit 提交功能select标签 里面跟着option标签 作为下拉框
textarea标签 长文本框
label标签 让两块内容区域结合在一起
button标签 在form里面实现提交功能 在form外面就是普通按钮 用来绑定js事件
还有就是块级别标签和内联标签的总结：
块级标签 （block）:
独占一行
p , h1-h6 ，div，ul，li
内联标签 （inline）:
按内容占位置
b，strong，i，em del，span
a，img，input
十一.总结
今天讲的内容很多，其实很好理解的，大家前后端结合起来，会更好的理解，不要偷懒，多敲敲，慢慢的就都掌握啦，下一期将和大家讲css
十二.补充
有什么问题私我，记得点赞关注加收藏哦，有求必应，有什么需求已经想要学习资料都能看我名字
