〇——HTML的本质以及在Web程序中的作用

对于所有的Web应用，其实本质上都是一个socket服务端，用户的浏览器就是一个socket的client，我们看看下面这段代码

import socket
  
def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK

",encoding = 'utf-8'))
    client.send(bytes("Hello, Seven",encoding = 'utf-8'))
  
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8000))
    sock.listen(5)
  
    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()
  
if __name__ == '__main__':
    main()

运行一下，然后在浏览器里访问一下下面的地址

http://localhost:8000/

看看是不是接受到了服务器发送的字符串！这个过程就是通过socket实现了web应用的本质。而对于真实开发的Python Web来说，一般都会分为两部分：服务器程序和应用程序。服务器程序负责对socket服务器进行封装，并在请求到来的时候，对请求的各种数据进行整理。应用程序则负责具体的逻辑处理。为了方便应用程序的开发，已经出现了很多种Web框架：Django，Flask、web.py等等。这里就不再说明，以后再讲。

话说回来，上面的代码就是我们需要维护的服务器，我们访问的页面是很简单的一个页面，只有一个字符串。但是基本所有的 页面访问的都是有着各种效果的。这时候我们修改一下发送的字符串

client.send(bytes("<h1 style = 'background-color:red;'>Hello, Seven<h1>",encoding = 'utf-8'))

我们用了一段代码把发送的字符串包裹起来，在访问一下该页面，就会发现不同的效果

是不是背景颜色和字体大小都有了效果。也就是说我们发回来的字符串包含了一个标签，这个标签可以被浏览器识别，然后浏览器就把这个标签按照一定的规则进行包装。而这套规则，就是HTML协议。我们在修改一下这段代码

import socket
  
def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK

",encoding = 'utf-8'))

    with open(r'D:python前端index.txt','rb') as f:
        data = f.read()

    client.send(data)
  
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8000))
    sock.listen(5)
  
    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()
  
if __name__ == '__main__':
    main()

我们把要发送的字符串和把这段字符串包装的标签放在index.txt这个文件下，运行的效果是一样的。那这个index文件就是html文件(一般为了规范就不用txt作为后缀名，而用html)。我们现在要做的，就是学习html规则。

再引伸一下，把刚才的index文件中间的字符串修改一下

<h1 style = 'background-color:red;'>Hello,@@@@@<h1>
<table border='1'>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

然后再读取数据的时候，把@@@@@替换一下

def handle_request(client):
    buf = client.recv(1024)
    client.send(bytes("HTTP/1.1 200 OK

",encoding = 'utf-8'))

    with open(r'D:python前端index.txt','r') as f:
        data = f.read()
    import time
    now_time = str(time.time())
    data=data.replace('@@@@@',now_time)
    client.send(bytes(data,encoding='utf-8'))

所以这个html文件就成了一个模板，我们只需要写好这个模板，然后从数据库里获得数据，然后替换到html文件的指定位置就实现了最low的后台程序。所以下面就是开发者要做的事情：

一.学习Html规则

二.写Html文件（模板）

三.获取数据，然后替换到html文件的指定位置（Web框架可以实现，以后会讲到）。

下面就是今天要做的——学习Html规则，更具体一点就是如何使用这些标签来构建我们的html文件。

基础架构

如果我们用Pycharm新建一个html文件，是会生成一个这样的结构的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

这个文件就是一个最基础的模板，下面就看一看每一个部分所代表的含义

第一行

<!DOCTYPE html>

就是声明了我们这个文件所用的协议类型——html

第二行

<html lang='en'>

lang='en'写在了标签的内部，就叫做标签内部的属性。这里的语言属性主要是声明了网页的语言是英文。作用是在有些浏览器（类似于chrome打开以后会提示是否翻译）

而在html里面包含了一个head和一个body，就构成了html文件的最基础的结构

<!DOCTYPE html>
<html lang="utf-8">
    
<head></head>

<body></body>

</html>

下面我们就看一看具体的部分是怎么使用

html的head内标签

其实这里的head更好的理解应该是大脑而不是头，因为head内标签几乎所有的效果都是不可见的（注意是几乎，不是所有）。我们就看看下面几个标签的含义

1.meta(metadata information)

该标签提供了有关页面的元信息，包括页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词，下面看看具体的用法

　　1.1页面编码

<meta http-equiv="content-type" content="text/heml;charset=utf-8">

　　1.2刷新

<meta http-equiv="refresh "content='3'>

　　后面的内容就刷新的时间间隔，单位为秒。

　　1.3跳转

<meta http-equiv="refresh"content='3,url=http://www.baidu.com'>

　　跳转的用法和刷新差不多，就是在跳转的间隔后加上要跳转的页面地址。这种用法不太常用，因为实际使用中的页面跳转都是动态的（类似于显示还有多少秒跳转）。但是可以在救急的时候用一下。

　　1.4关键词

<meta name='keywords' content="关键词1，关键词2">

　　这个关键字的描述就是给搜索引擎的爬虫提供了个关键字。然后通过这个关键字可以搜索到这个页面（现在这个时代好像也没什么用了，毕竟竞价排名~）

　　1.5描述

<meta name='description' content='对于这个页面的描述'>

　　这个描述是和上面的关键词一起用的，看看百度出来知乎的描述

再看看知乎首页的源代码里的这一行

<meta name="description" property='og:description' content='有问题，上知乎。知乎，可信赖的问答社区，以让每个人高效获得可信赖的解答为使命。知乎凭借认真、专业和友善的社区氛围，结构化、易获得的优质内容，基于问答的内容生产方式和独特的社区机制，吸引、聚集了各行各业中大量的亲历者、内行人、领域专家、领域爱好者，将高质量的内容透过人的节点来成规模地生产和分享。用户通过问答等交流方式建立信任和连接，打造和提升个人影响力，并发现、获得新机会。'>

是不是就知道啥意思了！

　　1.6X-UA-Compatible,用来声明对那种浏览器支持

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

　　并且这个语法早期可以定义IE8以后的版本的浏览器是否以兼容模式来访问该页面。但是随着IE6的消亡貌似也不这么用了。

 2.title标签

　　title标签貌似是head里唯一可以看到的了，按照下面的代码

<title>好像只有这个title是可见的</title>

出来的效果

也就是改了页面的标题栏里显示的文本字符。

3.link标签

固定格式，可以改上面图里标题栏里的图表，具体用法我们在后面讲

4.style标签

后面再讲

5Script标签

后面再讲

html里的body内标签

所有的标签分为块级标签，和内联标签（也叫行内标签），块级标签作用于为整行，而内连表情值作用域当下。

 1.各种符号

在html中，很多字符是预留的，我们不能使用(比方说大于号小于号，会和标签冲突，还有引号等等。)所以我们就需要用字符实体(character entities)。类似下面的用法

body内的各种符号是有固定的标签的，比如我们要用一个大于号或者小于号，是不是可能会和标签里的<>冲突！那就要用对应的标签了，下面就是常用的符号标签。

  空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号  &apos; (IE不支持) &#39;
￠ 分（cent） &cent; &#162;
£ 镑（pound） &pound; &#163;
¥ 元（yen） &yen; &#165;
€ 欧元（euro） &euro; &#8364;
§ 小节 &sect; &#167;
© 版权（copyright） &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

其实这里的字符集有非常多个，最早使用的是ASCII。后来有各种的标准字符集，我们在用的时候可以直接在网上搜，这里就不列出来了。

2.P标签和b标签

　　P标签和BR标签，P标签用于声明段落，而BR是用于声明换行。有些类似字符串里的转义字符。从br标签的作用可以看出来，他是个自闭和的标签。

<p></p>
<br>

3.h标签

　　h标签用来指定标签内部的字号，只有h1——h6。

4.span标签

　　span标签（块级）就是一个白板（行内标签）。可以通过css来修饰。

5.div标签

　　div是个非常牛逼的标签(自闭和)，也是相当于一个白板，但是不同于span的是他是个块级标签。现在大部分做页面的都是div+css的模式（其实用span+css也是可以的，效果相同）。我们随便看一个页面的代码都是用div来组建的。并且通过标签之间的嵌套和一些js操作、css操作其中内容。

上面是一些入门的标签，我们将会在后续章节中讲剩下的一些功能性比较强的标签的用法。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yinsedeyinse/p/12016179.html