【前端】一文学懂HTML与CSS选择器基础

文章目录

1. 前言与准备工作
- 1.1 前言
- 1.2 准备工作
- - 1.2.1 工具选用
  - 1.2.2 VSCode下载与配置
2. 基本概念
- 2.1 通过HelloWorld理解HTML基本概念
- - 2.1.1 HTML是什么
  - 2.1.2 如何理解"超文本"?
  - 2.1.3 HTML基础结构
  - 2.1.3 学习第一组标签：段落p与标题h1~h6
- 2.2 CSS基础概念与引入方式
- - 2.2.1 CSS基础概念
  - 2.2.2 CSS语法
  - 2.2.3 CSS引入方式
  - 2.2.3 CSS选择器
3. HTML+CSS选择器实践中学习
- 3.1 粗体、斜体标签以及元素选择器
- - 3.1.1 粗体与斜体标签
  - 3.1.2 元素选择器
- 3.2 删除线、下划线标签以及id选择器
- - 3.2.1 删除线与下划线标签
  - 3.2.2 id选择器
- 3.3 图像、超链接标签与类选择器
- - 3.3.1 图像与超链接标签
  - 3.3.2 类选择器
- 3.4 列表、表格标签与伪类选择器
- - 3.4.1 列表与表格
  - 3.4.2 伪类选择器
4. 总结
参考资料

通过实操练懂HTML与CSS选择器

1. 前言与准备工作

1.1 前言

我们学习前端基础的时候，通常会发现：HTML 、 CSS、 JavaScript 的学习是有非常强的基础依赖关系的，没有HTML基础，CSS与JavaScript很难学懂，因此一般情况下我们是顺着 HTML -> CSS -> JavaScript 的顺序学习。

在一些参考资料与教程中，通常将这三者分别放在不同的栏目或文档教学，若是学习时间间隔比较长，很容易忘记前面的部分，再翻阅对应的资料就会略显操作复杂。

JavaScript 负责页面的逻辑，基本上是在实际工作中写得最多的部分，其知识内容也非常多，一篇文章讲不完。但 HTML 与 CSS 就不一样了，初学过后回过头来看就会发现，只需要掌握常用的标签、样式，以及记住一些重点即可。因此本文咱们先学习并记录HTML+CSS选择器，通过实操，一文学懂这两者，希望对读者有帮助。

学习目标

学习 HTML 基础概念、常用标签
学习 CSS 基础概念、以及选择器
会用常用标签+常用CSS，做一些基础页面

学习建议
跟着本文的demo代码敲一敲，看一看代码

说明
由于咱们这属于一口气学完HTML与CSS选择器的基础，属于长文，需要花点时间阅读。

1.2 准备工作

初学的读者推荐参考如下包括参考文章在内的准备工作，若是回顾的读者，可忽略此小节。

1.2.1 工具选用

浏览器
若后端的舞台是服务器，那么前端的舞台则是浏览器。我们日常常用的浏览器基本都带了开发者工具，方便我们查看页面元素、传参、入参、接口返回值等信息，以Chrome为例，按F12即可召唤开发者工具。当前阶段我们可以用浏览器查看页面元素。

开发工具
前端的常用集成工具有：VSCode、Hbuilder、IDEA、WebStorm等，无论是否初学，上述均可选用。

当前 VSCode 深受前端开发者的喜爱，本文的示例选择采用VSCode作为开发工具。

1.2.2 VSCode下载与配置

下载地址：VSCode官方下载地址
参考文章：CSDN-VSCode配置前端插件优秀参考博文

2. 基本概念

这一小节介绍 HTML 与 CSS 的基本概念

2.1 通过HelloWorld理解HTML基本概念

2.1.1 HTML是什么

HTML (Hypertext Markup Language) 是用于创建网页的标记语言，称为超文本标记语言。

2.1.2 如何理解"超文本"?

“超文本”（HyperText）指的是文本中包含的链接，可以通过点击链接跳转到其他页面或文档。
“标记语言”（Markup Language）指的是用标记（标签）来定义文本的结构和样式。因此，HTML被称为超文本标记语言，是因为它可以创建包含链接的文本，并使用标记来定义文本的结构和样式。

上述解释来自 ——IT干货网

2.1.3 HTML基础结构

以下，我们用一个 HelloWorld 的例子来说明 HTML 的基础结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello World</title>
</head>
<body><!-- This is a comment --><p>Hello World!</p>
</body>
</html>

写写试一试吧！

内容解析
我们先来解释一下上述例子的内容：

<!DOCTYPE html>标签告诉浏览器该文档是 HTML 文档。
<html>标签是 HTML 文档的根元素。它包含文档中的所有其他元素。
<head>标签包含有关文档的信息，例如标题、字符编码和元标签。
<meta charset="UTF-8">标签指定文档的字符编码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">标签告诉浏览器将文档缩放到适合设备屏幕宽度的大小。
<title>标签指定文档的标题。
<body>标签包含文档的主要内容。
<p>标签定义一个段落。接下来的学习中，我们会接触到更多不同功能的标签。
<p>Hello World!</p>标签包含文本“Hello World！”。

一般情况下，我们学习与开发的过程中，主要关注<body>里的内容，及以后将要学习到的<style>、<script>等标签内容即可。关于上面解释的标签、属性等概念是什么，在下面的相关概念介绍：

相关概念

标签：HTML由一套标记标签组成，通常就叫标签。一个标签通常由开始标签和结束标签组成。例如，这个示例的<body>是开始标签，</body>是结束标签，区别在于结束标签在标签名描述之前加了/。在接下来的学习中，我们会接触到自闭标签，意思是省略了结束标签的标签，例如，一个单独的<br>标签表示一个换行，省略了结束标签。有点混淆了？不用慌，常见的自闭标签只有几个，用到再查或者多练即可掌握。
注释：HTML 的注释由表示，和XML的注释格式是一致的，通常我们使用IDE工具快捷键生成即可。
元素：元素是指一个标签开始和结束之间的所有代码。例如，上述例子中的<p>Hello World!</p>，"Hello World!"就是<p>标签的元素。
属性：标签内的看似赋值的操作，称为属性。如上述例子的：<meta name="viewport" content="width=device-width, initial-scale=1.0">，" name=“viewport” " 就是一个属性。“name” 是属性名，“viewport” 是属性值，属性值应该用双引号括起来。

2.1.3 学习第一组标签：段落p与标题h1~h6

段落标签p
在上文的 HelloWorld 示例中，我们的“Hello World!”文本是被p标签包裹的。p代表一个段落。段落会自动换行。

标题标签h1~h6
标题会自动粗体，大写其中的内容，并且带有换行效果。
一般会使用<h1>到 <h6>分别表示不同大小的标题，其中，数字越小，标题越大。

基础示例

<body><!-- normal text -->This is a normal text.This is a normal text.<!-- bold text --><p>This is a p paragraph.</p><p>This is a p paragraph.</p><!-- h1 tag --><h1>This is a h1 tag.</h1><!-- h2 tag --><h2>This is a h2 tag.</h2><!-- h3 tag --><h3>This is a h3 tag.</h3><!-- h4 tag --><h4>This is a h4 tag.</h4><!-- h5 tag --><h5>This is a h5 tag.</h5><!-- h6 tag --><h6>This is a h6 tag.</h6>
</body>

在html文件中编辑以上示例，并 View In Browser 或 Open with Live Server 试一试吧！

其中，p 和 h 都有一个较为常用的 align 属性，例如align="center"为居中，align="right"为最右：

<body><h1 align="center">Center Header</h1><h2 align="right">Right Header</h2><p align="center">Center paragraph</p><p align="right">Right paragraph</p>
</body>

2.2 CSS基础概念与引入方式

2.2.1 CSS基础概念

CSS是什么
CSS是层叠样式表。从功能上简单理解，HTML可看作是网页的骨架，CSS则对网页进行布局和美化。

为什么要用CSS
如果不用CSS，通过标签的属性，我们也可以设置一些效果和样式。可是这样会有两个缺点：一是每个标签都单独设置属性，当标签较多时，会非常繁杂，不利于管理和复用；二是一些特殊的样式很难甚至无法通过标签的属性来实现。

举个小例子，上一小节我们提到的p和 h标签例子，若要将这么多标签都设置align="center"属性，则需要每个标签都更改。而CSS则可以通过在head标签内，通过style标签统一设置:

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>h & p</title><style>/* normal text */p,h1,h2,h3,h4,h5,h6 {text-align: center;}</style>
</head>

即可实现上述标签均居中的效果。

2.2.2 CSS语法

CSS 的语法为：

selector {/* 注释 */propery: value;
}

也即选择器 { 属性：值 }

2.2.3 CSS引入方式

CSS 主要由三种方式实现：

内联样式
内联样式是在具体HTML标签内，通过style属性设置，如：

  <div style="color: red">红色段落</div>

内部样式
内部样式的位置在html的head标签里，在style标签内设置。

  <head><meta charset="UTF-8"><title>三种引入方式</title><style>#d1{color: green;}</style></head><body><h1 id = "d1">内部样式，绿色标题</h1></body>

外部样式
外部样式即将各种样式写在一个以.css后缀的CSS文件中，在head中引入，该文件中直接写CSS样式即可。这个外部样式让CSS代码可与HTML文件分离，便于管理。

  <link rel="stylesheet" href="myCSS.css">

在当前的学习与实际开发中，内联样式用得较少，内部和外部样式用得较多。为了便于管理，接下来的演示基于外部样式。

2.2.3 CSS选择器

CSS 选择器是 CSS 语法的重要组成部分，目的是以什么样的规则选择什么样的元素。

选择器也有分类，例如 id选择器、元素选择器、类选择器、伪类选择器等等非常多种类的选择器。不同的选择器有不同的作用范围与代码复用结果，选择器手册可参考：
菜鸟教程-选择器手册

我们会在下面的学习中介绍常见的选择器，并以demo代码为例学习。

3. HTML+CSS选择器实践中学习

3.1 粗体、斜体标签以及元素选择器

这一小节我们学习粗体标签、斜体标签，以及元素选择器，并用这些写个标签与样式实操写一个demo

3.1.1 粗体与斜体标签

粗体标签
粗体标签可由 b 标签或者 strong 标签表示。由于 strong 标签在语义上更具强调的意思，约定俗成，目前 strong 的使用更广泛。因此我们对strong标签的印象更深一些即可。

斜体标签
斜体也主要由两个标签实现，i与em标签。
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性。
em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。常常用于引入新的术语的时候使用。
斜体标签实际用得相对比其它标签要少一些。与strong类似，em具有更强的语义加重，我们对em的印象深一些即可。

标签代码示例

<body><!-- b --><p><strong>This is a strong tag with strong text</strong></p><p><b>This is a b tag with b text</b></p><!-- i --><p><em>This is an em tag</em></p><p><i>This is an i tag</i></p><!-- strong and em --><p><strong><em>This is a strong and em tag</em></strong></p>
</body>

3.1.2 元素选择器

元素选择器的选择器名就是标签名。元素选择器的作用域是整个html中对应的所有标签。

元素选择器示例
此处我们用元素选择器将strong标签以及em标签的元素颜色变换一下：

strong {color: red;
}em {color: blue;
}

执行效果

3.2 删除线、下划线标签以及id选择器

3.2.1 删除线与下划线标签

删除线
删除线也有两种标签实现，del和s，但一般情况下，由于一些浏览器不支持s标签，因此建议使用del标签。

下划线
下划线也有两种标签实现，ins和u，一般情况下，也是语义侧重的原因，不建议使用u，因此我们掌握ins即可。特别地，由于超链接的形式和下划线也很像，实际开发中，非特殊需求，不建议使用下划线。

示例

<body><!-- del --><del>This text has been deleted.</del><br/><!-- s --><s>This text has been struck through.Not suggest to use this tag.</s><br/><!-- ins --><ins>This text has been inserted.</ins><br><!-- u --><u>This text has been underlined. Not suggest to use this tag.</u><br>
</body>

小补充：此处的示例，我用了br自闭标签来换行。是的，br是一个换行，且自闭标签既可以省略/，也可以将/放到标签名之后，如上述例子所示。

3.2.2 id选择器

元素选择器的选择范围是全部对应标签。实际开发中，我们会想让某个元素有特定的样式。此时我们可以选用id选择器。

示例
我们改写一下删除线的html，多加两条删除线，并让删除线的元素里的文本有不同的大小：

<body><!-- del --><del id="d1">This text has been deleted.</del><br/><!-- del --><del id="d2">This text has been deleted.</del><br/><!-- del --><del id="d1">This text has been deleted.</del><br/><!-- del --><del id="d3">This text has been deleted.</del><br/>
</body>

#d1{font-size: 30px;
}#d2{font-size: 50%;
}#d3{font-size: 3em;
}

3.3 图像、超链接标签与类选择器

3.3.1 图像与超链接标签

图像
图像的标签是img。具体显示什么图像,图像的大小、布局，替换文字等，均用图像的属性来指定。一般若要显示不同目录的图像，使用相对路径或绝对路径。

超链接
超链接的标签是a。跳转的链接也由属性指定。

示例

<body><!-- img --><img src="../images/title.png" alt="Image"/><p>This is a test image is a test image </p><img width="200px" height="200" src="../images/title.png" alt="Image"><p>This is an image with alt attribute and width and height</p><img src="image.png" alt="Image"/><p>This is an image ,didn't find, display alt</p><!-- a --><a href="https://www.baidu.com/">百度一下，你就知道</a>
</body>

3.3.2 类选择器

当需要多个元素，都使用同样的css的时候，就会使用类选择器。

示例
我们将上述p标签的字体改成按既定大小

<body><p class="font-size-16">This is an image ,didn't find, display alt</p>
</body>

.font-size-16{font-size: 20px;
}

3.4 列表、表格标签与伪类选择器

3.4.1 列表与表格

列表
列表分为有序列表和无序列表，用ol和ul标签分别表示。列表标签内用li标签表示每一行。

表格
表格标签为table，由border属性设置边框。表格里th为表头，每一行为td标签，每一列为tr标签。

举例

<body><!-- ul --><ul><li>Java</li><li>Python</li></ul><!-- ol --><ol><li>Java</li><li>Python</li></ol><!-- table --><table><tr><th>Name</th><th>Age</th><th>Gender</th></tr><tr><td>John</td><td>25</td><td>Male</td></tr><tr><td>Mary</td><td>30</td><td>Female</td></tr></table><!-- table with border --><table border="1"><tr><th>Name</th><th>Age</th><th>Gender</th></tr><tr><td>John</td><td>25</td><td>Male</td></tr><tr><td>Mary</td><td>30</td><td>Female</td></tr></table>
</body>

除了可以使用CSS对 table 内的元素进行样式指定，table本身的属性可提供合并单元格、自定义大小等。

<!-- table with attributes --><table border="1" width="100%" height="100%"><tr><th colspan="3">Table Title</th></tr><tr><th bgcolor="#FF0000">First Name</th><th>Last Name</th><th>Age</th></tr><tr><td>John</td><td>Doe</td><td>25</td></tr><tr><td rowspan="2">Jane</td><td>30</td></tr><tr><td width="50%">Mike</td><td>Johnson</td><td>40</td></tr></table>

3.4.2 伪类选择器

伪类选择器是指当选择的元素状态不一样时，有不一样的样式。

示例

/*整个表格的样式*/table{width: 300px;height: 200px;border: 1px solid blue;/*border-collapse属性：对表格的线进行折叠*/border-collapse: collapse;}/*鼠标悬停时，让当前行显示#868686这种灰色*/table tr:hover{background: #868686;}/*每个单元格的样式*/table td{border:1px solid red;}