（二）Web网页的基本原理

一、网页的组成

网页由三部分构成：HTML、JavaScript、CSS。

（1）HTML

HTML 相当于网页的骨架，它通过使用标签来定义网页内容的结构。

举个例子：

它把图片标签为img、把视频标签为video，然后组合到一个界面里，这种呈现方式就是HTML

如果你想找到它，

比如我们打开任意一个网站：

然后右键打开“检查”，进入Elements面板：

可以看到，当我们鼠标放置在某一标签上时，该标签标记的东西会被锁定，然后呈现出来。

当很多个标签组合，就成了我们看到的网页界面，

（2）CSS

经过上文得知HTML 负责网页内容的结构

那么 CSS 则控制这些内容的样式和布局。

即CSS通过选择器决定网页元素的字体、颜色、间距、对齐方式、背景、边框等。

比如：

打开Styles面板，下面的各种各样就是在设置样式

（3）JavaScript

如果说：HTML构建了网页、CSS装饰了网页。

那么JavaScript则提供了交互性

比如下图框中，带js后缀的代码，就是引入互动行为

二、制作一个简单网页

首先打开文本文件：

第一步，来定义文档类型

<!DOCTYPE html>

第二步要写：

<html lang="zh">
……你的HTML代码
</html>

<html lang="zh">我们可以理解为，告诉电脑我们要开始写了

正常来说我们可以直接写<html>，但加上 lang="zh"就表示指定语言为中文。

结尾的</html>代表，到这里就结束了。

而中间部分，则是我们要写的设置网页内容

第三部，写head标签和body标签

<html>包括head标签和body标签

所以我们要写：

<head>……</head><body>……</body>

head标签意思是网页头，即说明一下页面需要的配置，比如我们可以写：

body标签的意思是网页体，就是网页正文里要展现的东西，比如我们可以写：

<div id="word">其中div表示定义一个区块，这个区块的id是word，之后我们就可以通过id来获得这个区块，并进行相应的修改设置。

到此为止，我们的完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>简单网页</title>
</head>
<body><header><h1>欢迎访问我的网站</h1></header>    <div class="container"><h2>关于我们</h2><p>这是一个简单的网页示例，展示了HTML和CSS如何一起工作来构建网页结构和样式。</p></div>
</body>
</html>

其中h几表示几级标题，p标签表示一个段落

之后我们把文件后缀改为html，然后双击打开，展示如下；

三、相关概念

（1）节点和节点树

在HTML中，我们把所有的标签内容都看出节点

而所有的节点构成了节点树（HTML DOM树）

至于节点树的构成，相信如果你如果看了第二部分就明白了，其构成如下：

最顶端的节点称之为根节点

每个节点（如果有的话）上一个节点称为父节点，下一个节点称为子节点。

同级的子节点称为兄弟节点

这些概念同理于树部分概念

（2）选择器

在说到CSS时，我们提到了选择器，那么这是什么呢？

首先，选择器是用来定位节点的

比如，我们之前通过div来确定了一个id为word的节点

那么我们要去定位这个id，有三个常用办法：

第一，类选择器，以“ . ”开头

.word {background-color: yellow;
}

这会选中所有 class="word" 的元素，并给它们加上黄色背景。

第二，ID选择器，以“#”开头

#word {font-size: 24px;
}

这会选中具有 id="word" 的元素，并将字体大小设置为 24px。

第三，元素选择器，选择所有指定标签的元素

p {color: blue;
}

这会选中页面中的所有 <p> 标签，并将它们的文字颜色设置为蓝色。

常见的 CSS 选择器及其语法规则，汇总如下：

元素选择器

选中指定标签的所有元素。

p { color: red; }
这会选中页面中的所有 <p> 元素并将它们的文字颜色设置为红色。

2. 类选择器

选中所有具有指定类的元素。类选择器以 . 开头。

.highlight { background-color: yellow; }
这会选中所有 class="highlight" 的元素，并为它们设置黄色背景。

3. ID 选择器

选中具有指定 ID 的元素。ID 选择器以 # 开头。

#header { font-size: 24px; }
这会选中 ID 为 header 的元素，并将字体大小设置为 24px。

4. 通配符选择器

选中所有元素。

* { margin: 0; }
这会把页面中所有元素的外边距（margin）设置为 0。

5. 后代选择器

选中某个元素内部的所有指定子元素。空格表示层级关系，选中某个元素的所有后代元素。

div p { color: blue; }
这会选中所有位于 <div> 内部的 <p> 元素，并将它们的文字颜色设置为蓝色。

6. 子元素选择器

选中某个元素的直接子元素，使用 > 符号表示。

div > p { color: green; }
这会选中所有直接位于 <div> 元素内部的 <p> 元素，而不会选中更深层嵌套的 <p> 元素。

7. 并列关系选择器（兄弟选择器）

**相邻兄弟选择器 (+)**：选中某个元素后紧跟的第一个兄弟元素。
h1 + p { color: orange; }
这会选中紧接在 <h1> 元素后面的第一个 <p> 元素。
**通用兄弟选择器 (~)**：选中所有在指定元素后面的兄弟元素。

h1 ~ p { color: purple; }

这会选中所有位于 <h1> 后面的 <p> 元素。

8. 属性选择器

根据元素的属性和属性值来选择元素。

input[type="text"] { border: 1px solid black; }
这会选中所有 type="text" 的 <input> 元素，并给它们加上黑色边框。

9. 伪类选择器

选择元素的特定状态。
- :hover：当鼠标悬停在元素上时应用样式。
  
  a:hover { color: red; }
- :first-child：选中某元素是其父元素的第一个子元素。
  
  p:first-child { font-weight: bold; }

10. 伪元素选择器

选中元素的特定部分，如首字母、首行等。
- ::before：在元素的内容前插入内容。
  
  p::before { content: "Note: "; font-weight: bold; }
- ::after：在元素的内容后插入内容。
  
  p::after { content: "."; }

11. 组合选择器