传统前端

HTML¶

超文本标记语言（HTML）是一种用来结构化 Web 网页及其内容的标记语言。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

元素详解¶

HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

元素的主要部分有：

开始标签（Opening tag）：包含元素的名称，被<>所包围。表示元素从这里开始或者开始起作用
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个"/"（如\</p>）。这表示着元素的结尾
内容（Content）：元素的内容，本例中就是所输入的文本本身
属性（Attribute）：

属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中，

例如<p class='note'>，属性可为元素提供标识名称，便于类型操作。属性之间用空格隔开

文档详解¶

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <a href="https://www.mozilla.org/zh-CN/about/manifesto/"
  >
    <img src="images/firefox-icon.png" alt="My test image" />
    </a>
  </body>
</html>

<!doctype html>——文档类型：保证正常读取的标识头
<html></html>——根元素：包含lang属性，写明语种
<head></head>——头元素：

存储不用展示给用户的内容。其中包含页面描述、页面样式索引、字符集声明等
<body></body>——主元素：

存储希望用户看见的所有内容。
<a></a>——正常元素：可以嵌套，这里是锚元素，用于实现链接跳转
<img />——空元素：以/>结尾，这里是图像元素，用于嵌入图像

CSS基础¶

层叠样式表（CSS）是为 web 内容添加样式的样式表语言。

通过在HTML中引入CSS文件，可以方便地修改渲染的样式。

如在头元素嵌入<link href="styles/style.css" rel="stylesheet" />

CSS 规则集¶

p {
  color: red;
  width: 500px;
  border: 1px solid black;/* 这是一段
    注释 */
}

选择器：

HTML 元素的名称位于规则集开始。多个选择器用逗号隔开。

不加前缀选择元素，.开头为属性，#开头为ID，[src=..]指定属性值，:..结尾为伪类选择器
声明：
- 一个单独的规则，用于指定添加样式元素的属性，规则间用冒号隔开。
- 属性：改变 HTML 元素样式的途径，如color等，多个属性
- 属性的值：从指定属性的众多外观中选择一个值
  
  有时会有省略语法如padding: 0 20px 20px 20px;，依次设定上右下左
注释：/*与*/之间的内容都是注释

一切皆盒子¶

编写CSS时，很多工作都围绕着样式尺寸、颜色等展开——页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要是基于盒子模型。在你的页面上占用空间的每个盒子都有类似的属性：

padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。
border（边框）：是紧接着内边距的线。
margin（外边距）：是围绕元素边界外侧的空间。

还有更多的设置，如：

width：元素的宽度
background-color：元素内容和内边距底下的颜色
color：元素内容（通常是文本）的颜色
text-shadow：为元素内的文本设置阴影
display：设置元素的显示模式

更多内容可以查询MDN网站CSS相关内容, 盒模型

JS基础¶

JavaScript（缩写：JS）是一门完备的动态编程语言。

当应用于 HTML文档时，可为网站提供动态交互特性。

JS中有许多实用的工具，如：

浏览器应用程序接口（API）

浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式等
第三方 API

让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
第三方框架和库——用来快速构建网站和应用。

添加JS代码¶

在站点根目录创建一个名为 scripts 的文件夹，并创建main.js文件
下一步，在index.html文件\ 标签前的新行添加以下代码。
```
<script src="scripts/main.js" defer></script>
```
将 JavaScript 引入页面以作用于 HTML

现在在main.js中的加入你想构建的代码，如

let myHeading = document.querySelector("h1");
//querySelector() ，类似CSS选择器，对元素选择
myHeading.textContent = "Hello world!";

即可实现完成的功能

JS语法速览¶

变量命名：let、var、const

变量类型: Srting、Number、Boolean、Array、Object（一切皆对象）

运算符：+ - * /（运算符）、=（赋值）、===、!==（判断）

控制语句：以（）为判断逻辑，随后{}包裹内容

函数（可赋予给变量）：

正常定义：function 函数名(参数*){ }
匿名函数：addListener('click', function(){..})中function()
箭头函数：以() =>代替function()