第一次上传

01.WEB网站开发/01.初识前端.md

@@ -0,0 +1,108 @@
+# 初识前端
+
+## Web、网页、浏览器
+### Web
+Web（World Wide Web）即全球广域网，也称为万维网。
+我们常说的Web端就是网页端。
+### 网页
+**网页是构成网站的基本元素**。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
+我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。
+### 浏览器
+浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。
+关于浏览器的详细介绍，可以看下一篇文章：《[浏览器的介绍](https://github.com/qianguyihao/Web/blob/master/01-html/02-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E4%BB%8B%E7%BB%8D.md)》
+## Web标准
+### W3C组织
+**W3C**：万维网联盟组织，用来制定web标准的机构（组织）。
+W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
+W3C 组织就类似于现实世界中的联合国。
+为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。
+### Web 标准
+**Web标准**：制作网页要遵循的规范。
+Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
+**1、Web标准包括三个方面**：
+
+- 结构标准（HTML）：用于对网页元素进行整理和分类。
+- 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
+- 行为标准（JS）：用于定义网页的交互和行为。
+
+根据上面的Web标准，可以将 Web前端分为三层，如下。
+**2、Web前端分三层**：
+
+- HTML（HyperText Markup Language）：超文本标记语言。从**语义**的角度描述页面的**结构**。相当于人的身体组织结构。
+- CSS（Cascading Style Sheets）：层叠样式表。从**审美**的角度美化页面的**样式**。相当于人的衣服和打扮。
+- JS：JavaScript。从**交互**的角度描述页面的**行为**。相当于人的动作，让人有生命力。
+
+**3、打个比方**：（拿黄渤举例）
+HTML 相当于人的身体组织结构：
+![image.png](01.初识前端/1667808217746-bff7dd46-5582-4ddf-a6a6-a91797a58460.png)
+CSS 相当于人的衣服和打扮：
+![image.png](01.初识前端/1667808217443-1ec79f65-f41e-4a09-aec1-a1b0abdb8eed.png)
+JS 相当于人的行为：
+![](01.初识前端/1667808217789-f2cb1b62-043a-4f12-a75f-b5b86be3da89.gif)
+## 
+常见的浏览器
+浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：
+![image.png](01.初识前端/1667808281857-2bd7a870-ec04-4833-bc95-c4b4bd847e3e.png)
+我们重点需要学习的是 Chrome 浏览器。
+
+## 浏览器的市场占有份额
+浏览器的市场占有份额：[https://tongji.baidu.com/research/site?source=index#browser](https://tongji.baidu.com/research/site?source=index#browser)
+![image.png](01.初识前端/1667808281966-8ff352a7-d9ba-43ed-8665-9965e364833e.png)
+上面这张图的统计时间是2020年2月。
+
+## 浏览器的组成
+浏览器分成两部分：
+
+- 1、渲染引擎（即：浏览器内核）
+- 2、JS 引擎
+### 1、渲染引擎（浏览器内核）
+浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
+**渲染引擎是浏览器兼容性问题出现的根本原因。**
+渲染引擎的英文叫做 Rendering Engine。通俗来说，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上。
+常见浏览器的内核如下：
+
+| **浏览器** | **内核** |
+| --- | --- |
+| chrome | Blink |
+| 欧鹏 | Blink |
+| 360安全浏览器 | Blink |
+| 360极速浏览器 | Blink |
+| Safari | Webkit |
+| Firefox 火狐 | Gecko |
+| IE | Trident |
+
+备注：360的浏览器，以前使用的IE浏览器的Trident内核，但是现在已经改为使用 chrome 浏览器的 Blink内核。
+另外，移动端的浏览器内核是什么？大家可以自行查阅资料。
+### 2、JS 引擎
+也称为 JS 解释器。 用来解析网页中的JavaScript代码，对其处理后再运行。
+浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行时会逐行解释源码（转换为机器语言），然后由计算机去执行。
+浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行。所以 JavaScript 语言归为脚本语言，会逐行解释执行。
+常见浏览器的 JS 引擎如下：
+
+| **浏览器** | **JS 引擎** |
+| --- | --- |
+| chrome / 欧鹏 | V8 |
+| Safari | Nitro |
+| Firefox 火狐 | SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-） |
+| Opera | Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-） |
+| IE | Trident |
+
+参考链接：
+
+- [主流浏览器内核及JS引擎](https://juejin.im/post/5ada727c518825670b33a584)
+## 浏览器工作原理
+这一小段有些深入，小白可以暂时跳过，以后再来看。
+![image.png](01.初识前端/1667808281909-98403790-de53-4407-b09a-c700ba997c3a.png)
+1、User Interface 用户界面，我们所看到的浏览器
+2、Browser engine 浏览器引擎，用来查询和操作渲染引擎
+3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS
+4、Networking 网络，负责发送网络请求
+5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码
+6、UI Backend UI后端，用来绘制类似组合框和弹出窗口
+7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage
+参考链接：
+
+- [https://www.2cto.com/kf/201202/118111.html](https://www.2cto.com/kf/201202/118111.html)
+
+
+

01.WEB网站开发/02.HTML基础.md

@@ -0,0 +1,338 @@
+# HTML基础
+
+## HTML的概念
+**HTML** 全称为 HyperText Markup Language，译为**超文本标记语言**。
+HTML 不是一种编程语言，是一种描述性的**标记语言**。
+**作用**：HTML是负责描述文档**语义**的语言。
+### 概念：超文本
+所谓的超文本，有两层含义：
+（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。
+（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。
+### 概念：标记语言
+HTML 不是一种编程语言，是一种描述性的**标记语言**。这主要有两层含义：
+（1）**标记语言是一套标记标签**。比如：标签`<a>` 表示超链接、标签`<img>` 表示图片、标签`<h1>` 表示一级标题等等，它们都是属于 HTML 标签。
+说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
+（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。
+
+#### HTML是负责描述文档语义的语言
+HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。
+接下来，我们需要学习 HTML 中的很多“标签对儿”，这些“标签对儿”能够给文本不同的语义。
+比如，面试的时候问你，`<h1>` 标签有什么作用？
+
+- 正确答案：给文本增加主标题的语义。
+- 错误答案：给文字加粗、加黑、变大。
+
+关乎“语义”的更深刻理解，等接下来我们学习了各种标签，就明白了。
+### HTML的历史
+![image.png](02.HTML基础/1667808374759-37418c94-e355-4dbc-b08e-49c80daf98de-20250509134342896.png)
+
+其中，我们专门来对XHTML做一个介绍。
+**XHTML介绍：**XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。XHTML的主要目的是为了**取代HTML**，也可以理解为HTML的升级版。HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。XHTML与HTML4.0的标记基本上一样。XHTML是**严格的、纯净的**HTML。
+我们稍后将对XHTML的编写规范进行介绍。
+
+### HTML的专有名词
+
+- 网页 ：由各种标记组成的一个页面就叫网页。
+- 主页(首页) : 一个网站的起始页面或者导航页面。
+- 标记： 比如`<p>` 称为开始标记 ，`</p>` 称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
+- 元素：比如`<p>` 内容`</p>` 称为元素.
+- 属性：给每一个标签所做的辅助信息。
+- XHTML：符合XML语法标准的HTML。
+- DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。
+- HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。
+### 书写第一个 HTML 页面
+我们打开 VS Code 软件，新建一个文件，名叫test.html（注意，文件名是test，后缀名是html），保存到本地。
+紧接着，在文件里，输入html:5，然后按一下键盘上的Tab键，就可以自动生成如下内容：
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+  </head>
+  <body>
+
+  </body>
+</html>
+```
+上面的内容，就是 html 页面的骨架。我们在此基础之上，新增几个标签，完整代码如下：
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+  </head>
+  <body>
+    <h3>我是三级标题</h3>
+    <img src="" alt="">
+    <a href="https://www.jd.com">我是超链接，可以点击一下</a>
+  </body>
+</html>
+```
+标签写完之后，我们用 chrome 浏览器打开上面这个test.html文件，看看页面效果：
+到此，第一个简单的 HTML 页面就写完了。是不是很有成就感？
+### HTML结构详解
+HTML标签通常是成对出现的（**双边标记**），比如 `<div> ` 和 `</div>` ；也有少部分单标签（**单边标记**），如：
+、`<hr />` 和`<img src="images/1.jpg" />` 等。
+属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
+
+#### html骨架标签分类
+| **标签名** | **定义** | **说明** |
+| --- | --- | --- |
+| `<html></html>` | HTML标签 | 页面中最大的标签，我们成为根标签 |
+| `<head></head>` | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
+| `<titile></title>` | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
+| `<body></body>` | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
+
+#### 快速生成 html 的骨架
+**方式1**：在 VS Code 中新建 html 文件，输入html:5，按 Tab键后，自动生成的代码如下：
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <title>Document</title>
+  </head>
+  <body>
+
+  </body>
+</html>
+```
+**方式2**：在Sublime Text中安装Emmet插件。新建html文件，输入html:5，按Tab键后，自动生成的代码如下：
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+  </head>
+  <body>
+
+  </body>
+</html>
+```
+**方式3**：在Sublime Text中安装Emmet插件。新建html文件，输入html:xt，按Tab键后，自动生成的代码如下：
+```html
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <title>Document</title>
+  </head>
+  <body>
+
+  </body>
+</html>
+```
+上面的方式2和方式3中，我们会发现，第一行的内容有些不太一样，这就是我们接下来要讲的**文档声明头**。
+#### 文档声明头
+任何一个标准的HTML页面，第一行一定是一个以`<!DOCTYPE ……>` 开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。
+**DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范**。
+
+##### HTML4.01有哪些规范呢？
+**HTML4.01**这个版本是IE6开始兼容的。**HTML5是IE9开始兼容的**。如今，手机、移动端的网页，就可以使用HTML5了，因为其兼容性更高。
+说个题外话，html1 至 html3 是美国军方以及高等研究所用的，并未对外公开。
+HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下图）。
+HTML4.01里面规定了**普通**和**XHTML**两大种规范。HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？`<H1></H1>` 所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。
+总结一下，HTML4.01一共有6种DTD。说白了，HTML的第一行语句一共有6种情况：
+
+![image.png](02.HTML基础/1667808374905-7ed621e7-cad8-47c2-a181-6d7c5da0e120.png)
+
+下面对上图中的三种小规范进行解释：
+**strict**：
+表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML最好是只负责语义，不要负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。
+那怎么给文本增加下划线呢？今后将使用css属性来解决。
+XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。
+**Transitional**：表示“普通的”，这种模式就是没有一些别的规范。
+**Frameset**：表示“框架”，在框架的页面使用。
+在sublime输入的html:xt，x表示XHTML，t表示transitional。
+在HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了。HTML5的DTD（文档声明头)如下：
+
+`<!DOCTYPE html>` 
+
+#### 页面语言 lang
+下面这行标签，用于指定页面的语言类型：
+ `<html lang="en">` 
+最常见的语言类型有两种：
+
+
+- en：定义页面语言为英语。
+- zh-CN：定义页面语言为中文。
+#### 头标签 head
+##### html5 的比较完整的骨架：
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <meta name="Author" content="">
+    <meta name="Keywords" content="厉害很厉害" />
+    <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
+    <title>Document</title>
+  </head>
+  <body>
+
+  </body>
+</html>
+```
+面试题：
+
+- 问：网页的head标签里面，表示的是页面的配置，有什么配置？
+- 答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
+
+头标签内部的常见标签如下：
+
+- `<title>`：指定整个网页的标题，在浏览器最上方显示。
+- `<base>` ：为页面上的所有链接规定默认地址或默认目标。
+- `<meta>` ：提供有关页面的基本信息
+- `<body>` ：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
+- `<link>` ：定义文档与外部资源的关系。
+
+**meta 标签**：
+meta表示“元”。“元”配置，就是表示基本的配置项目。
+常见的几种 meta 标签如下：
+（1）字符集 charset：
+ `<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">`
+字符集用meta标签中的charset定义，charset就是charactor set（即“字符集”），即**网页的编码方式**。
+**字符集**(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
+上面这行代码非常关键， 是必须要写的代码，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
+utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。关于“编码方式”，我们在下一段会详细介绍。
+（2）视口 viewport：
+     `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
+width=device-width ：表示视口宽度等于屏幕宽度。
+viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。
+（3）定义“关键词”：
+举例如下：
+ `<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />`
+这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
+（4）定义“页面描述”：
+meta除了可以设置字符集，还可以设置关键字和页面描述。
+只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。
+设置页面描述的举例：
+ `<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />`
+效果如下：
+
+![image.png](02.HTML基础/1667808374850-e75ad910-6091-40fd-9d86-41aa8cea1a0f.png)
+
+上面的几种`<meta>` 标签都不用记，但是另外还有一个`<meta>` 标签是需要记住的：
+ `<meta http-equiv="refresh" content="3;http://www.baidu.com">`
+上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
+**title 标签**:
+用于设置网页标题：
+     `<title>网页的标题</title>`
+title标签也是有助于SEO搜索引擎优化的。
+**base标签**：
+ `<base href="/">`
+base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
+
+#### `<body>` 标签
+`<body>` 标签的属性有：
+
+- bgcolor：设置整个网页的背景颜色。
+- background：设置整个网页的背景图片。
+- text：设置网页中的文本颜色。
+- leftmargin：网页的左边距。IE浏览器默认是8个像素。
+- topmargin：网页的上边距。
+- rightmargin：网页的右边距。
+- bottommargin：网页的下边距。
+
+`<body>` 标签另外还有一些属性，这里用个例子来解释：
+
+![image.png](02.HTML基础/1667808375068-1a77af7a-3fd6-4e4d-871b-b7daa74b8429.png)
+
+上方代码中，当我们对点我点我这几个字使用超链时，link属性表示默认显示的颜色、alink属性表示鼠标点击但是还没有松开时的颜色、vlink属性表示点击完成之后显示的颜色。效果如下：
+
+![](02.HTML基础/1667808374629-462b0e02-4622-4369-82a8-d7ddc20c2ffb.gif)
+
+
+
+### 计算机编码介绍
+计算机，不能直接存储文字，存储的是编码。
+计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们可以定义一套规则来表示。假如：A用110表示，B用111表示等。
+**ASCII码：**美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。	美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。
+**ANSI编码：每个国家为了显示本国的语言，都对ASCII码进行了扩展**。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。例如：中国的ANSI编码是GB2312编码(简体)，对6763汉字进行编码，含600多特殊字符。另外还有GBK(简体)。日本的ANSI编码是JIS编码。台湾的ANSI编码是BIG5编码（繁体）。
+**GBK：**对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
+**Unicode编码(统一编码)：**用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000
+**UTF-8(Unicode Transform Format)编码：**根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用3个字节表示。
+毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
+**中文能够使用的字符集两种：**
+
+- 第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
+- 第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面**仅**涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
+
+字库规模： UTF-8（字很全） > gb2312（只有汉字）
+**重点1：避免乱码**
+我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）。
+拿 sublime编辑器举例，当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： 文件→ set File Encoding to → Chinese Simplified(GBK)。VS Code 的道理一样。
+**重点2：UTF-8和gb2312的比较**
+保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
+总结：
+
+- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
+- gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
+
+列出2个使用情形：
+
+1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。
+
+2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
+我们亲测：
+
+- qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
+- 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
+
+我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到meta标签中的charset属性即可。
+那么，我们为什么可以查看网页的源代码呢？因为这个打开的html网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然可以查看网页的源代码。
+### HTML的规范
+
+- HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
+- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
+#### 编写XHTML的规范：
+（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：`<h1><font></font></h1>` 
+（2）所有的标记都必须小写。
+（3）所有的标签都必须闭合。
+
+- 双标签：`<span></span>` 
+- 单标签：`<br>`  
+- 建议写成 
+
+`<hr>` 建议转成 `<hr />` ，还有`<img src=“URL” />` 
+
+（4）所有的属性值必须加引号。`<font color="red"></font>` 
+（5）所有的属性必须有值。`<hr noshade="noshade">、<input type="radio" checked="checked" />` 
+（6）XHTML文档开头必须要有DTD文档类型定义。
+
+#### HTML的基本语法特性
+##### HTML对换行不敏感，对tab不敏感
+HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
+也就是说，HTML不是依靠缩进来表示嵌套的，而是看标签的嵌套关系。但是，我们发现有良好的缩进，代码更易读。建议大家都正确缩进标签。
+百度为了追求极致的显示速度，所有HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了。如下图所示：
+
+![image.png](02.HTML基础/1667808375103-e56bf60f-7e58-46f6-bb90-48f9cfabcd7e.png)
+
+
+
+##### 空白折叠现象
+HTML中所有的**文字之间**，如果有空格、换行、tab都将被折叠为一个空格显示。
+举例如下：
+
+![image.png](02.HTML基础/1667808377335-da9e90a5-59f8-4dc2-b992-e577ff4a9c3d.png)
+
+
+
+##### 标签要严格封闭
+标签不封闭的结果是灾难性的。
+标签不封闭的举例如下：
+
+![image.png](02.HTML基础/1667808376343-8ee0be14-a7f4-4b3e-8fb1-1b1e5b9632ed.png)
+
+
+
+ 

01.WEB网站开发/03.常用标签.md

@@ -0,0 +1,496 @@
+# 常用标签
+
+## HTML文档结构
+最基本的HTML文档：
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>css样式优先级</title>
+</head>
+<body>
+
+</body>
+</html>
+```
+
+1. `<!DOCTYPE html>` 声明为HTML5文档。
+2. `<html>` 、`</html>` 是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
+3. `<head>` 、`</head>` 定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
+4. `<title>`、`</title>` 定义了网页标题，在浏览器标题栏显示。
+5. `<body>` 、`</body>` 之间的文本是可见的网页主体内容。
+
+注意：对于中文网页需要使用 `<meta charset="utf-8">` 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 `<meta charset="gbk">`。
+## HTML标签格式
+
+- HTML标签是由尖括号包围的关键字，如`<html>` , `<div>` 等
+- HTML标签通常是成对出现的，比如：`<div>` 和`</div>` ，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
+- 也有一部分标签是单独呈现的，比如：`<br/>` 、`<hr/>` 、`<img src="1.jpg" />` 等。
+- 标签里面可以有若干属性，也可以不带属性。
+
+**标签的语法：**
+
+- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
+- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
+
+**几个很重要的属性：**
+
+- id：定义标签的唯一ID，HTML文档树中唯一
+- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
+- style：规定元素的行内样式（CSS样式）
+## HTML注释
+```html
+<!--注释内容-->
+```
+## <!DOCTYPE> 标签
+`<!DOCTYPE>` 声明必须是 HTML 文档的第一行，位于 `<html>` 标签之前。
+`<!DOCTYPE>` 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
+HTML常用标签
+head内常用标签
+
+
+| 标签 | 意义 |
+| --- | --- |
+| `<title></title>` | 定义网页标题 |
+| `<style></style>` | 定义内部样式表 |
+| `<script></script>` | 定义JS代码或引入外部JS文件 |
+| `<link/>` | 引入外部样式表文件 |
+| `<meta/>` | 定义网页原信息 |
+
+### Meta标签
+Meta标签介绍：
+
+- `<meta>` 元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
+- `<meta>` 标签位于文档的头部，不包含任何内容。
+- `<meta>` 提供的信息是用户不可见的。
+
+meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 
+
+1. http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
+```html
+<!--2秒后跳转到对应的网址，注意引号-->
+<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
+<!--指定文档的编码类型-->
+<meta http-equiv="content-Type" charset=UTF8">
+<!--告诉IE以最高级模式渲染文档-->
+<meta http-equiv="x-ua-compatible" content="IE=edge">
+```
+
+
+2. name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
+```html
+<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
+<meta name="description" content="教育培训">
+```
+
+## body内常用标签
+### 基本标签（块级标签和内联标签）
+
+```html
+<b>加粗</b>
+<i>斜体</i>
+<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>
+```
+
+## 特殊字符
+| 内容 | 对应代码 |
+| --- | --- |
+| 空格 | `&nbsp;` |
+| > | `&gt;` |
+| < | `&lt;` |
+| & | `&amp;` |
+| ¥ | `&yen;` |
+| 版权 | `&copy;` |
+| 注册 | `&reg;` |
+
+### div标签和span标签
+div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
+span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
+
+**块级元素与行内元素的区别：**
+所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
+这两个元素是专门为定义CSS样式而生的。
+**注意：**
+关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
+**p标签不能包含块级标签，p标签也不能包含p标签。**
+
+### img标签
+```html
+<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
+```
+### a标签
+超链接标签
+所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
+
+> 什么是URL？
+> URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
+> URL举例
+> http://www.sohu.com/stu/intro.html
+> http://222.172.123.33/stu/intro.html
+> URL地址由4部分组成
+> 第1部分：为协议：http://、ftp://等  
+> 第2部分：为站点地址：可以是域名或IP地址
+> 第3部分：为页面在站点中的目录：stu
+> 第4部分：为页面名称，例如 index.html
+> 各部分之间用“/”符号隔开。
+
+```html
+<a href="https://www.baidu.com" target="_blank" >点我</a>
+```
+href属性指定目标网页地址。该地址可以有几种类型：
+
+- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
+- 相对URL - 指当前站点中确切的路径（href="index.htm"）
+- 锚URL - 指向页面中的锚（href="#top"）
+
+
+target：
+
+- _blank表示在新标签页中打开目标网页
+- _self表示在当前标签页中打开目标网页
+### 列表
+
+1. **无序列表**
+```html
+<ul type="disc">
+  <li>第一项</li>
+  <li>第二项</li>
+</ul>
+```
+type属性：
+disc（实心圆点，默认值）
+circle（空心圆圈）
+square（实心方块）
+none（无样式）
+
+2. **有序列表**
+```html
+<ol type="1" start="2">
+  <li>第一项</li>
+  <li>第二项</li>
+</ol>
+```
+type属性：
+1 数字列表，默认值
+A 大写字母
+a 小写字母
+Ⅰ大写罗马
+ⅰ小写罗马
+
+3. **标题列表**
+```html
+<dl>
+  <dt>标题1</dt>
+  <dd>内容1</dd>
+  <dt>标题2</dt>
+  <dd>内容1</dd>
+  <dd>内容2</dd>
+</dl>
+```
+### 表格
+表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
+表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
+表格的基本结构：
+```html
+<table>
+  <thead>
+    <tr>
+      <th>姓名</th>
+      <th>性别</th>
+      <th>爱好</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>张三</td>
+      <td>男</td>
+      <td>男</td>
+    </tr>
+    <tr>
+      <td>李四</td>
+      <td>男</td>
+      <td>女</td>
+    </tr>
+  </tbody>
+</table>
+```
+属性:
+border: 表格边框.
+cellpadding: 内边距
+cellspacing: 外边距.
+width: 像素 百分比.（最好通过css来设置长宽）
+rowspan: 单元格竖跨多少行
+colspan: 单元格横跨多少列（即合并单元格）
+### form
+**功能：**
+表单用于向服务器传输数据，从而实现用户与Web服务器的交互
+表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
+表单还可以包含textarea、select、fieldset和 label标签。
+**表单属性:**
+
+| 属性 | 描述 |
+| --- | --- |
+| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
+| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
+| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
+| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
+| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
+| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
+| novalidate | 规定浏览器不验证表单。 |
+| target | 规定 action 属性中地址的目标（默认：_self）。 |
+
+**表单元素**
+**基本概念：**
+HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
+表单一般用来收集用户的输入信息
+**表单工作原理：**
+访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。  
+服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
+### input
+`<input>` 元素会根据不同的 type 属性，变化为多种形态。
+
+| type属性值 | 表现形式 | 对应代码 |
+| --- | --- | --- |
+| text | 单行输入文本 | `<input type=text" />` |
+| password | 密码输入框 | `<input type="password"  />` |
+| date | 日期输入框 | `<input type="date" />` |
+| checkbox | 复选框 | `<input type="checkbox" checked="checked"  />` |
+| 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"  />` |
+
+**属性说明:**
+name：表单提交时的“键”，注意和id的区别
+value：表单提交时对应项的值
+type="button", "reset", "submit"时，为按钮上显示的文本年内容
+type="text","password","hidden"时，为输入框的初始值
+type="checkbox", "radio", "file"，为输入相关联的值
+checked：radio和checkbox默认被选中的项
+readonly：text和password设置只读
+disabled：所有input均适用
+
+### select标签
+
+```html
+<form action="" method="post">
+  <select name="city" id="city">
+    <option value="1">北京</option>
+    <option selected="selected" value="2">上海</option>
+    <option value="3">广州</option>
+    <option value="4">深圳</option>
+  </select>
+</form>
+```
+**属性说明：**
+multiple：布尔属性，设置后为多选，否则默认单选
+disabled：禁用
+selected：默认选中该项
+value：定义提交时的选项值
+### label标签
+定义：`<label>` 标签为 input 元素定义标注（标记）。
+说明：
+label 元素不会向用户呈现任何特殊效果。
+`<label>` 标签的 for 属性值应当与相关元素的 id 属性值相同。
+
+```html
+<form action="">
+  <label for="username">用户名</label>
+  <input type="text" id="username" name="username">
+</form>
+```
+### textarea多行文本
+
+```html
+<textarea name="memo" id="memo" cols="30" rows="10">
+  默认内容
+</textarea>
+```
+**属性说明：**
+name：名称
+rows：行数
+cols：列数
+disabled：禁用
+## 框架的使用
+### frameset
+frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
+frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
+
+- frameset 不能在body内使用
+- cols 定义框架集中列的数目和尺寸
+- rows 定义框架集中行的数目和尺寸
+- scrolling   滚动条，在frame标签中使用
+   - auto	在需要的情况下出现滚动条（默认值）
+   - yes	始终显示滚动条（即使不需要）
+   - no	从不显示滚动条（即使需要）
+- iframe 一般都是在frameset中使用
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<!-- 在页面中加载其他页面 -->
+<frameset>
+    <frame src="http://www.eagleslab.com">
+</frameset>
+<body>
+    
+</body>
+</html>
+```
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<!-- 显示两行，每行占页面的50% -->
+<frameset rows="50%,50%">
+    <frame src="http://www.eagleslab.com" />
+    <frame src="http://iproute.cn" />
+</frameset>
+<body>
+    
+</body>
+</html>
+```
+
+
+![image.png](03.常用标签/1667868343701-5d0b068d-5423-4dc6-b81b-f85e30450a83.png)
+
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<!-- 显示两列，第一列占30% -->
+<frameset cols="30%,*">
+    <frame src="http://www.eagleslab.com" scrolling="no" />
+    <frame src="http://iproute.cn" />
+</frameset>
+<body>
+
+</body>
+</html>
+```
+
+
+![image.png](03.常用标签/1667868623501-279c34d8-e887-4eb7-8379-4d714462cec9.png)
+
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<frameset rows="15%,*">
+    <frame src="top.html" scrolling="no" />
+    <frameset cols="15%,*">
+        <frame src="menu.html" />
+        <frame src="main.html" />
+    </frameset>
+</frameset>
+<body>
+
+</body>
+</html>
+```
+
+
+![image.png](03.常用标签/1667868922672-6a517014-5a08-42cc-b4f4-0bfa94627b13.png)
+
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<frameset rows="15%,*">
+    <frame src="top.html" scrolling="no" />
+    <frameset cols="15%,*">
+        <frame src="menu.html" />
+        <!-- 在frame标签中添加name属性，关联子页面的target -->
+        <frame src="main.html" name="main" />
+    </frameset>
+</frameset>
+<body>
+
+</body>
+</html>
+```
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <p>文章列表</p>
+    <ul>
+        <li><a href="first.html" target="main">第一篇文章</a></li>
+        <li><a href="#">第二篇文章</a></li>
+    </ul>
+</body>
+</html>
+```
+
+
+![image.png](03.常用标签/1667869275641-6b4ffa0c-38de-4deb-b2ab-030db62369e5.png)
+
+
+
+### iframe
+iframe 是在html页面内嵌入框架 框架内可以连接另一个页面
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <iframe src="http://www.eagleslab.com" width="500px" height="300px" frameborder="0"></iframe>
+</body>
+</html>
+```
+
+
+![image.png](03.常用标签/1667869423274-4798d665-eb2c-4c09-87c4-42643822c29a.png)
+

01.WEB网站开发/04.div与css.md

@@ -0,0 +1,810 @@
+# div与css
+
+## CSS介绍
+CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
+当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
+## CSS语法
+### CSS实例
+每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
+
+![](04.div与css/1552009530330-aad52927-0960-4dcf-8deb-801e926243bf.png)
+
+
+
+### CSS注释
+/*这是注释*/
+## CSS的几种引入方式
+### 行内样式
+行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
+```css
+<p style="color: red">Hello world.</p>
+```
+### 内部样式
+嵌入式是将CSS样式集中写在网页的`<head></head>` 标签对的`<style></style>` 标签对中。格式如下：
+```css
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        p{
+            background-color: #2b99ff;
+        }
+    </style>
+</head>
+```
+### 外部样式
+外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
+```css
+<link href="mystyle.css" rel="stylesheet" type="text/css"/>
+```
+## CSS选择器
+### 基本选择器
+#### 元素选择器
+```css
+p {color: red;}
+```
+#### ID选择器
+```css
+##i1 {
+  background-color: red;
+}
+```
+#### 类选择器
+```css
+.c1 {
+  font-size: 14px;
+}
+p.c1 {
+  color: red;
+}
+```
+注意：
+样式类名不要用数字开头（有的浏览器不认）。
+标签中的class属性如果有多个，要用空格分隔。
+#### 通用选择器
+```css
+* {
+  color: white;
+}
+```
+## 组合选择器
+#### 后代选择器
+```css
+/*li内部的a标签设置字体颜色*/
+li a {
+  color: green;
+}
+```
+#### 儿子选择器
+```css
+/*选择所有父级是 <div> 元素的 <p> 元素*/
+div>p {
+  font-family: "Arial Black", arial-black, cursive;
+}
+```
+#### 毗邻选择器
+```css
+/*选择所有紧接着<div>元素之后的<p>元素*/
+div+p {
+  margin: 5px;
+}
+```
+#### 弟弟选择器
+```css
+/*i1后面所有的兄弟p标签*/
+##i1~p {
+  border: 2px solid royalblue;
+}
+```
+### 属性选择器
+```css
+/*用于选取带有指定属性的元素。*/
+p[title] {
+  color: red;
+}
+/*用于选取带有指定属性和值的元素。*/
+p[title="213"] {
+  color: green;
+}
+```
+**不常用**
+```css
+/*找到所有title属性以hello开头的元素*/
+[title^="hello"] {
+  color: red;
+}
+
+/*找到所有title属性以hello结尾的元素*/
+[title$="hello"] {
+  color: yellow;
+}
+
+/*找到所有title属性中包含（字符串包含）hello的元素*/
+[title*="hello"] {
+  color: red;
+}
+
+/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
+[title~="hello"] {
+  color: green;
+}
+```
+### 分组和嵌套
+#### 分组
+当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 
+```css
+div,
+p {
+  color: red;
+}
+```
+#### 嵌套
+多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
+```css
+.c1 p {
+  color: red;
+}
+```
+### 伪类选择器
+```css
+/* 未访问的链接 */
+a:link {
+  color: #FF0000
+}
+
+/* 已访问的链接 */
+a:visited {
+  color: #00FF00
+} 
+
+/* 鼠标移动到链接上 */
+a:hover {
+  color: #FF00FF
+} 
+
+/* 选定的链接 */ 
+a:active {
+  color: #0000FF
+}
+
+/*input输入框获取焦点时样式*/
+input:focus {
+  outline: none;
+  background-color: #eee;
+}
+```
+### 伪元素选择器
+#### first-letter
+常用的给首字母设置特殊样式：
+```css
+p:first-letter {
+  font-size: 48px;
+  color: red;
+}
+```
+#### before
+```css
+/*在每个<p>元素之前插入内容*/
+p:before {
+  content:"*";
+  color:red;
+}
+```
+#### after
+```css
+/*在每个<p>元素之后插入内容*/
+p:after {
+  content:"[?]";
+  color:blue;
+} 
+```
+before和after多用于清除浮动。
+### 选择器的优先级
+#### CSS继承
+继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
+```css
+body {
+  color: red;
+}
+```
+此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
+我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
+```css
+p {
+  color: green;
+}
+```
+此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
+#### 选择器的优先级
+我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？
+其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
+
+![image.png](04.div与css/1552017247999-62262449-3a11-482b-b25f-423f6c349b3d.png)
+
+
+
+- 内联样式的权重为1000
+- id选择器的权重为100
+- 内选择器的权重为10
+- 元素选择器的权重为1
+- 权重计算永不退位
+
+除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
+万不得已可以使用!important
+## CSS属性相关
+### 宽和高
+width属性可以为元素设置宽度。
+height属性可以为元素设置高度。
+块级标签才能设置宽度，内联标签的宽度由内容来决定。
+### 字体属性
+#### 文字字体
+font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
+简单实例：
+```css
+body {
+  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
+}
+```
+#### 字体大小
+```css
+p {
+  font-size: 14px;
+}
+```
+如果设置成inherit表示继承父元素的字体大小值。
+#### 字重（粗细） 
+font-weight用来设置字体的字重（粗细）。
+
+| 值 | 描述 |
+| --- | --- |
+| normal | 默认值，标准粗细 |
+| bold | 粗体 |
+| bolder | 更粗 |
+| lighter | 更细 |
+| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
+| inherit | 继承父元素字体的粗细值 |
+
+#### 文本颜色
+颜色属性被用来设置文字的颜色。
+颜色是通过CSS最经常的指定：
+
+- 十六进制值 - 如: ＃FF0000
+- 一个RGB值 - 如: RGB(255,0,0)
+- 颜色的名称 - 如:  red
+
+还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
+### 文字属性
+#### 文字对齐
+text-align 属性规定元素中的文本的水平对齐方式。
+
+| 值 | 描述 |
+| --- | --- |
+| left | 左边对齐 默认值 |
+| right | 右对齐 |
+| center | 居中对齐 |
+| justify | 两端对齐 |
+
+#### 文字装饰
+text-decoration 属性用来给文字添加特殊效果。
+
+| 值 | 描述 |
+| --- | --- |
+| none | 默认。定义标准的文本。 |
+| underline | 定义文本下的一条线。 |
+| overline | 定义文本上的一条线。 |
+| line-through | 定义穿过文本下的一条线。 |
+| inherit | 继承父元素的text-decoration属性的值。 |
+
+常用的为去掉a标签默认的自划线：
+```css
+a {
+  text-decoration: none;
+}
+```
+#### 首行缩进
+将段落的第一行缩进 32像素：
+```css
+p {
+  text-indent: 32px;
+}
+```
+### 背景属性
+```css
+/*背景颜色*/
+background-color: red;
+/*背景图片*/
+background-image: url('1.jpg');
+/*
+ 背景重复
+ repeat(默认):背景图片平铺排满整个网页
+ repeat-x：背景图片只在水平方向上平铺
+ repeat-y：背景图片只在垂直方向上平铺
+ no-repeat：背景图片不平铺
+*/
+background-repeat: no-repeat; 
+/*背景位置*/
+background-position: right top;
+/*background-position: 200px 200px;*/
+```
+支持简写：
+```css
+background:#ffffff url('1.png') no-repeat right top;
+```
+使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
+鼠标滚动背景不动
+```css
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>滚动背景图示例</title>
+    <style>
+        * {
+            margin: 0;
+        }
+        .box {
+            width: 100%;
+            height: 500px;
+            background: url("http://tu.eagleslab.com/images/2019/01/21/timg.jpg") no-repeat center center;
+            background-attachment: fixed;
+        }
+        .d1 {
+            height: 500px;
+            background-color: tomato;
+        }
+        .d2 {
+            height: 500px;
+            background-color: steelblue;
+        }
+        .d3 {
+            height: 500px;
+            background-color: mediumorchid;
+        }
+    </style>
+</head>
+<body>
+    <div class="d1"></div>
+    <div class="box"></div>
+    <div class="d2"></div>
+    <div class="d3"></div>
+</body>
+</html>
+```
+### 边框
+边框属性  
+
+- border-width
+- border-style
+- border-color
+```css
+##i1 {
+  border-width: 2px;
+  border-style: solid;
+  border-color: red;
+}
+```
+通常使用简写方式：
+```css
+##i1 {
+  border: 2px solid red;
+}
+```
+边框样式
+
+| 值 | 描述 |
+| --- | --- |
+| none | 无边框。 |
+| dotted | 点状虚线边框。 |
+| dashed | 矩形虚线边框。 |
+| solid | 实线边框。 |
+
+除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
+```css
+##i1 {
+  border-top-style:dotted;
+  border-top-color: red;
+  border-right-style:solid;
+  border-bottom-style:dotted;
+  border-left-style:none;
+}
+```
+### border-radius
+用这个属性能实现圆角边框的效果。
+将border-radius设置为长或高的一半即可得到一个圆形。
+### display属性
+用于控制HTML元素的显示效果。
+
+| 值 | 意义 |
+| --- | --- |
+| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
+| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
+| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
+| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
+
+**display:"none"与visibility:hidden的区别：**
+visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
+display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
+### CSS盒子模型
+
+- margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
+- padding:           用于控制内容与边框之间的距离；    
+- Border(边框):     围绕在内边距和内容外的边框。
+- Content(内容):   盒子的内容，显示文本和图像。
+
+![image.png](https://cdn.nlark.com/yuque/0/2019/png/265641/1552019472433-fd11cea6-6496-49d5-aa68-cf2622d1dc79.png#averageHue=%23eed59b&height=301&id=LEjXr&originHeight=301&originWidth=481&originalType=binary&ratio=1&rotation=0&showTitle=false&size=17481&status=done&style=none&title=&width=481)
+### margin外边距
+```css
+.margin-test {
+  margin-top:5px;
+  margin-right:10px;
+  margin-bottom:15px;
+  margin-left:20px;
+}
+```
+推荐使用简写：
+```css
+.margin-test {
+  margin: 5px 10px 15px 20px;
+}
+```
+顺序：上右下左
+常见居中：
+```css
+.mycenter {
+  margin: 0 auto;
+}
+```
+### padding内填充
+```css
+.padding-test {
+  padding-top: 5px;
+  padding-right: 10px;
+  padding-bottom: 15px;
+  padding-left: 20px;
+}
+```
+推荐使用简写：
+```css
+.padding-test {
+  padding: 5px 10px 15px 20px;
+}
+```
+顺序：上右下左
+补充padding的常用简写方式：
+
+- 提供一个，用于四边；
+- 提供两个，第一个用于上－下，第二个用于左－右；
+- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
+- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
+### float
+在 CSS 中，任何元素都可以浮动。
+浮动元素会生成一个块级框，而不论它本身是何种元素。
+关于浮动的两个特点：
+
+- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
+- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
+#### 三种取值
+left：向左浮动
+right：向右浮动
+none：默认值，不浮动
+### clear
+clear属性规定元素的哪一侧不允许其他浮动元素。
+
+| 值 | 描述 |
+| --- | --- |
+| left | 在左侧不允许浮动元素。 |
+| right | 在右侧不允许浮动元素。 |
+| both | 在左右两侧均不允许浮动元素。 |
+| none | 默认值。允许浮动元素出现在两侧。 |
+| inherit | 规定应该从父元素继承 clear 属性的值。 |
+
+注意：clear属性只会对自身起作用，而不会影响其他元素。
+#### 清除浮动
+清除浮动的副作用（父标签塌陷问题）
+主要有三种方式：
+
+- 固定高度
+- 伪元素清除法
+- overflow:hidden
+
+伪元素清除法（使用较多）：
+```css
+.clearfix:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+```
+### overflow溢出属性 
+| 值 | 描述 |
+| --- | --- |
+| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
+| hidden | 内容会被修剪，并且其余内容是不可见的。 |
+| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
+| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
+| inherit | 规定应该从父元素继承 overflow 属性的值。 |
+
+- overflow（水平和垂直均设置）
+- overflow-x（设置水平方向）
+- overflow-y（设置垂直方向）
+#### 圆形头像示例
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>csstest</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            background-color: #eee;
+        }
+        .header-img {
+            width: 550px;
+            height: 550px;
+            border: 3px solid black;
+            border-radius: 50%;
+            overflow: hidden;
+        }
+        .header-img>img {
+            max-width: 100%;
+        }
+    </style>
+</head>
+<body>
+<div class="header-img">
+    <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552019921&di=fff4e13a59b228adc9be5c973e4b4afd&src=http://www.people.com.cn/mediafile/pic/20151001/37/7543521508184488665.jpg">
+</div>
+</body>
+</html>
+```
+### 定位（position）
+#### static
+static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
+#### relative（相对定位）
+相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
+注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
+#### absolute（绝对定位）
+定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
+重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
+另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
+#### fixed（固定）
+fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
+在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
+**返回顶部按钮样式**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>csstest</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            background-color: #eee;
+        }
+        .d1 {
+            height: 1000px;
+            background-color: #eee;
+        }
+        .scrolltop {
+            background-color: pink;
+            padding: 10px;
+            text-align: center;
+            position: fixed;
+            right: 10px;
+            bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+<div class="d1">111</div>
+<div class="scrolltop">返回顶部</div>
+</body>
+</html>
+```
+### z-index
+```css
+##i2 {
+  z-index: 999;
+}
+```
+设置对象的层叠顺序。
+
+1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
+2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
+3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
+4. 从父现象：父亲怂了，儿子再牛逼也没用
+### opacity
+用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
+## 博客小练习
+![screencapture-localhost-63342-blog-html-2019-03-08-13_56_31.png](04.div与css/1552024636748-fc3d9fc8-9dcc-4943-8f5b-d554c25ebee1.png)
+
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>blog</title>
+    <link rel="stylesheet" href="blog.css" type="text/css">
+</head>
+<body>
+
+<!--左边栏开始-->
+<div class="left">
+    <div class="header-img">
+        <img src="ns.jpg">
+    </div>
+
+    <div class="blog-name">陈松的blog</div>
+    <div class="blog-info">Just Soso.....</div>
+
+    <div class="blog-links">
+        <ul>
+            <li><a href="">关于我</a></li>
+            <li><a href="">关于你</a></li>
+            <li><a href="">关于他</a></li>
+        </ul>
+    </div>
+
+    <div class="blog-tags">
+        <ul>
+            <li><a href="">JS</a></li>
+            <li><a href="">CSS</a></li>
+            <li><a href="">HTML</a></li>
+        </ul>
+    </div>
+
+
+</div>
+<!--左边栏结束-->
+
+<!--右边栏开始-->
+<div class="right">
+    <div class="article-list">
+        <div class="article">
+            <div class="article-title">
+                <h1 class="article-name">海燕</h1>
+                <span class="article-date">2019-03-08</span>
+            </div>
+            <div class="article-info">在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div>
+            <div class="article-tag">#HTML #CSS</div>
+        </div>
+    </div>
+
+    <div class="article-list">
+        <div class="article">
+            <div class="article-title">
+                <h1 class="article-name">海燕</h1>
+                <span class="article-date">2019-03-08</span>
+            </div>
+            <div class="article-info">在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div>
+            <div class="article-tag">#HTML #CSS</div>
+        </div>
+    </div>
+
+    <div class="article-list">
+        <div class="article">
+            <div class="article-title">
+                <h1 class="article-name">海燕</h1>
+                <span class="article-date">2019-03-08</span>
+            </div>
+            <div class="article-info">在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div>
+            <div class="article-tag">#HTML #CSS</div>
+        </div>
+    </div>
+
+</div>
+<!--右边栏结束-->
+</body>
+</html>
+```
+
+```css
+* {
+    font-family: "Microsoft YaHei UI";
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+.left {
+    width: 20%;
+    background-color: rgb(76,77,76);
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+}
+
+.header-img {
+    height: 128px;
+    width: 128px;
+    border: 2px solid white;
+    border-radius: 50%;
+    overflow: hidden;
+    margin: 0 auto;
+    margin-top: 20px;
+}
+
+.header-img>img {
+    max-width: 100%;
+}
+
+.blog-name {
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 15px;
+}
+
+.blog-info {
+    color: white;
+    text-align: center;
+}
+
+.blog-links,
+.blog-tags {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.blog-links a,
+.blog-tags a {
+    color: #eeeeee;
+}
+
+.blog-tags a:before {
+    content: "#";
+}
+
+.right {
+    width: 80%;
+    background-color: #eeeeee;
+    height: 1000px;
+    float: right;
+}
+
+.article-list {
+    background-color: white;
+    margin-right: 10%;
+    margin-left: 15px;
+    margin-top: 30px;
+}
+
+.article-name {
+    display: inline-block;
+}
+
+.article-title {
+    padding: 15px;
+    border-left: 3px solid red;
+}
+
+.article-info {
+    padding: 15px;
+}
+
+.article-tag {
+    padding: 15px 0;
+    margin: 15px;
+    border-top: 1px #eee solid;
+}
+
+.article-date {
+    float: right;
+}
+```
+

01.WEB网站开发/05.实战博客系统前端开发.md

@@ -0,0 +1,427 @@
+# 实战页面前端开发
+
+## 前端部分
+最终的效果
+
+![image.png](05.实战博客系统前端开发/1670309793402-12d4726b-3621-4398-be6f-b0520858a1c9.png)
+
+网页布局
+
+![未命名绘图.png](05.实战博客系统前端开发/1670309899412-24dd3ad1-788b-4bca-8314-2f2495d7759a.png)
+
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="asset/style.css">
+</head>
+
+<body>
+    <div id="header">
+        <div class="head">
+            <div class="logo">
+                <img width="130px" src="asset/img/logo.png" alt="英格科技">
+            </div>
+            <ul class="nav">
+                <li><a href="#">首页</a></li>
+                <li><a href="#">代码审计</a></li>
+                <li><a href="#">安全防御</a></li>
+                <li><a href="#">下载</a></li>
+                <li><a href="#">渗透测试</a></li>
+                <li><a href="#">渗透编程</a></li>
+                <li><a href="#">靶机练习</a></li>
+                <li><a href="#">安全培训</a></li>
+                <li><a href="#">公开课</a></li>
+            </ul>
+            <form class="f1" action="#" method="GET">
+                <input type="text" placeholder="请输入搜索的内容">
+                <input type="submit" value="搜索">
+            </form>
+        </div>
+    </div>
+    <div id="main">
+        <div id="main-left">
+            <div id="a1">
+                <a href="#">最新文章</a>
+            </div>
+            <div class="articles">
+                <div class="items-img">
+                    <a href="#">
+                        <img src="asset/img/articles-1.jpg" alt="">
+                    </a>
+                    <a href="#" class="img-tag">新闻资讯</a>
+                </div>
+                <div class="items-list">
+
+                    <div class="item-title">
+                        <a href="#">文章的标题文章的标题</a>
+                    </div>
+                    <div class="item-content">
+                        <p>文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览</p>
+                    </div>
+                    <div class="item-date">
+                        2022年12月5日
+                    </div>
+                </div>
+
+            </div>
+            <div class="articles">
+                <div class="items-img">
+                    <a href="#">
+                        <img src="asset/img/articles-1.jpg" alt="">
+                    </a>
+                    <a href="#" class="img-tag">新闻资讯</a>
+                </div>
+                <div class="items-list">
+
+                    <div class="item-title">
+                        <a href="#">文章的标题文章的标题</a>
+                    </div>
+                    <div class="item-content">
+                        <p>文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览</p>
+                    </div>
+                    <div class="item-date">
+                        2022年12月5日
+                    </div>
+                </div>
+
+            </div>
+            <div class="articles">
+                <div class="items-img">
+                    <a href="#">
+                        <img src="asset/img/articles-1.jpg" alt="">
+                    </a>
+                    <a href="#" class="img-tag">新闻资讯</a>
+                </div>
+                <div class="items-list">
+
+                    <div class="item-title">
+                        <a href="#">文章的标题文章的标题</a>
+                    </div>
+                    <div class="item-content">
+                        <p>文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览</p>
+                    </div>
+                    <div class="item-date">
+                        2022年12月5日
+                    </div>
+                </div>
+
+            </div>
+            <div class="articles">
+                <div class="items-img">
+                    <a href="#">
+                        <img src="asset/img/articles-1.jpg" alt="">
+                    </a>
+                    <a href="#" class="img-tag">新闻资讯</a>
+                </div>
+                <div class="items-list">
+
+                    <div class="item-title">
+                        <a href="#">文章的标题文章的标题</a>
+                    </div>
+                    <div class="item-content">
+                        <p>文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览</p>
+                    </div>
+                    <div class="item-date">
+                        2022年12月5日
+                    </div>
+                </div>
+
+            </div>
+            <div class="more">
+                <a href="#">点击查看更多</a>
+            </div>
+        </div>
+        <div id="main-right">
+            <div class="news">
+                <div class="newlist">近期文章</div>
+                <ul>
+                    <li><a href="#">文章的标题文章的标题</a></li>
+                    <li><a href="#">文章的标题文章的标题</a></li>
+                    <li><a href="#">文章的标题文章的标题文章的标题文</a></li>
+                    <li><a href="#">文章的标题文章的标题</a></li>
+                    <li><a href="#">文章的标题文章的标题文章的标题文章的标题</a></li>
+                </ul>
+            </div>
+
+            <div class="news">
+                <div class="newlist">文章归档</div>
+                <ul>
+                    <li><a href="#">2022-12-6</a></li>
+                    <li><a href="#">2022-12-6</a></li>
+                    <li><a href="#">2022-12-6</a></li>
+                    <li><a href="#">2022-12-6</a></li>
+                    <li><a href="#">2022-12-6</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="clearfix"></div>
+    <div id="footer">
+        <div class="footer-info">
+            <div class="link">
+                <li><a href="#">许老师博客</a></li>
+                <li><a href="#">许老师博客</a></li>
+                <li><a href="#">许老师博客</a></li>
+                <li><a href="#">许老师博客</a></li>
+                <li><a href="#">许老师博客</a></li>
+            </div>
+            <div class="copyright">
+                <p>Copyright &copy; 2022 英格科技 | <a href="#">苏ICP备20010123号-1</a></p>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
+```
+```css
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background: #f5f5f5;
+    line-height: 1.8;
+    font-size: 14px;
+    color: #333;
+}
+
+##header {
+    background: #ffffff;
+    height: 70px;
+    box-shadow: 0 0 3px 1px rgb(0 0 0 /10%);
+}
+
+.nav {
+    list-style: none;
+}
+
+.nav li {
+    float: left;
+    margin-left: 15px;
+    padding-top: 20px;
+}
+
+a {
+    text-decoration: none;
+    color: #333333;
+    font-size: 16px;
+}
+
+a:hover {
+    color: #337ab7;
+}
+
+.logo {
+    padding-top: 10px;
+    float: left;
+    margin-right: 50px;
+}
+
+.head {
+    width: 1280px;
+    margin: 0px auto;
+}
+
+.f1 {
+    float: right;
+    padding-top: 20px;
+}
+
+.f1 input[type="text"] {
+    height: 20px;
+    border-radius: 3px;
+}
+
+.f1 input[type="submit"] {
+    width: 50px;
+    height: 30px;
+}
+
+##main {
+    width: 1280px;
+    margin: 0px auto;
+    margin-top: 15px;
+}
+
+##main-left {
+    background: #ffffff;
+    width: 900px;
+    box-shadow: 0 0 3px 1px rgb(0 0 0 /10%);
+    float: left;
+}
+
+##a1 {
+    font-size: 16px;
+    padding: 10px 0px 10px 0px;
+    margin-left: 10px;
+    border-bottom: 2px solid #337ab7;
+    width: 70px;
+}
+
+##a1 a {
+    color: #337ab7;
+}
+
+.articles {
+    border-top: 1px solid #efefef;
+    padding-top: 15px;
+    height: 200px;
+    background: #ffffff;
+}
+
+.articles:hover {
+    filter: brightness(95%);
+}
+
+.items-img img {
+    width: 250px;
+}
+
+.items-img,
+.items-list {
+    float: left;
+    position: relative;
+}
+
+.items-list {
+    width: 600px;
+}
+
+.item-title a {
+    font-size: 20px;
+}
+
+.item-title a:hover {
+    color: #337ab7;
+}
+
+.item-content p {
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+.item-date {
+    font-size: 8px;
+    color: #999;
+    margin-top: 40px;
+}
+
+.img-tag {
+    position: absolute;
+    left: 20px;
+    top: 10px;
+    background: rgba(0, 0, 0, .5);
+    color: #fff;
+    padding: 5px 6px;
+    font-size: 5px;
+}
+
+.img-tag:hover {
+    background: rgb(0, 0, 0);
+    color: #fff;
+}
+
+##main-right {
+    float: left;
+    margin-left: 10px;
+    width: 280px;
+}
+
+.newlist {
+    border-left: 5px solid #337ab7;
+    padding-left: 6px;
+    margin-left: 20px;
+    padding-top: 5px;
+    font-size: 20px;
+    line-height: 15px;
+    margin-bottom: 20px;
+}
+
+.news {
+    margin-bottom: 10px;
+    background: #ffffff;
+    box-shadow: 0 0 3px 1px rgb(0 0 0 /10%);
+    padding-top: 10px;
+}
+
+.news ul {
+    width: 250px;
+    margin-left: 10px;
+    border-top: 2px solid #eee;
+}
+
+.news ul li {
+    list-style: square inside url(/asset/img/square.svg);
+    color: #666;
+    font-size: 18px;
+    margin-top: 6px;
+}
+
+.news ul li:hover {
+    color: #337ab7;
+}
+
+.more a {
+    display: block;
+    border: 2px solid #eee;
+    text-align: center;
+    margin: 20px 40px;
+    line-height: 40px;
+}
+
+.more a:hover {
+    color: #337ab7;
+    border: 2px solid #9ac5eb;
+}
+
+##footer {
+    background: #2d3237;
+    color: #5f676f;
+    padding: 35px 0px;
+    margin-top: 10px;
+}
+
+.clearfix {
+    clear: both;
+}
+
+.footer-info {
+    width: 1280px;
+    margin: 0px auto;
+}
+
+.link {
+    list-style: none;
+}
+
+.link li {
+    float: left;
+    margin-right: 20px;
+}
+
+.link li a,
+.copyright a, .copyright {
+    text-decoration: none;
+    color: #76818c;
+}
+
+.link li a:hover, .copyright a:hover {
+    color: #337ab7;
+}
+
+.copyright {
+    clear: left;
+    font-size: 16px;
+}
+```

01.WEB网站开发/09.HTTP.md

@@ -0,0 +1,266 @@
+# HTTP协议
+
+## HTTP介绍
+
+* HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议
+* HTTP是基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等)的
+* HTTP有不同版本号，不同版本号区别如下
+  * HTTP0.9：仅支持GET方法，仅能访问HTML格式的资源
+  * HTTP1.0：增加POST和HEAD方法，MIME支持多种数据格式，开始支持Cache，支持tcp短连接
+  * HTTP1.1：支持持久连接（长连接），一个TCP连接允许多个请求，新增PUT、PATCH、DELETE等
+  * HTTP2.0：性能大幅提升，新的二进制格式，多路复用，header压缩，服务端推送。
+
+## HTTP 工作原理
+
+* HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。
+* Web服务器有：Apache服务器，IIS服务器（Internet Information Services）等。
+* Web服务器根据接收到的请求后，向客户端发送响应信息。
+* HTTP默认端口号为80，但是你也可以改为8080或者其他端口。
+
+## URL
+
+HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。URL是一种特殊类型的URI，包含了用于查找某个资源的足够的信息
+
+URL,全称是UniformResourceLocator, 中文叫统一资源定位符,是互联网上用来标识某一处资源的地址。以下面这个URL为例，介绍下普通URL的各部分组成：
+
+```plain
+http://iproute.cn:80/news/search?keyword=123&enc=utf8#name=321
+```
+
+从上面的URL可以看出，一个完整的URL包括以下几部分：
+
+1. 协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符
+2. 域名部分：该URL的域名部分为“iproute.cn”。一个URL中，也可以使用IP地址作为域名使用
+3. 端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口
+4. 虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”
+5. 文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“search”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名
+6. 锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分
+7. 参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“keyword=123&enc=utf8”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。
+
+## HTTP注意事项
+
+1. HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
+2. HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
+3. HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
+
+## HTTP 消息结构
+
+* HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。
+* 一个HTTP"客户端"是一个应用程序（Web浏览器或其他任何客户端），通过连接到服务器达到向服务器发送一个或多个HTTP的请求的目的。
+* 一个HTTP"服务器"同样也是一个应用程序（通常是一个Web服务，如Apache Web服务器或IIS服务器等），通过接收客户端的请求并向客户端发送HTTP响应数据。
+* HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。
+* 一旦建立连接后，数据消息就通过类似Internet邮件所使用的格式[RFC5322]和多用途Internet邮件扩展（MIME）[RFC2045]来传送。
+* HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文，下面是一个HTTP响应示例
+
+![img](09.HTTP/Go4zQyQGEC20GILn.png)
+
+### HTTP请求头部
+
+客户端发送一个HTTP请求到服务器的请求消息包括以下格式：
+
+![img](09.HTTP/kRY1HYc5wuGHTvoh.png)
+
+![img](09.HTTP/cRIMczDoDQ2FyfDS.png)
+
+* 使用burpsuit抓包如下
+  * GET请求案例
+
+```plain
+GET / HTTP/1.1
+Host: iproute.cn
+User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
+Accept-Encoding: gzip, deflate
+Connection: close
+```
+
+    * POST请求案例
+
+```plain
+POST / HTTP/1.1
+Host: d2.s.iproute.cn
+User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:18.0) Gecko/20100101 Firefox/18.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
+Accept-Encoding: gzip, deflate
+Referer: http://d2.s.iproute.cn/
+Connection: close
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 27
+
+m_name=admin&m_pwd=admin888
+```
+
+### POST和GET请求方法区别
+
+* 提交的过程
+  * GET提交，请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，多个参数用&连接
+  * POST提交：把提交的数据放置在是HTTP包的包体中
+* 传输数据的大小
+  * 首先声明：HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制
+  * GET提交，特定浏览器和服务器对URL长度有限制
+  * POST提交，由于不是通过URL传值，理论上数据不受限
+* 安全性
+  * POST的安全性要比GET的安全性高
+  * 登录页面有可能被浏览器缓存，而缓存的是URL
+  * 其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了
+  * 使用GET提交数据还可能会造成Cross-site request forgery攻击
+
+### 常见http请求报文头部属性
+
+* Accpet
+  * 告诉服务端,客户端接收什么类型的响应
+* Referer
+  * 表示这是请求是从哪个URL进来的,比如想在网上购物,但是不知道选择哪家电商平台,你就去问百度,说哪家电商的东西便宜啊,然后一堆东西弹出在你面前,第一给就是某宝,当你从这里进入某宝的时候,这个请求报文的Referer就是[www.baidu.com](http://www.baidu.com)
+* Cache-Control
+  * 对缓存进行控制,如一个请求希望响应的内容在客户端缓存一年,或不被缓可以通过这个报文头设置
+* Accept-Encoding
+  * 这个属性是用来告诉服务器能接受什么编码格式,包括字符编码,压缩形式(一般都是压缩形式)
+  * 例如:Accept-Encoding:gzip, deflate(这两种都是压缩格式)
+* Host
+  * 指定要请求的资源所在的主机和端口
+* User-Agent
+  * 告诉服务器，客户端使用的操作系统、浏览器版本和名称
+* 更多的头部属性可以参见脚本之家提供的http请求头部大全
+  * [http://tools.jb51.net/table/http_header](http://tools.jb51.net/table/http_header)
+
+### HTTP响应头部
+
+服务的相应信息格式如下：
+
+![img](09.HTTP/hWKtBTOPMwy2lKuo.png)
+
+![img](09.HTTP/qoHksWquM1MQnvzi.png)
+
+* 使用burpsuit抓包如下
+
+```plain
+HTTP/1.1 200 OK
+Server: nginx
+Date: Sun, 02 May 2021 00:27:06 GMT
+Content-Type: text/html
+Last-Modified: Wed, 05 Aug 2020 11:25:56 GMT
+Connection: close
+Vary: Accept-Encoding
+ETag: W/"5f2a9744-aff7"
+Strict-Transport-Security: max-age=31536000
+Content-Length: 45047
+
+<h1>hello world</h1>
+```
+
+### 常见http响应报文头部属性
+
+* Cache-Control
+  * 响应输出到客户端后,服务端通过该属性告诉客户端该怎么控制响应内容的缓存
+* ETag
+  * 表示你请求资源的版本,如果该资源发生啦变化,那么这个属性也会跟着变
+* Location
+  * 在重定向中或者创建新资源时使用
+* Set-Cookie
+  * 服务端可以设置客户端的cookie
+* 更多的头部属性可以参见脚本之家提供的http请求头部大全
+  * [http://tools.jb51.net/table/http_header](http://tools.jb51.net/table/http_header)
+
+## HTTP状态码
+
+* 状态代码有三位数字组成，第一个数字定义了响应的类别，共分五种类别:
+  * 1xx：指示信息--表示请求已接收，继续处理
+  * 2xx：成功--表示请求已被成功接收、理解、接受
+  * 3xx：重定向--要完成请求必须进行更进一步的操作
+  * 4xx：客户端错误--请求有语法错误或请求无法实现
+  * 5xx：服务器端错误--服务器未能实现合法的请求
+* 常见状态码
+
+```xml
+200 OK                        //客户端请求成功
+400 Bad Request               //客户端请求有语法错误，不能被服务器所理解
+401 Unauthorized              //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
+403 Forbidden                 //服务器收到请求，但是拒绝提供服务
+404 Not Found                 //请求资源不存在，eg：输入了错误的URL
+500 Internal Server Error     //服务器发生不可预期的错误
+503 Server Unavailable        //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
+```
+
+* 更多状态码属性可以参见脚本之家提供的状态码大全
+  * [http://tools.jb51.net/table/http_status_code](http://tools.jb51.net/table/http_status_code)
+
+## HTTP请求方法
+
+根据HTTP标准，HTTP请求可以使用多种请求方法。
+
+HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
+
+HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
+
+* GET     请求指定的页面信息，并返回实体主体。
+* HEAD     类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
+* POST     向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
+* PUT     从客户端向服务器传送的数据取代指定的文档的内容。
+* DELETE      请求服务器删除指定的页面。
+* CONNECT     HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
+* OPTIONS     允许客户端查看服务器的性能。
+* TRACE     回显服务器收到的请求，主要用于测试或诊断。
+* 更多http请求方法可以参见脚本之家提供的http请求方法大全
+  * [http://tools.jb51.net/table/http_request_method](http://tools.jb51.net/table/http_request_method)
+
+## HTTP工作原理
+
+在浏览器地址栏键入URL，按下回车之后会经历以下流程：
+
+1. 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
+2. 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
+3. 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
+4. 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
+5. 释放 TCP连接;
+6. 浏览器将该 html 文本并显示内容;
+
+## 长连接与短连接
+
+HTTP1.1规定了默认保持长连接（HTTP persistent connection ，也有翻译为持久连接），数据传输完成了保持TCP连接不断开（不发RST包、不四次握手），等待在同域名下继续用这个通道传输数据；相反的就是短连接。
+
+在实际使用中，HTTP头部有了Keep-Alive这个值并不代表一定会使用长连接，客户端和服务器端都可以无视这个值，也就是不按标准来。毕竟TCP是一个双向连接的协议，双方都可以决定是不是主动断开。
+
+客户端的长连接不可能无限期的拿着，会有一个超时时间，服务器有时候会告诉客户端超时时间。下图中的Keep-Alive: timeout=20，表示这个TCP通道可以保持20秒
+
+![img](09.HTTP/AhJjalIMlDNIvSjd.png)
+
+## python实现http协议
+
+```python
+import socket
+sk = socket.socket()
+sk.bind(("127.0.0.1",80))
+sk.listen()
+while True:
+    conn, addr = sk.accept()
+    data = conn.recv(8096)
+    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
+    conn.send(b"<h1>OK</h1>")
+    conn.close()
+```
+
+### 根据不同的路径返回不同的内容
+
+```python
+import socket
+sk = socket.socket()
+sk.bind(("127.0.0.1",80))
+sk.listen()
+while True:
+    conn, addr = sk.accept()
+    data = conn.recv(8096)
+    ret = str(data,encoding='utf-8')
+    url = ret.split()[1]
+    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
+    if url == '/home':
+        respone = b"<h1>in home</h1>"
+    elif url == '/index':
+        respone = b"<h1>in index</h1>"
+    else:
+        respone = b"<h1>404 not found!</h1>"
+    conn.send(respone)
+    conn.close()
+```
+