0001-01-01 1133 words 6 minutes

Contents

HTML 到底是什么？

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的**元素（elements）**组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等

1

<p>我的猫非常脾气暴躁</p>

这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素也可以有属性（Attribute）：

属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

常用属性：

name ：指定标签的名称。
id ：指定标签的唯一标识。
class ：指定标签的类名

属性应该包含：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。

嵌套元素

1

<p>我的猫咪脾气<strong>暴躁</strong>:)</p>

空元素

不包含任何内容的元素称为空元素。比如元素：

1

<img src="images/firefox-icon.png" alt="测试图片">

HTML文档详解

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
<html></html> — html 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — head 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — title 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — body 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容

CSS 基础

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。

怎样将文本设置为黑色或红色？
怎样将内容显示在屏幕的特定位置？
怎样用背景图片或颜色来装饰网页？

举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

1
2
3


p {
  color: red;
}

首先新建一个 styles 文件夹，在其中新建一个 style.css 文件，将这三行 CSS 保存在这个新文件中。

然后再将该 CSS 文件连接至 HTML 文档，否则 CSS 代码不会对 HTML 文档在浏览器里的显示效果有任何影响。

打开 index.html 文件，然后将下面一行粘贴到文档头（也就是 <head> 和 </head> 标签之间）。

1

<link href="styles/style.css" rel="stylesheet">

保存 index.html 并用浏览器将其打开

CSS规则集详解

整个结构称为 规则集（通常简称“规则”），各部分释义如下：

选择器（Selector）

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）

改变 HTML 元素样式的途径。（本例中 color 就是 `` 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：

1
2
3
4
5


p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

多元素选择

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

1
2
3


p, li, h1 {
  color: red;
}

不同类型的选择器

详细请参见

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定(该)类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素（单一页面中，一个类可以有多个实例）	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 而不是 `<img>`
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	`a:hover` 仅在鼠标指针悬停在链接上时选择 `<a>`。

一切皆盒子

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

padding：即内边距，围绕着内容（比如段落）的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。

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

JavaScript基础

JavaScript 是一门编程语言，可为网站添加交互功能；可以实现：

浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。
第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
第三方框架和库 —— 用来快速构建网站和应用。

“Hello World!”示例

首先，打开你的测试站点，创建一个名为 scripts 的文件夹。然后在其中创建一个名为 main.js 的文件。
下一步，在 index.html 文件标签前的新行添加以下代码。
1

<script src="scripts/main.js" defer></script>
与 CSS 的 link 元素类似，它将 JavaScript 引入页面以作用于 HTML（以及 CSS 等页面上所有内容）：

现在将以下代码添加到 main.js文件中：

1
2


let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

JavaScript 把页面的标题改成了 “Hello world!” 。首先用 querySelector() 函数获取标题的引用，并把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像：若要对某个元素进行操作，首先得选择它。之后，把 myHeading 变量的属性 textContent （标题内容）修改为 “Hello world!” 。

JavaScript 快速入门

变量

变量 (en-US) 是存储值的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称：

1
2
3
4
5


let myVariable = '李雷';

//变量在赋值后是可以更改的：
let myVariable = '李雷';
myVariable = '韩梅梅';

注意变量可以有不同的数据类型：

变量	解释	示例
String	字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。	`let myVariable = '李雷';`
Number	数字：无需引号。	`let myVariable = 10;`
Boolean	布尔值（真 / 假）： `true`/`false` 是 JS 里的特殊关键字，无需引号。	`let myVariable = true;`
Array	数组：用于在单一引用中存储多个值的结构。	`let myVariable = [1, '李雷', '韩梅梅', 10];` 元素引用方法：`myVariable[0]`, `myVariable[1]` ……
Object	对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。	`let myVariable = document.querySelector('h1');` 以及上面所有示例都是对象。

运算符

运算符 (en-US) 是一类数学符号，可以根据两个值（或变量）产生结果

运算符	解释	符号	示例
加	将两个数字相加，或拼接两个字符串。	`+`	`6 + 9;"Hello " + "world!";`
减、乘、除	这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。	`-`, `*`, `/`	`9 - 3;8 * 2; //乘法在JS中是一个星号9 / 3;`
赋值运算符	为变量赋值（你之前已经见过这个符号了）	`=`	`let myVariable = '李雷';`
等于	测试两个值是否相等，并返回一个 `true`/`false` （布尔）值。	`===`	`let myVariable = 3;myVariable === 4; // false`
不等于	和等于运算符相反，测试两个值是否不相等，并返回一个 `true`/`false` （布尔）值。	`!==`	`let myVariable = 3;myVariable !== 3; // false`
取非	返回逻辑相反的值，比如当前值为真，则返回 `false`。	`!`	原式为真，但经取非后值为 `false`： `let myVariable = 3;!(myVariable === 3); // false`

条件语句

1
2
3
4
5
6


let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('我最喜欢巧克力冰激淋了。');
} else {
  alert('但是巧克力才是我的最爱呀……');
}

函数

函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。

1
2


let myVariable = document.querySelector('h1');
alert('hello!');

document.querySelector 和 alert 是浏览器内置的函数，随时可用。

如果代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。

比如， alert() 函数在浏览器窗口内弹出一个警告框，还应为其提供一个字符串参数，以告诉它警告框里要显示的内容。

自定义函数：

1
2
3
4


function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。

1
2
3
4
5
6
7
8


//鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，然后点击页面的任意位置：
document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

//等价于
let myHTML = document.querySelector('html');
myHTML.onclick = function() {'.'};

AJAX

参考

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

jQuery

参考

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的