CaveOps | Post: A Simple Web Development Tutorial

Table of Content

1. 概述 / Introduction

1.1. 目标 / Purpose

这篇文章的主要目标是帮助你从整体上对前端开发的基本逻辑与页面实现的难易程度有一定的了解和认识

1.2. 技能 / Skills

一个网站页面的开发通常涉及到以下几种技能：

HTML：超文本标记语言，是 XML 语言的一个子集，用于定义网页内容的结构。
CSS：层叠样式表，用于为网页元素定义诸如颜色、字体、阴影等样式。
Script：各种不同的脚本语言可用于实现更复杂和实时的特性，最常用的是 JavaScript 语言。

1.3. 编辑器 / Editors

无论 HTML、CSS 还是 JS，其代码文件本质上都与我们常见的 txt 文件没有任何区别，因此任何可用于编辑并保存纯文本文件的编辑器均可使用，例如 Windows 自带的记事本、Atom、Visual Studio Code 等。

Table 1. 常用 HTML 标签
标签	说明	示例
`div`	一种通用的容器标签，没有特殊含义，一般用于对元素标签进行分组。	`<div style="background: #012F48; width: 100px; height: 100px;"> <div style="background: #1482E8; width: 50px; height: 50px; margin: 10px;">一些内容</div> </div>` 一些内容
`p`	段落标签，顾名思义用于放置文字段落。	`<p>Velit labore ad tempor minim consectetur adipisicing.</p>` Velit labore ad tempor minim consectetur adipisicing.
`a`	超链接标签，一般在页面点击跳转都是使用这种标签。	`<a href="http://baidu.com/">点我调转到百度</a>` 点我调转到百度
`span`	一种通用的行内容器，并无特殊含义，一般用于对元素标签进行分组。	`<p>Dolore <span style="font-size: 150%;">adipisicing quis</span> qui mollit et sint laboris.</p>` Dolore adipisicing quis qui mollit et sint laboris.
`img`	图像标签，用于展示指定的图像内容。并不两两成对。	`<img src="/path/to/image.png" width="200px" />`
`em`	强调文字标签。	`<p>Anim aliqua laboris nulla ea aliquip deserunt <em>aute<em> sit sit.<p>` Anim aliqua laboris nulla ea aliquip deserunt aute sit sit.
`i`	斜体文字标签。	`<p>Velit aliquip anim laborum velit qui occaecat <i>deserunt deserunt</i> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat deserunt deserunt eu aute ipsum eu.
`b`	粗体文字标签。	`<p>Velit aliquip anim laborum velit qui occaecat <b>deserunt deserunt</b> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat deserunt deserunt eu aute ipsum eu.
`strong`	重要文字标签。	`<p>Velit aliquip anim laborum velit qui occaecat <strong>deserunt deserunt</strong> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat deserunt deserunt eu aute ipsum eu.
`mark`	高亮文字标签。	`<p>Velit aliquip anim laborum velit qui occaecat <mark>deserunt deserunt</mark> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat deserunt deserunt eu aute ipsum eu.
`s`	删划线文字标签。	`<p>Velit aliquip anim laborum velit qui occaecat <s>deserunt deserunt</s> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat ~~deserunt deserunt~~ eu aute ipsum eu.
`sub`	下标标签。	`<p>Velit aliquip anim laborum velit qui occaecat <sub>deserunt deserunt</sub> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat _{deserunt deserunt} eu aute ipsum eu.
`sup`	上标标签。	`<p>Velit aliquip anim laborum velit qui occaecat <sup>deserunt deserunt</sup> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat ^{deserunt deserunt} eu aute ipsum eu.
`small`	小文字标签。	`<p>Velit aliquip anim laborum velit qui occaecat <small>deserunt deserunt</small> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat deserunt deserunt eu aute ipsum eu.
`br`	断行标签。并不两辆成对。	`<p>Velit aliquip anim laborum velit qui occaecat <br/>deserunt deserunt eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat deserunt deserunt eu aute ipsum eu.
`code`	源代码标签。	`<p>Velit aliquip anim laborum velit qui occaecat <code>deserunt deserunt</code> eu aute ipsum eu.</p>` Velit aliquip anim laborum velit qui occaecat `deserunt deserunt` eu aute ipsum eu.
`audio`	音频标签。	`<audio controls="controls"> <source="t-rex-roar.mp3" type="audio/mpeg"> Your browser does not support Audio. </audio>`
`video`	视频标签。	`<video controls width="250" src="https://archive.org/download/ElephantsDream/ed_hd.ogv" > The <code>video</code> element is unsupported. </video>`
`blockquote`	引用块标签。	`They said: <blockquote>The blockquote element indicates an extended quotation.</blockquote>` They said: The blockquote element indicates an extended quotation.
`details`	可展开的额外信息标签。	`<details> <summary>Html Cheatsheet</summary> <p>Inline elements</p> <p>Block elements</p> </details>` Html Cheatsheet Inline elements Block elements
`ul`	无序列表标签。	`<ul> <li>I'm an item</li> <li>I'm another item</li> </ul>` I'm an item I'm another item
`ol`	有序列表标签。	`<ol> <li>I'm the first item</li> <li>I'm the second item</li> </ol>` I'm the first item I'm the second item
`hr`	水平横线标签。	`before<hr>after` before after
`h1`/`h2`/`h3`/`h4`/`h5`/`h6`	1~6级标题标签。	`<h1> This is Heading 1 </h1> <h2> This is Heading 2 </h2> <h3> This is Heading 3 </h3> <h4> This is Heading 4 </h4> <h5> This is Heading 5 </h5> <h6> This is Heading 6 </h6>` This is Heading 1 This is Heading 2 This is Heading 3 This is Heading 4 This is Heading 5 This is Heading 6

3. CSS

CSS 代码用于定义页面元素的样式，例如字体、字号、颜色、阴影等，它甚至还可以进行图形绘制、帧动画定义等操作。

3.1. 基础 / Basic

CSS 代码会通过 HTML 标签及其类(class)、标识(id)等特征定位元素，并据此为元素设定样式。

<div class="sample-container" id="main">
    <div class="shadowed color-filled" id="box-01">01</div>
    <div class="shadowed color-filled" id="box-02">02</div>
    <div class="shadowed color-filled" id="box-03">03</div>
</div>

在这段代码中，最外层的 div 只有一个 class 为 sample-container，内部的 div 均有两个 class 为 shadowed 与 color-filled。

当有超过一个 class 时，使用空格分隔。

据此，我们可以为上面的 HTML 文件定义一些样式：

* {
    outline: none;
    box-sizing: border-box;
}

div {
    color: #1482E8;
    font-size: 30px;
    padding: 20px;
}

.sample-container {
    background-color: #012F48;
}

.sample-container * {
    margin: 10px;
}

.shadowed {
    box-shadow: -8px 0 0 0 #7E88A2, 8px 0 0 0 #7E88A2;
}

.color-filled {
    background-color: #ffd43b;
}

#box-03:hover {
    background-color: #F0811A;
}

这段代码做了什么事呢？

通过 * { … } 为所有元素设定了一些样式；
通过 div { … } 为所有 div 标签设定了一些样式；
通过 .sample-container { … } 为 class 为 sample-container 的元素设定了一些样式；
通过 .sample-container * { … } 为 class 为 sample-container 的元素的所有子元素设定了一些样式；
通过 #box-03:hover { … } 为 id 为 box-03 的元素的 hover 状态设定了一些样式。

CSS 的基本语法为：

选择器 {
    属性: 取值;
    属性: 取值;
}

<标签 style="属性: 取值; 属性: 取值;"></标签>
<标签 style="属性: 取值; 属性: 取值;" />

以上代码的效果如下：

3.1.1. 选择器 / Selectors

上面示例代码中，*/div/.sample-container/.sample-container */#box-03:hover 等均被称为选择器，通过指定的规则选择 HTML 中的对应元素。

Table 2. 主要 CSS 选择器
选择器	示例
`.class`	`.intro`	选择所有 `class` 包含 `intro` 的元素。
`.class1.class2`	`.name1.name2`	选择所有 `class` 同时包含 `name` 与 `name2` 的元素。
`.class1 .class2`	`.name1 .name2`	选择所有 `class` 包含 `name1` 的元素内部的 `class` 包含 `name2` 的元素。
`#id`	`#firstname`	选择所有 `id` 为 `firstname` 的元素
`*`	`*`	选择所有元素。
`element`	`p`	选择所有 `<p>` 元素。
`element.class`	`p.intro`	选择所有 `class` 包含 `intro` 的 `<p>` 元素。
`element,element`	`div, p`	选择所有 `<div>` 元素与所有 `<p>` 元素。
`element element`	`div p`	选择所有处于 `<div>` 元素内部的 `<p>` 元素。
`element>element`	`div > p`	选择所有父元素为 `<div>` 元素的 `<p>` 元素。
`element+element`	`div + p`	选择第一个紧跟 `<div>` 元素的 `<p>` 元素。
`element1~element2`	`p ~ ul`	选择所有在 `<p>` 元素前的 `<ul>` 元素。
`[attribute]`	`[target]`	选择所有拥有 `target` 属性的元素。 `<a href="#" target="_blank">link</a>`
`[attribute=value]`	`[target=_blank]`	选择所有 `target` 属性值为 `_blank` 的元素。
`[attribute~=value]`	`[title~=flower]`	选择所有 `title` 属性值含有 `flower` 的元素。
`[attribute\|=value]`	`[lang\|=en]`	选择所有 `lang` 属性值等于 `en` 或以 `en-` 开头的元素。
`[attribute^=value]`	`a[href^="https"]`	选择所有 `href` 属性值以 `https` 开头的 `<a>` 元素。
`[attribute$=value]`	`a[href$=".pdf"]`	选择所有 `href` 属性值以 `.pdf` 结尾的 `<a>` 元素。
`[attribute*=value]`	`a[href*="flower"]`	选择所有 `href` 属性值包含 `flower` 的 `<a>` 元素。
`:active`	`a:active`	选择所有 `active` 状态的 `<a>` 元素。
`::after`	`p::after`	在所有 `<p>` 所有的内容之后插入一些内容。
`::before`	`p::before`	在所有 `<p>` 所有的内容之前插入一些内容。
`:checked`	`input:checked`	选择所有 `checked` 状态的 `<input>` 元素。
`:default`	`input:default`	选择所有 `default` 状态的 `<input>` 元素。
`:disabled`	`input:disabled`	选择所有 `disabled` 状态的 `<input>` 元素。
`:empty`	`p:empty`	选择所有没有子元素（包括文字节点）的 `<p>` 元素。
`:enabled`	`input:enabled`	选择所有 `enabled` 状态的 `<input>` 元素。
`:first-child`	`p:first-child`	选择所有刚好是其父元素的首个子元素的 `<p>` 元素。
`::first-letter`	`p::first-letter`	选择所有 `<p>` 元素的首个字母。
`::first-line`	`p::first-line`	选择所有 `<p>` 元素的第一行。
`:first-of-type`	`p:first-of-type`	选择所有刚好是其父元素的首个子 `<p>` 元素的 `<p>` 元素。
`:focus`	`input:focus`	选择所有 `focus` 状态的 `<input>` 元素。
`:fullscreen`	`:fullscreen`	选择处于 `fullscreen` 模式的元素。
`:hover`	`a:hover`	选择所有处于 `hover` 状态的 `<a>` 元素。
`:in-range`	`input:in-range`	选择所有 `value` 值处于特定范围的 `<input>` 元素。
`:indeterminate`	`input:indeterminate`	选择所有 `indeterminate` 状态的 `<input>` 元素。
`:invalid`	`input:invalid`	选择所有 `value` 值非法 `invalid` 的 `<input>` 元素。
`:lang(language)`	`p:lang(it)`	选择所有 `lang` 属性值等于 `it` 的 `<p>` 元素。
`:last-child`	`p:last-child`	选择所有刚好是其父元素的最后一个子元素的 `<p>` 元素。
`:last-of-type`	`p:last-of-type`	选择所有刚好是其父元素的最后一个子 `<p>` 元素的 `<p>` 元素。
`:link`	`a:link`	选择所有未访问过 (`unvisited`) 的 `<a>` 元素。
`::marker`	`::marker`	选择所有列表项的 `markers`。
`:not(selector)`	`:not(p)`	选择所有不是 `<p>` 元素的元素。
`:nth-child(n)`	`p:nth-child(2)`	选择所有刚好是其父元素的第 2 个子元素的 `<p>` 元素。
`:nth-last-child(n)`	`p:nth-last-child(2)`	选择所有刚好是其父元素的倒数第 2 个子元素的 `<p>` 元素。
`:nth-last-of-type(n)`	`p:nth-last-of-type(2)`	选择所有刚好是其父元素的倒数第 2 个子 `<p>` 元素的 `<p>` 元素。
`:nth-of-type(n)`	`p:nth-of-type(2)`	选择所有刚好是其父元素的第 2 个子 `<p>` 元素的 `<p>` 元素。
`:only-of-type`	`p:only-of-type`	选择所有刚好是其父元素的唯一子 `<p>` 元素的 `<p>` 元素。
`:only-child`	`p:only-child`	选择所有刚好是其父元素的唯一子元素的 `<p>` 元素。
`:optional`	`input:optional`	选择所有没有 `required` 属性的 `<input>` 元素。
`:out-of-range`	`input:out-of-range`	选择 `value` 值超出特定范围的 `<input>` 元素。
`::placeholder`	`input::placeholder`	选择设定了 `placeholder` 属性的 `<input>` 元素。
`:read-only`	`input:read-only`	选择设定了 `readonly` 属性的 `<input>` 元素。
`:read-write`	`input:read-write`	选择未设定了 `readonly` 属性的 `<input>` 元素。
`:required`	`input:required`	选择设定了 `required` 属性的 `<input>` 元素。
`:root`	`:root`	选择 HTML 文档的根元素。
`::selection`	`::selection`	选择元素中被用户选中的部分。
`:target`	`#news:target`	选择当前激活且为 `news` 的锚点 (`anchor`)。
`:valid`	`input:valid`	选择所有所有 `value` 值合法的 `<input>` 元素。
`:visited`	`a:visited`	选择所有访问过 (`visited`) 的 `<a>` 元素。

3.2. 盒子模型 / Box Model

margin

border

padding

content

如上即为盒子模型。

margin 为外边距；
border 为边框；
padding 为内边距；
content 为内容区域。

通常在使用盒子模型之前我们会首先定义以下样式：

* {
    outline: none;
    box-sizing: border-box;
}

3.3. 属性 / Properties

属性示例

属性	示例
`color`	`color: #1482E8;`	Non quis elit irure veniam nulla ex.
`font-family`	`font-family: Arial, sans-serif;`	Non quis elit irure veniam nulla ex.
`font-size`	`font-size: 25px;`	Non quis elit irure veniam nulla ex.
`font-weight`	`font-weight: bold;`	Non quis elit irure veniam nulla ex.
`background`	`background: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);`
`background: #ffffff url('https://www.baidu.com/img/flexible/logo/pc/[email protected]') no-repeat scroll center;`
`margin`	`margin: 20px;`
`padding`	`padding: 5px 30px;`
`border`	`border: 10px solid #1482E8;`
`width`	`width: 5rem;`
`height`	`height: 5rem;`
`display`	`display: none;`
`display: block;`
`display: inline-block;`
`display: flex; flex-flow: row nowrap;`
`display: flex; flex-flow: column nowrap;`
`box-shadow`	`box-shadow: 5px 5px 15px 5px #000000;`
`border-radius`	`border-radius: 10px;`
`text-shadow`	`text-shadow: 2px 2px 2px #1C6EA4;`	Exercitation dolor esse reprehenderit nisi enim minim laborum amet. Consequat ad dolore consectetur occaecat ea consequat est cupidatat sit occaecat consectetur irure duis. Nisi enim sit ad voluptate velit magna ullamco elit minim.
`transform`	`transform: scale(1.2) rotate(95deg) translate(-12px, 12px) skew(18deg, -38deg);`	TRANSGORM
`transition`	`transition: all 2s ease-in;`	Nisi dolore irure velit aliqua id deserunt in aliqua sint aliqua nulla deserunt.

color

color: #1482E8;

Non quis elit irure veniam nulla ex.

font-family

font-family: Arial, sans-serif;

Non quis elit irure veniam nulla ex.

font-size

font-size: 25px;

Non quis elit irure veniam nulla ex.

font-weight

font-weight: bold;

Non quis elit irure veniam nulla ex.

background

background: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);

background: #ffffff url('https://www.baidu.com/img/flexible/logo/pc/[email protected]') no-repeat scroll center;

margin

margin: 20px;

padding

padding: 5px 30px;

border

border: 10px solid #1482E8;

width

width: 5rem;

height

height: 5rem;

display

display: none;

display: block;

display: inline-block;

display: flex;
flex-flow: row nowrap;

display: flex;
flex-flow: column nowrap;

box-shadow

box-shadow: 5px 5px 15px 5px #000000;

border-radius

border-radius: 10px;

text-shadow

text-shadow: 2px 2px 2px #1C6EA4;

Exercitation dolor esse reprehenderit nisi enim minim laborum amet. Consequat ad dolore consectetur occaecat ea consequat est cupidatat sit occaecat consectetur irure duis. Nisi enim sit ad voluptate velit magna ullamco elit minim.

transform

transform: scale(1.2) rotate(95deg) translate(-12px, 12px) skew(18deg, -38deg);

TRANSGORM

transition

transition: all 2s ease-in;

Nisi dolore irure velit aliqua id deserunt in aliqua sint aliqua nulla deserunt.

3.4. 媒体查询 / Media Queries

Media Queries 的基本语法为：

@media not|only mediatype and (media feature) {
    /* CSS Code */
}

<link rel="stylesheet" media=mediatype and|not|only (media feature href="mystylesheet.css">

例如：

@media screen and (max-width: 480px) { ... }
@media screen and (max-width: 600px), (max-height: 500px) { ... }
@media print { ... }
@media (prefers-color-scheme: dark) { ... }

3.4.1. 媒体类型 / Media Type

all
print
screen
speech

3.4.2. 媒体特性 / Media Feature

特性

说明

width

viewport 宽度

height

viewport 高度

orientation

viewport 朝向

aspect-ratio

宽高比

color

每种颜色的位数

color-index

可显示的颜色数

monochrome

灰度设备的颜色

resolution

设备分辨率

scan

设备扫描进程

grid

设备是网格 (grid) 或位图 (bitmap)

3.5. 布局 / Layout

3.5.1. 基础 / Basic

Table 3. display
控制元素才布局流中的呈现方式。
`display: inline`	允许其他元素在其旁边，此时 `margin`、`padding` 和 `width` 无效。
`display: block`	占用一整行，此时 `margin`、`padding` 和 `width` 有效。
`display: inline-block`	允许其他元素在其旁边，此时 `margin`、`padding` 和 `width` 有效。可以创建列，但在盒子之间会强制留空。

Table 4. float
控制文本是否环绕元素。
`float: left\|right\|none`	允许其他元素环绕该元素。
多个 `float`	可以创建带有接触边的框的列。
`clear: left\|right\|both`	强制将元素置于浮动元素下方。
`overflow: hidden`	在父元素上使用以强制它环绕浮动的子元素。

Table 5. position
对布局进行严格的、基于坐标的控制。
`position: absolute`	根据坐标移动元素。
`position: relative`	添加到父元素以重置 `absolute` 子元素的坐标。
`position: fixed`	当页面滚动时，强制元素不移动。
`z-index`	控制元素的堆叠顺序——数字越大越接近。

Table 6. 元素居中
方式	说明	示例
`text-align: center`	仅适用于 `display: inline` 与 `inline-block` 元素。必须应用于父元素。	`<figure class="img-box"> <img src="images/argentinosaurus.jpg" alt=""> <figcaption>The mighty Argentinosaurus</figcaption> </figure>` `.img-box { text-align: center; }`
`margin: 0 auto`	仅适用于 `display: block` 元素。元素必须有 `width`。如果你想要顶部或底部的边距，也可以仅指定 `margin-left: auto` 和 `margin-right: auto`。	`<div class="box">Stegosaurus</div>` .box { width: 24em; /* Without a width `auto` won’t work */ margin-left: auto; margin-right: auto; }
`vertical-align: middle`	仅适用于 `display: inline` 与 `inline-block` 元素。	`<ul> <li>Pteranodon</li> <li>Quetzalcoatlus</li> </ul>` `ul li { display: inline-block; vertical-align: middle; }`
`absolute` 元素居中	采用 `transform` 和 `50%` 坐标以使绝对定位的元素居中。	`<div class="banner"> <div class="content"> <h1>Micropachycephalosaurus</h1> <p>Longest dinosaur name ever!</p> </div> </div>` `.banner { position: relative; } .content { position: absolute; left: 50%; transform: translateX(-50%); }` 或垂直居中： `.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }`
`float` 元素居中	没有 `float: center`，不能居中浮动元素。
使用 `flexbox` 居中	`flexbox` 有很多不同的对齐，它们总是应用于父类。	`<div class="card"> <h2>Edmontosaurus</h2> <a href="#">See the bones!</a> </div>` `.card { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; }`

Table 7. 通用模式
模式	说明	示例
`box-sizing: border-box;`	用于更改宽度和填充的布局数学计算，放在每个 CSS 文件的顶部。	`html { box-sizing: border-box; } , ::before, *::after { box-sizing: inherit; }`
用于 `float` 元素的 `clearfix`	添加到浮动元素的父元素以强制父元素包围浮动元素。可以用来代替 `overflow: hidden`	`.clearfix::after { content: " "; display: block; clear: both; }`
灵活的图像	采用 `width` 与 `display` 使图像收缩到其父级的大小。	`img { display: block; width: 100%; }`

3.5.2. Flex-box

Table 8. 容器元素
`display`	为所有子元素启用 `flex`。
	`display: flex`
	`display: inline-flex`
`flex-direction`	确立主轴。
	`flex-direction: row`
	`flex-direction: row-reverse`
	`flex-direction: column`
	`flex-direction: column-reverse`
`flex-wrap`	如果子元素不能在一行内展示，则自动换行。
	`flex-wrap: nowrap`
	`flex-wrap: wrap`
	`flex-wrap: wrap-reverse`
`justify-content`	尝试在主轴上分配额外空间。
	`justify-content: flex-start`
	`justify-content: flex-end`
	`justify-content: center`
	`justify-content: space-between`
	`justify-content: space-around`
	`justify-content: space-evenly`
`align-items`	确定项目在交叉轴上的布局方式。
	`align-items: flex-start`
	`align-items: flex-end`
	`align-items: center`
	`align-items: baseline`
	`align-items: stretch`
`align-content`	仅对多行内容产生影响。此处显示的示例使用 `flex-wrap`。
	`align-content: flex-start`
	`align-content: flex-end`
	`align-content: center`
	`align-content: space-between`
	`align-content: space-around`
	`align-content: stretch`

Table 9. 子元素
`order`	允许你明确设置你希望每个子元素出现的顺序。
	`order: 整数`
`flex-grow`	允许你确定如何允许每个子元素作为整体的一部分增长。
	`/* 适用于所有 */ flex-grow: 1`
	`/* 第一个 / flex-grow: 1 / 第二个 / flex-grow: 3 / 第三个 */ flex-grow: 6`
`flex-basis`	在分配剩余空间之前定义元素的大小。
	`/* 第一个 / flex-basis: 20% / 第二个 */ flex-basis: 40%`
`flex-shrink`	如有必要，允许项目缩小。只有在设置大小或 `flex-basis` 时才真正有用。
	`/* 第一个和第二个 / flex-basis: 100% / 第二个 */ flex-shrink: 2`
`align-self`	设置单个项目的对齐方式。有关选项参考 `align-items`。
	`/* 第三个 */ align-self: flex-end`

3.5.3. Grid

Table 10. 子元素
`display`	为子级建立新的网格格式化上下文。
	`display: grid`
	`display: inline-grid`
`grid-template`	定义网格的行和列。
	`grid-template-columns: 12px 12px 12px; grid-template-rows: 12px 12px 12px;`
	`grid-template-columns: repeat(3, 12px); grid-template-rows: repeat(3, auto);`
	`grid-template-columns: 8px auto 8px; grid-template-rows: 8px auto 12px;`
	`grid-template-columns: 22% 22% auto; grid-template-rows: 22% auto 22%;`
`grid-gap`	指定列和行间距的大小。
	`grid-row-gap: 1px; grid-column-gap: 9px;`
	`grid-gap: 1px 9px;`
	`grid-gap: 6px;`
`justify-items`	沿行轴对齐网格项中的内容。
	`justify-items: start;`
	`justify-items: end;`
	`justify-items: center;`
	`/* 默认 */ justify-items: stretch;`
`align-items`	沿列轴对齐网格项目中的内容。
	`align-items: start;`
	`align-items: end;`
	`align-items: center;`
	`/* 默认 */ align-items: stretch;`
`justify-content`	当总网格大小小于容器时，对齐行轴上的所有网格内容。
	`justify-content: start;`
	`justify-content: end;`
	`justify-content: center;`
	`justify-content: stretch;`
	`justify-content: space-around;`
	`justify-content: space-between;`
	`justify-content: space-evenly;`
`align-content`	当总网格大小小于容器时，对齐列轴上的所有网格内容。
	`align-content: start;`
	`align-content: end;`
	`align-content: center;`
	`align-content: stretch;`
	`align-content: space-around;`
	`align-content: space-between;`
	`align-content: space-evenly;`
`grid-auto-flow`	自动放置未明确放置的网格项目的算法。
	`grid-auto-flow: row;`
	`grid-auto-flow: column;`
	`grid-auto-flow: dense;`

3.6. 动画 / Animations

3.6.1. 基础 / Basic

创造一个炫酷的动画效果一共有如下几个步骤:

步骤示例效果

步骤	示例	效果
创建 HTML 元素	`<div class="animation-wrapper"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>`
赋予元素基础样式	`.animation-wrapper { height: 100px; background: #012F48; padding: 0 20px; border-radius: 6px; min-width: 160px } .animation-wrapper .circle { display: inline-block; margin: 20px 6px 0 0; width: 20px; height: 20px; border-radius: 100%; background-color: #1482E8; }`
创建一个关键帧动画	`@keyframes move-the-circle { 0% { transform: translate(0, 0); } 50% { transform: translate(0, 25px); } 100% { transform: translate(0, 0); } }`
为元素指定动画	`.animation-wrapper .circle { animation: move-the-circle 1s ease infinite; }`
为元素设置动画延迟（可选）	`.animation-wrapper .circle:nth-child(1) { animation-delay: 0.1s; } .animation-wrapper .circle:nth-child(2) { animation-delay: 0.2s; } .animation-wrapper .circle:nth-child(3) { animation-delay: 0.3s; } .animation-wrapper .circle:nth-child(4) { animation-delay: 0.4s; } .animation-wrapper .circle:nth-child(5) { animation-delay: 0.5s; } .animation-wrapper .circle:nth-child(6) { animation-delay: 0.6s; }`
将更多属性加入动画中（可选）	`@keyframes move-the-circle { 0% { transform: translate(0, 0) scale(1); opacity: 1; background-color: turquoise; } 50% { transform: translate(0, 50px) scale(.4); opacity: .5; background-color: blue; } 100% { transform: translate(0, 0) scale(1); opacity: 1; background-color: turquoise; } }`

创建 HTML 元素

<div class="animation-wrapper">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

赋予元素基础样式

.animation-wrapper {
    height: 100px;
    background: #012F48;
    padding: 0 20px;
    border-radius: 6px;
    min-width: 160px
}

.animation-wrapper .circle {
    display: inline-block;
    margin: 20px 6px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #1482E8;
}

创建一个关键帧动画

@keyframes move-the-circle {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 25px);
    }
    100% {
        transform: translate(0, 0);
    }
}

为元素指定动画

.animation-wrapper .circle {
    animation: move-the-circle 1s ease infinite;
}

为元素设置动画延迟（可选）

.animation-wrapper .circle:nth-child(1) { animation-delay: 0.1s; }
.animation-wrapper .circle:nth-child(2) { animation-delay: 0.2s; }
.animation-wrapper .circle:nth-child(3) { animation-delay: 0.3s; }
.animation-wrapper .circle:nth-child(4) { animation-delay: 0.4s; }
.animation-wrapper .circle:nth-child(5) { animation-delay: 0.5s; }
.animation-wrapper .circle:nth-child(6) { animation-delay: 0.6s; }

将更多属性加入动画中（可选）

@keyframes move-the-circle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        background-color: turquoise;
    }
    50% {
        transform: translate(0, 50px) scale(.4);
        opacity: .5;
        background-color: blue;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        background-color: turquoise;
    }
}

3.6.2. 缓入效果 / Ease-in

普通缓入效果：

.class {
    animation-timing-function: ease-in;
}

贝赛尔曲线缓入效果：

.class {
    animation-timing-function: cubic-bezier(.44,.24,.83,.67);
}

弹性缓入效果：

.class {
    animation-timing-function: cubic-bezier(.4,1.21,.83,1.16);
}

3.6.3. 动画与滚动 / Animation and Scrolling

首先当然还是创建 HTML 元素：

<div class="square">
</div>

然后赋予这个元素一些基本的样式：

.square {
    width: 100px;
    height: 100px;
    background: #ffd43b;
    border-radius: 6px;
    margin: 10px auto;
}

创建一个动画：

@keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
	}
	50% {
		transform: scale(1, .025);
	}
}

将动画指定给元素：

.square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;

    /* 或者 */
    /* animation: wipe-enter 1s infinite; */
}

此时我们已经有了一个不错的动画效果，但是：

这个动画会无限次的执行下去；
如果我们将 infinite 更换为某个数字，动画也将执行指定的次数。

那么，如果我们希望：

动画的执行可以手动激活和关闭；
动画仅在每次元素展示到用户面前时才执行一次

应当怎么做呢？

手动激活和关闭 / Active/Deactive Manually

对于第一个需求，我们应当将指定给 square 类元素的动画指定给另一个 square-animation 类，然后在需要时为 square 元素增加或删除 square-animation 类名：

<!-- 未激活动画时 -->
<div id="square" class="square"></div>

<!-- 激活动画时 -->
<div id="square" class="square square-animation"></div>

.square {
    width: 100px;
    height: 100px;
    background: #ffd43b;
    border-radius: 6px;
    margin: 10px auto;
    /* animation: wipe-enter 1s infinite; */
}

.square-animation {
    animation: wipe-enter 1s infinite;
}

通过 JavaScript 进行控制：

square = document.getElementById("square");
if (square.classList.contains('square-animation')) {
    square.classList.remove('square-animation');
} else {
    square.classList.remove('square-animation');
}

滚动时触发 / Active on Scroll

对于第二个问题，答案是通过使用 Intersection Observer API 测量用户滚动时元素的偏移量：

<div class="square-wrapper">
    <div class="square"></div>
</div>

.square {
    width: 100px;
    height: 100px;
    background: #ffd43b;
    border-radius: 6px;
    margin: 10px auto;
    /* animation: wipe-enter 1s infinite; */
}

.square-animation {
    /* animation: wipe-enter 1s infinite; */
    animation: wipe-enter 1s 1;
}

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        const square = entry.target.querySelector('.square');

        if (entry.isIntersecting) {
            square.classList.add('square-animation');
            return; // if we added the class, exit the function
        }

        // We're not intersecting, so remove the class!
        square.classList.remove('square-animation');
    });
});

observer.observe(document.querySelector('.square-wrapper'));

现在，这个动画效果仅会在每次元素展示时执行一次：

另一个示例 / Another Example

<div class="star-box">
    <span>Star Animation</span>
    <a href="https://caveops.com/" target="_blank">Check it out</a>
    <img class="star star-1" src="imgs/star.svg" />
    <img class="star star-2" src="imgs/star.svg" />
    <img class="star star-3" src="imgs/star.svg" />
    <img class="star star-4" src="imgs/star.svg" />
    <img class="star star-5" src="imgs/star.svg" />
</div>

@keyframes stars {
    0% {
        transform: translateY(40px)
    }

    50% {
        opacity: 1;
        transform: translateY(10px) scale(1.4)
    }

    to {
        opacity: 1
    }
}

.star-box {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 70%;
    height: 200px;
    margin: 10px auto;
    border: 1px solid #d3e0da;
    border-radius: 6px;
    word-break: break-all;
    background: #F8FAF9;
    font-family: Nunito,sans-serif;
}

.star-box span {
    display: block;
    font-size: 30px;
    padding: 30px;
}

.star-box a {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    border-radius: 6px;
    font-size: 20px;
    padding: 14px 18px;
    display: inline-block;
    background: linear-gradient(175deg,#d69721,#f08827 37%,#edad69);
    background: linear-gradient(175deg,#2198d6,#6996ed);
    font-weight: 700;
    text-decoration: none !important;
    transition: all .2s ease;
}

.star-box a:hover {
    opacity: 0.9;
}

.star-box .star {
    opacity: 1
    z-index: 999;
}

.star-box .star-animation {
    -webkit-animation: stars 1s 1 forwards;
    animation: stars 1s 1 forwards;
}

.star-box .star {
    position: absolute;
    width: 60px;
    top: 0;
    opacity: 0
}

.star-box .star-1 {
    top: 25%;
    left: -28px;
    transform: rotate(-14deg)
}

.star-box .star-2 {
    top: -6px;
    left: 4.5%;
    width: 30px;
    transform: rotate(15deg);
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.star-box .star-3 {
    top: auto;
    bottom: 58px;
    right: -15px;
    transform: rotate(15deg);
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.star-box .star-4 {
    width: 40px;
    bottom: -14px;
    top: auto;
    right: 5px;
    transform: rotate(5deg);
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.star-box .star-5 {
    width: 30px;
    bottom: 26px;
    top: auto;
    right: 10px;
    transform: rotate(-27deg);
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

const observer_star = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
        const stars = entry.target.querySelectorAll('.star');
        stars.forEach(star => {
            if (entry.isIntersecting) {
                star.classList.add('star-animation');
                return;
            }
            star.classList.remove('star-animation');
        });
    });
});

observer_star.observe(document.querySelector('.star-box'));

最终效果：

Star Animation Check it out [img class="star star-1"]star.svg[/img] [img class="star star-2"]star.svg[/img] [img class="star star-3"]star.svg[/img] [img class="star star-4"]star.svg[/img] [img class="star star-5"]star.svg[/img]

4. 脚本 / Scripts

在一些情境下，例如处理一些用户交互、实时改变页面内容等，仅凭 HTML 与 CSS 无法满足我们的需求，这时我们需要借助脚本语言的力量。而在这个领域中，最流行的脚本语言是 JavaScript。

4.1. 数据 / Data

场景的数据分为以下几种类型：

数字(number)
字符串(string)
对象/字典/键值对(object)
布尔/逻辑(boolean)
数组(array)
空(null)
未定义(undefined)

values

false, true                     // boolean
18, 3.14, 0b10011, 0xF6, NaN    // number
"flower", 'John'                // string
undefined, null , Infinity      // special

4.1.1. 变量与常量 / Variables and Constants

通过 let/var 关键字可以定义变量，而 const 关键字可以定义常量。顾名思义，变量的值可以修改，而常量不可以。

var age = 18;                           // number
var name = "Jane";                      // string
var name = {first:"Jane", last:"Doe"};  // object
var truth = false;                      // boolean
var sheets = ["HTML","CSS","JS"];       // array
var a; typeof a;                        // undefined
var a = null;                           // value null

4.1.2. 数据类型与操作 / Data Types and Operatings

var a;                          // variable
var b = "init";                 // string
var c = "Hi" + " " + "Joe";     // = "Hi Joe"
var d = 1 + 2 + "3";            // = "33"
var e = [2,3,5,8];              // array
var f = false;                  // boolean
var g = /()/;                   // RegEx
var h = function(){};           // function object
const PI = 3.14;                // constant
var a = 1, b = 2, c = a + b;    // one line
let z = 'zzz';                  // block scope local variable

object

var student = {                 // object name
    firstName:"Jane",           // list of properties and values
    lastName:"Doe",
    age:18,
    height:170,
    fullName : function() {     // object function
        return this.firstName + " " + this.lastName;
    }
};

student.age = 19;           // setting value
student[age]++;             // incrementing
name = student.fullName();  // call object function

string

var abc = "abcdefghijklmnopqrstuvwxyz";
var esc = 'I don\'t \n know';   // \n new line
var len = abc.length;           // string length
abc.indexOf("lmno");            // find substring, -1 if doesn't contain
abc.lastIndexOf("lmno");        // last occurance
abc.slice(3, 6);                // cuts out "def", negative values count from behind
abc.replace("abc","123");       // find and replace, takes regular expressions
abc.toUpperCase();              // convert to upper case
abc.toLowerCase();              // convert to lower case
abc.concat(" ", str2);          // abc + " " + str2
abc.charAt(2);                  // character at index: "c"
abc[2];                         // unsafe, abc[2] = "C" doesn't work
abc.charCodeAt(2);              // character code at index: "c" -> 99
abc.split(",");                 // splitting a string on commas gives an array
abc.split("");                  // splitting on characters
128.toString(16);               // number to hex(16), octal (8) or binary (2)

number

var pi = 3.141;
pi.toFixed(0);          // returns 3
pi.toFixed(2);          // returns 3.14 - for working with money
pi.toPrecision(2)       // returns 3.1
pi.valueOf();           // returns number
Number(true);           // converts to number
Number(new Date())      // number of milliseconds since 1970
parseInt("3 months");   // returns the first number: 3
parseFloat("3.5 days"); // returns 3.5
Number.MAX_VALUE        // largest possible JS number
Number.MIN_VALUE        // smallest possible JS number
Number.NEGATIVE_INFINITY// -Infinity
Number.POSITIVE_INFINITY// Infinity

math

var pi = Math.PI;       // 3.141592653589793
Math.round(4.4);        // = 4 - rounded
Math.round(4.5);        // = 5
Math.pow(2,8);          // = 256 - 2 to the power of 8
Math.sqrt(49);          // = 7 - square root
Math.abs(-3.14);        // = 3.14 - absolute, positive value
Math.ceil(3.14);        // = 4 - rounded up
Math.floor(3.99);       // = 3 - rounded down
Math.sin(0);            // = 0 - sine
Math.cos(Math.PI);      // OTHERS: tan,atan,asin,acos,
Math.min(0, 3, -2, 2);  // = -2 - the lowest value
Math.max(0, 3, -2, 2);  // = 3 - the highest value
Math.log(1);            // = 0 natural logarithm
Math.exp(1);            // = 2.7182pow(E,x)
Math.random();          // random number between 0 and 1
Math.floor(Math.random() * 5) + 1;  // random integer, from 1 to 5

array

var dogs = ["Bulldog", "Beagle", "Labrador"];
var dogs = new Array("Bulldog", "Beagle", "Labrador");  // declaration

alert(dogs[1]);             // access value at index, first item being [0]
dogs[0] = "Bull Terier";    // change the first item

for (var i = 0; i < dogs.length; i++) {     // parsing with array.length
console.log(dogs[i]);
}

dogs.toString();                        // convert to string: results "Bulldog,Beagle,Labrador"
dogs.join(" * ");                       // join: "Bulldog * Beagle * Labrador"
dogs.pop();                             // remove last element
dogs.push("Chihuahua");                 // add new element to the end
dogs[dogs.length] = "Chihuahua";        // the same as push
dogs.shift();                           // remove first element
dogs.unshift("Chihuahua");              // add new element to the beginning
delete dogs[0];                         // change element to undefined (not recommended)
dogs.splice(2, 0, "Pug", "Boxer");      // add elements (where, how many to remove, element list)
var animals = dogs.concat(cats,birds);  // join two arrays (dogs followed by cats and birds)
dogs.slice(1,4);                        // elements from [1] to [4-1]
dogs.sort();                            // sort string alphabetically
dogs.reverse();                         // sort string in descending order
x.sort(function(a, b){return a - b});   // numeric sort
x.sort(function(a, b){return b - a});   // numeric descending sort
highest = x[0];                         // first item in sorted array is the lowest (or highest) value
x.sort(function(a, b){return 0.5 - Math.random()});     // random order sort

4.2. 操作符 / Operators

a = b + c - d;      // addition, substraction
a = b * (c / d);    // multiplication, division
x = 100 % 48;       // modulo. 100 / 48 remainder = 4
a++; b--;           // postfix increment and decrement

4.2.1. 运算符 / Arithmetic Operators

a * (b + c)         // grouping
person.age          // member
person[age]         // member
!(a == b)           // logical not
a != b              // not equal
typeof a            // type (number, object, function...)
x << 2  x >> 3      // minary shifting
a = b               // assignment
a == b              // equals
a != b              // unequal
a === b             // strict equal
a !== b             // strict unequal
a < b   a > b       // less and greater than
a <= b  a >= b      // less or equal, greater or eq
a += b              // a = a + b (works with - * %...)
a && b              // logical and
a || b              // logical or

4.2.2. 位运算符 / Bitwise Operators

符号含义示例

符号	含义	示例
`&`	AND/与	`5 & 1 (0101 & 0001) 1 (1)`
`\|`	OR/或	`5 \| 1 (0101 \| 0001) 5 (101)`
`~`	NOT/非	`~ 5 (~0101) 10 (1010)`
`^`	XOR/异或	`5 ^ 1 (0101 ^ 0001) 4 (100)`
`<<`	left shift/左移	`5 << 1 (0101 << 1) 10 (1010)`
`>>`	right shift/右移	`5 >> 1 (0101 >> 1) 2 (10)`
`>>>`	zero fill right shift/右移填充零	`5 >>> 1 (0101 >>> 1) 2 (10)`

&

AND/与

5 & 1 (0101 & 0001)	1 (1)

|

OR/或

5 | 1 (0101 | 0001)	5 (101)

~

NOT/非

~ 5 (~0101)	10 (1010)

^

XOR/异或

5 ^ 1 (0101 ^ 0001)	4 (100)

<<

left shift/左移

5 << 1 (0101 << 1)	10 (1010)

>>

right shift/右移

5 >> 1 (0101 >> 1)	2 (10)

>>>

zero fill right shift/右移填充零

5 >>> 1 (0101 >>> 1)	2 (10)

4.3. 函数 / Functions

function addNumbers(a, b) {
    return a + b;
}
x = addNumbers(1, 2);

4.4. 流程控制 / Flow Control

4.4.1. if else

    if ((age >= 14) && (age < 19)) {        // logical condition
    status = "Eligible.";               // executed if condition is true
} else {                                // else block is optional
    status = "Not eligible.";           // executed if condition is false
}

4.4.2. switch case

switch (new Date().getDay()) {      // input is current day
case 6:                         // if (day == 6)
	text = "Saturday";
	break;
case 0:                         // if (day == 0)
	text = "Sunday";
	break;
default:                        // else...
	text = "Whatever";
}

4.4.3. for

for (var i = 0; i < 10; i++) {
    document.write(i + ": " + i*3 + "<br />");
}
var sum = 0;
for (var i = 0; i < a.length; i++) {
    sum + = a[i];
}               // parsing an array
html = "";
for (var i of custOrder) {
    html += "<li>" + i + "</li>";
}

4.4.4. while

var i = 1;                      // initialize
while (i < 100) {               // enters the cycle if statement is true
    i *= 2;                     // increment to avoid infinite loop
    document.write(i + ", ");   // output
}

4.4.5. do while

var i = 1;                      // initialize
do {                            // enters cycle at least once
    i *= 2;                     // increment to avoid infinite loop
    document.write(i + ", ");   // output
} while (i < 100)               // repeats cycle if statement is true at the end

4.4.6. break/continue

for (var i = 0; i < 10; i++) {
    if (i == 5) { break; }          // stops and exits the cycle
    document.write(i + ", ");       // last output number is 4
}

for (var i = 0; i < 10; i++) {
    if (i == 5) { continue; }       // skips the rest of the cycle
    document.write(i + ", ");       // skips 5
}

4.5. DOM

<div class="sample-container">
    <span id="elementID">Hi, there!</span>
</div>

document.getElementById("elementID").innerHTML = "Hello World!";

上面的代码找到 id 为 elementID 的元素，并退换其内容为 Hello World!。

Hi, there!

4.6. 输出 / Output

console.log(a);             // write to the browser console
document.write(a);          // write to the HTML
alert(a);                   // output in an alert box
confirm("Really?");         // yes/no dialog, returns true/false depending on user click
prompt("Your age?","0");    // input dialog. Second argument is the initial value

4.7. 注释 / Comments

每一行代码中，所有在 // 之后的内容将作为注释存在，他们不可执行，会被解释器忽略。

而使用 / 和 / 包裹的内容将被作为注释，这种注视并不局限于单独一行。

/* Multi line
comment */

var abc = "abc"; // One line