WEB基础

B/S架构

B/S架构即浏览器-服务器架构，这种架构用户界面通过浏览器实现，大部分业务逻辑都在服务端实现。 而对数据的访问则只能通过服务端，这形成三层结构。

BS架构

HTTP协议

超文本传输协议是一种用于传输超文本媒体文档的应用层协议。 它是一种client-server协议，无状态协议（服务端不保存连接有关的信息）， 请求通过一个实体被发出，实体也就是用户代理，这个用户代理一般是浏览器，也可以是其他东西。 每一个被服务器接受的请求，都会被处理然后返回一个消息，即响应。在这个请求与响应之间也会有许多代理。

  1. 连接：当我们点击了一个链接（或输入网址），经过解析，浏览器打开一个或多个TCP连接。 这些连接用于发送一条或多条请求，以及接受响应。

  2. 请求：建立连接后，用GET或POST命令发送HTTP报文。

  3. 响应：服务器接受请求后，进行处理，然后返回响应报文。

  4. 关闭连接：前端读取响应后关闭连接或者为后续请求重用，然后前端根据状态码判断是否需要渲染页面。

URL（统一资源定位器）

统一资源定位器（URL） 是指定在Internet上可以找到资源的位置的文本字符串。 在HTTP协议下，称之为“网络地址”“链接”。它也可以用于其他协议，如FTP，SMTP。

一般可分为三部分：协议://服务器地址/资源路径

MIME

MIME（Multipurpose Internet Mail Extension），多用途网际邮件扩展)含义，定义形式以及常用类型等。

格式：type/subtype

类型有，

  • text
  • audio
  • video
  • image
  • application
  • multipart（multipart/form-data, multipart/byteranges）

例如,

  • text/plain
  • text/html
  • test/css
  • image/**
  • ...

AJAX

全称Asynchronous JavaScript + XML。

你可以使用AJAX最主要的两个特性做下列事：

  • 在不重新加载页面的情况下发送请求给服务器。

  • 接受并使用从服务器发来的数据。

步骤：

  1. 创建 XMLHttpRequest 对象。

  2. 如何处理响应：设置onreadystatechange属性。

  3. 发送请求：调用open() send()方法。

HTML -- 构建WEB

主根元素

<html>：HTML

元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。

文档元数据

元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如 搜索引擎 (en-US)、浏览器 等等）更好地运用和渲染页面。 对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。

<base>

<head>：HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

<link>

<meta>

<style>

<title>

分区根元素

<body>：HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

内容分区

<h1>...<h6>：HTML 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

文本分区

<div>：HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

<p>：HTML 段落元素表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。

内联文本语义

<a>：HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

<br>：换行

图片和多媒体

<img>：嵌入图像

<audio>：嵌入音频

<video>：嵌入媒体播放器

内嵌内容

<iframe>：嵌入浏览器页面框架

<embed>

脚本

<script>

<canvas>

<noscript>

编辑标识

<del>：HTML 的<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。ins标签的作用恰恰于此相反：表示文档中添加的内容。

<ins>：HTML <ins> 元素定义已经被插入文档中的文本。

表格内容

<caption>

<col>

<colgroup>

<table>

<tbody>

<td>

<tfoot>

<th>

<thead>

<tr>

表单

HTML 提供了许多可一起使用的元素， 这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。

<input>

<label>

<button>

<form>

<option>

<select>

交互元素

<dialog>

<summary>

<details>

Web 组件

<content>

<shadow>

<slot>

<template>

CSS -- 设计WEB

层叠样式表， 一种描述在浏览器端HTML、XML（包括SVG、MathML、XHTML等）等文档的渲染方式的语言。

基本语法

1
2
3
4
选择器(selector)[, 选择器, ...] {
  属性(property): 值(value);
  ...
}

选择器 用于选择需要添加样式的HTML元素，多个选择器用逗号分开。 在大括号内部的键值对则声明了我们想要给这个元素的属性赋什么值。

JavaScript -- 可交互WEB

一种基于原型编程、多范式的动态脚本语言。 多用于浏览器（客户端）页面的开发，也可用于服务端（Node.js）。 允许我们在WEB页面实现复杂的功能。