文章目录
HTML篇
HTML简介
参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
html是解释型语言。
HTML元素
这个元素的主要部分有：
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
下面列举一些常见的元素标签：
元素是HTML的最基本部件，由成对尖括号**<>**及括号间的内容组成。例如：<h1>你今天码代码了吗？</h1>。
html页面中由一对标签组成；<html></html>
<html> 是 开始标签，</html> 是 结束标签
title表示网页的标题，
可以使用<meta charset="xxx">来指定编码方式
<br/>表示换行，br标签是一个单标签
单标签：开始标签和结束标签是同一个，斜杠放在单词后
<p>标签表示段落
<img>标签：
src属性表示图片路径
width和height表示图片的大小
alt表示图片的提示
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>：标题标签
列表标签：
<ol>有序列表标签start表示从*开始， type表示类型[ A,a,1(default),i,I ]
<ul>无序列表标签- 内容都用
<li>标签列举
加粗标签：<b> </b>
斜体标签：<i> </i>
下划线标签：<u> </u>
下标标签：<sub> </sub>
上标标签：<sup> </sup>
html实体：
大于号>：>
小于号<：<
注册商标： ®
更多实体可自行搜索
<span> </span> 不换行的块标记
<a> </a>表示超链接(“anchor” 锚)，href属性表示链接地址(hypertext reference)
traget属性
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
<table>表格标签
<tr> </tr>每一行
<td> </td>每一列
<th> </th>表格表头
border属性表示边框
<style>和<script>
style元素可以给HTML增加css样式
加入css样式有三种形式：内联样式，内部样式表，外部样式表
内联样式：<h1 style="font-family:arial;"> 文字文字文字</h1>
内部样式表：<style type="text/css"> body {background-color:yellow;} </style>
外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">
开始编写
书写html文件非常方便，我这里用VSCODE进行。以下是文件demo1.html;的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test</title>
</head>
<body>
<h1>Hello html</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia nisi ullam sint delectus illo ad ea ipsam earum voluptatum adipisci voluptatem deleniti illum deserunt, qui aspernatur aliquid modi dicta quas.</p>
<br/>
<a href="www.google.com">google</a>
<br/>
<br/>
<img src="back.jpg" alt="img" width = "720">
</body>
</html>
lorem是html中生成随机文本的工具，输入lorem+数字可以自动生成指定词数的句段。
生成的页面：
CSS篇
认识css
参考：
https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics
https://developer.mozilla.org/zh-CN/docs/Web/CSS
和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：
p {
color: red;
}
我们新建一个cssdemo.css文件，并且放在我们的demo1.html旁边，方便使用，把上面这三行代码放进去，再在html文件中连接。
这里采用链接式引用，也是最推荐的方式。
把下面这一行代码加载文件头的位置，也就是<head>和</head>的中间
<link href="cssdemo.css" rel="stylesheet">
demo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test</title>
<link rel="stylesheet" href="cssdemo.css">
</head>
<body>
<h1>Hello html</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia nisi ullam sint delectus illo ad ea ipsam earum voluptatum adipisci voluptatem deleniti illum deserunt, qui aspernatur aliquid modi dicta quas.</p>
<br/>
<a href="www.google.com">google</a>
<br/>
<br/>
<img src="back.jpg" alt="img" width = "720">
</body>
</html>
画面：
发现文字变成了红色
CSS 中的注释以 /* 开头，以 */ 结尾。
这就是一个简单的css使用，我们现在详细了解一下css
“CSS 规则集”解释
整个结构称为 规则集（通常简称“规则”），各部分释义如下：
选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）
一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）
改变 HTML 元素样式的途径。（本例中 color 就是
元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。
注意其他重要的语法：
每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。
如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：
p {
color: red;
width: 500px;
border: 1px solid black;
}
多元素选择
也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：
p, li, h1 {
color: red;
}
选择器
选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：
css的初步使用
编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
这并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：
padding：即内边距，围绕着内容（比如段落）的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。
这里还使用了：
width ：元素的宽度
background-color ：元素内容和内边距底下的颜色
color ：元素内容（通常是文本）的颜色
text-shadow ：为元素内的文本设置阴影
display ：设置元素的显示模式（暂略）
我们继续尝试在css中添加更多信息
更改页面颜色
html {
background-color: #00539F;
}
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
现在是<body>元素。以上条声明，我们来逐条查看：
width: 600px; —— 强制页面永远保持 600 像素宽。
margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考 这里 。
background-color: #FF9500; —— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的<html>元素形成反差，你也可以尝试其它颜色。
padding: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。
border: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。
定位页面主标题并添加样式
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
你可能发现页面的顶部有一个难看的间隙，那是因为浏览器会在没有任何 CSS 的情况下 给<h1> (en-US)等元素设置一些默认样式。但这并不是个好主意，因为我们希望一个没有任何样式的网页也有基本的可读性。为了去掉那个间隙，我们通过设置 margin: 0; 来覆盖默认样式。
至此，我们已经把标题的上下内边距设置为 20 像素，并且将标题文本与 HTML 的背景颜色设为一致。
需要注意的是，这里使用了一个 text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下：
第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。
图像居中
img {
display: block;
margin: 0 auto;
}
修改后的页面：
p {
color: red;
}
img {
display: block;
margin: 0 auto;
}
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
html {
background-color: #00539F;
}
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
在HTML里使用CSS
使用CSS有三种方法：
内联样式，内部样式表，外部样式表
外部样式表
这是将 CSS 附加到文档中的最常见和最有用的方法，因为您可以将 CSS 链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。在大多数情况下，一个站点的不同页面看起来几乎都是一样的，因此您可以使用相同的规则集来获得基本的外观。
外部样式表是指将 CSS 编写在扩展名为.css 的单独文件中，并从 HTML <link> 元素引用它的情况：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
CSS 文件可能如下所示：
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
<link> 元素的 href 属性需要引用你的文件系统中的一个文件
在上面的例子中，CSS 文件和 HTML 文档在同一个文件夹中，使用的路径是相对路径，如果css文件在其他地方，可以使用绝对路径。
内部样式表
内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件<head>标签里的<style>标签之中。
于是 HTML 看起来就像下面这个样子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
画面效果与外部样式表一致
有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑 CSS 文件)，但该方法和外部样式表比起来更加低效 。在一个站点里，你不得不在每个页面里重复添加相同的 CSS，并且在需要更改 CSS 时修改每个页面文件。
内联样式
内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
除非你有充足的理由，否则不要这样做！ 它难以维护（在需要更新时，你必须在修改同一个文档的多处地方），并且这种写法将文档结构和文档表现混合起来了，这使得代码变得难以阅读和理解。将不同类型的代码分开存放在不同的文档中，会让我们的工作更加清晰。
在某些地方，内联样式更常见，甚至更可取。如果您的工作环境确实很严格（也许网站管理系统 (CMS) 仅允许您编辑 HTML 正文），则可能不得不使用它们。您也会发现它们很长时间被应用在 HTML 电子邮件中，以便与尽可能多的电子邮件客户端兼容。
@规则
一个 at-rule 是一个CSS 语句，以 at 符号开头， @ , 后跟一个标识符，并包括直到下一个分号的所有内容， ;, 或下一个 CSS 块，以先到者为准。
下面是一些 @规则，由它们的标示符指定，每种规则都有不同的语法：
@charset, 定义样式表使用的字符集。
@import, 告诉 CSS 引擎引入一个外部样式表。
@namespace, 告诉 CSS 引擎必须考虑 XML 命名空间。
嵌套 @规则，是嵌套语句的子集，不仅可以作为样式表里的一个语句，也可以用在条件规则组里：
@media, 如果满足媒介查询的条件则条件规则组里的规则生效。
@page, 描述打印文档时布局的变化。
@font-face, 描述将下载的外部的字体。 Experimental
@keyframes, 描述 CSS 动画的中间步骤 . Experimental
@supports, 如果满足给定条件则条件规则组里的规则生效。 Experimental
@document, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)
最常见的 @rule 之一是 @media，它允许您使用媒体查询来应用 CSS，仅当某些条件成立 (例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
在下面的 CSS 中，我们将给 <body> 元素一个粉红色的背景色。但是，我们随后使用 @media 创建样式表的一个部分，该部分仅适用于视口大于 30em 的浏览器。如果浏览器的宽度大于 30em，则背景色将为蓝色。
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
速记属性
一些属性，如 font, background, padding, border, and margin 等属性称为速记属性–这是因为它们允许您在一行中设置多个属性值，从而节省时间并使代码更整洁。
例如：
/* In 4-value shorthands like padding and margin, the values are applied
in the order top, right, bottom, left (clockwise from the top). There are also other
shorthand types, for example 2-value shorthands, which set padding/margin
for top/bottom, then left/right */
padding: 10px 15px 15px 5px;
与这四行代码是等价的：
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
这一行：
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
与这五行代码是等价的：
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
CSS工作原理
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。
- 浏览器载入
HTML文件（比如从网络上获取）。 - 将 HTML 文件转化成一个
DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式。 - 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。
JavaScript则会稍后进行处理。 - 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
- 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
- 网页展示在屏幕上（这一步被称为着色）。
