当前位置：首页 > news >正文

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

news 2025/11/8 18:39:54

学习路线

一、新闻网界面
- 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	子元素在主轴上的对齐方式

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.…...

编程日记 2025/1/18 20:54:04

客户案例：致远OA与携程商旅集成方案

一、前言本项目原型客户公司创建于1992年,主要生产并销售包括糖果系列、巧克力系列、烘焙系列、卤制品系列4大类,200多款产品。公司具有行业领先的生产能力,拥有各类生产线100条,年产能超过10万吨。同时,经过30年的发展,公司积累了完善的销售网络,核心经销商已经超过1200个,超…...

编程日记 2025/1/18 20:53:02

【常见BUG】Spring Boot 和 Springfox（Swagger）版本兼容问题

???欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老…...

编程日记 2025/1/18 20:50:00

【Python】FastAPI入门

文章目录第一节：FastAPI入门一、FastAPI框架介绍什么是ASGI服务（WSGI）1、补充Web开发1）Web前端开发2）Web后端开发二、FastAPI安装1、安装Python虚拟环境2、安装FastAPI 三、第一个FastAPI案例1、访问接口和文档2、接…...

编程日记 2025/1/18 20:48:59

JavaScript系列（32）-- WebAssembly集成详解

JavaScript WebAssembly集成详解 🚀 今天，让我们深入了解JavaScript与WebAssembly的集成，这是一项能够显著提升Web应用性能的关键技术。 WebAssembly基础概念 🌟 💡 小知识：WebAssembly（简称W…...

编程日记 2025/1/18 20:47:57

wps数据分析000002

目录一、快速定位技巧二、快速选中技巧全选选中部分区域选中部分区域（升级版） 三、快速移动技巧四、快速录入技巧五、总结一、快速定位技巧 ctrl→（上下左右）快速定位光标对准单元格的上下部分双击名称单元格中…...

编程日记 2025/1/18 20:45:55

无降智o1 pro——一次特别的ChatGPT专业模式探索

这段时间和朋友们交流 ChatGPT 的使用心得，大家都提到一个很“神秘”的服务：它基于 O1 Pro 模型，能够在对话里一直保持相对高水平的理解和回复，不会突然变得“降智”。同时，整体使用还做了免折腾的网络设置——简单一点…...

编程日记 2025/1/18 20:43:53

前端：前端开发任务分解 / 开发清单

一、背景前端开发过程中，好多任务同时开发，或者一个大的任务分解为若干个子任务进行开发，分解出去的很多内容容易记不清楚 / 不易过程管理，所以记录表格如下，方便开发同事，也辅助掌握整体开发情况。二、…...

编程日记 2025/1/18 20:41:51

【Django自学】Django入门：如何使用django开发一个web项目（非常详细）

测试机器：windows11 x64 python版本：3.11 一、安装Django 安装步骤非常简单，使用pip安装就行 pip install django安装完成之后，python的 Scripts 文件夹下，会多一个 django-admin.exe (管理创建django项目的工具)。…...

编程日记 2025/1/18 20:38:48

面试经验分享-回忆版某小公司

说说你项目中数据仓库是怎么分层的，为什么要分层？ 首先是ODS层，连接数据源和数据仓库，数据会进行简单的ETL操作，数据来源通常是业务数据库，用户日志文件或者来自消息队列的数据等中间是核心的数据仓库层&a…...

编程日记 2025/1/18 20:35:45

WebSocket——推送方案选型

一、前言：为何需要服务端主动推送？ 在现代应用中，很多功能都依赖于“消息推送”。比如： 小红点提醒：我们经常在手机应用里看到的一个小红点提示，表示有新的消息或任务需要我们关注。新消息提醒&#xff1…...

编程日记 2025/1/18 20:34:44

山石防火墙命令行配置示例

现网1台山石SG6000防火墙，配置都可以通过GUI实现。但有一些配置在命令行下配置效率更高，比如在1个已有策略中添加1个host或端口。下面的双引号可以不加 1 创建服务 1.1 单个端口 service "tcp-901"tcp dst-port 901 1.2 端口范围 servi…...

编程日记 2025/1/18 20:30:41

LLM - 大模型 ScallingLaws 的 C=6ND 公式推导教程(1)

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/145185794 Scaling Laws (缩放法则) 是大模型领域中，用于描述模型性能(Loss) 与模型规模N、数据量D、计算资源C 之间关系的经验规律…...

编程日记 2025/1/18 20:29:40

原题链接：Leetcode 983. 最低票价 class Solution { public:int mincostTickets(vector<int>& days, vector<int>& costs) {int n days.size();int last days[n - 1];int dp[last 1];map<int, int> mp;for (auto x : days)mp[x] 1;dp…...

编程日记 2025/1/18 20:26:35

Kafka——两种集群搭建详解 k8s

1、简介 Kafka是一个能够支持高并发以及流式消息处理的消息中间件，并且Kafka天生就是支持集群的，今天就主要来介绍一下如何搭建Kafka集群。 Kafka目前支持使用Zookeeper模式搭建集群以及KRaft模式（即无Zookeeper）模式这两种模式搭…...

编程日记 2025/1/18 20:25:31

springboot使用websocket

文章目录一、概述1、简介二、使用1、引包2、配置处理器3、前端测试一、概述 1、简介简介略，附上官方文档，spring5和spring6的官方文档内容大致是一样的： https://docs.spring.io/spring-framework/docs/5.2.25.RELEASE/spring-framewo…...

编程日记 2025/1/18 20:24:27

Redis的安装和配置、基本命令

一、实验目的本实验旨在帮助学生熟悉Redis的安装、配置和基本使用，包括启动Redis服务、使用命令行客户端进行操作、配置Redis、进行多数据库操作以及掌握键值相关和服务器相关的命令。二、实验环境准备 1. JAVA环境准备：确保Java Development Kit …...

编程日记 2025/1/18 20:21:21

Rnote：Star 8.6k,github上的宝藏项目，手绘与手写画图笔记，用它画图做笔记超丝滑，值得尝试！

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Rnote是一款开源的基于矢量的绘图应用，专为学生、教师以及绘图板用户设计。它支持草图绘制、手写笔记以及对文档和图片进行注释。Rnote提供…...

编程日记 2025/1/18 20:17:13

python如何解析word文件格式（.docx）

python如何解析word文件格式（.docx） .docx文件遵从开源的“Office Open XML标准”，这意味着我们能用python的文本操作对它进行操作（实际上PPT和Excel也是）。而且这并不是重复造轮子，因为市面上操作.docx的…...

编程日记 2025/1/18 20:14:05

「刘一哥GIS」系列专栏《GRASS GIS零基础入门实验教程（配套案例数据）》专栏上线了

「刘一哥GIS」系列专栏《GRASS GIS零基础入门实验教程》全新上线了，欢迎广大GISer朋友关注，一起探索GIS奥秘，分享GIS价值！ 本专栏以实战案例的形式，深入浅出地介绍了GRASS GIS的基本使用方法，用一个个实例讲…...

编程日记 2025/1/18 20:13:02

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...

编程新知 2025/11/7 9:56:01

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素文章来源： http://raspberry.dns8844.cn/documentation 原文网址使用 rpicam-app 通过网络流式传输视频本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03

基于Docker Compose部署Java微服务项目

一. 创建根项目根项目（父项目）主要用于依赖管理一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/11/8 1:06:07

2025盘古石杯决赛【手机取证】

前言第三届盘古石杯国际电子数据取证大赛决赛最后一题没有解出来，实在找不到，希望有大佬教一下我。还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/11/8 8:29:34

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

网络编程（UDP编程）

思维导图 UDP基础编程（单播） 1.流程图服务器：短信的接收方创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/11/7 14:07:08

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。一、核心设计理念 1、痛点在哪应用离不开数据（数据库、No…...

编程新知 2025/11/7 14:06:19

学习路线

一、新闻网界面

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-知识总结

相关文章：