span 与 div 元素
使用通用的行内容器和块内容器作为样式挂钩。
span 与 div 元素 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
通用容器
HTML 有两个通用的、语义中立的容器元素：
<div>— 块级容器<span>— 行内容器
它们本身不承载任何含义，只是作为设置样式和编写脚本的挂钩。
div 元素
<div> 是块级容器，会在前后各创建一个新行：
<div class="card">
<h2>Card Title</h2>
<p>Card content here.</p>
</div>
<div class="sidebar">
<p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->span 元素
<span> 是行内容器，会在文本中随内容流动：
<p>The price is <span class="price">$29.99</span> per month.</p>
<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>
<!-- span targets a part of text for styling or scripting
without adding block-level line breaks -->何时使用 div 而不是语义元素
使用 <div> 之前，请检查是否有合适的语义元素：
- 页面页眉 →
<header> - 导航 →
<nav> - 主要内容 →
<main> - 博客文章 →
<article> - 侧边栏 →
<aside> - 页面页脚 →
<footer>
只有在没有适用的语义元素时，才使用 <div>。
容器元素滥用症
容器元素滥用症 — 什么内容都过度使用 <div>：
<!-- Divitis: meaningless nesting -->
<div class="header">
<div class="nav">
<div class="nav-item"><a href="/">Home</a></div>
</div>
</div>
<!-- Better: semantic HTML -->
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>使用 class 和 id 创建 CSS 钩子
<div> 和 <span> 都可以与 class 或 id 属性结合使用，以便让 CSS 定位：
<div class="hero-section">
<h1>Welcome</h1>
<p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>
<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->JavaScript 定位
<div> 和 <span> 也可以作为 JavaScript 的定位目标：
<span id="counter">0</span>
<script>
const counter = document.getElementById('counter');
let count = 0;
setInterval(() => {
count++;
counter.textContent = count;
}, 1000);
</script>嵌套规则
通用容器的嵌套规则：
<div>可以包含<div>和<span><span>只能包含<span>和行内内容- 不要将
<div>放在<span>内部
<span>
Inline text
<span>Nested span OK</span>
<!-- <div> inside span: INVALID -->
</span>使用 div 进行布局
使用 div 进行布局的常见模式：
<div class="layout">
<div class="sidebar"><!-- sidebar --></div>
<div class="content"><!-- main content --></div>
</div>
<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->使用 span 设置行内样式
常见的行内样式模式：
<p>Status: <span class="badge badge-success">Active</span></p>
<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
<span style="color: green; font-weight: bold;">$30</span></p>div 和 span 不可见
默认情况下，<div> 和 <span> 都是不可见的包装器：
<div>除了块级显示外不会添加任何视觉样式<span>完全不会添加样式- 所有外观都来自您应用的 CSS
- 因此它们非常适合作为中性容器
快速检查
要设置段落中单个词语的样式，应使用哪个元素？
回顾：span 和 div
通用容器的要点：
<div>— 块级元素，用于为布局分组元素<span>— 行内元素，用于定位文本片段并设置样式- 二者在语义上都是中性的，不添加任何含义
- 适用时优先使用 HTML5 语义元素
- 使用
class和id将它们连接到 CSS 和 JavaScript
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「span 与 div 元素」课时是免费的吗？
是的 — 「span 与 div 元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「span 与 div 元素」这节课中我会学到什么？
使用通用的行内容器和块内容器作为样式挂钩。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「span 与 div 元素」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。