【2.0】前端基础之web服务端本质

【一】软件开发架构

【1】B/S

B：客户端

S：服务端

【2】C/S

C：浏览器

S：服务端

C/S 本质上也是B/S

【二】浏览器访问页面发生了哪些事

1.浏览器向服务端发送请求
2.服务端接收请求
3.服务返回相应的响应
4.浏览器接收响应根据特定的规则渲染页面给展示者看

【三】HTTP协议

【1】什么是HTTP协议

超文本传输协议
- 用来规定服务器和浏览器之间数据交互的格式
该协议可以不遵循，但是自己写的服务端不能被浏览器正常识别，只能单机使用

【2】HTTP的四大特性

（1）基于请求响应

（2）基于TCP/IP之上，作用域应用层之上的协议

（3）无状态

不保存用户的信息
由于HTTP协议是无状态的，所以后来出现了一些专门用来记录用户状态的技术
- cookie/session/token

（4）无/短链接

请求来一次，就响应一次，之后我们两个就没有任何联系了
长链接
- 双方建立连接之后默认不会断开链接
  - websocket

【3】HTTP协议的格式

（1）请求数据格式

请求首行（标识HTTP协议，当前请求方式）
请求头（多组K:V键值对）
\r\n\r\n
请求体（并不是所有的请求都有，get没有post有，存放的是post请求提交的敏感数据）

（2）响应数据格式

响应首行（标识HTTP协议，当前请求方式，响应状态码）
响应头（多组K:V键值对）
\r\n\r\n
响应体（返回给浏览器，展示给用户看的数据）

（请求方式）

get请求
- 朝服务端要数据
  - 输入网址获取对应的内容
post请求
- 朝服务端提交数据
  - 用户登录输入用户名密码之后提交到服务端后端做身份校验

（响应状态码）

用一堆简单的数字来表示一些复杂的状态或描述性信息

示例

1xx
- 服务端已经成功接收到发送来的数据正在处理，可以继续提交额外的数据
2xx
- 服务端成功响应了你响应的数据(200,ok 请求成功)
3xx
- 重定向(当你在访问一个需要登录之后才能看到的网页，就会发现登陆之后跳转到了新的网页)
4xx
- 请求错误
  - 404：请求资源不存在
  - 403：当前请求不合法/不符合当前访问资源的条件
5xx
- 服务器内部错误(服务端出现问题)

演示

200 OK：
- 表示请求已成功处理，并返回所请求的资源。
301 Moved Permanently：
- 表示所请求的资源被永久移动到新的URL，客户端应该使用更新后的URL进行访问。
400 Bad Request：
- 表示服务器无法理解客户端发送的请求，通常是由于请求格式有误或参数错误。
404 Not Found：
- 表示服务器未找到所请求的资源。
500 Internal Server Error：
- 表示服务器在处理请求时发生了意外的错误

（URL）

统一资源定位符(网址)

【四】HTML简介

超文本标记语言
如果想要让浏览器能够渲染出写的页面，都必须遵从HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

简单的页面

<h1>hellow dream</h1>
<a href="https://meizitu.com">click me!</a>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7" alt="my wifi">

HTML就是书写页面的一套标准

【五】HTML中的注释语法

由于HTML代码非常杂乱无章且非常多，所以我们习惯性的用注释来划分区域方便后续的查找

【1】单行注释

<!-- 单行注释 -->

【2】多行注释

<!--
多行注释1
多行注释2
多行注释3
-->

【六】HTML的文档结构

<html>
    <head></head>：head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
    <body></body>：body内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>

注意：HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码

HTML的文档结构通常遵循以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

首先，<!DOCTYPE html> 声明定义了当前文件是一个 HTML 文件。
- 接下来是 <html> 标签，它是整个 HTML 文档的根元素。
- 在 <html> 标签之内，有两个主要的部分： <head> 和 <body>。
<head> 用于定义文档的头部信息，其中可以包含一些重要的元素
- 例如 <title> 设置页面标题，<meta> 设置字符编码、关键词等。
- 这些元素通常不会展示在浏览器中，而是提供一些关于页面的描述和配置。
<body> 则包含了整个页面的可见内容
- 例如段落、标题、图像、链接等。
- 这些元素将直接影响和呈现到用户所看到的页面上。
需要注意的是，HTML 的标签是有层级关系的，内部的标签必须位于外部标签的范围之内，无法单独存在。

【七】HTML标签的分类

<h1></h1>
<a href=""></a>
<img/>

【1】双标签

【2】单标签(自闭标签)

【八】head常用标签

【1】title

<title>Title</title>

标题标签

【2】style

<style></style>

内部用来书写CSS代码

【3】script

<script></script>

内部用来书写JS代码(可以引入外部JS文件)

【4】link

<link rel="stylesheet" href="">

引入外部CSS文件

【5】meta

<meta http-equiv="refresh" content="">

<meta>标签是一种HTML标签，用于在网页中提供元数据（metadata）。
<meta>标签是一种HTML标签，用于在网页中提供元数据（metadata）。
- 元数据是描述数据的数据，它们提供关于网页内容、字符集、作者、关键字等信息，帮助搜索引擎和浏览器理解和处理网页。
常见的<meta>标签包括以下几种：
<meta charset="字符集">：
- 指定网页文档使用的字符集，常见的字符集有UTF-8、ISO-8859-1等。
<meta name="viewport" content="viewport设置">：
- 用于指定网页在移动设备上的视口（viewport）设置，包括网页的宽度、初始缩放比例等。
<meta name="keywords" content="关键词">：
- 用于指定网页的关键词，帮助搜索引擎判断网页的相关性。
<meta name="description" content="网页描述">：
- 用于提供对网页内容的简要描述，显示在搜索结果页面中作为网页摘要。
<meta name="robots" content="指令">：
- 指定搜索引擎对网页的索引和抓取规则，如通过"noindex"禁止索引网页。
<meta http-equiv="参数" content="内容">：
- 用于设置HTTP响应头信息
- 如<meta http-equiv="refresh" content="5;url=http://example.com/">可在5秒后自动跳转到指定地址。

<meta>标签通常放置在HTML文件的<head>标签内，起到提供关于网页的元数据的作用。

正确使用<meta>标签可以优化网页的SEO、改善用户体验以及与搜索引擎的交互。

【九】body常用标签

【1】`<h1>`级别标题标签

<h1></h1>

用于显示网页标题的级数(1-6级)

【2】`<b>` 加粗文字

 <b></b>

【3】`<i>`斜体

<i></i>

【4】`<u>`下划线

<u></u>

【5】`<s>`删除线

<s></s>

【6】`<p>`段落标签

<p></p>

一个 p 标签就是一行

【7】`br`换行

【8】`hr`水平分割线

【小结】

在HTML中，标签是用来定义页面的主体内容的。它是HTML文档的必需标签之一，包围了展示在浏览器窗口中的实际内容。

下面是一些常用的标签：

<h1>到<h6>：这些标签用于定义标题的级别，<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<p>：该标签用于定义段落，在网页中呈现一段文本。
<a>：用于创建一个超链接，可以使用户点击链接跳转到其他页面或下载文件。
<img>：用于在网页中插入图像，可以通过指定图像的URL来显示图片。
<ul>和<li>：这些标签用于创建无序列表，其中<ul>定义列表，而<li>定义每个列表项。
<ol>和<li>：这些标签用于创建有序列表，其中<ol>定义列表，而<li>定义每个列表项。
<div>：该标签可以用来将文档分成逻辑部分或组合内容。
<span>：该标签用来对文本进行样式化或划定特定区域，通常与CSS一起使用。
<table>、<tr>和<td>：这些标签用于创建表格，其中<table>定义整个表格，<tr>定义表格的行，<td>定义表格的单元格。
<form>：用于创建一个表单，用户可以在表单中输入信息并提交。

【十】标签的分类之块级标签和行内标签

【1】块级标签

独占一行
h1~h6/p

【2】行内标签

自身文本多大就占多大
i/u/s/b

【3】总结

块级标签可以修改长度，行内标签不可以，修改了也不会发生变化
块级标签内部可以嵌套任意的块级标签和行内标签
- 但是 p 标签虽然是块级标签，但是他只能嵌套行内标签不能嵌套块级标签
- 如果套用这个，浏览器也会帮助处理，有报错，用户也感觉不到
小结
- 只要是块级标签都可以嵌套任意块级标签和行内标签(P标签除外)
行内标签不能嵌套块级标签可以嵌套行内标签

【小结】

HTML中的标签可以分为两种主要类型：块级标签和行内标签。

块级标签（Block-level elements）：

块级标签是指一类会独自占据一行的HTML元素。
它们从新的一行开始，直到遇到下一个块级标签或行内标签。
块级标签通常用于组织和结构化页面的不同部分，并且可以包含其他块级元素和行内元素。
常见的块级标签有：
- <div>：用于定义文档中的一个区域或一个区块。
- <p>：用于定义段落。
- <h1>-<h6>：用于定义标题的级别。
- <ul>：用于创建无序列表。
- <ol>：用于创建有序列表。
- <table>：用于定义表格。

行内标签（Inline elements）：

行内标签是指在一行内显示的HTML元素，它们不会打断当前行并且只占据所需的内容宽度。
行内标签通常用于插入和标记文本中的小片段或注释，并且不能包含块级元素，只能包含其他行内元素。
常见的行内标签有：
- <span>：用于对文本的某个部分进行样式化或划定特定区域。
- <a>：用于创建超链接。
- <strong>：使文本加粗显示。
- <em>：使文本斜体显示。
- <img>：用于插入图像。
- <br>：用于换行。
需要注意的是，HTML5中引入了一些新的标签和元素，它们的性质可能介于块级和行内之间，被称为块级行内元素（block-level inline element）或行内块级元素（inline block-level element）
- 如 <button>、<input> 等，其具体表现取决于CSS的属性和样式。

【十一】特殊符号

【1】空格` `

&nbsp;

【2】大于号`>`

&gt;

【3】小于号`<`

&lt;

【4】&符`&`

&amp;

【5】￥符`¥`

&yen;

【6】版权`©`

&copy;

【7】商标`®`

&reg;

【小结】

特殊符号是指在文本中使用的一些非常规字符，这些字符通常不直接出现在键盘上，需要通过特定的键盘组合或者字符实体来输入。以下是一些常见的特殊符号及其对应的表示方法：
- 版权符号：©，表示方法为 © 或者 ©。
- 注册商标符号：®，表示方法为 ® 或者 ®。
- 商标符号：™，表示方法为 ™ 或者 ™。
- 惊叹号：！，直接输入 "!" 即可。
- 问号：？，直接输入 "?" 即可。
- 减号：-，直接输入 "-" 即可。
- 加号：+，直接输入 "+" 即可。
- 百分号：%，直接输入 "%" 即可。
- 等于号：=，直接输入 "=" 即可。
- 乘号：×，表示方法为 × 或者 ×。
- 除号：÷，表示方法为 ÷ 或者 ÷。
- 分号：；，直接输入 ";" 即可。
- 冒号：：，直接输入 ":" 即可。
- 单引号：'，直接输入 "'" 即可。
- 双引号："，直接输入 """ 即可。

【十二】常用标签

【1】简介

div标签

块级标签

span标签

行内标签
在构造初期最常使用，页面的布局一般先用div和span占位后再去调整样式，尤其是div使用最为频繁
- 可以把div标签看成一块区域
  - 也就意味着div标签来提前规划所有的区域。之后再向该区域内填写内容即可
- 普通的文本先用span占位
  - 然后再去装饰页面

img标签

图片标签

<img src="" alt="" title="" height="" width="">

src
- 存放图片的路径(可以是本地也可以是网页链接)
alt
- 当图片加载不成功时，加载出的图片描述性信息
title
- 当鼠标悬浮在图片上面之后，自动展示图片信息
height/width
- 高度和宽度
- 当你在调整其中一个参数时，另一个参数也会等比例缩放
- 当在调整两个参数而不考虑比例时，就会造成图片的失真

a标签

链接标签

<a href="" target="_blank"></a>
<a href="" target="_self"></a>

href
- 指定 url 用户点击该链接就会跳转到目标链接
  - 当 a 标签指定的网址从来没有被点击过，那么a标签的字体颜色就是蓝色
  - 当 a 标签指定的网址从来被点击过后，那么a标签的字体颜色就是紫色
- 可以放其他标签的id值，点击即可跳转到对应的标签位置
target
- _self
  - 默认 a 标签是在当前页面完成跳转
- _blank
  - 跳转到新建的标签页

a标签的锚点功能

比如点击一个文本标题，自动跳转到标题对应的区域

<a href="" id="d1">顶部</a>
  <a href="" id="d2">中间</a>
  <a href="" id="d3">底部</a>

  <a href="#d1">回到顶部</a>
  <a href="#d2">回到中间</a>

【小结】

Div标签（`<div>`）：

它是最常见的HTML容器标签，用于将文档分隔成独立的区块。
Div标签可以用来包裹其他标签，通过设置样式来控制其中内容的布局和外观。
它没有具体的语义含义，常用于定义页面的整体结构或划分不同的内容区域。

Span标签（`<span>`）：

它是一个内联元素，主要用于对文本或一小段文本进行样式上的控制。
Span标签通常用于对特定部分进行样式修饰或添加特殊效果
- 例如修改文字颜色、加粗、斜体等，或者配合CSS实现一些交互效果。
与Div标签不同，Span标签没有具体的语义意义，更多地用于样式上的调整。

总结来说

Div标签用于对页面进行布局和结构划分
而Span标签则更多地用于对文字或一小段文本进行样式控制。
根据需要，可以通过设置不同的class或id来给这些标签添加样式
- 并使用CSS来对其进行进一步的控制和美化。

【十三】标签具有的两个重要属性

【1】id值

类似于标签的身份证号，在同一个页面上id值不能重复

【2】class值

类似于面向对象中类的继承，一个class可以继承多个class值

【总结】

id值

是类似于标签的唯一标识符，用于在同一个页面上唯一标识一个特定的元素。
每个id值在整个文档中都必须是唯一的，不能重复使用。通过id值，我们可以在JavaScript或CSS中引用特定标签，并对其进行操作或样式化。

class值

类似于面向对象编程中的继承概念。
一个HTML标签可以具有多个class值，这样可以将多个不同的样式或行为应用于同一个标签。
多个class值之间使用空格分隔。
通过class值，我们可以定义一组相关的样式或行为，并将其应用于多个标签，实现代码的重用和简化。

【十四】列表标签

【1】无序列表

<ul>
    <li>第一项</li>>
    <li>第二项</li>>
    <li>第三项</li>>
    <li>第四项</li>>
</ul>

第一项
第二项
第三项
第四项

虽然ul标签很难看，但是只要是排班一直的几行数据基本上用的都是ul标签

【2】有序列表

<ol>
    <li>第一项</li>>
    <li>第二项</li>>
    <li>第三项</li>>
    <li>第四项</li>>
</ol>

自动为每一行加顺序

【3】标题列表

<dl>
    <dt>标题一</dt>
    <dd>内容一</dd>
    <dt>标题二</dt>
    <dd>内容二</dd>
    <dt>标题三</dt>
    <dd>内容三</dd>
    <dt>标题四</dt>
    <dd>内容四</dd>
</dl>

posted @ 2023-07-04 08:19 Chimengmeng 阅读(29) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【2.0】前端基础之web服务端本质

【2.0】前端基础之web服务端本质

【一】软件开发架构

【1】B/S

【2】C/S

【二】浏览器访问页面发生了哪些事

【三】HTTP协议

【1】什么是HTTP协议

【2】HTTP的四大特性

（1）基于请求响应

（2）基于TCP/IP之上，作用域应用层之上的协议

（3）无状态

（4）无/短链接

【3】HTTP协议的格式

（1）请求数据格式

（2）响应数据格式

（请求方式）

（响应状态码）

示例

演示

（URL）

【四】HTML简介

简单的页面

【五】HTML中的注释语法

【1】单行注释

【2】多行注释

【六】HTML的文档结构

【七】HTML标签的分类

【1】双标签

【2】单标签(自闭标签)

【八】head常用标签

【1】title

【2】style

【3】script

【4】link

【5】meta

【九】body常用标签

【1】<h1>级别标题标签

【2】<b> 加粗文字

【3】<i>斜体

【4】<u>下划线

【5】<s>删除线

【6】<p>段落标签

【7】br换行

【8】hr水平分割线

【小结】

【十】标签的分类之块级标签和行内标签

【1】块级标签

【2】行内标签

【3】总结

【小结】

块级标签（Block-level elements）：

行内标签（Inline elements）：

【十一】特殊符号

【1】空格&nbsp;

【2】大于号&gt;

【3】小于号&lt;

【4】&符&amp;

【5】￥符&yen;

【6】版权&copy;

【7】商标&reg;

【小结】

【十二】常用标签

【1】简介

div标签

span标签

img标签

a标签

【小结】

Div标签（<div>）：

Span标签（<span>）：

总结来说

【十三】标签具有的两个重要属性

【1】id值

【2】class值

【总结】

id值

class值

【1】`<h1>`级别标题标签

【2】`<b>` 加粗文字

【3】`<i>`斜体

【4】`<u>`下划线

【5】`<s>`删除线

【6】`<p>`段落标签

【7】`br`换行

【8】`hr`水平分割线

【1】空格` `

【2】大于号`>`

【3】小于号`<`

【4】&符`&`

【5】￥符`¥`

【6】版权`©`

【7】商标`®`

Div标签（`<div>`）：

Span标签（`<span>`）：