这是我参与「第四届青训营 」笔记创作活动的的第7天

HTML文字处理基础

HTML的主要工作是编辑文本结构和文本内容，以便浏览器能正确的显示。

标题和段落

绝大部分的文本结构都离不开标题和段落，结构化的内容框架会给读者提供更舒适简洁的阅读体验。

在HTML中，每个段落是由<p>元素标签定义的。例如：

<p>我是一个段落。</p>

每个标题是通过“标题标签”进行定义的。例如：

<h1>我是一个一级标题。</h1>

注意：这里有6个标题元素标签——<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的标题。

结构化的好处在于：

1. 使内容的相互关系更加清晰，用户阅读体验更好。
2. 有利于SEO（搜索引擎优化）更好的对网页建立索引，便于提升网页搜索排名。
3. 有利于视觉障碍者快速定位有效性息。
4. 有利于CSS和JavaScript定位相关部分。

列表lists

• 无序列表Unordered

  每份无序列表的清单从<ul>元素开始——需要包裹清单上所有被列出的项目，然后用<li>元素把每个列出的项目单独包裹起来：

<ul>

  <li>豆浆</li>

  <li>油条</li>

  <li>豆汁</li>

  <li>焦圈</li>

</ul>

• 有序列表Ordered

  有序列表需要按照项目的顺序列出来，从<ol>元素开始，其他与无序列表相同。

<ol>
  <li>沿着条路走到头</li>
  
  <li>右转</li>
  
  <li>直行穿过第一个十字路口</li>
  
  <li>在第三个十字路口处左转</li>
  
  <li>继续走 300 米，学校就在你的右手边</li>
  
</ol>

• 嵌套列表Nesting lists

将一个列表嵌入到另一个列表是完全可以的。

重点强调

在日常用语中，我们尝尝会加重某个字的读音，或者用加粗等方式突出某句话的重点。与此类似，HTML中也有一系列的标签用于标记某些文本，使其具有加粗、倾斜、下划线等效果。

1. 强调（斜体）

在 HTML 中我们用<em>（emphasis）元素来标记斜体的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别出来，并以不同的语调发出。例如：

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

2. 非常重要（粗体）

在 HTML 中我们用<strong> (strong importance) 元素来标记粗体的情况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。例如：

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

3. 斜体字、粗体字、下划线

迄今为止我们已经讨论的元素都是意义清楚的语义元素。<b>, <i>, 和 <u> 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但 CSS 仍然不被完全支持的时期。

• <i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……

• <b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……

• <u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

参考资料

HTML文字处理基础