html5长文字标签

常用长文字标签及语义化说明

<article>

• 用途：表示独立的文章内容，如博客、新闻、论坛帖子。
• 特点可独立存在，适合封装完整篇章。
• 示例：

  <article>
    <h2>文章标题</h2>
    <p>这是文章的第一段内容……</p>
    <section>
      <h3>小标题</h3>
      <p>段落内容……</p>
    </section>
  </article>

<section>

• 用途：划分主题相关的章节，通常带标题。
• 特点：需搭配 <h1>~<h6> 标题标签，语义更明确。
• 示例：

  <section>
    <h2>章节标题</h2>
    <p>章节内的段落内容……</p>
  </section>

<p>

• 用途：定义段落，自动添加换行和间距。
• 注意：避免用 <br> 或 <div> 替代段落。
• 扩展属性：<p lang="zh"> 指定语言。

---

长文字结构标签对比表

语义场景	是否需要标题	典型用途
<article>	独立完整的内容块	可选	博客、新闻、评论
<section>	主题相关的章节	必须	文章分段、书籍章节
<p>	段落文本	无	所有段落内容
<blockquote>	引用外部内容	可选	名言、摘录
<main>	区域	无	容器

---

长文字样式处理技巧

1. 文本溢出处理：

   .text-container {
     width: 300px;
     overflow: hidden; / 隐藏溢出 /
     text-overflow: ellipsis; / 显示省略号 /
   }

2. 首行缩进：

   p {
     text-indent: 2em; / 首行缩进2字符宽度 /
   }

3. 响应式排版：

   body {
     max-width: 800px; / 限制最大宽度 /
     margin: 0 auto; / 居中显示 /
   }

---

最佳实践建议

• 语义优先：优先用 <article>、<section> 而非 <div>，层级：从 <h1> 开始逐级递减，避免跳过层级。
• 禁用过时标签：不要用 <font>、<center>，改用 CSS。
• 语言声明：长文本使用 <p lang="zh-CN"> 标注语言。

---

相关问题与解答

问题1：如何判断用 <article> 还是 <section>？

解答： 是独立的（如一篇完整的博客），用 <article>。 是页面的一部分且依赖其他内容（如章节），用 <section>。
示例：

<article><!-独立文章 --></article>
<section><!-文章内的章节 --></section>

问题2：长文本中换行和空格如何处理？

解答：

• 换行：用 <br> 标签或 CSS 的 white-space: pre-wrap;。
• 保留空格：用   或 CSS white-space: pre;。
  示例：

  <p>第一行<br>第二行</p>
  <pre>保留空格的文本