一、简要描述html
1、 html、css、js为前端开发需要用到的三块内容，html可以理解为人的骨架，css理解为人的衣服、js使让人动起来
2、html的本质就是个文本Hyper Text Mark-up Language(超文本标记语言)，本质就是一个文本文件
3、网页的各种格式，实质是一个文本文件，在文本中添加相应的标记，浏览器相当于是将这个文件下载下来，并按照规矩翻译这些标记，使得这个文件被浏览器显示出一个漂亮的格式出来。
4、浏览器访问网页的时，通过socket和服务器建立相应的会话，之后翻译服务器传过来的内容，和一般的socket通信不同的是，一个页面请求完毕后，这个浏览器和服务器之间的socket就会自动断开，当再次点击界面后，会重新建立新的socket会话。
一则代码演示网页访问的原理
import socket #step 1
server1=socket.socket(socket.AF_INET,socket.SOCK_STREAM) server1.bind(('0.0.0.0',12345)) server1.listen()
#step 2
while True: conn1, addr1 = server1.accept() print(2) data=conn1.recv(1024) #step 3
conn1.send(b'HTTP/1.1 200 OK\r\n\r\n') #step 4
conn1.send(b'hello world') #step 5
conn1.close() print('ok')
说明:step1 本地建立socket 监听12345端口，step 2 进入循环，带阻塞的等待有会话接入，step 3 当有client和这个端口建立会话，并发送响应的请求后，服务器先回复给client HTTP/1.1 200 OK\r\n\r\nr这个内容，作为和client浏览器确认
step 4 server发送给client浏览器页面的正文，此处可以通过open指令直接读取文件并以byte类型发送给client，step 5 client 接收到到内容后，按照html的规则翻译这段文本，并最终显示在界面。
此处可以做一个拓展，将浏览器发送过来的data保存到文件中，可以用来分析。此处不做深入
二、熟悉html基本结构
我们来新建一个html的文档
1、html的结构，三个标签及其属性的认识---> doctype/body /head
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
我们将其进行折叠
折叠为两行
标签的理解：在html中每个使用<>符号包裹起来的内容都称之为标签
标签名：在上图中，有两个标签，一个是<!doctype html>的doctype标签，一个是<html lang='en'> <html />的html标签。
标签的属性：每个标签，有标签的名字如html标签，doctype标签，每个标签，有自己的属性写在标签内部，如doctype标签的html，如html标签的lang。
doctype标签的作用：doctype标签其作用为告诉浏览器使用什么样的规则来解析这个html文件。
这个规则有很多，目前最常用的规则标准为html。
html包含一个head和一个body：html标签：一个html文件有且只有一个html标签，我们将html表述为一个人的主干，躯体，那么html标签，就相当于告诉外界，我是一个‘人’。
html标签中的lang属性，告诉浏览器，我这个页面，文件所使用的语言是什么语言。在我们使用一些浏览器时，如谷歌浏览器，我们会看到界面提示，是否翻译此页面，浏览器就是通过这个lang属性来知道页面的语言种类的。
html标签和doctype标签对比，doctype标签前方有一个！此处先不考虑！，最明显的区别为，在使用html标签时，一般的编辑器，如pycharm、notepad，在输入<html>后都会附带出<html />。这里就要说到标签的分类了，
2、标签的分类：
自闭合标签 ：只需要写一个<>就能正常使用的标签
主动闭合标签：写了一个<标签名>后，还需要写一个< /标签名>，才能正常使用的标签
此处我们先不考虑有哪些标签时自闭合，有哪些是主动闭合，下文会做归纳。
现在我们将html标签展开来看看html标签内部有哪些内容。
我们将html标签展开，可以看到内部嵌套了两个标签，分别是head标签和body标签（此处我们可以认识到多种不同的标签之间还可以互相嵌套的，当然嵌套也要满足规律，如html标签有且只有一个，你不能在其它地方乱嵌套）
一个html文件是一个人 那么这个人有一个头一个身体，即一个html文件中有且仅有一个html标签，这个标签展开有且仅有一个head标签和一个body标签，这个head标签和body标签都是主动闭合的标签。
3、注释的写法
和python不同的是，html文件中注释的写法不使用#号，而是使用<!-- -->的形式
如：
<!--注释的写法-->
以上就是html文件的基本格式，所有的html文件都必须按照这个规律来写。
三、head标签内的标签
head标签 大脑，除了title标签外其他所有的标签都是内在的标签,即title标签能直接从浏览器外观看出来，其他的标签不能直接看出来
现在我们展开head标签来学习head标签内部可以使用的标签
1、meta标签
meta可以描述页面编码、刷新、重定向、关键字、描述、ie6兼容性问题。其中编码较为常用，重定向和刷新可以使用location完成，这个location下文会提到。关键字和描述以及ie6使用的比较少，了解即可
<head> <meta charset="UTF-8">
1.1 页面编码
<meta charset=‘utf-8’> 告诉浏览器使用什么编码
1.2 刷新和跳转
<meta http-equiv="Refresh" content="3"> <meta http-equiv="Refresh" content="3;URL=http://www.360.cn">
这种跳转的实现方式比较少使用，在日常工作中又倒计时的跳转通常是使用js来实现。
1.3 关键字与描述
关键字keywords 与描述description 一般提供给搜索引擎用来快速获取网页内容
<meta name="keywords" content="刷新，跳转，关键字"> <meta name="description" content="just for learning">
1.4 IE6的兼容性问题
简单说早起IE6有一套自己的规则，导致很多网页在其他的浏览器显示正常，在IE6上显示不正常。随着发展业内有了新的统一标准。
新标准后，还有一部分网站是使用了旧的IE6的规则进行编写，IE8为了解决IE6的情况，推出了兼容模式，如果使用兼容模式，则网页还按照IE6的规则进行打开
目前，IE6已经退出江湖很多年了，现在的网站开发人员都不需要再考虑使用IE6规则的情况。
在那个时期，一些网页回去告知浏览器使用新规则打开网页，则出现了这个指令，现在仅作为了解。
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
2、title标签
title标签用来表示网页标签页显示的内容
<title>页面刷新与跳转</title>
3、head标签内的其他标签
3.1 link标签的图标添加
<title>页面刷新与跳转</title> <link rel="shortcut icon" href="360.ico">
3.2 一些后面会补充的head内的标签的内容
<link /> ->添加css
<style /> ->写css
<script></script> ->写js或jQuery
四、body内的标签
1、各种符号->空格 、大于>、小于<、特殊符号
在网页中，我们要显示各种符号或空格的时候，有专门的标记来显示,格式是&+字母+;的形式显示。
为什么要使用这些标志来显示特殊符号呢，做个比方，我要再界面显示一个<html>这样一个内容,如果我在html文件中直接输入<html>那么会被识别为html标签。
so...
这些特殊符号有很多，我们需要记忆的是空格号，大于号，小于号，其他的在使用时查询即可。空格 、大于>、小于<
2、<p></p>段落与<br />换行
p标签，主动闭合标签，用来进行分段操作。可以观察到，行与行之间是有行间距的。
br标签，自闭和标签，用来段落内换行，可以从图上注意到行与行的间距与段落的间距之间的差别。
还需要注意的是，手工输入的回车，并不能在浏览器中被显示。
html中，直接敲击回车可以将代码换行，但是在html被显示的时候，不能讲显示结果换行需要使用<br>也可以写成<br />
<p> paragraph 1 this is <br />the paragraph 1. </p> <p> paragraph 2 this is the paragraph 2. </p>
3、H 标签
h标签用来加大加粗表示标题。
标题之间也是有间隙的
h标签使用的较少，因为在后面，我们可以使用div或者span来实现这些效果
4、span标签
span标签 主动闭合标签
没有固定的格式，是一个白板，在后面的内容中，我们可以将白板的内容加工成各种我们想要达到的显示效果。（通俗的说就是为所欲为）
5、div标签
与span相同div标签也是白板，在后面的内容中，我们可以对白板为所欲为
6、span与div的对比，标签的两种分类
所有标签分为：
块级标签（霸占一整行）： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
->span标签和div标签是可以互相转换的通过display(css内容)。此处先不考虑
span行内标签的展示：
h标签快标签的展示：
7、input标签与form标签
7.1 常规操作，input与4种type
text、password、button、submit
button和submit按钮上的文字使用value属性来实现
<span>登录名:</span><br/> <input type="text" name="user"><br/> <div>email:</div> <input type="text" name="email"><br/> <span>密码:</span><br/> <input type="password" name="pwd"><br/><br /> <input type="button" value="按钮"> <input type="submit" value="提交">
实现的效果：
7.2 input内容的提交：form两种提交方式
需要使用form结合input来提交内容
提交有两种方式
方式一:GET 默认也是GET
方式二:POST
get与post的区别为
get会将需要提交的内容拼接在url中传输
post会将需要提交的内容包含在数据包中传输，不在url中体现。
post和get都是明文，并没有哪个方式安全这个说法。
提交内容需要做的三个步骤
步骤一：form标签 form中需要定义action 即将内容提交到的位置。method不填为get，也可以写成method=‘’get‘’ ,post方式则method=‘post’
步骤二：输入内容的标签：此处为input标签（上文的p标签，div标签，span标签的内容都不会被提交，上文的所有标签只有input能被提交）
步骤三：按钮，从图片看 button和submit的外观一致，但此处我们只能使用submit来提交我们input的内容。button按钮，目前已有的知识点无法完成提交。
<p> <div>默认GET</div> <form action="http://localhost:8888/index" > <span>登录名:</span><br/> <input type="text" name="user" value="alex"><br/> <div>email:</div> <input type="text" name="email" value="[email protected]"><br/> <span>密码:</span><br/> <input type="password" name="pwd" value="123"><br/><br /> <input type="button" value="按钮"> <input type="submit" value="提交"> </form> </p> <p> METHOD='POST' <form action="http://localhost:8888/index" method="post"> <span>登录名:</span><br/> <input type="text" name="user"><br/> <div>email:</div> <input type="text" name="email"><br/> <span>密码:</span><br/> <input type="password" name="pwd"><br/><br /> <input type="button" value="按钮"> <input type="submit" value="提交"> </form> </p>
先验证get的效果
提交发现，get动作时
input标签的name属性则为变量名，input框内容为变量值，然后?为分隔符每个变量依次拼接到url中发起请求。
验证post请求
post请求不会将input框内的内容拼接到url中。
type=‘text'或type='password'时，输入框中默认值的输入方法。
value属性
<input type="text" name="user" value="alex"><br/> <input type="password" name="pwd" value="123456"><
调用百度搜索的方法
我们在使用百度的时候发现，百度的url是通过get的方式拼接搜索关键字进行搜索的
所以我们可以调用这个搜索功能
<p> <div>调用百度搜索</div> <form action="http://www.baidu.com/s"> <span>搜索的内容:</span><br/> <input type="text" name="wd"><br/> <input type="button" value="按钮"> <input type="submit" value="搜索"> </form> </p>
成功完成搜索
8、单选框与多选框
type='radio'、type='checkbox'
<div> <p>请选择性别:</p> 男:<input type='radio' value='1' name='sexradio'> 女:<input type='radio' value='2' name='sexradio' checked="checked"> <!--name相同 互斥 --> </div> <input type='submit' value='注册'> <br /> <br /> <br /> <div>爱好：</div> 篮球：<input type="checkbox" name="favorite" value="1"/> 足球：<input type="checkbox" name="favorite" value="2"/> 乒乓球：<input type="checkbox" name="favorite" value="3" checked="checked"/> 羽毛球：<input type="checkbox" name="favorite" value="4" checked="checked"/> <br /> <br /> <br /> <div>技能：</div> 做饭：<input type="checkbox" name="skills" value="1"/> 洗碗：<input type="checkbox" name="skills" value="2"/> 拖地：<input type="checkbox" name="skills" value="3" checked="checked"/> <br /> <br />
说明：
当名字相同时:radioz还能有一个被勾选，作为单选使用
当名字相同时:checkbox可以有多个被勾选，同时name作为变量名，可以有多个变量值被提交。
需要默认值是，添加checked=‘checked’属性即可。
9、文件的上传
type='fiie' 与form 属性 enctype="multipart/form-data"的结合
注意enctype的位置
<form enctype="multipart/form-data"> <br /> <div>上传照片 :<input type="file" name="fname"></div> <br /> </form>
效果如下：
10、textarea与select标签
textarea标签
没啥难度 name为变量名 默认值写中间
<textarea name='t1'>默认值写中间</textarea>
url的情况
select标签
普通下拉 select option
调整窗口 size
多选 multiple=‘multiple’
分组标签 optgroup lable
默认选项 selected='selected'
<select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4" selected="selected">深圳</option> </select> <select name="company" size="2"> <option value="1">腾讯</option> <option value="2">阿里</option> <option value="3">百度</option> <option value="4" selected="selected">京东</option> </select> <select name="want" size="5" multiple="multiple"> <option value="1">北大</option> <option value="2">清华</option> <option value="3">交大</option> <option value="4" selected="selected">复旦</option> </select> <select name="test" > <optgroup label="985大学"> <option value="1">北大</option> <option value="2">清华</option> <option value="3">交大</option> </optgroup> <optgroup label="二本大学"> <option value="4">空</option> <option value="5">空</option> <option value="6">空</option> </optgroup> <optgroup label="三本大学"> <option value="7">空</option> <option value="8">空</option> <option value="9">空</option> </optgroup> </select>
11、a 标签 跳转（2种）与锚点
直接跳转打开
新页面跳转打开 target=‘_blank’
锚点的使用 href=‘#key’ ->#+id
<p> <a href="http://www.baidu.com" target="_blank">新会话框，打开百度</a> <br> <a href="http://www.360.cn">直接转到360</a> </p> <p> <a href="#i1">第1章</a> <a href="#i2">第2章</a> <a href="#i3">第3章</a> <a href="#i4">第4章</a> <div id='i1' style="height:600px">第一章节</div> <div id='i2' style="height:600px">第二章节</div> <div id='i3' style="height:600px">第三章节</div> <div id='i4' style="height:600px">第四章节</div> </p>
效果展示
12、img标签
src、title、alt的使用
结合a标签跳转的使用
<a href="http://www.baidu.com"> <img src="tuzi.jpg" style="height:300px;width:300px" title="小兔子" alt="小兔兔"> </a>
alt在没有加载出图片时，显示名称
13、三种列表（不常用）
ul与li
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul>
样式
ol与li
<ol> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ol>
ol样式
dl与dt/dd
<dl> <dt>A</dt> <dd>a</dd> <dd>b</dd> <dt>B</dt> <dd>a</dd> </dl>
dt为标题 dd为内容
14、table标签 单元格合并
表格
不正规的写法
table内直接写 tr 表示行 td表示列 border='1'显示边框
<table border="1"> <tr> <td>1-1</td> <td>1-2</td> <td><a href="http://www.baidu.com">1-3</a></td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td><a href="http://www.baidu.com">2-3</a></td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td><a href="http://www.baidu.com">3-3</a></td> </tr> </table>
正规的写法与合并单元格
table标签内分为thead与tbody ，thead内表示标题，有tr与th、tbody内表示内容有tr与td 合并单元格为tr处 使用rowspan（列），与colspan控制（行）
<table border="1"> <thead> <tr> <th colspan="4">信息统计表</th> </tr> <tr> <th>学年</th> <th>学校</th> <th>班级</th> <th>姓名</th> </tr> </thead> <tbody> <tr> <td rowspan="6">2018年</td> <td>北大</td> <td>1班</td> <td>tom</td> </tr> <tr> <td>清华</td> <td>2班</td> <td>李东</td> </tr> <tr> <td>复旦</td> <td>1班</td> <td>小明</td> </tr> <tr> <td>交大</td> <td>2班</td> <th>李猛</th> <!-- th加粗--> </tr> </tbody> </table>
注意李猛，使用th可以突出显示，一般用在thead内
15、label标签
for中写id号用于和input中的id相关联，点击lable标签即可跳转到输入框
lable与a标签跳转的区别 一个使用for 一个使用href 同时一个为直接的id号，一个为#id
<label for="i1">用户名：</label> <input id='i1' type="test">
16、fieldset（较少使用） 与legend标签的结合（legend中嵌套了一个lable）
<fieldset> <legend><label for="i1">登录框</label></legend> <label for="i1">用户名：</label> <input id='i1' type="test"> <br> <br> <label for="i2">密码：</label> <input type="password" id="i2"> </fieldset>
