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

最新推荐文章于 2024-10-08 17:48:41 发布

CoderSharry

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量1.3k

点赞数 35

分类专栏：前端文章标签：前端 html css

本文链接：https://blog.csdn.net/codersharry/article/details/136191955

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1. 前言与准备工作
2. 基本概念
3. HTML+CSS选择器实践中学习
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;
  	}