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

import socket

def handle_request(client):

    buf = client.recv(1024)

    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n",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\r\n\r\n",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\r\n\r\n",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;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号  &apos; (IE不支持) '
￠ 分（cent） &cent; ¢
£ 镑（pound） &pound; £
¥ 元（yen） &yen; ¥
€ 欧元（euro） &euro; €
§ 小节 &sect; §
© 版权（copyright） &copy; ©
® 注册商标 &reg; ®
™ 商标 &trade; ™
× 乘号 &times; ×
÷ 除号 &divide; ÷

其实这里的字符集有非常多个，最早使用的是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操作其中内容。

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

〇——HTML的本质以及在Web程序中的作用的更多相关文章

  1. 在Java Web程序中使用监听器可以通过以下两种方法

    之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响 ...

  2. 在Java Web程序中使用Hibernate

    在Java Web程序中使用Hibernate与普通Java程序一样.本文中将使用Servlet和JSP结合Hibernate实现数据库表的增删改查操作. Web程序中,hibernate.cfg.x ...

  3. web.xml中listener作用及使用

    一.WebContextLoaderListener 监听类 它能捕捉到server的启动和停止,在启动和停止触发里面的方法做对应的操作! 它必须在web.xml 中配置才干使用,是配置监听类的 二. ...

  4. JavaScript在web自动化测试中的作用

    前言 JS的全称JavaScript,是一种运行在浏览器中的解释型脚本语言,通常用来实现web前端页面的基本功能,对于前端开发人员是不得不掌握的一门基本技能,但是对于做web自动化测试的人员来说,如果 ...

  5. 关于web程序中使用KindEditor向数据库插入带有格式的数据时出现的问题

    最近做一个项目,需要对输入的文字在存入数据库之前进行文本格式编辑,于是我用到了KindEditor,当然怎么用在asp.net页面中,这里就不过多叙述了. 主要是遇到在将赋予格式的文本插入数据库时遇到 ...

  6. java web程序中项目名的更改（http://localhost:8080/）后面的名字

    在MyEclipse中的Web项目,如果想另换名称(Context-root)进行发布,可以在项目的属性中进行设置.设置路径如下: 右击项目XX(或选中项目XX,按快捷键Alt+Enter), 打开项 ...

  7. Web程序中的懒加载异常说明及解决方案

    所谓懒加载(lazy)就是延时加载,延迟加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有 ...

  8. Web程序中打开QQ、邮箱、阿里旺旺等

    在网页中使用链接打开QQ的聊天窗口有两种方式: uin的值为qq号 <a target="_blank" href="@Url.Content("tenc ...

  9. Web程序中使用EasyUI时乱码问题

    今天偶然遇见使用easyUI时,弹窗和分页都是乱码的问题,耗费了很长的时间来解决,以此记住这个坑. 相信大家都会在使用easyUI时都会设置这样一句: 那么就有可能出现设置中文后的乱码问题,如下图: ...

随机推荐

  1. 无缝滚动的float属性

    The float CSS property specifies that (1) an element should be taken from the normal flow and (2) pl ...

  2. Window Position

    IE, Safari, Opera, and Chrome all provide screenLeft and screenTop properties that indicate the wind ...

  3. 利用js代码自动删除稿件的普通弹幕

    事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通 ...

  4. 解析之Nginx解析

  5. C++学习笔记-new与delete

    C++新增了new和delete关键字,用来开辟内存,对应的就是C语言的malloc和free 对比new/delete和malloc/free malloc和free是库函数,以字节为单位申请堆内存 ...

  6. K8s之Projected Volume

    四种:Secret .ConfigMap.Downward API.ServiceAccountToken 1.Secret Secret:帮你把Pod想要访问的加密数据,存放到Etcd中,然后,通过 ...

  7. [转帖]国科微发布纯正国产SSD主控 龙芯IP内核，速度可达500MB/s

    国科微发布纯正国产SSD主控龙芯IP内核,速度可达500MB/s https://www.expreview.com/68071.html 自主内核 龙芯处理器. 2019.4. 在存储芯片领域,中国 ...

  8. Go语言流程控制中的break，continue和goto（七）

    break(跳出循环) break用于跳出整个循环,如下: func main() { ;i<;i++{ { break } fmt.Println(i) } } // 0 1 2 3 代码里只 ...

  9. json与String的转化

    String转成jsonObject    JsonObject   json = JsonObject.fromObject(String str) String转成JsonArray      J ...

  10. 第k小团（Bitset+bfs）牛客第二场 -- Kth Minimum Clique

    题意: 给你n个点的权值和连边的信息,问你第k小团的值是多少. 思路: 用bitset存信息,暴力跑一下就行了,因为满足树形结构,所以bfs+优先队列就ok了,其中记录下最后进入的点(以免重复跑). ...