HTML基础

HTML到底是什么

HTML（HyperText Markup Language，超文本标记语言）不是一门编程语言，而是一种用来结构化Web网页及其内容的标记语言。

HTML由一系列的元素组成。

初识元素

下面是一个段落元素，可在一行单独呈现。

1
<p>My cat is very grumpy</p>

这个元素的主要部分有：

  1. 开始标签（Opening tag）：包含元素名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用——在本例中即段落由此开始。

  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名称之前包含了一个斜杠，表示着元素的结尾——在本例中即段落在此结束。

  3. 内容（Content）：元素的内容，本例中就是所输入的文本本身（My cat is very grumpy）。

  4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素可以有属性（Attribute），例如：

1
<p class="editor-note">My cat is very grumpy</p>

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

嵌套元素

可以将一个元素置于其他元素之中，称为嵌套。例如：将very用strong元素包围，very将突出显示。

1
<p>My cat is <strong>very</strong> grumpy</p>

空元素

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

1
<img src="images/firefox-icon.png" alt="My test image" />

本元素包含两个属性，但是没有</img>结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

在<img>元素中：

  • src属性是必须的，它包含了嵌入图片的路径。

  • alt属性包含一条对图像的文本描述，屏幕阅读器可对视觉障碍使用者阅读描述，在由于某些原因无法加载图像时会显示alt属性中的备用文本。

文件路径的一些通用规则：假设在test-site文件夹内有以下四个文件或文件夹：index.html（主页内容）、images文件夹（图片）、styles文件夹（设置内容样式的CSS代码）、scripts文件夹（用于向网站添加交互功能的JavaScript代码）。

  • 若引用文件与HTML文件同级，直接使用文件名：my-image.jpg。

  • 若引用子目录里的文件，在路径前面加上目录名，再加上一个正斜杠。例如：subdirectory/my-image.jpg。

  • 若引用文件位于HTML文件的上级，需要加上两个点。例如：若index.html在test-site的一个子文件夹内，而my-image.jpg在test-site内，可以使用../my-image.jpg在index.html中引用my-image.jpg。

  • 以上方法可以随意组合。例如：../subdirectory/another-subdirectory/my-image.jpg。

HTML文档详解

对这些单个元素彼此协同，可构成完整HTML页面，以下为index.html示例：

1
2
3
4
5
6
7
8
9
10
11
<!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>
       <img src="images/firefox-icon.png" alt="My test image" />
    </body>
</html>
  • <!doctype html>——文档类型，这是必不可少的开头。当今作用有限，可以说仅用于保证文档正常读取。
  • <html></html>——<html>元素。该元素包含整个页面的所有内容，有时候也称作根元素。 lang 属性写明了页面的主要语种。
  • <head></head>——<head>元素。所有那些你加到页面中，且不向用户展示的页面内容，都以这个元素为容器。其中包含诸如提供给搜索引擎的关键字和页面描述、用于设置页面样式的 CSS、字符集声明等等。
  • <meta charset="utf-8">——该元素指明你的文档使用 UTF-8 字符编码。
  • <meta name="viewport" content="width=device-width">——视口元素可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
  • <title></title>——<title>元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
  • <body></body>——<body>元素。该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

更多元素

标题元素

标题元素可用于指定内容的标题和子标题，HTML包括六个级别的标题，<h1>-<h6>。

1
2
3
4
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

列表元素

包括无序列表<ul>和有序列表<ol>，列表的每个项目用一个列表项目元素<li>包围。

并且列表是可以嵌套的，例如将无序列表嵌套在有序列表中：

1
2
3
4
5
6
7
8
9
10
<ol>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders
    <ul>
        <li>a</li>
        <li>b</li>
    </ul>
  </li>
</ol>

锚元素

锚元素<a>可通过href属性添加超链接，可使用浏览器支持的任何URL协议。

1
2
3
4
5
6
7
<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

使用 tel: URL 链接到一个电话号码，使用 mailto: URL 链接到一个邮箱地址。

CSS基础

什么是CSS

CSS不是编程语言，也不是标记语言，是一门样式表语言。可用于为HTML元素添加样式，

例如：以下代码选择所有段落文字，并设置为红色。

1
2
3
p {
    color: red;
}

将上述CSS代码保存在style.css文件里并放在styles文件夹下。

打开index.html文件，在文档头部即<head>与</head>之间插入以下代码：

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

保存 index.html 并用浏览器将其打开可以看到效果。

CSS规则集

CSS的整个结构称为规则集，包含以下几个部分：

  • 选择器（Selector）：选择一个或多个需要添加样式的元素，本例中为<p>元素。

  • 声明（Declaration）：一个单独的规则，本例中为color: red。其中color为属性，red为属性的值。

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

1
2
3
4
5
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

如果需要选择多种元素添加相同的样式，只需将不同的选择器用逗号分开，如：

1
2
3
4
5
p,
li,
h1 {
  color: red;
}

选择器有许多不同的类型，常用选择器类型如下：

选择器名称 选择的内容 示例
元素选择器（也称作标签或类型选择器） 所有指定类型的 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>
伪类选择器 特定状态下的特定元素（比如鼠标指针悬停于链接之上） a:hover
选择仅在鼠标指针悬停在链接上时的 <a> 元素

CSS样式示例

可在index.html文档头部添加以下<link>元素：

1
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

这段代码将样式链接到一个样式表，该样式表将Open Sans字体家族与你的网页一起加载。

style.css示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
html {
    font-size: 10px;/*字号设置为10像素*/
    font-family: "Open Sans", sans-serif;
}

h1 {
    font-size: 60px;
    text-align: center
}


p,
li {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px
}

/*页面颜色*/
html {
    background-color: #00539f;
}


body {
    width: 600px;
    margin: 0 auto;/*外边距，第一个值影响上下方向，第二个值影响左右方向,auto表示平均*/
    background-color: #ff9500;
    padding: 0 20px 20px 20px;/*内边距，上右下左*/
    border: 5px solid black;/*边框*/
}


h1 {
    margin: 0;
    padding: 20px 0;
    color: #00539f;
    text-shadow: 3px 3px 1px black;/*四个值依次为阴影与文本的水平偏移量、垂直偏移量、阴影的模糊半径、阴影的基色*/
}


img {
    display: block;/*图片为行级元素，为了使图像有外边距，给予其块级行为*/
    margin: 0 auto;
}

JavaScript基础

Javascript到底是什么

JavaScript（JS）是一门完备的动态编程语言，当应用于HTML文档时，可为网站提供动态交互特性。JS应用广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

从"Hello World!"开始

首先，在scripts文件夹下创建名为main.js的文件，并在index.html文件的</body>标签前的新行添加以下代码

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

与CSS的<link>元素类似，<script>元素将JavaScript引入页面以作用于HTML。

defer告诉浏览器在解析完成HTML后再加载JavaScript。

<script>元素并不是空元素，因此需要一个结束标记。

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

1
2
let myHeading=document.querySeletor("h1");
myHeading.textContent = "Hello world!";

我们将 <script> HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。

JS把页面的标题改成了"Hello world!“。首先用querySeletor()函数返回文档中与指定选择器或选择器组匹配的第一个 Element对象，并把它储存在myHeading变量中，之后，把myHeading变量的属性textContent（标题内容）修改为"Hello world!”。

JavaScript快速入门

变量

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

1
let myVariable;

注意：语句以分号结尾，JS对大小写敏感，最好使用let。

变量定义后可以进行赋值：

1
myVariable = "李雷";

也可以将定义、赋值操作写在同一行：

1
let myVariable = "李雷";

可以直接通过变量名取得变量的值：

1
myVariable;

变量在赋值后是可以更改的：

1
2
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');
以及上面所有示例都是对象。

运算符

运算符 解释 符号 示例
加 将两个数字相加，或拼接两个字符串。 + 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

条件语句

if...else结构

1
2
3
4
5
6
let iceCream = "chocolate";
if (iceCream === "chocolate"){
    alert("我最喜欢巧克力冰淇淋了。");
}else{
    alert("但是巧克力才是我的最爱呀。");
}

函数

函数用来封装可复用的功能。已经涉及过一些函数：

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

document.querySelector 和 alert 是浏览器内置的函数，随时可用。alert() 函数在浏览器窗口内弹出一个警告框，警告框里显示相应电内容。

我们能够定义自己的函数，例如乘法函数：

1
2
3
4
function multiply(num1, num2){
    let result = num1 * num2;
    return result;
}

在控制台运行

1
multiply(4, 7);

事件

事件能为网页添加真真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。可尝试将下面的代码输入到控制台，然后点击页面的任意位置：

1
2
3
document.querySelector("html").addEventListener("click", function(){
    alert("别戳我，我怕疼。");
});

将事件与元素绑定有许多方法。在这里选用了 <html>元素，然后调用了它的 addEventListener()方法，将事件名称（'click'）以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。

刚刚我们传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种箭头函数的写法，箭头函数使用 () => 代替 function ()：

1
2
3
document.querySelector("html").addEventListener("click", () => {
  alert("别戳我，我怕疼。");
});

完善示例网页

点击切换图片

main.js代码如下：

1
2
3
4
5
6
7
8
9
10
11
let myImage = document.querySelector("img");

myImage.onclick = function(){
    let mySrc = myImage.getAttribute("src");
    if (mySrc === "images/Edge.png"){
        myImage.setAttribute("src", "images/chrome.png");
    }
    else{
        myImage.setAttribute("src", "images/Edge.png");
    }
};

添加个性化欢迎信息

首先在index.html的<script>标签前添加以下代码，在页面底部显示一个按钮

1
<button>切换用户</button>

继续添加main.js代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//获取按钮与标题
let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");

//个性化欢迎信息设置，不输入或取消时反复执行setUserName
function setUserName(){
    let myName = prompt("请输入你的名字");
    if (!myName){
        setUserName();
    }
    else{
        localStorage.setItem("name", myName);
        myHeading.textContent = "Mozilla 酷毙了，" + myName;
    }
}

//首次打开网页时初始化，之后会调用浏览器存储值
if (!localStorage.getItem("name")){
    setUserName();
}
else{
    let storedName = localStorage.getItem("name");
    myHeading.textContent = "Mozilla 酷毙了，" + storedName;
}

//点击按钮设置新用户
myButton.onclick = function(){
    setUserName();
};