〇——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时都会设置这样一句: 那么就有可能出现设置中文后的乱码问题,如下图: ...
随机推荐
- 【JVM学习笔记】打破双亲委托机制的例子
Tomcat也有自己的类加载器,比如Servlet,这些类加载器就改变了双亲委托模型的默认机制 (该主题有待深入)
- three中的着色器示例
其实在3D引擎/库的帮助下,我们做webgl开发的难度已经很大大地降低了,熟悉相关API的话,开发一个简单的3D程序可以说是很轻松的事情. 在我看来,webgl的核心就是着色器(顶点着色器.片元着色器 ...
- 了解XPath与XPath轴
XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航. 节点(Node) 在 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理 ...
- OnCustomDraw
ON_NOTIFY_REFLECT(NM_CUSTOMDRAW, &CMyListCtrl::OnNMCustomdraw) ON_NOTIFY : Comes from a child co ...
- 【linux开发】IO端口和IO内存的区别及分别使用的函数接口
IO端口和IO内存的区别及分别使用的函数接口 每个外设都是通过读写其寄存器来控制的.外设寄存器也称为I/O端口,通常包括:控制寄存器.状态寄存器和数据寄存器三大类.根据访问外设寄存器的不同方式,可以把 ...
- 使用PowerShell 自动安装VC++补丁
执行环境:Windows Server 2012 R2 VC++下载链接 这里有个问题,虽说可以静默安装,但是未对当前系统检测是否已安装vc++补丁,望大佬指点 # author:lttr <w ...
- Centos磁盘空间不足,找不到占用文件
服务器报警,系统"/"空间不足,但找不到哪些文件占用. 1.使用du -sh *,层层目录查看依然找不到 2.使用"lsof / | grep -i delete&quo ...
- Oracle-DML- insert & update & delete
说明:语句中说到的“表”,以及表中有哪些“列”自行脑补......重要的是理解概率,能看懂语句代表的含义就OK~ DML-数据操作语句: 1. insert 新增 /*insert into 表名va ...
- 阿里云对象存储OSS
阿里云的产品种类繁多,今天让我们一起来了解下对象存储(Object Storage Service,简称OSS)吧! 什么是对象存储呢? 简单来说,对象存储OSS是阿里云提供的海量.安全和高可靠的云存 ...
- Xtrabackup innobackupex
Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工. Xtrabackup中主要包含两个工具 ...