1.2 网页基础

1、网页的组成

网页由三部分组成：HTML、CSS和JavaScript

HTML

HTML（Hypertext Markup Language），中文名为超文本标记语言。HTML是一种用来描述网页的语言，网页中包含各种各样的元素，每种元素都有其对应的标识，如img标识图片、p标识段落、h标识标题等。

我们可使用开发者工具查看当前网页的HTML文档。打开任意网页，F12进入开发者工具，选择Elements面板。

在这里插入图片描述

左侧部分即为该网页对应的HTML。

CSS

CSS（Cascading Style Sheets），即层叠样式表。HTML确定了网页的架构，CSS则是对网页进行装饰，它使网页更加美观。CSS可以指定网页中文字的大小、颜色、背景图片、元素间距以及元素的排列格式等。如下图右侧Styles面板所呈现的则是该网页一系列的CSS样式。
在这里插入图片描述

JavaScript

JavaScript简称JS，是一种脚本语言。HTML和CSS结合使用，提供给用户的只是一种静态信息，缺乏交互性，而JavaScript还实现了一种实时、动态、交互的页面功能。如下载进度条、提示框、轮播图等。

3、节点树

在HTML中，每个标签定义的内容都是节点，这些节点构成一个HTML节点树，也叫HTML DOM树。
在这里插入图片描述

3、选择器

我们可以使用CSS选择器来定位到每一个网页节点。以下是常见的CSS选择器：

标签选择器（tag selector）：使用HTML元素名作为选择器，样式将应用于所有该类型的元素。例如：

p {
    font-size: 14px;
    color: #333;
}

类选择器（class selector）：使用“.”符号为元素分配一个类名，并将这个类名用作选择器。该类名在HTML文档中可以重复使用，样式将被应用于所有使用这个类名的元素。例如：

.my-class {
    font-size: 18px;
    color: red;
}

ID选择器（ID selector）：使用“#”符号为元素指定一个唯一的ID，并将这个ID用作选择器。ID在HTML文档中应该是唯一的，样式将应用于这个ID对应的元素。例如：

#my-id {
    font-weight: bold;
    text-align: center;
}

属性选择器（attribute selector）：使用属性选择器可以针对具有某些属性或属性值的元素制定样式规则。例如：

a[href^="http"] {
    color: blue;
}

上述代码中，“a”是元素名称，“[href^=“http”]”是属性选择器，它表示所有href属性值以“http”开头的锚元素将会应用蓝色文本颜色。

后代选择器（descendant selector）：后代选择器用于为某个元素的后代元素指定样式。例如：

div p {
    font-style: italic;
}

上述代码中，“div p”选择器表示选择所有是“div”元素后代的“p”元素，且这些“p”元素将应用斜体样式。

还有很多其他类型的选择器，如伪元素选择器（pseudo-element selector）、伪类选择器（pseudo-class selector）等。可以根据不同的需求使用不同类型的选择器来制定样式规则。

1、网页的组成

猜你喜欢