网站访问的本质可以理解为就是socket间的相互通信。

举个例子：

编写一个简单的socket服务端。

 1 #!/usr/bin/env python3
 2 #-*- coding:utf-8 -*-
 3 '''
 4 Administrator 
 5 2018/9/4 
 6 '''
 7 
 8 import socket
 9 def web():
10     sk=socket.socket()
11     sk.bind(('localhost',8090))
12     sk.listen(5)
13     while True:
14         conn,addr=sk.accept()
15         buf=conn.recv(1024)
16         print(buf.decode("utf8"))
17 
18         conn.sendall(bytes("HTTP/1.1 201 OK \r\n\r\n","utf8"))
19         conn.sendall(bytes("<h1>Hi,Changzhou!</h1>","utf8"))
20     conn.close()
21 if __name__=="__main__":
22     web()
23 # sk.close()

在服务端中，接受一个数据。然后发送一串数据。

使用谷歌浏览器作为客户端在地址栏输入访问id和port: 127.0.0.1:8090

打印socket接受到的信息：

"D:\Program Files (x86)\python36\python.exe" F:/python从入门到放弃/9.4/demo.py
GET / HTTP/1.1
Host: 127.0.0.1:8090
Connection: keep-alive
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9


GET /favicon.ico HTTP/1.1
Host: 127.0.0.1:8090
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://127.0.0.1:8090/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

View Code

同样的道理：我们把服务端的文件改造一下：

import socket
def web():
    sk=socket.socket()
    sk.bind(('localhost',8090))
    sk.listen(5)
    while True:
        conn,addr=sk.accept()
        buf=conn.recv(1024)
        print(buf.decode("utf8"))
        with open("hello.html",'rb') as f:#打开文件，读取文件
            data=f.read()
        conn.sendall(data)
        # conn.sendall(bytes("HTTP/1.1 201 OK \r\n\r\n","utf8"))
        # conn.sendall(bytes("<h1>Hi,Changzhou!</h1>","utf8"))
    conn.close()
if __name__=="__main__":
    web()
# sk.close()

在同级文件夹下编写一个HTML文件：

1 HTTP/1.1 201 OK
2 
3 
4 <h1>Hi,Changzhou!</h1>

hello.html

运行结果：

HTML文档的后缀名

.html
.htm

以上两种后缀名没有区别，都可以使用。

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

这是一个段落。

什么是标签

是由一对尖括号包裹的单词构成例如: <html> *所有标签中的单词不可能以数字开头.
标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
标签分为两部分: 开始标签<a> 和结束标签</a>. 两个标签之间的部分我们叫做标签体.
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <hr/> <input /> <img />
标签可以嵌套.但是不能交叉嵌套. <a></a>

标签的属性

通常是以键值对形式出现的. 例如 name="alex"
属性只能出现在开始标签或自闭和标签中.
属性名字全部小写. *属性值必须使用双引号或单引号包裹例如 name="alex"
如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <h1>hello</h1>
 9     <h2>world</h2>
10     <hr/>
11     <div>
12         <p>
13             这是一段美丽的神话。
14         </p>
15     </div>
16         <input readonly="readonly">
17     <p>如果属性的名字和属性值是一样的，则可以只写一个属性名就可以了。</p>
18 
19     <!--<script>-->
20         <!--alert(window.top.document.compatMode)-->
21 
22     <!--</script>-->
23 </body>
24 </html>

demo.html

<!DOCTYPE html>标签

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在
W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility
Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars
mode)，这就是二者最简单的区别。
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，
很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以
前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode
和Standars mode，两种渲染方法共存在一个浏览器上。

window.top.document.compatMode：
//BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 
//CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的

标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

head标签

<meta>

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1: name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
 
<meta name="description" content="这是一个描述网站的简介地址。">

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="keywords" content="软件，开发,项目管理系统,OA,科技公司">
 6     <meta name="description" content="这是一家软件公司。业务范围在全国各个地区提供开发服务
 7             为广大提起提供完善的企业解决方案">
 8 
 9     <title>Title</title>
10 </head>
11 <body>
12     <h1>hello</h1>
13     <h2>world</h2>
14     <hr/>
15     <div>
16         <p>
17             这是一段美丽的神话。
18         </p>
19     </div>
20         <input readonly="readonly">
21     <p>如果属性的名字和属性值是一样的，则可以只写一个属性名就可以了。</p>
22 
23     <script>
24         alert(window.top.document.compatMode)
25     </script>
26 </body>
27 </html>

网站搜索关键词和网站描述

　　2: http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content， content中的内容其实就是各个参数的变量值。

1 <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
2  
3 <meta http-equiv="content-Type" charset=UTF8">
4  
5 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

注意：X-UA-Compatible

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中
一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设，这会
使页面以旧版本浏览器的视点显示，"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。
然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏
览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的
切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6
不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的
特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影
响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮
助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加
了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新
你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器
编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 <!DOCTYPE> 指令来确
定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式
（Quirks 模式）显示该网页。