文章目录
web原理
最开始时各种各样的软件安装在电脑上，但是每个电脑都有各种各样的版本，如windows，linux，mac，如果一个公司要开展业务的话，每个操作系统版本都要写一个客户端，开发成本很高，如果要开发新版本，所有客户端都要更新一下，这就是CS。后来慢慢发展为BS架构，浏览器加服务端。但是少部分复杂的程序如qq等还是用CS架构。
BS架构只要写个server端就行了，只要安装了浏览器就能打开公司业务，而且server端更新了，浏览器里面内容也更新了。BS架构十分适合更新迭代快的互联网时代。
如，设置我的服务端
import socket
sk = socket.socket()
sk.bind(('127.0.0.1', 8080))
sk.listen()
while 1: # 一直接收消息，浏览器这个客户端可以发消息
conn, addr = sk.accept()
data = conn.recv(9000)
print(data)
# 按照HTTP协议的格式给浏览器回复消息
conn.send(b'HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n')
with open('s1', 'rb') as f:
msg = f.read()
conn.send(msg)
conn.close()
b'GET / HTTP/1.1
Host: 127.0.0.1:8080 # 浏览器上输入的内容，访问的地址
Connection: keep-alive
Cache-Control: max-age=0
# 以下是浏览器给我包装的一些消息，由于世界上有很多版本浏览器，网站也五花八门，如果浏览器和网站之间的通信格式不统一，就乱了， http协议是世界上所有浏览器遵循的协议。
Upgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'
b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8080\r\nConnection: keep-alive\r\nCache-Control: max-age=0\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9\r\n\r\n'
web的原理
浏览器地址栏输入URL
----> 浏览器作为一个客户端往服务端发消息（浏览器打包的消息）
-----> 服务端接收消息(回的消息是服务端写好的消息，打开文件，读取文件内容，通过socket回复)
-----> 浏览器收到消息（按照一个约定好的规则展示出来，如用img包起来就展示图片等） # 前端html,css,js
HTML是什么
- 超文本标记语言（Hypertext Markup Language，HTML）是一种创建网页的标记语言。
- 浏览器可识别的规则，
- 网页文件的扩展名：.html 或 。htm
HTML不是什么
- 不是编程语言
- 使用标签来描述网页
HTML文档结构
<!DOCTYPE html> 声明为html5文档,注释：ctrl + /
<html lang="zh-CN"> 是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head> # 定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<meta charset="UTF-8"> # 浏览器用该编码解析文件
<title>南山</title> # 定义了网页标题，在浏览器标题栏显示。
</head>
<body> # 之间的文本是可见的网页主体内容。
<h1 s1 = 'hao'>浏览器</h1> #h1 + tab, 尖括号内是属性。
</body>
html注释
在pycharm中的快捷键
ctrl + /
标签
head内常用标签
在pycharm中的快捷键 ，如输入h1标签时：
h1 + tab
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
body内常用标签
基本标签
<b>加粗</b>
<i>斜体</i> # italic 意大利的，斜体
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
呵 呵
<b>采菊东篱下，悠然见南山</b>
<i>采菊东篱下，悠然见南山</i>
<u>采菊东篱下，悠然见南山</u>
<s>采菊东篱下，悠然见南山</s>
<p>采菊东篱下，悠然见南山</p>
<h1>采菊东篱下，悠然见南山</h1>
<h2>采菊东篱下，悠然见南山</h2>
<h3>采菊东篱下，悠然见南山</h3>
</body>
</html>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
| horizontal rule 分隔线，水平线 | hr |
div 和span标签
-
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
divide缩写：分隔，分区域的意思
-
span标签用来定义内联(行内)元素，默认在同一行显示,宽度是由内容决定的并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span主要针对文档块级元素与行内元素的区别：
所谓块元素，自己独占一行，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签。
img标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="pic.png" alt="此处是前男友照片" title="彭于晏" width="100">
<!--在当前网页打开链接-->
<a href="http://www.jd.com">此处是浏览器显示的内容</a>
<!--在新网页打开链接-->
<a href="https://www.jd.com" target="_blank">此处是浏览器显示的内容</a>
<a href="#p1">点我</a>
<div style="..."></div>
<p id="p1">采菊东篱下，悠然见南山</p>
<div style="..."></div>
</body>
</html>
网页显示结果
a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
href属性指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href=“http://www.jd.com）
相对URL - 指当前站点中确切的路径（href=“index.htm”）
锚URL - 指向页面中的锚（href=”#top"）
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
列表
- 无序列表
ul： unordered list 无序的列表
li：list的缩写
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
- 有序列表
ol：ordered list 有序的列表
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="none">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<!--有序列表-->
<ol type="a" start="27">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
</body>
</html>
网页显示结果
表格
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">laura</td>
</tr>
<tr>
<td>2</td>
<td>wendy</td>
<td rowspan="2">喝茶</td>
</tr>
<tr>
<td>3</td>
<td>iris</td>
</tr>
</tbody>
</table>
</body>
</html>
网页显示结果
form 用户输入
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
input
<input> 元素会根据不同的type属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 | 表现形式 |
|---|---|---|---|
| text | 单行输入文本 | <input type=‘text’/> |  |
| password | 密码输入框 | <input type=“password”> |  |
| date | 日期输入框 | <input type=“date”> |  |
| checkbox | 复选框
(一般用于多选）
| <input type=“checkbox”> |  |
| radio | 单选框
(例如选择性别时)
| <input type=“radio”> |  |
| submit | 提交按钮
（按提交按钮刷新一次网页，提交的内容以及提交给服务器了）
| <input type=“submit” value=“提交”>（） |  |
| reset | 重置按钮 | <input type=“reset” value=“重置”> |  |
| button | 普通按钮 | <input type=“button” value=“普通按钮”> |  |
| hidden | 隐藏按钮 | <input type=“hidden”> | 浏览器未显示 |
| file | 文本选择框 | <input type=“file”> |  |
注意：
- value: 表单提交时对应项的值
- type=‘button’, ‘reset’, ‘submit’ 时，为按钮上显示的文本内容
- type=‘text’，‘password’, 'hidden’时，为输入框的初识值
- type=‘checkbox’, ‘radio’, ‘file’,为输入相关联的值
- readonly: text 和password设置只读。。
input标签中type为number
select
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled ：禁用
- selected：默认选中该项
- value：定义提交时的选项值
textarea
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
<p>
<label for="i1">用户名：</label>
<input id="i1" type="text" name="username">
</p>
<p>
<label>密码：
<input type="password" name="pwd">
</label>
</p>
<p>
邮箱：
<input disabled type="email" name="email">
</p>
<p>出生日期：
<input type="date" name="birthday">
</p>
<p>
头像：
<input type="file" name="avatar">
</p>
<p>
隐藏的输入框：
<input type="hidden">
</p>
<p>性别：
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</p>
<p>
爱好：
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="doublecolorball">双色球
</p>
<label for="s1">城市</label>
<select id="s1" name="city1">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
<option value="0755" selected="selected">深圳</option>
</select>
<select name="city2" multiple="multiple">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
<option value="0755" selected="selected">深圳</option>
</select>
<p>
个人简介：
<textarea name="info" cols="60" rows="40">
</textarea>
</p>
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
{"name属性的值": 用户填写的内容}
</body>
</html>
label标签
<label>标签为input元素定义标注（标记）
说明：
- label元素不会向用户呈现任何特殊效果。
- <label>标签的for属性值应当与相关元素的id属性值相同
如
button
元素定义可点击的按钮
- 附
html模板
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
