Web前端开发技术之HTMLCSS知识点总结

学习路线

一、新闻网界面
- 1. 代码示例
- 2. 效果展示
- 3. 知识点总结
- - 3.1 HTML标签和字符实体
  - 3.2 超链接、颜色描述与标题元素
  - 3.3 关于图片和视频标签：
  - 3.4 CSS引入方式
  - 3.5 CSS选择器优先级
二、flex布局
- 1. 代码示例
- 2. 效果展示
- 3. 知识点总结
- - 3.1 span标签和flex容器的区别
  - 3.2 Flex 容器属性
三、表单项
- 1. 代码示例
- 2. 效果展示
- 3. 知识点总结
- - 3.1 HTML表单元素与属性
  - 3.2 method属性
  - - 3.2.1 GET 方法
    - 3.2.2 POST 方法
四、Tlias智能学习辅助系统
- 1. 代码示例
- 2. 效果展示
- 3. 知识点总结
- - 3.1 表格的基本结构
五、HTML-CSS-知识总结

一、新闻网界面

1. 代码示例

<!DOCTYPE html>
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="en"> <!-- 开始HTML文档，指定语言为英语 --><head> <!-- 文档头部开始 --><meta charset="UTF-8"> <!-- 设置字符编码为UTF-8，确保页面正确显示中文和其他特殊字符 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 配置视窗大小以适应不同设备的屏幕宽度 --><title>新思想引领新征程</title> <!-- 网页标题，显示在浏览器标签上 --><style> <!-- 内部样式表开始 -->#title { /* 定义ID为"title"的元素样式 */color: black; /* 设置文本颜色为黑色 */}span { /* 定义所有<span>元素的样式 */color: rgb(160, 156, 156); /* 使用RGB值设置文本颜色为灰色 */}a:link { /* 定义未访问过的链接样式 */text-decoration: none; /* 移除链接下划线 */}p { /* 定义所有<p>段落元素的样式 */line-height: 2; /* 设置行高为2，即双倍行距 */text-indent: 2em; /* 设置首行缩进2个字符宽度 */}#content-container { /* 定义ID为"content-container"的元素样式 */width: 70%; /* 设置容器宽度为页面宽度的70% */margin-left: auto; /* 自动设置左边距，使内容居中 */margin-right: auto /* 自动设置右边距，使内容居中 */}</style> <!-- 内部样式表结束 --><link rel="stylesheet" href="css/news.css"> <!-- 引入外部CSS文件，用于进一步定义样式 --><!-- 注意：实际上<link>标签是自闭合的，不需要关闭标签 -->
</head><body> <!-- 文档主体开始 --><div id="content-container"> <!-- 创建一个具有特定ID的<div>容器，用于布局控制 --><h1 id="title">【Xin思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1> <!-- 标题，使用ID "title" 应用前面定义的样式 --><a href="http://www.cctv.com" target="_parent">央视网</a> <!-- 创建超链接，点击后在父窗口打开链接目标；注意target属性值应该用引号包围 --><span>2025年1月15日 15:46</span> <!-- 显示日期时间，并应用前面定义的灰色文本样式 --><br><br> <!-- 插入两个换行符，用于增加空白空间 --><video src="01. 央视新闻\video\news.mp4" controls width="40%"></video> <!-- 嵌入视频，设置宽度为容器宽度的40%，并提供播放控件 --><!-- 空格实体字符&nbsp --><!-- 加粗标签<p> <strong> --><p>&nbsp;&nbsp;&nbsp;&nbsp;<b>央视网消息</b>（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。xxx指出，长江禁渔是为全局计、为子孙谋的重要决策。xxx牢记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。</p> <!-- 段落文本，使用非断开空格(&nbsp;)实现首行缩进效果，<b>标签加粗文本 --><p>行走在长江沿线，科研人员发现很多可喜现象。</p> <!-- 另一段普通文本 --><img src="01. 央视新闻\img\1.gif" width="40%" alt="描述图片内容"> <!-- 显示图片，设置宽度为容器宽度的40%，alt属性添加描述性文字 --></div>
</body></html> <!-- HTML文档结束 -->

2. 效果展示

在这里插入图片描述

3. 知识点总结

3.1 HTML标签和字符实体

HTML提供了多种标签用于文本格式化，这些标签不仅改变了文本的显示样式，还带有语义上的强调：

加粗：<b>或<strong>。虽然两者都能使文本加粗，但<strong>有更强的语义性，通常表示文本的重要性。
下划线：<u>或<ins>。<ins>不仅添加下划线，还暗示了文本是后来插入的。
倾斜：<i>或<em>。与加粗类似，<em>用于强调，其含义比<i>更重。
删除线：<s>或<del>。<del>同样不仅添加删除线，而且表明该文本已被删除。

此外，还有字符实体，它们用于在HTML文档中表示特殊字符：

 ：非断开空格（Non-Breaking Space），用于防止单词间的空格被浏览器合并或移除。
< 和 >：分别代表小于号（Less Than Sign）和大于号（Greater Than Sign），避免这些符号被误解为HTML标签的开始或结束。

3.2 超链接、颜色描述与标题元素

超链接由<a>标签定义，具有两个重要属性：

href：指定链接的目标URL。
target：控制链接页面如何打开，如_blank（新窗口）、_self（当前窗口）、_parent（父框架）、_top（顶层框架）。

颜色可以通过以下方式描述：

十六进制颜色值：从#000000到#ffffff，其中每个两位数对分别对应红、绿、蓝三种颜色成分。
RGB颜色值：如rgb(0,0,0)至rgb(255,255,255)，使用整数值来表示每种颜色成分。
RGBA颜色值：如rgba(0,0,0,0.5)至rgba(255,255,255,0.5)，增加了透明度参数。
颜色名称：直接使用预定义的颜色名，如red、blue等。

HTML支持六级标题标签，从<h1>到<h6>，其中<h1>是最高级别的标题，<h6>是最小级别。

3.3 关于图片和视频标签：

<img>标签需要设置src属性以指定图片源文件路径，可以是绝对路径或相对路径。width和height属性用于设定图片尺寸。
<video>标签也有类似的src属性，以及controls（提供播放控件）、autoplay（自动播放）、width和height等属性。

3.4 CSS引入方式

CSS可以以三种方式引入网页中：

内联样式：通过style属性直接应用于HTML元素，例如：
```
<p style="color: red;">这是一个段落。</p>
```
内部样式表：在HTML文档头部用<style>标签定义，适用于整个页面的样式规则，例如：
```
<head><style>body { background-color: lightblue; }p { color: blue; }</style>
</head>
```
外部样式表：创建独立的.css文件，并通过<link>标签将其链接到HTML文档中，这是推荐的做法，有利于代码的维护和复用，例如：
```
<head><link rel="stylesheet" href="styles.css">
</head>
```

3.5 CSS选择器优先级

CSS选择器决定了哪些元素会应用特定的样式规则：

ID选择器：以#开头，如#title，它的优先级最高。
类选择器：以.开头，如.class，次于ID选择器。
属性选择器：格式[attribute=value]，如input[type="text"]，优先级等同类选择器。
标签选择器：直接使用标签名，如p，优先级最低。

二、flex布局

1. 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex布局示例</title><style>.flex-container {display: flex; /* 定义一个Flex容器 */justify-content: space-around; /* 水平方向上均匀分布项目 */align-items: center; /* 垂直方向上居中对齐项目 */height: 600px; /* 设置容器高度 */border: 2px solid #333; /* 添加边框以便观察效果 */flex-direction: column; /* 设置Flex容器的布局方向为垂直，默认以row横向布局 */}.flex-item {width: 100px; /* 设置项目宽度 */height: 100px; /* 设置项目高度 */background-color: #f0f0f0; /* 设置背景颜色 */border: 1px solid #ccc; /* 添加边框以便观察效果 */text-align: center; /* 文本居中 */line-height: 100px; /* 垂直居中文本 */font-size: 20px; /* 设置字体大小 */}</style>
</head>
<body><div class="flex-container"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>
</body>
</html>

2. 效果展示

在这里插入图片描述

3. 知识点总结

3.1 span标签和flex容器的区别

<span> 和 Flex 容器（通常由 <div> 或其他块级元素加上 display: flex; 样式创建）是HTML和CSS中用于布局的不同概念，它们在用途、默认行为和样式方面有显著区别。

<span> 标签

定义：<span> 是一个行内元素（inline element），没有特别的语义含义，主要用于包裹文档中的小部分文本或对这些文本应用样式。
默认显示：作为行内元素，<span> 不会独占一行，多个 <span> 元素可以在同一行内并排显示，除非被其他样式规则改变。
使用场景：适合用于不需要额外结构意义的小范围文本格式化。例如，给一段文字中的某些词添加颜色、字体样式等。

示例：

<p>这是普通文本，<span style="color: red;">而这是红色文本</span>。</p>

Flex 容器

定义：Flex 容器不是具体的HTML标签，而是通过将 display: flex; 应用到任何HTML元素（如 <div>、<section> 等）来创建的一种布局模式。该容器内的直接子元素成为弹性项目（flex items），可以根据可用空间自动调整大小和排列。
默认显示：当 display: flex; 被应用于一个元素时，它变成了一个块级容器，默认情况下会占据其父元素的全部宽度，并且其内部的子元素将按照指定的主轴和交叉轴方向进行排列。
使用场景：适用于需要创建灵活响应式布局的情况，比如水平或垂直居中内容、创建导航栏、卡片布局等。它允许开发者轻松地控制子元素之间的间距、对齐方式以及如何分配剩余的空间。

示例：

<div style="display: flex; justify-content: space-around;"><div>Item 1</div><div>Item 2</div><div>Item 3</div>
</div>

3.2 Flex 容器属性

display: flex;

作用：将一个元素转换成Flex容器，使其直接子元素成为Flex项目。
影响：一旦设置了display: flex，该容器内的所有直接子元素都将遵循Flexbox规则进行布局，即使它们本身没有指定任何Flex属性。
兼容性：现代浏览器都支持此属性，但在较老版本的浏览器中可能需要添加前缀或使用替代方案。

flex-direction

作用：定义了Flex项目在主轴上的排列方向。
取值：
- row（默认值）：从左到右排列。
- row-reverse：从右到左排列。
- column：从上到下排列。
- column-reverse：从下到上排列。
影响：决定了项目的排列顺序以及justify-content和align-items所操作的方向。

justify-content

作用：用于定义Flex项目在主轴上的对齐方式。
取值：
- flex-start（默认值）：项目向主轴起点对齐。
- flex-end：项目向主轴终点对齐。
- center：项目居中对齐。
- space-between：项目之间有等距空间，但第一项和最后一项紧贴容器边缘。
- space-around：每个项目周围都有相等的空间，包括与容器边缘之间的空间。
- space-evenly：项目之间及项目与容器边缘之间的间距相等。
影响：控制项目在主轴上的分布，当项目总宽度小于容器时，可调整它们之间的空隙大小；当项目总宽度超过容器时，所有值的效果相同，即项目会被压缩以适应容器。

align-items

作用：用于定义Flex项目在交叉轴上的对齐方式。
取值：
- stretch（默认值）：如果项目未设置高度或设为auto，则拉伸填满整个容器的高度。
- flex-start：项目顶部对齐。
- flex-end：项目底部对齐。
- center：项目居中对齐。
- baseline：根据项目的第一行文本基线对齐。
影响：控制项目在交叉轴上的垂直位置，尤其在项目具有不同高度时效果明显。

三、表单项

1. 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单示例</title><style>body {font-family: Arial, sans-serif;margin: 20px;}.form-group {margin-bottom: 15px;/* 在同一行 */display: flex;}label {display: block;margin-bottom: 5px;}</style>
</head>
<body><h1>用户信息表单</h1><form action="/save" method="post"><!-- 姓名 --><div class="form-group"><label for="name">姓名：</label><input type="text" id="name" name="name"></div><!-- 密码 --><div class="form-group"><label for="password">密码：</label><input type="password" id="password" name="password"></div><!-- 性别 --><div class="form-group"><label>性别：</label><input type="radio" id="male" name="gender" value="male" checked><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label></div><!-- 爱好 --><div class="form-group"><label>爱好：</label><input type="checkbox" id="java" name="interests" value="java"><label for="java">Java</label><input type="checkbox" id="game" name="interests" value="game"><label for="game">Game</label><input type="checkbox" id="sing" name="interests" value="sing"><label for="sing">Sing</label></div><!-- 图像上传 --><div class="form-group"><label for="image">图像：</label><input type="file" id="image" name="image"></div><!-- 生日 --><div class="form-group"><label for="birthday">生日：</label><input type="date" id="birthday" name="birthday"></div><!-- 时间 --><div class="form-group"><label for="time">时间：</label><input type="time" id="time" name="time"></div><!-- 日期时间 --><div class="form-group"><label for="datetime">日期时间：</label><input type="datetime-local" id="datetime" name="datetime"></div><!-- 学历 --><div class="form-group"><label for="education">学历：</label><select id="education" name="education"><option value="">---请选择---</option><option value="high-school">高中</option><option value="college">大专</option><option value="university">本科</option><option value="graduate">硕士</option><option value="doctor">博士</option></select></div><!-- 描述 --><div class="form-group"><label for="description">描述：</label><textarea id="description" name="description" rows="10" cols="30"></textarea></div><!-- 按钮组 --><div class="form-group"><button type="button">按钮</button><button type="reset">重置</button><button type="submit">提交</button></div></form>
</body>
</html>

2. 效果展示

在这里插入图片描述

3. 知识点总结

3.1 HTML表单元素与属性

表单结构：HTML <form> 元素用于创建表单，通过 action 属性指定表单提交的目标URL，method 属性定义提交方式（GET 或 POST）。POST 方法更适合敏感数据的传输。
输入字段类型：
- 文本输入 (<input type="text">)：用于输入简单的文本信息，如姓名、地址等。
- 密码输入 (<input type="password">)：隐藏用户输入的内容，适用于密码输入。
- 单选按钮 (<input type="radio">)：让用户从一组选项中选择一个，通常用于性别、偏好等二元或多选一的选择。
- 复选框 (<input type="checkbox">)：允许用户选择多个选项，适合爱好、技能等多选的情况。
- 文件上传 (<input type="file">)：让用户选择本地文件上传到服务器。
- 日期 (<input type="date">) 和 时间 (<input type="time">) 输入：提供专门的控件让用户选择日期或时间，简化了日期和时间的输入过程。
- 日期时间 (<input type="datetime-local">)：结合日期和时间的选择功能，方便用户输入具体的日期和时间点。
- 下拉菜单 (<select> + <option>)：为用户提供一系列预设选项，适用于学历、职业等有固定选项的选择。
文本区域 (<textarea>)：允许多行文本输入，适合描述性信息或评论等长文本内容。
按钮 (<button>)：可以是普通按钮（触发JavaScript事件）、重置按钮（清空表单）或提交按钮（提交表单）。
<label> 标签的作用：
- 描述信息：每个 <label> 都应与相应的输入字段关联，提供明确的指示，帮助用户理解需要填写的信息。
- 点击激活：当 <label> 关联到一个输入字段时，点击 <label> 也会激活该字段，增加了交互区域，提升了易用性。
- 辅助技术支持：对于屏幕阅读器等辅助工具来说，<label> 提供了重要的上下文信息，有助于残障人士更好地理解和使用网页。
  HTML 表单提交方式总结

HTML 表单可以通过 action 和 method 属性来指定表单数据的提交目标和提交方式。以下是关于这两种属性及其影响的详细总结：

1. action 属性

定义：action 属性指定了当用户提交表单时，表单数据将被发送到的URL地址。
作用：该URL通常是服务器端脚本的位置，负责处理接收到的数据（如保存到数据库、发送邮件等）。

2. method 属性

method 属性决定了表单数据如何被发送到服务器，主要分为两种方式：GET 和 POST。

3. 表单项的 name 属性

重要性：为了确保表单数据能够正确地被服务器接收并处理，每个表单项都必须设置 name 属性，表示当前表单项的名字。
作用：name 属性值用于标识表单中的各个字段，在服务器端可以通过这些名字来获取对应的值。例如，<input type="text" name="username"> 中的 name="username" 就是用来标识这个输入框的名称，服务器端可以通过这个名字来读取用户输入的内容。

3.2 method属性

3.2.1 GET 方法

默认值：如果未明确指定 method，则默认使用 GET 方法。
特点：
- 数据展示：提交的数据会附加在URL后面作为查询字符串的一部分。例如，example.com?name=John&age=30。
- 安全性问题：由于数据是公开可见的，不适合传输敏感或隐私信息。所有数据以明文形式暴露在URL中，容易被截获或记录。
- 大小限制：浏览器对URL长度有一定的限制（通常为2048个字符左右），因此不适合用于提交大数据量的表单。
- 缓存与书签：GET 请求可以被浏览器缓存，并且可以直接通过书签访问，这可能带来安全性和隐私问题。

3.2.2 POST 方法

特点：
- 数据隐藏：提交的数据包含在HTTP请求的消息体中，而不是附加在URL上。这意味着数据不会出现在浏览器地址栏中，提供了更高的安全性。
- 安全性提升：因为数据不显示在URL中，所以减少了敏感信息泄露的风险。对于需要保护的数据（如密码、个人资料等），推荐使用POST方法。
- 无大小限制：理论上，POST 请求没有像GET那样严格的大小限制，适合提交较大的数据集或文件上传。
- 不可缓存：POST 请求不会被浏览器缓存，也不能直接通过书签访问，进一步增强了安全性。

在这里插入图片描述

四、Tlias智能学习辅助系统

1. 代码示例

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>搜索表单与表格展示</title><style>/* 导航栏样式 */.navbar {background-color: #808080;/* 灰色背景 */padding: 10px;display: flex;/* 使用flex弹性布局 */justify-content: space-between;/* 左右对齐 */align-items: center;}/* 标题样式 */.navbar h1 {margin: 0;color: white;font-size: 40px;font-weight: bold;/* 设置字体为楷体 */font-family: '楷体';}/* 退出登录按钮样式 */.navbar a {text-decoration: none;color: white;font-size: 16px;padding: 5px 10px;border-radius: 5px;transition: background-color 0.3s;}/* 鼠标悬停效果 */.navbar a:hover {background-color: #555;}.search-form {display: flex;flex-wrap: nowrap;/* 确保所有子元素在同一行 */box-sizing: border-box;align-items: flex-start;margin-top: 10px;}/* .search-form内的input和select样式变长 */.search-form input[type="text"],.search-form select[id="gender"],#position {width: 200px;}.form-group {margin-right: 10px;}.form-group:last-child {margin-right: 0;}.form-group label {display: block;margin-bottom: 5px;margin-bottom: 0;}.form-group input,.form-group select {width: 100%;padding: 8px;box-sizing: border-box;}.form-group button {padding: 8px 16px;margin-top: 21.5px;}#submit-btn {background-color: rgb(101, 202, 233);}table {width: 100%;border-collapse: collapse;margin-top: 20px;}th,td {border: 1px solid #ddd;padding: 8px;text-align: left;}th {background-color: #f2f2f2;font-weight: bold;}tr:nth-child(even) {background-color: #f9f9f9;}.avatar {width: 50px;height: 50px;object-fit: cover;border-radius: 50%;}.action-buttons {display: flex;gap: 5px;}.action-buttons button {padding: 5px 10px;}/* 页脚版权区域样式 */footer {background-color: #a8a8a8;color: white;text-align: center;padding: 10px 0;margin-top: 20px;}#containner {width: 80%;margin: 0 auto;}</style>
</head><body><div id="containner"><!-- 导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 其他内容 --><div></div><div class="search-form"><div class="form-group"><label for="name">姓名</label><input type="text" id="name" placeholder="请输入姓名"></div><div class="form-group"><label for="gender">性别</label><select id="gender"><option value="">请选择</option><option value="男">男</option><option value="女">女</option></select></div><!-- for 属性：指定该标签与哪个表单元素相关联。for 属性的值应该与表单元素的 id 属性值相同。 --><div class="form-group"><label for="position">职位</label> <select id="position"><option value="">请选择</option><option value="班主任">班主任</option><option value="讲师">讲师</option><option value="学工主管">学工主管</option><option value="教研主管">教研主管</option><option value="咨询师">咨询师</option></select></div><div class="form-group"><button id="submit-btn">查询</button></div><div class="form-group"><button id="reset-btn">清空</button></div></div><table><thead><tr><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><tbody><tr><td>令狐冲</td><td>男</td><td><img src="https://p2.ssl.qhimgs1.com/t011ade375876837888.png" alt="令狐冲头像" class="avatar"></td><td>讲师</td><td>2023-01-01</td><td>2023-03-15</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img src="https://p1.ssl.qhimgs1.com/sdr/400__/t018de2b83fe844a2db.jpg" alt="任盈盈头像"class="avatar"></td><td>班主任</td><td>2022-06-15</td><td>2023-02-20</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>岳不群</td><td>男</td><td><img src="https://p2.ssl.qhimgs1.com/sdr/400__/t0112dbabd47b98792c.jpg" alt="岳不群头像"class="avatar"></td><td>教研主管</td><td>2021-12-01</td><td>2023-04-01</td><td><button>编辑</button><button>删除</button></td></tr></tbody></table><script>document.getElementById('reset-btn').addEventListener('click', function () {document.getElementById('name').value = '';document.getElementById('gender').selectedIndex = 0;document.getElementById('position').selectedIndex = 0;});</script><!-- 页脚版权区域 --><footer>中国科学院海西研究院泉州装备制造研究中心<br>版权所有 Copyright 2006-2024 All Rights Reserved</footer></div>
</body></html>

2. 效果展示

在这里插入图片描述

3. 知识点总结

3.1 表格的基本结构

HTML表格由<table>标签定义，并且通常包含以下部分：

表头 (<thead>)：用于定义表格的头部，一般放置列标题。
表体 (<tbody>)：用于定义表格的主要内容，即数据行。
表脚 (<tfoot>)：可选部分，用于定义表格底部的内容，如总结或总计行。需要注意的是，尽管<tfoot>通常放在HTML代码中的<tbody>之后，但在渲染时它会出现在表格的最底部。

每个部分可以包含多个行（<tr>），而每行又可以包含一个或多个单元格，分为两种类型：

<th>：定义表头单元格，通常用于描述表格中每一列的数据类型或名称。默认情况下，表头单元格文本是加粗并居中的。
<td>：定义标准单元格，用于存放实际的数据值。

<table><thead><tr><th>姓名</th><th>性别</th><th>职位</th></tr></thead><tbody><tr><td>令狐冲</td><td>男</td><td>讲师</td></tr><tr><td>任盈盈</td><td>女</td><td>班主任</td></tr></tbody><tfoot><tr><td colspan="3">总共有2名成员。</td></tr></tfoot>
</table>

五、HTML-CSS-知识总结

类别	标签	说明
文本处理标签	<h1> - <h6>	一级标题 - 级标题
	<br>、<p>	换行、段落
	<strong>、<em>、<ins>、<del>	文本加粗、倾斜、下划线、删除线
	<a href="...">	超链接（属性：href、target）
图片、音视频标签	<img src="...">	图片（路径：绝对路径、相对路径）
图片、音视频标签	<audio src="...">、<video src="...">	音频、视频
布局标签	<div>、<span>	没有语义的布局标签，配合CSS实现页面布局
表格标签	<table>、<thead>、<tbody>	表格、表头、表格主体
表格标签	<tr> / <th>、<td>	行 / 单元格
表单标签	<form>	定义表单（属性：action、method）
	<input type="text/button">	表单项（文本输入框、按钮...）
	<select> / <option>	表单项（下拉列表/选项）

类别	属性	说明
盒子模型	作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示
	width、height	高度、宽度
	box-sizing	高度和宽度的计算方式；content-box, border-box
	padding	内边距（上、右、下、左；上下、左右）
	border	边框
	margin	外边距（上、右、下、左；上下、左右）
flex弹性布局	作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力
	display	flex：使用flex布局
	flex-direction	设置主轴方向（row：x轴，水平方向；column：y轴，垂直方向）
	justify-content	子元素在主轴上的对齐方式