参考资料

  1. HTML 缩写和首字母缩写
  2. HTML 有序列表
  3. html表格标签详细说明以及案例
  4. HTML 表格的嵌套
  5. HTML id 属性在 JavaScript 中的使用
  6. HTML 来显示目录链接页面使用 iframe
  7. html图像标签详细说明以及案例
  8. HTML 文本对齐方式

HTML 段落

详细介绍

HTML 段落是通过 <p> 标签定义的文本块,用于组织和呈现文本内容。段落会自动在前后创建一些空白(外边距),使文档结构更清晰。

标签

基本段落标签:

<p>这是一个段落</p>

用法

  1. 基本用法:

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
  1. 包含其他内联元素:

<p>这是一个包含<strong>强调文本</strong>和<a href="#">链接</a>的段落。</p>

功能

  1. 将文本内容分组为逻辑段落

  2. 自动添加默认样式(上下边距)

  3. 提高文档可读性和可访问性

CSS 扩展

可以通过 CSS 自定义段落样式:

  1. 修改字体和颜色:

p {
  font-family: Arial, sans-serif;
  color: #333;
}
  1. 调整间距:

p {
  margin-top: 10px;
  margin-bottom: 20px;
  line-height: 1.5;
}
  1. 首行缩进:

p {
  text-indent: 2em;
}
  1. 特殊段落样式:

p.intro {
  font-weight: bold;
  font-size: 1.2em;
}

p.note {
  background-color: #ffffcc;
  padding: 10px;
  border-left: 3px solid #ffcc00;
}
  1. 响应式设计:

@media (max-width: 600px) {
  p {
    font-size: 14px;
    line-height: 1.4;
  }
}