首页
文章 分类
首页

Contents

   1133 words   6 minutes 

HTML 到底是什么？

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

1

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

这个元素的主要部分有：

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

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

https://gitee.com/shilongshen/xiaoxingimagebad/raw/master/img/20210510165814.png

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

常用属性：

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

属性应该包含：

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

嵌套元素

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 文档在浏览器里的显示效果有任何影响。

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

<link href="styles/style.css" rel="stylesheet">
  1. 保存 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!”示例

  1. 首先，打开你的测试站点，创建一个名为 scripts 的文件夹。然后在其中创建一个名为 main.js 的文件。

  2. 下一步，在 index.html 文件 标签前的新行添加 以下代码。

    1

    <script src="scripts/main.js" defer></script>

  3. 与 CSS 的 link 元素类似，它将 JavaScript 引入页面以作用于 HTML（以及 CSS 等页面上所有内容）：

  4. 现在将以下代码添加到 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 的