〇——HTML的本质以及在Web程序中的作用
对于所有的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内的各种符号是有固定的标签的，比如我们要用一个大于号或者小于号，是不是可能会和标签里的<>冲突！那就要用对应的标签了，下面就是常用的符号标签。
| 空格 | | ||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
其实这里的字符集有非常多个，最早使用的是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程序中的作用的更多相关文章
- 在Java Web程序中使用监听器可以通过以下两种方法
之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响 ...
- 在Java Web程序中使用Hibernate
在Java Web程序中使用Hibernate与普通Java程序一样.本文中将使用Servlet和JSP结合Hibernate实现数据库表的增删改查操作. Web程序中,hibernate.cfg.x ...
- web.xml中listener作用及使用
一.WebContextLoaderListener 监听类 它能捕捉到server的启动和停止,在启动和停止触发里面的方法做对应的操作! 它必须在web.xml 中配置才干使用,是配置监听类的 二. ...
- JavaScript在web自动化测试中的作用
前言 JS的全称JavaScript,是一种运行在浏览器中的解释型脚本语言,通常用来实现web前端页面的基本功能,对于前端开发人员是不得不掌握的一门基本技能,但是对于做web自动化测试的人员来说,如果 ...
- 关于web程序中使用KindEditor向数据库插入带有格式的数据时出现的问题
最近做一个项目,需要对输入的文字在存入数据库之前进行文本格式编辑,于是我用到了KindEditor,当然怎么用在asp.net页面中,这里就不过多叙述了. 主要是遇到在将赋予格式的文本插入数据库时遇到 ...
- java web程序中项目名的更改（http://localhost:8080/）后面的名字
在MyEclipse中的Web项目,如果想另换名称(Context-root)进行发布,可以在项目的属性中进行设置.设置路径如下: 右击项目XX(或选中项目XX,按快捷键Alt+Enter), 打开项 ...
- Web程序中的懒加载异常说明及解决方案
所谓懒加载(lazy)就是延时加载,延迟加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有 ...
- Web程序中打开QQ、邮箱、阿里旺旺等
在网页中使用链接打开QQ的聊天窗口有两种方式: uin的值为qq号 <a target="_blank" href="@Url.Content("tenc ...
- Web程序中使用EasyUI时乱码问题
今天偶然遇见使用easyUI时,弹窗和分页都是乱码的问题,耗费了很长的时间来解决,以此记住这个坑. 相信大家都会在使用easyUI时都会设置这样一句: 那么就有可能出现设置中文后的乱码问题,如下图: ...
随机推荐
- C基础知识(11)：错误处理
C语言不提供对错误处理的直接支持,但是作为一种系统编程语言,它以返回值的形式允许您访问底层数据.在发生错误时,大多数的C或UNIX函数调用返回1或NULL,同时会设置一个错误代码errno,该错误代码 ...
- Python：Base1（数据类型，print语句，变量，定义字符串，raw字符串与多行字符串，Unicode字符串，整数和浮点数运算，布尔类型运算）
1.Python中数据类型: 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据 ...
- python笔记之python基础
python基础语法 1.变量命名规则 1).变量必须以字母或者下划线_开头 2).变量可由字母.数字.下划线_组成 3).变量对大小写敏感 2.多行语句 当编写的代码较长,需要换行,可使用 \ 进行 ...
- Prometheus 和 Alertmanager实战配置
Prometheus时序数据库 一.Prometheus 1.Prometheus安装 1)源码安装 prometheus安装包最新版本下载地址:https://prometheus.io/downl ...
- BP原理 - 前向计算与反向传播实例
Outline 前向计算 反向传播 很多事情不是需要聪明一点,而是需要耐心一点,踏下心来认真看真的很简单的. 假设有这样一个网络层: 第一层是输入层,包含两个神经元i1 i2和截距b1: 第二层是隐含 ...
- Diameter of Binary Tree
Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...
- ajax怎么打开新窗口具体如何实现
var newwindow=window.open('about:blank'); jQuery.ajax({ type: 'POST', url: 'clickRate.action', dataT ...
- JDK 监控和故障处理工具总结 (转)
出处: JDK 监控和故障处理工具总结 JDK 监控和故障处理工具总结 JDK 命令行工具 jps:查看所有 Java 进程 jstat: 监视虚拟机各种运行状态信息 jinfo: 实时地查看和调整 ...
- unittest之一框架、suite
1.unittest是Python的标准库里的模块,所以在创建测试方法时,需直接导入unittest即可 2.unittest框架的六大模块: 测试用例TestCase 测试套件TestSuit:测试 ...
- 多进程-Pipe和Manager数据共享和传递
pipe.py#多进程数据传递接收和发送(类似socket) from multiprocessing import Process,Pipe def f(conn): conn.send([42,N ...