〇——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时都会设置这样一句: 那么就有可能出现设置中文后的乱码问题,如下图: ...
随机推荐
- Swift基础知识点的学习
每一个程序员都有一颗不满足当下知识的学习,学习Swift更是每一个iOS程序员必学技能!!! 一说道基础点的学习,当然涵盖的方面也是很多很多啦....然而每一个小知识点的学习,写一个博客,我也觉得没什 ...
- Linux中如何批量删除目录下文件后缀
1. rename rename分为perl版本和C版本,以下截图是C版本效果: perl版本:rename 's/.bak//' *.bak 2. for循环+awk 3. for循环+cut 4. ...
- phpstorm 远程连接服务器进行开发
phpstorm phpstorm是一款功能强大的ide编辑器,有了它,你敲代码速度能比用notepad++快数倍(初学者不建议使用ide,建议使用notepad++),缺点是没有固态的电脑带起来吃力 ...
- PHP define defined const
define 定义常量,常量一旦被定义,在脚本执行期间就不能再改变或者取消定义 常量默认大小写敏感.通常常量标识符总是大写的 与变量的区别: 1.常量前面没有美元符号($) 2.常量只能通过defin ...
- Leetcode之动态规划（DP）专题-63. 不同路径 II（Unique Paths II）
Leetcode之动态规划(DP)专题-63. 不同路径 II(Unique Paths II) 初级题目:Leetcode之动态规划(DP)专题-62. 不同路径(Unique Paths) 一个机 ...
- 论文翻译：LP-3DCNN: Unveiling Local Phase in 3D Convolutional Neural Networks
引言 传统的3D卷积神经网络(CNN)计算成本高,内存密集,容易过度拟合,最重要的是,需要改进其特征学习能力.为了解决这些问题,我们提出了整流局部相位体积(ReLPV)模块,它是标准3D卷积层的有效替 ...
- C语言之联合体
联合union是一个能在同一个存储空间存储不同类型数据的类型 联合体所占的内存长度等于其最长成员的长度,也有叫做共用体 联合体虽然可以有多个成员,但同一时间只能存放其中一种 对于联合体来讲最基本的原则 ...
- 解决Wamp的 Error D:\wamp or PHP path 错误
之前早早就用了wamp,发现还是挺好用的,就是刚开始改端口号之类的配置有点麻烦,不过还是一一解决了. 就在昨天安装了 composer . 突然发现wamp 有一个错 “Error D:\wamp o ...
- [python] 正则表达式细节
1.零宽断言 所谓零宽断言就是并不去真正的匹配字符串文本,而仅仅是匹配对应的位置. 正则表达式中有很多这样的断言,常见的如匹配字符串或者行的起始位置 ^ 和 /A,匹配字符串或者行的末尾 $ 和 /Z ...
- Python学习【day02】- Python基础练习题
#!/usr/bin/env python # -*- coding:utf8 -*- # 执行Python 脚本的两种方式 # 答:①在windows的cmd窗口下 > D:/Python/p ...