HTML实体、空格处理与列表标签

1. HTML实体

• 常见实体符号：

  • 大于号：>

  • 小于号：<

  • 单引号：'

  • 双引号："

  • 等号：=

  • 版权符：©

  • And符：&

• 特殊空格处理：

  • 普通空格（32号）：浏览器会将多个空格合并为一个。

  • NBSP（160号空格）：不会被浏览器合并，用于需要保留多个空格的场景。

    • 实体写法： 

    • 用途：防止浏览器合并空格，保留多个空格显示。

2. 空格处理

• 普通空格：多个空格会被浏览器合并为一个。

• NBSP（160号空格）：

  • 不会被合并，保留多个空格。

  • 复制时，浏览器会将NBSP转换为普通空格（32号）。

• 全角空格：

  • 占用两个字符宽度，常用于中文排版。

  • 在HTML中，全角空格被视为普通字符，不会影响布局。

  • 在编程语言（如CSS、JS）中，全角空格可能导致代码报错。

3. <pre>标签

• 用途：保留文本中的空格和换行符，浏览器不会对其进行格式化。

• 示例：

  <pre>
      这是
      预格式化的
      文本。
  </pre>
  

• 与<code>标签结合：用于显示代码，保留代码的缩进和格式。

  <pre><code>
      function hello() {
          console.log("Hello, world!");
      }
  </code></pre>
  

4. 列表标签

• 无序列表（<ul>）：

  • 用于表示没有顺序的列表项。

  • 每个列表项用<li>标签表示。

  • 示例：

    <ul>
        <li>项目1</li>
        <li>项目2</li>
    </ul>
    

• 有序列表（<ol>）：

  • 用于表示有顺序的列表项。

  • 每个列表项用<li>标签表示。

  • 示例：

    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
    

• 嵌套列表：可以在<li>中嵌套<ul>或<ol>。

  <ul>
      <li>项目1
          <ul>
              <li>子项目1</li>
          </ul>
      </li>
  </ul>
  

• 描述列表（<dl>）：

  • 用于表示名称-值对的列表。

  • <dt>表示名称，<dd>表示值。

  • 示例：

    <dl>
        <dt>名称1</dt>
        <dd>值1</dd>
        <dt>名称2</dt>
        <dd>值2</dd>
    </dl>
    

5. 浏览器行为

• 图片加载与页面滚动：

  • 现代浏览器会在图片加载完成后自动调整滚动条位置，避免页面内容跳动。

• 空格与换行处理：

  • 浏览器默认合并多个空格为一个，使用<pre>标签可以保留原始格式。

6. Markdown与HTML的转换

• Markdown中的代码块：

  • 使用反引号（`）或三个反引号（ ```）表示代码块。

  • 转换为HTML时，Markdown代码块会被转换为<pre><code>标签。

• Markdown中的列表：

  • 无序列表转换为<ul>，有序列表转换为<ol>。

7. 其他注意事项

• 空格对齐：不要使用空格或NBSP进行布局对齐，应使用CSS进行排版。

• 全角空格：在编程环境中需注意全角空格可能导致代码报错。

---

总结：

• HTML实体：用于表示特殊字符，如 表示不合并的空格。

• <pre>标签：保留文本中的空格和换行，常用于显示代码。

• 列表标签：<ul>、<ol>、<dl>分别用于无序、有序和描述列表。

• 浏览器行为：现代浏览器会智能处理图片加载和空格合并，提升用户体验。