3.1 元素 <p>
块级元素 在HTML中用于创建网页的结构和内容组织。它们帮助 将内容分成逻辑块和段落。这些元素会开始新的一行并占满所有可用的宽度。 我们详细看看三个常用的标签：<p>、<div>和<span>。
标签 <p>
标签 <p> 用于创建文本段落。它是一个块级元素：这意味着每个 段落从新的一行开始，并且上下都有间距。
使用示例：
HTML
<p>
这是第一段文本。段落用于将文本分成逻辑块，
提高其可读性。
</p>
<p>这是第二段文本。每个段落都从新的一行开始。</p>
属性：
- 块级元素：开始新的一行并占满所有可用的宽度。
- 自动间距：浏览器通常会在段落前后添加间距。
- 嵌套性：标签
<p>不能包含其他块级元素。
使用CSS进行样式化：
CSS
p {
color: #333;
font-size: 16px;
line-height: 1.5;
margin-bottom: 15px;
}
3.2 元素 <div>
标签 <div> 是一个通用的块级容器，用于分组其他元素 并应用样式。它没有内置样式，专用于结构化内容。
使用示例：
HTML
<div class="container">
<h2>区块标题</h2>
<p>在div块内的一些文本。</p>
</div>
属性：
- 块级元素：开始新的一行并占满所有可用的宽度
- 通用性：可以包含任何其他元素，包括块级和行内元素
- 样式和脚本：常用于应用CSS样式和JavaScript脚本
使用CSS进行样式化：
CSS
.container {
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
}
3.3 元素 <span>
标签 <span> 是行内元素，用于强调块级元素内的 部分文本或其他内容。它没有内置样式，用于应用CSS样式和 JavaScript脚本到特定文本部分。
使用示例：
HTML
<p>这个文本包含一个突出显示的 <span class="highlight">词</span>，与其他文本不同。</p>
属性：
- 行内元素：不创建新行，仅占用必要的宽度
- 灵活性：用于对文本或其他元素的独立部分应用样式
- 常与CSS和JavaScript结合使用：帮助精准地样式或操作文本部分
使用CSS进行样式化：
CSS
.highlight {
color: red;
font-weight: bold;
}
3.4 <div> 和 <span> 的比较
<div>:
- 块级元素
- 开始新的一行
- 可以包含其他块级和行内元素
- 用于分组和结构化内容
<span>:
- 行内元素
- 不打断文本流
- 用于独立文本部分的样式化
- 常用于强调和JavaScript操作
<div> 和 <span> 结合使用的示例：
CSS
.article {
border: 1px solid #ddd;
padding: 10px;
}
.keyword {
color: blue;
font-style: italic;
}
HTML
<div class="article">
<h2>文章标题</h2>
<p>
这是文章文本的一个段落，其中的关键词 <span class="keyword">词</span> 被强调以吸引注意。
</p>
</div>
标签 <p>、<div> 和 <span> 是HTML的基本构件， 允许创建结构化、样式化和交互式网页。理解它们的特性并正确使用有助于创建便捷和功能丰富的界面。
用
分组
GO TO FULL VERSION