web前置技能

最新推荐文章于 2024-08-18 18:39:17 发布

～clould

最新推荐文章于 2024-08-18 18:39:17 发布

阅读量161

点赞数

文章标签：网络服务器运维

本文链接：https://blog.csdn.net/Enya1122/article/details/128789941

版权

网站常用术语和运行原理

（一）网站常用术语

客户端：在计算机上运行并连接到互联网的应用程序，简称浏览器，如Chrome、Firefox、IE。用户通过操作客户端实现网站和用户之间的数据交互。

服务器：能连接到互联网且具有IP地址的计算机，服务器主要接收和处理用户的请求信息。当用户在客户端操作网页的时候，实质是向网站发送一个HTTP请求，网站的服务器接收到请求后会执行相应的处理，最后将处理结果返回到客户端并生成相应的网页信息。

IP地址：互联网协议地址，TCP/IP网络设备（计算机、服务器、打印机、路由器等）的数字标识符，用于识别和通信。如（244.155.65.2）为4组数字组成，称为逻辑地址。为了在网络中定位设备，通过TCP/IP协议将逻辑IP地址转换为物理地址（计算机里的MAC地址）。

（查询网站ip地址的方法：cmd+ping+空格+想要查IP的网站网址）

内网IP：路由以内的网络，可以连接互联网，但是互联网无法直接连接内网（需要端口映射）。

公网IP：互联网IP地址。

TCP逻辑端口：“端口”是应用程序在计算机中的唯一标识。

（查看开启了哪些端口的命令 Windows：netstat -ano , Linux:netstat -anltup）

域名：用于标识一个或多个IP地址。如 baidu.com

DNS：域名系统，用于跟踪计算机的域名及其在互联网上相应的IP地址。

ISP：互联网服务提供商。主要工作是在DNS查找当前域名对应的IP地址。

TCP/IP：传输控制协议/互联网协议，是广泛使用的通信协议。（TCP三次握手）

HTTP：超文本传输协议，是浏览器和服务器通过互联网进行通信的协议。

URL: 统一资源定位系统，是互联网上用来标识某一处资源的地址。

（eg：aspxfans.com）

（二）网站运行原理

（1）在浏览器中输入网站地址，如 www.baidu.com

（2）浏览器解析网站地址中包含的信息，如HTTP协议和域名（baidu.com)

（3）浏览器与ISP通信，在DNS查找www.baidu.com所对应的IP地址，然后将IP地址发送到浏览器的DNS服务，最后向 www.baidu.com 的IP地址发送请求。

（4）浏览器从网站地址中获取IP地址和端口（HTTP协议默认为端口80，HTTPS默认为端口443），并打开TCP套接字连接，实现浏览器和web服务器的连接。

（5）浏览器根据用户操作向Web服务器发送相应的HTTP请求，如打开 www.baidu.com 的主页面。

（6）当Web服务器接受请求后，根据请求信息查找该HTML页面，如果页面存在，则Web服务器将处理结果和页面返回到浏览器。如果服务器找不到页面，将发送一个404错误消息。

前端、后端、数据三者的关系

1) 前端通常是html，css，js三者构成的页面的总称。运行在客户端。以浏览器为例。

2) 后端是指后端程序。比如java，php等编写的一些服务。用来操作服务器。

3) 数据，数据都存放在服务器上。

4) 服务器上的数据大多会放在数据库中，比如mysql数据库；部分数据会缓存在文件或redis中，比如一些配置文件，以加快响应速度。

5) 有两个比较有趣的缓存数据，cookie和session，它们通常用来记录请求者的身份。cookie常常加密储存在客户端里。session常常储存在服务器上。

6) 前端不能直接操作数据库，必须通过后端来进行操作。因此，就产生了前后端数据交互（通过接口）的问题。

web后端和前端是怎么连接的？

网站数据处理主要分为三层。

第一层，表示层，这部分可以用HTML代码，CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。

第二层，是业务层，这层是负责处理数据的。常用的代码语言有PHP,JSP，Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库，然后把结果返回给前端网页。

第三层，是数据层，这个就是数据库，用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。

举个例子就是这样，比方说你在网页上填一个表格然后提交会有以下几种数据传输经过：

①你接触到的是这个网页是属于表示层，这个网页一般由HTML标签结合CSS/JAVASCRIPT来实现的。这时候你要先填入数据。

②然后你按提交触发后台处理机制，这时候数据会传到后台的代码进行处理。这部分代码根据不同网站可以使用PHP，JSP，JAVA等。代码根据程序员预设的算法将收到的数据进行处理之后会相应的对数据库进行操作，存储数据等。

③成功操作完数据库之后，业务层的代码会再向表示层也就是显示器端传回一个指令通知你表格填写成功

HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 标签参考手册 - 功能排序

HTML表单

HTML表单用于搜集不同类型的用户输入

<form>元素定义HTML表单

<form>
.
form elements
.
</form>

HTML表单包含表单元素

表单元素指不同类型的input元素、复选框、单选按钮、提交按钮等等

表单元素

<input>元素及其属性

name属性在表单中的定义：

name属性规定input元素的名称。

name属性用于对提交到服务器后的表单数据进行标识。

如果要正确的被提交，每个输入字段必须设置一个name属性。

value属性的值表示的是提交给服务器的值

value代表实际传给后台表单处理信息，value属性规定输入字段的初始值

感觉checked应该是暂时选中

readonly 属性规定输入字段为只读（不能修改）

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

size 属性规定输入字段的尺寸（以字符计）

maxlength 属性规定输入字段允许的最大长度

<input>元素有很多形态，根据不同的type属性，type属性有

text	定义常规文本输入
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）
password	定义密码字段
checkbox	定义复选框（可选一个或多个）
button	定义按钮
number	用于应该包含数字值的输入字段

<input type="text">定义用于文本输入的单行输入字段

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

<input type="radio">定义单选按钮

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

<input type="submit">定义用于向表单处理程序提交表单的按钮

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的action属性中指定

<form action="action_page.php">//这里指定了某个服务器脚本来处理被提交表单
First name:<br>
<input type="text" name="first name" value="Mickey">
<br>
Last name:<br>
<input type="text" name="last name" value="Mouse">
<br>
<inout type="sunmit" value="Submit">
</form>

<select>元素和<option>元素

<select>元素定义下拉列表

<option>元素定义待选择的选项

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

</body>
</html>

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）

<button> 元素

<button> 元素定义可点击的按钮

用<fieldset>组合表单数据

<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset>元素定义标题（在fieldset分隔框上开一个口标上标签）

<form action="action_page.php">
<fieldset>
<legend>Personal information：</legend>
First name:<br>
<input type="text" name="first name" value="Mickey">
<br>
Last name:<br>
<input type="text" name="last name" value="Mouse">
<br>
<inout type="sunmit" value="Submit">
</form>

表单属性

<form>元素的不同属性

accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定提交表单时所用http方法（默认：GET）
name	规定识别表单的名称
novalidate	规定浏览器不验证表单
target	规定action属性中地址的目标（默认：_self）

Action属性

action属性定义在提交表单时所执行的动作

向服务器提交表单的通常做法是提交按钮。通常会以被提交到web服务器上的网页

（省略action属性，action会被设置成当前页面）

Method属性

method属性规定了在提交表单时所用的http方法（GET或POST）

<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

Target属性

target属性规定提交表单后在何处显示响应

_blank	响应显示在新窗口或选项卡中
_self	响应显示在当前窗口
_parent	响应显示在父框架
_top	响应显示在窗口的整个body中
framename	响应显示在命名的iframe中

什么是框架？

框架将浏览器划分成不同的部分，每一部分加载不同的页面，实现在同一浏览器窗口中加载多个页面的效果划分。

Autocomplete 属性

Autocomplete属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

<form action="/action_page.php" autocomplete="on">

Novalidate 属性

Novalidate属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

<form action="/action_page.php" novalidate>

把来自表单的数据插入数据库

现在，我们创建一个 HTML 表单，这个表单可把新记录插入 "Persons" 表。

这是这个 HTML 表单：

<html>
<body>

<form action="insert.php" method="post">
Firstname: <input type="text" name="firstname" />
Lastname: <input type="text" name="lastname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>

</body>
</html>

当用户点击上例中 HTML 表单中的提交按钮时，表单数据被发送到 "insert.php"。"insert.php" 文件连接数据库，并通过 $_POST 变量从表单取回值。然后，mysql_query() 函数执行 INSERT INTO 语句，一条新的记录会添加到数据库表中。

下面是 "insert.php" 页面的代码：

<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("my_db", $con);

$sql="INSERT INTO Persons (FirstName, LastName, Age)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[age]')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }
echo "1 record added";

mysql_close($con)
?>

HTTP超文本传输协议

基于tcp/ip协议

默认端口号为80

请求和响应一一对应

每次请求相互独立，是无协议状态

HTTP工作原理

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求行（请求的方法、URL、协议的版本、）请求头部、空行和请求数据。服务器以一个状态行作为响应，响应的内容包含状态行（协议的版本，成功或者错误代码，服务器信息），响应头部、空行和响应数据。

HTTP请求/响应的步骤：客户端连接到Web服务器—>发送Http请求（一个请求报文由请求行、请求头部、空行和请求数据4部分组成。）—>服务器接受请求并返回HTTP响应（一个响应由状态行、响应头部、空行和响应数据4部分组成。）—>释放TCP连接—>客户端浏览器解析HTML内容

get和post是两种请求的方法

GET：表单提交是被动的，无敏感信息，表单数据在页面地址栏可见，GET适合少量数据的提交，浏览器会设定容量限制。

POST:表单正在更新数据，或者包含敏感信息（如：密码），表单数据在页面地址栏不可见。

uri：具体访问哪一个页面

（字节数据：例如：（二进制数据）视频在网络中就是以字节流的形式传输的）

（注意post请求中增加了Content-Type）

响应状态码：

Google常用语法

site	指定域名
intext	正文中存在关键字的网页
intitle	标题中存在关键字的网页
info	一些基本信息
inurl	URL存在关键字的网页
filetype	搜索指定文件类型