四个AI开源项目实战盘点：本地大模型、Agent框架、编程助手与嵌入式AI
2026/9/25 16:25:37
前面学的 h1~h6、p、ul、table、form、input、a 这些标签，浏览器会默认把它们分成三类：
- 块级元素（block）：独占一整行，上下换行。代表：
div、p、h1‑h6、ul、ol、form - 行内元素（inline）：不换行，多个标签从左到右并排；不能设置宽高。代表：
span、a、<b>、<i> - 行内块元素（inline‑block）：并排显示，同时可以设置宽高。代表：
img、input
两个最重要容器标签：
<div>：块级容器，用来划分大区域，网页布局主力（盒子）<span>：行内容器，用来给一小段文字局部改样式
核心记忆：块级占整行；行内并排不能设宽高；行内块并排还能设宽高。
一、块级元素 block
特点
- 独占一整行，后面的内容自动换行。
- 可以设置
width宽度、height高度、margin 外边距、padding 内边距。 - 里面可以放块级、行内、行内块元素。
特殊：p 标签里面不能放块级标签（p 里面不要套 div、h1）。
常见块级标签：div、h1~h6、p、ul、ol、li、table、form、dl
示例观察效果
<!DOCTYPE html> <html lang="zh‑CN"> <head> <meta charset="UTF‑8"> <style> div{ background:#87ceeb; } h3{ background:#ffd700; } p{ background:#90ee90; } </style> </head> <body> <div>我是div块级元素1</div> <h3>我是h3标题块级元素</h3> <p>我是p段落块级元素</p> </body> </html>效果：每个盒子各自占满一整行，一个结束，下一个跑到下面新一行。
div 通用块容器（布局最重要标签）
div本身没有任何默认样式，纯粹用来划分网页的一块块区域。 网页结构：头部、导航、内容区、侧边栏、底部，全部用 div 划分。
示例，用 div 划分页面模块：
<body> <!-- 网页头部区域 --> <div class="header"> <h2>网站标题</h2> </div> <!-- 中间主体内容 --> <div class="main"> <p>这里是网页主要内容文字</p> </div> <!-- 网页底部 --> <div class="footer"> <p>版权所有 ©2026</p> </div> </body>div 就是一个透明大盒子，把一组相关标签包裹在一起，方便统一加 CSS 样式。
class 属性：给 div 起类名，CSS 通过 class 选中这个盒子设置样式。
二、行内元素 inline
特点
- 不会独占一行，多个标签从左往右并排显示。
- 不能设置 width、height，宽高由里面的文字内容撑开。
- 只能存放文字、其他行内元素；行内里面尽量不放块级元素。
常见行内标签：span、<a>超链接、<b>加粗、<i>斜体、<strong>、<em>
span 行内容器
span 没有默认样式，专门用来选中一小段文字，局部改样式。
div 管一大块区域；span 管一小段文字。
示例：
<p>今天天气很好，<span style="color:red;font‑weight:bold;">适合出门游玩</span>。</p>解释： 整段是 p（块级），里面 “适合出门游玩” 这一小部分，用 span 包起来，单独改成红色加粗。
行内元素并排演示
<body> <a href="#">链接1</a> <a href="#">链接2</a> <span>文字A</span> <span>文字B</span> </body>效果：全部横向排在一起，不会换行。
❗行内元素坑：给 span、a 设置 width、height，不生效！
span{ width:200px; height:100px; background:pink; }写了宽高，浏览器完全忽略，因为 inline 行内不支持宽高。
三、行内块元素 inline‑block
特点
- 和行内一样：多个元素横向并排显示，不强制换行
- 和块级一样：可以设置 width、height、margin、padding
典型标签：<img>图片、<input>输入框
示例：img 并排
<body> <img src="https://picsum.photos/id/10/100/80" alt="图1"> <img src="https://picsum.photos/id/11/100/80" alt="图2"> <img src="https://picsum.photos/id/12/100/80" alt="图3"> </body>三张图片并排，同时可以设置 width 宽高。
input 输入框也是行内块：
<input type="text"> <input type="button" value="按钮">输入框和按钮横向排在一起，还能设置宽高。
✨CSS 改变元素显示模式（重点！）
我们可以用displayCSS 属性，强行切换三种模式。
display:block;→ 变成块级，独占一行，可以设置宽高display:inline;→ 变成行内，并排，不能设置宽高display:inline‑block;→ 变成行内块，并排 + 可设置宽高
示例 1：把 a 链接（原本行内）改成块级
<!DOCTYPE html> <html lang="zh‑CN"> <head> <meta charset="UTF‑8"> <style> a{ display:block; /*把行内a改为块级，独占一行，可以设置宽高*/ width:120px; height:40px; background:#4285f4; color:white; text‑decoration:none; text‑align:center; line‑height:40px; } </style> </head> <body> <a href="#">导航1</a> <a href="#">导航2</a> <a href="#">导航3</a> </body> </html>效果：链接不再并排，每个链接占一整行，变成方块按钮。
示例 2：把 div（块级）改成行内块，实现多个盒子横向并排
<head> <meta charset="UTF‑8"> <style> .box{ width:100px; height:100px; background:#ffa500; display:inline‑block; /*块级div改为行内块，盒子横向排*/ } </style> </head> <body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div class="box">盒子3</div> </body>原本 div 每个占一行；设置
display:inline‑block之后三个盒子横向并排。
三类元素对比表格
| 类型 | display 值 | 换行特点 | 能否设置宽高 | 典型标签 | 使用场景 |
|---|---|---|---|---|---|
| 块级元素 | block | 独占一行，自动换行 | ✅可以 | div、p、h1‑h6、ul | 划分网页大区域、大盒子布局 |
| 行内元素 | inline | 横向并排，不换行 | ❌无效 | span、a、b、em | 一小段文字局部样式 |
| 行内块元素 | inline‑block | 横向并排，不换行 | ✅可以 | img、input | 图片、表单控件；小盒子并排 |
通俗大白话记忆
- 块级：大盒子，一人占一行，能做大做宽
- 行内：文字碎片，挤在一起，不能改大小
- 行内块：像文字一样排，又能设置宽高
div 和 span 的核心区别（新手必背）
| 标签 | 类型 | 作用 |
|---|---|---|
<div> | 块级 block | 划分网页大块区域，大盒子，独占一行 |
<span> | 行内 inline | 选中一小段文字，局部改颜色字体，不会换行 |
示例对比：
<!-- div：一大块 --> <div style="background:#ccc;"> 这是一大块内容，会占满整行 </div> <p>春天来了，<span style="color:green;">万物复苏</span>，花儿开放。</p> <!-- span只修饰句子中间一小段文字 -->新手高频踩坑
坑 1：给行内元素（span、a）设置 width height，发现完全不起效果
解决：加上display:inline‑block;或者display:block;
坑 2：p 标签里面嵌套 div
❌
<p> <div>错误，p里面不能放div块级标签</div> </p>浏览器会自动把 p 标签拆分，代码错乱。
坑 3：分不清什么时候用 div 什么时候 span
要包裹一大块（包含标题、段落、图片）→ 用 div 只想修改一句话里面几个字的颜色 → 用 span
坑 4：想让多个 div 横向排，忘记写display:inline‑block
div 默认块级，每个占一行；想要并排，设置display:inline‑block。
完整综合示例，直接复制运行
<!DOCTYPE html> <html lang="zh‑CN"> <head> <meta charset="UTF‑8"> <meta name="viewport" content="width=device‑width, initial‑scale=1.0"> <style> /*块级盒子div*/ .big‑box{ background:#b0e0e6; margin:8px 0; padding:10px; } /*行内块，让小div横向并排*/ .small{ width:80px; height:80px; background:#ffb6c1; display:inline‑block; margin:5px; } </style> </head> <body> <h2>区块元素演示</h2> <div class="big‑box"> 我是div块级元素，独占一行。 </div> <div class="big‑box"> 多个小div设置inline‑block实现并排： <div class="small">1</div> <div class="small">2</div> <div class="small">3</div> </div> <p> 这是p段落块级。<span style="color:blue;font‑size:18px;">这里一小段文字使用span行内标签改成蓝色</span>，后面继续文字。 </p> <p>图片img是行内块，可以并排，可设置宽高：</p> <img src="https://picsum.photos/id/20/80/60" alt="图"> <img src="https://picsum.photos/id/21/80/60" alt="图"> </body> </html>本篇知识点总结
- HTML 元素分为三类：块级 block、行内 inline、行内块 inline‑block。
- 块级元素独占一行，可以设置宽高；
div是通用块容器，用来划分网页大块布局。 - 行内元素横向并排，宽高由内容决定，设置宽高无效；
span行内容器，用于局部文字样式。 - 行内块元素既可以并排，又支持宽高；代表标签
img、input。 - CSS 的
display属性可以修改元素显示模式：block /inline/inline‑block。 - div 做大盒子；span 修饰小段文字；p 不要嵌套 div。
✍小练习：
- 使用 div 做 2 个大盒子；
- 大盒子内部放 3 个小 div，设置
display:inline‑block横向并排； - 写一段 p，中间用 span 把其中几个字改成红色。