前端简明教程系列：第二节表格、表单元素、CSS选择器与常用属性

最新推荐文章于 2024-04-20 18:15:46 发布

越空

最新推荐文章于 2024-04-20 18:15:46 发布

阅读量482

点赞数

分类专栏：前端简明教程系列文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_45204777/article/details/130498310

版权

前端简明教程系列专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前端简明教程系列：第二节表格、表单元素、CSS选择器与常用属性

本套教程使用的配套视频教程是b站up主晓舟报告的从零开始学前端系列课程的第一套-网页重构：视频链接

本节提要

表格元素
表单元素
常用的CSS选择器
常用属性
进阶选择器

表格元素

接下来我们介绍一下表格元素，html中的表格元素用<table>标签表示，完整的<table>包含标题（<caption>标签）、表头（<thead>标签）、表体（<tbody>标签）和脚注（<tfoot>标签），但不一定每一个表单都要具备这完整的四部分，可以根据实际情况进行选择和使用，以达到最佳的可读性和可访问性。

示例代码如下，

<!-- 表格 -->
<table border="1">
  <!-- 标题 -->
  <caption>商品销售统计表</caption>
  <!-- 表头 -->
  <thead>
    <tr>
      <th>日期</th>
      <th>商品名称</th>
      <th>销售数量</th>
      <th>销售金额</th>
    </tr>
  </thead>
  <!-- 表体 -->
  <tbody>
    <tr>
      <td>2022-01-01</td>
      <td>苹果</td>
      <td>10</td>
      <td>100元</td>
    </tr>
    <tr>
      <td>2022-01-02</td>
      <td>香蕉</td>
      <td>15</td>
      <td>150元</td>
    </tr>
    <tr>
      <td>2022-01-03</td>
      <td>橙子</td>
      <td>8</td>
      <td>80元</td>
    </tr>
  </tbody>
  <!-- 脚注 -->
  <tfoot>
    <tr>
      <td colspan="2">总计：</td>
      <td>33</td>
      <td>330元</td>
    </tr>
  </tfoot>
</table>

其中，表头、表体和脚注中又有其他的子元素及属性，下面依次介绍下。

<tr>标签表示表格内的行
<td>标签是单元格，放在<tr>标签中进行使用，组成一行数据
<th>标签是表头单元格，通常应用于表头部分，字体加粗。
border属性用于设置表格边框的宽度和样式，默认值为0，即不显示，填入整数显示指定像素的实线边框，此外还有dotted、double等值，可以自行探索。
colspan和rowspan是单元格标签的属性，<td>和<th>都可以用，其作用是指定单元格要跨越的列数和行数。

表单元素

接下来我们说表单，表单在html中使用<form>标签描述，这个标签告诉浏览器这是一个表单。如下：

<form>
  <!-- 在这里添加表单元素 -->
</form>

常用的表单标签

<input>标签用于在HTML表单中创建一个可供用户输入数据的交互式控件。这个标签可以用来创建多种类型的输入字段，由其type属性决定使用哪个类型。

<input> 标签的type属性可以根据不同的需求设置为不同的值，从而创建不同类型的输入控件，常用的值有：

<!-- 文本输入框,placeholder属性设置输入前的提示文本 -->
<input type="text" placeholder="请输入账号">
<!-- 密码输入框，输入后会显示星号 -->
<input type="password" placeholder="请输入密码">
<!-- 表单按钮。用来提交表单数据。value属性设置按钮的文本 -->
<input type="submit" value="">
<!-- 按钮。一个不自带功能的普通按钮 -->
<input type="button">
<!-- 单选框。单选框的特性是多选一，通过设置相同的value属性实现只选中一个的效果。 -->
<input type="radio" value="sex">
<!-- 复选框 -->
<input type="checkbox">

<label>元素通常用于关联表单元素为其添加描述，当用户点击描述时，关联的控件将会获取焦点，从而使得用户可以更方便地输入数据。关联方法是将<lable>标签的for属性与其要关联的标签的id属性一致。

使用 <label> 标签可以带来以下好处：
- 增强表单的可用性，使得用户更容易理解控件的作用和用法。
- 改善可访问性，使得屏幕阅读器等辅助技术可以更好地理解表单，并帮助残障人士在表单上进行交互操作。
- 提升网站的可维护性，通过将标注与控件分离开来，可以更方便地修改表单的样式和布局，而不需要改变控件与标注的关联关系。
示例：
```

<label for="username">账号：</label>
<input id="username" type="text">

<br>
<label for="password">密码：</label>
<input id="password" type="password">
```
<select>标签与<option>标签。<select> 标签用于在HTML表单中创建一个下拉列表（也叫做选择框、菜单栏）的交互式控件。用户可以通过点击下拉箭头来展开列表，并从中选择一个选项。使用 <select> 标签需要与 <option> 标签配合使用，<option> 标签定义了下拉列表中的每个选项。

下面是一个简单的 <select> 标签的例子：
```
<label for="country">请选择国家：</label>
<select id="country" name="country">
  <option value="China">中国</option>
  <option value="USA">美国</option>
  <option value="Japan">日本</option>
  <option value="UK">英国</option>
</select>
```

常用的CSS选择器

html就是由一堆元素标签所构成的网页文件，默认标签样式和布局很简陋，不能满足所有人的设计需求，由此诞生了CSS，CSS可以灵活的控制html中标签的样式和布局，如可以改变文本的颜色、字体、大小，可以控制盒模型的大小、位置、排列方式，进行图片处理，实现动画与过渡和响应式布局等

css的语法由两部分构成，分别是选择器以及一条或多条声明，形式如：选择器{属性1:值;属性2:值;…}。其中选择器和属性都各有很多，稍后会介绍一些常用的。先说一下Css的书写位置，Css常用的有三种写法（除此之外还有通过JavaScript动态生成等）：内联样式、内部样式表（又叫嵌入样式）和外部样式表，内联样式是将css写在标签语句的内部，写在style属性中，如：

<!-- 使用内联样式将p标签的文本颜色设置为蓝色 -->
<p style="color: blue;">这是一个段落</p>

内部样式是将css写在当前文件的内部，head标签中，与meta等标签为同级关系，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<!-- CSS内部样式表 -->
	<style>
		/* 使用元素选择器将p标签的颜色设置为蓝色 */
		p{
			color: blue;
		}
	</style>
</head>
<body>
	<p>这是一个段落</p>
</body>
</html>

外部样式表是将css单独写在一个以.css后缀的文件中，通过link标签在html中使用，实际开发中大部分都使用的是这种方式。需要注意的是，在css文件中直接写选择器就可以了，不用如内部样式表建立style标签在其中书写。如，

在html文件的同级目录下新建一个文件test，文件后缀改为.css，文件内容：

/* 使用元素选择器将p标签颜色设置为蓝色 */
p{
	color: blue;
}

在html文件中使用，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
	<!-- 使用link标签引入CSS文件 -->
	<!-- link标签的作用是引入外部资源。使用link标签可以将外部CSS文件与HTML文档关联起来，从而实现对HTML文档中元素的样式控制 -->
	<!-- 在link标签中需要设置rel属性为stylesheet，告诉浏览器该链接元素引用的是一个样式表，type属性为text/css，指定该链接元素所引用的资源类型为CSS文件，并指定href属性为CSS文件的URL路径。 -->
	<!-- 因为link元素还可以用于引用其他类型的外部资源（如图标、字体等），因此需要用rel属性来区分不同的资源类型，并使用type属性为浏览器识别和正确处理不同类型的外部资源提供支持。 -->
	<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
	<p>这是一个段落</p>
</body>
</html>

接下来我们介绍css的各种常用选择器

元素选择器:h1,img,p

p{
	/* 设置颜色为蓝 */
	color: blue;
}
div{
	/* 设置宽度为100像素 */
	width: 100px;
	/* 设置高度为100像素 */
	height: 100px;
	/* 设置背景颜色为蓝色 */
	background-color: blue;
}

使用元素选择器可以同时选中网页中所有此元素的标签，一同修改它们的样式。如示例代码中的p元素选择器和div元素选择器，可以同时将网页中所有的p标签颜色设置为蓝色，将所有的div容器设置宽高各为100像素且背景颜色为蓝色。

类选择器（Class选择器）:.className

.size{
	width: 150px;
	height: 150px;
}
.blue{
	/* 设置背景颜色为蓝色 */
	background-color: blue;
}

<img class="size" src="logo.png" alt="">
<div class="size blue"></div>

与元素选择器同时选中网页中所有此元素的标签不同，类选择器是选中所有class属性包含其类名的标签，不以标签来区别，而是以开发的实际情况划分各种类型和区域进行修改。如示例代码中定义了名为size的选择器，img和div的class属性内都含有size，则size类选择器中定义的样式对img和div标签都会生效。

一个标签可以同时有多个class值，同时具备多个选择器的样式，如示例代码中的div标签的class属性同时有size和blue两个值，则在与img标签一样被设定了宽高各为150像素的同时，背景颜色也会变成蓝色，不同值之间用空格符隔开。需要注意的是，类选择器不同于元素选择器，类名之前要加点号。

ID选择器:#id

#box{
	width: 200px;
	height: 70px;
	background-color: black;
}

<div id="box"></div>

id选择器与class器类似，区别在于class选择器前加点号，id选择器前加井号；class选择器用class属性关联，id选择器使用id属性关联。除此之外，id选择器还具有唯一性，class选择器可以同时对多个元素生效且一个元素可以有多个class值，而id选择器只对一个元素生效且每个元素只能有一个id，一个标签的id属性类似于人的身份证号，是具有唯一性的。

不过，HTML规范并没有明确规定一个id只能被用于一个元素，虽然不建议将相同的id分配给多个元素，但这种情况仍然是合法的。HTML的设计原则之一就是灵活性，允许开发人员以多种方式编写代码以实现其特定需求。因此，虽然某些行为可能不被推荐，但HTML规范并未强制要求禁止这些行为。

使用相同的id分配给多个元素可能会导致一些问题，例如在JavaScript和CSS等代码中，通过id选择器来选择元素时可能无法准确地选取到目标元素，从而导致错误。因此，开发人员仍应遵循最佳实践，确保每个元素都有唯一的id属性。

通配符选择器:*

*{
	margin: 0px;
	padding: 0px;
}

通配符选择器用来对网页中的所有元素生效，常用于清除元素默认的内外边距。示例代码中的margin和padding属性分别是外边距和内边距，之后的教程中会细讲，大家先知道就可以了，一个html元素默认会带有一些样式，比如有默认的内边距和外边距，而为了使设计更精准、更符合需求，通常开发者就会使用通配符选择器用这两个属性来清除元素默认的内外边距，从而达到自己满意的效果。

常用属性

接下来介绍几个常用的css属性

字体大小:font-size

/* 设置字体的大小，xp是像素单位 */
font-size: 20px;

chrome浏览器最低支持显示12px的字体，在代码中可以设置更低的值，不过只会显示12px，不同浏览器会有所差异。

字体颜色:color

/* 设置字体颜色 */
/* 也可以直接输入十六进制，例如black，对应的十六进制的值是#000000，填写哪个都会显示黑色 */
color: black;

除了可以直接填入已经被内置的颜色常量值之外，也可以直接输入颜色对应的十六进制，例如black，对应的十六进制的值是#000000，填写哪个都会显示黑色，如：

color: #000000;

字体加粗:font-weight

/* 设置字体粗细 */
font-weight: bold;

font-weight属性一共有四个常用值，包括normal（正常）、bold（加粗）、bolder（更加粗）和lighter（更细），其中normal是默认值。除了填入这些固定值以外可以通过填入数值范围100-900的整数值来定义粗细，数值越大表示字体越粗，100表示最细。如：

font-weight: 500;

宽度:width

/* 设置控件的宽度，单位为xp，像素 */
width: 120px;

这里需要注意的是，如果要指定图片（img标签）的宽高，很可能会造成图片被拉伸或挤压等情况，为了避免这种情况，可以只给宽高其中一个属性指定像素值，给另一个未被指定具体像素值的属性的值设置成auto就会根据原图片比例进行适配。其实如果只指定了宽高其中一个值，另一个属性也会默认适配，不过为了更符合我们的开发规范，最好自己加上。

高度:height

/* 设置控件的高度，单位为xp，像素 */
height: 200px;

背景色：background-color

/* 设置控件的背景颜色，与color规则相同，输入颜色常量值或十六进制均可 */
background-color: black;

圆角:border-radius

/* 给控件设置圆角效果 */
border-radius: 10px;

border-radius属性可以填入以下几种值：

单一数值：设置四个角的圆角大小，例如 border-radius: 10px; 将会把元素的四个角设置为 10 像素的圆角。
两个数值：第一个值设置左上和右下角的圆角，第二个值设置右上和左下角的圆角。例如 border-radius: 5px 10px; 将会把元素的左上和右下角设置为 5 像素的圆角，右上和左下角设置为 10 像素的圆角。
四个数值：依次设置左上、右上、右下和左下角的圆角大小。例如 border-radius: 5px 10px 15px 20px; 将会把元素的左上角设置为 5 像素的圆角，右上角设置为 10 像素的圆角，右下角设置为 15 像素的圆角，左下角设置为 20 像素的圆角。
百分比：以元素的宽度作为相对大小计算圆角半径。例如，border-radius: 50%;将创建一个半径等于元素宽度一半的圆角。

文本水平居中：text-align

/* 设置文本水平居中，位于控件宽度的中央 */
text-align: center;

text-align属性用于设置文本内容在其控件内的水平对齐方式，除了center设置水平居中的值以外，还有三个值left、right、justify，作用分别是将文本左对齐、将文本右对齐、将文本两端对齐，即增加额外的空白字符以使每一行的文本宽度相同，justify值只有在文本数量多于一行以上才能看到效果。

文本行高（垂直居中）：line-height

/* 设置文本的高度，文本会自动适配到高度的中央，达到垂直居中的效果 */
line-height:35px;

进阶选择器

除了上面介绍的几种常用的选择器以外,css还有很多各种选择器组合使用的方法和进阶选择器.

层级选择器:selector selector

层级选择器通过元素之间的父子关系来定位特定的元素。它的语法是将两个或多个选择器写在一起，用空格分隔。

例如，如果要选取 div 元素内所有 p 元素的样式，可以这样写：

div p {
  /* 样式 */
}

上面的代码中，div 是父元素选择器，p 是子元素选择器。这个层级选择器会选择在 div 内的所有 p 元素，并给它们应用样式。

不只同一类型选择器可以进行层级操作,如示例代码中的div和p都是元素选择器,其实其他选择器也可以,还可以组合使用,如以下代码是对id为home的元素下的div标签中class属性中包含box的元素应用样式.

#home div .box {
	 /* 样式 */
}

组合选择器:selector,selector

使用组合选择器可以减少代码的重复,比如a选择器和b选择器中都有各自的样式,但其中的一些样式是重合的,如果将那些重合的样式写两遍就会很低效,这种情况就需要用到组合选择器,组合选择器将不同选择器用英文逗号隔开,使用方法如下,

.a{
	width: 50px;
	height: 50px;
}
.b{
	width: 100px;
	height: 100px;
}
.a,.b{
	background-color: black;
}

其中a选择器和b选择器都有各自的样式,但又有共同需求:黑色的背景颜色.使用组合选择器实现了将这个样式同时应用在两个选择器上.

伪类选择器:selector:hover

伪类选择器用于匹配处于特定状态或特定位置的元素。例如，:hover伪类选择器用于选择用户将鼠标悬停在元素上时的状态，:nth-child(n)伪类选择器用于选择某个元素在其父元素中的第n个位置等。通过使用伪类选择器，我们可以根据元素的状态或位置来应用不同的样式效果，以提高用户体验和页面可读性。

伪类选择器以冒号（:）作为前缀，位于前置选择器之后，前置选择器可以classs选择器或id选择器等，也可以是组合选择器。下面介绍几个常用的伪类选择器。

:first-child

伪类 first-child 能够匹配指定父元素下的第一个子元素，例如ul li:first-child能够匹配<ul>元素下的第一个<li>元素，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        ul li:first-child {     /*匹配<ul>下的第一个<li>标签*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第一个元素</li>
        <li>我是第二个元素</li>
        <li>我是第三个元素</li>
    </ul>
</body>
</html>

以上的示例代码中通过使用first-child伪类选择器将ul标签中的第一个li元素的颜色设置为红色。

:last-child

与 first-child 类似，伪类 last-child 能够匹配指定父元素下的最后一个子元素，例如ul li:last-child能够匹配<ul>元素下的最后一个<li>元素，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        ul li:last-child {      /*匹配<ul>下的最后一个<li>标签*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第一个元素</li>
        <li>我是第二个元素</li>
        <li>我是第三个元素</li>
    </ul>
</body>
</html>

以上的示例代码中通过使用last-child伪类选择器将ul标签中的最后一个li元素的颜色设置为红色。

:nth-child

伪类 nth-child 是 CSS3 中新增的，它可以匹配指定元素下的第 n 个子元素，例如ul li:nth-child(2)能够匹配<ul>元素下的第二个<li>元素，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        ul li:nth-child(2) {    /*匹配<ul>下的第二个<li>标签*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第一个元素</li>
        <li>我是第二个元素</li>
        <li>我是第三个元素</li>
    </ul>
</body>
</html>

以上的示例代码中通过使用nth-child伪类选择器将ul标签中指定序号的li元素的颜色设置为红色。

:hover

:hover选择器可以增加互动效果，指定鼠标悬停在其元素上时的样式。

<!DOCTYPE html>
<html>
<head>
	<style>
		div{
			width: 100px;height: 100px;background-color: red;
		}
		div:hover{
			width: 150px;
			height: 150px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

以上的示例代码中通过使用:hover选择器,在鼠标悬停在div元素上时样式会发生改变，将原本宽高各100px变成宽高各150px，也将其原本红色的背景颜色修改成蓝色。

:active

:active选择器与:hover选择器相似，都可以增加互动效果，:active选择器可以指定元素被按下时的样式。

<!DOCTYPE html>
<html>
<head>
	<style>
		div{
			width: 100px;height: 100px;background-color: red;
		}
		div:active{
			background-color: aqua;
		}
	</style>
</head>
<body>
	<div class=""></div>
</body>
</html>

以上的示例代码中通过使用:active选择器,在div元素被按下时背景颜色变成绿蓝色。

需要注意的是，如果同时使用:hover选择器和:active选择器时:active在前，如，

div:active{
	background-color: aqua;
}
div:hover{
	background-color: black;
}

这样:active的样式则不会生效，这是因为:hover选择器比:active选择器的特殊性更高，因此如果两者都应用于相同的div元素，并且鼠标悬停在该元素上，则:hover选择器定义的样式将优先应用于该元素，而不是:active选择器定义的样式。因此，第一个CSS样式不生效。

如果同时使用这两个伪类选择器时避免这种情况的发生有两种解决方法，其一是改变书写顺序，:hover在前:active在后，其二在要应用的:active选择器的属性语句结尾加上!important，如background-color: aqua !important;，加上!important声明的语句优先级就会变到最高，当然了如果给:hover选择器的语句也加上此声明:active选择器的样式还是会不生效，因为在都有!important最高优先级声明的基础上，:hover本身优先级比:active高，就相当于100+10>100+1。

伪元素选择器:selector::before,selector::after

伪元素选择器是CSS中用于向元素的某个部分添加样式的一种方式。它们以两个冒号（::）作为前缀，并跟随一个表示要操作的元素部分的关键词，例如::before、::after、::first-line等。

伪元素选择器与伪类选择器一样都有很多，以下介绍几个常用的伪元素选择器。

::before和::after伪元素

用于在元素的前面或后面插入内容。例如，以下代码将在每个段落前面插入一对括号：

p::before {
  content: '(';
}
p::after {
  content: ')';
}

::first-letter和::first-line伪元素

用于选择元素的第一个字母或第一行文本并应用样式。例如，以下代码将第一个字母的字体大小设置为30px，将第一行文本的颜色设置为红色：

p::first-letter {
  font-size: 30px;
}
p::first-line {
  color: red;
}

::selection伪元素

用于选择用户选择的文本，并应用样式。例如，以下代码将选定的文本背景色设置为黄色，文本颜色设置为白色：

::selection {
  background-color: yellow;
  color: white;
}

需要注意的是，伪元素选择器前缀只写一个冒号也是可以的，不会报错，原因是在css2版本伪类选择器和伪元素选择器都是一个冒号，css3版本为了区别这两个选择器让伪元素选择器增加了一个冒号，但是浏览器都是兼容css3和css2的，所以在语法上写哪个都行，不会报错，但是为了让代码更规范，我们不要这样写，都使用css3的规范。

选择器的权重

相同选择器：后面的会覆盖前面的。如同一个元素拥有两个class值a和b，那么应用哪个选择器的样式取决在样式表中哪个选择器声明在后，后面的会覆盖前面的。

不同选择器：ID选择器（100)>CLASS选择器(10)>element元素选择器(1)。如同一个元素同时拥有Class选择器和ID选择器，如两个选择器都共同设置了同一样式，则会应用ID选择器的。

层级选择器：按权重累计计算。

越空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端简明教程系列：第二节表格、表单元素、CSS选择器与常用属性

本套教程使用的配套视频教程是b站up主晓舟报告的从零开始学前端系列课程的第一套-网页重构：视频链接接下来我们介绍一下表格元素，html中的表格元素用标签表示，完整的包含标题（标签）、表头（标签）、表体（标签）和脚注（标签），但不一定每一个表单都要具备这完整的四部分，可以根据实际情况进行选择和使用，以达到最佳的可读性和可访问性。示例代码如下，其中，表头、表体和脚注中又有其他的子元素及属性，下面依次介绍下。接下来我们说表单
复制链接

扫一扫