文章目录
- 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;
}
4. 总结
本文我们学习了HTML 与 CSS 的基础。特别是结合第三章节，我们一边对HTML常用标签进行学习，另一边马上用CSS进行样式学习，重点学习选择器。
但是，篇幅有限，HTML 还有很多常用标签，如表单等；CSS 还有很多重点概念，如布局相关盒子模型、布局方式、浮动等尚需学习。但相信通过本文的学习与练习，我们已经掌握了HTML的基本特点与CSS选择器的基本使用方式，相当于有了一点基础，日后的学习就将会顺畅一些。
参考资料
- IT干货网
- CSDN-VSCode配置前端插件优秀参考博文
- 菜鸟教程-选择器手册
- bilibili-吴悠讲编程
