[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式

1.HTML文本基础

1.1标题和段落

在HTML中，每个段落是通过 <p> 元素标签进行定义的，比如下面这样：

<p>了解了HTML、CSS、JavaScript的基础知识。</p>

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

<h1>本周学习内容</h1>

1.2列表

1.2.1无序列表（unordered）

代码如下:

<ul>
<li>...</li>
</ul>

1.2.2有序列表(ordered)

代码如下：

<ol>
<li>...</li>
</ol>

在嵌套列表中，无序列表可以嵌套有序列表。

1.3重点强调

HTML 提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、下划线等效果。
加粗：<strong></strong>
倾斜:<em></em>

• <i>被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
• <b>被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
• <u>被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
  因为我们常常会认为网页中的下划线代表着一个超链接，所以最好只用下划线来代表超链接。而在语义适合的情况下不得不使用元素时，可以使用 CSS 来改变元素对应的下划线的默认样式，从而和超链接的下划线区分开来。

2.建立超链接

2.1什么是超链接？

超链接是直接使互联网成为互联的网络。超链接使我们能够将文档连接到任何其他资源，也可以连接到文档本身的指定部分。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（url）。
URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问你是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。

2.2链接的解析

通过将文本（或其它内容) 包裹在 <a> 元素内，并给它一个 href 属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。

<p>我创建了一个指向<a href="https:csdn.net">CSDN 主页</a>的超链接。
</p>

这里可以通过使用title属性添加支持信息。比如:

<p>我创建了一个指向<a href="https:csdn.net" title="学习技术就来这儿！">CSDN 主页</a>的超链接。</p>

链接的标题仅当鼠标悬停在其上时才会显示，这意味着使用键盘来导航网页的人很难获取到标题信息。

超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）。要做到这一点，必须首先给要链接到的元素分配一个 id 属性。例如，如果想链接到一个特定的标题，可以这样做：

<h2 id="Mailing_address">邮寄地址</h2>

然后链接到那个特定的 id，可以在 URL 的结尾使用一个井号指向它，

<p>要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>

甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：

<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>

当需要链接到要下载的资源而不是在浏览器中打开时，可以使用 download 属性来提供一个默认的保存文件名。下面是一个 Firefox 的 Windows 最新版本下载链接的示例：

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

2.3电子邮件链接

当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用 <a> 元素和 mailto:URL 的方案。
其最基本和最常用的使用形式为一个 mailto: 链接，链接指明收件人的电子邮件地址。
比如：

<a href="mailto:nowhere#mozilla.org"向Mizilla发邮件</a>

实际上，电子邮件地址是可选的。如果mailto后面没有邮件地址，一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以给他们选择的地址发送邮件。

除了电子邮件地址，你还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的 mailto URL 中。其中最常用的是主题（subject）、抄送（cc）和主体（body）（这不是一个真正的标头字段，但允许你为新邮件指定一个简短的内容消息）。每个字段及其值被指定为查询项。

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

每个字段的值必须是使用 URL 编码的，也就是使用百分号转义的非打印字符（不可见字符比如制表符、换行符、分页符）和空格。同时注意使用问号（?）来分隔主 URL 与参数值，以及使用 & 符来分隔 mailto: URL 中的各个参数。

3.高级文本格式

3.1描述列表

描述列表使用与其他列表类型不同的闭合标签——<dl>；此外，每一项都用 <dt>（description term）元素闭合。每个描述都用 <dd>（description definition）元素闭合。浏览器的默认样式会在描述列表的描述部分（description definition）和描述术语（description terms）之间产生缩进。
一个术语 <dt> 可以同时有多个描述 <dd>。

3.2引用

HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决于引用的是一块还是一行。

3.2.1块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，应该把它用<blockquote>元素包裹起来表示，并且在cite属性里用 URL 来指向引用的资源。例如，引用MDN的<blockquote>元素页面：

<p>The <strong>HTML <code> &lt;blockquote&gt;</code>
Element</strong></p>
<em>HTML Block Quotation Element</em> indicates that enclosed text is an 
extended quotation.

把这些转换为块引用：

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
    <p>The <strong>HTML <code> &lt;blockquote&gt;</code>
    Element</strong></p>
    <em>HTML Block Quotation Element</em> indicates that enclosed text is an 
    extended quotation.  
    </blockquote>

浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符。

3.2.2行内引用

行内元素用同样的方式工作，除了使用<q>元素。例如：

<p>The quote element - <code>&lt;q&gt;</code>-is<q 
    cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>    

浏览器默认将其作为普通文本放入引号内表示引用。

3.2.3引文

cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。
如果想要确保引用的来源在页面上是可显示的，更好的方法是为<cite>元素附上链接.

举个例子：

• 把中间的段落变成块引用，它要包含cite属性
• 把第三个段落的一部分变成行内引用，它要包含cite属性
• 每一个引用都要包含<cite>元素

需要的引用源：

• http://www.brainyquote.com/quotes/authors/c/confucius.html 对应 “孔子曰”。
• http://www.affirmationsforpositivethinking.com/ 对应 “不要说泄气的话”。

<p>你好！欢迎访问我的激励网页！<a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>孔子</cite></a>曰：</p>
<blockquote cite="https://zh.wikipedia.org/zh-hans/孔子">
  <p>譬如为山，未成一篑，止，吾止也。譬如平地，虽覆一篑，进，吾往也。</p>
</blockquote>
<p>要保持乐观，<q cite="http://www.affirmationsforpositivethinking.com/">不要说泄气的话</q>。（源自 <a href="http://www.affirmationsforpositivethinking.com/"><cite>Affirmations for Positive Thinking</cite></a>。）</p>

3.3缩略语

web 上看到的相当常见的元素是<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。
示例：

<p>我们使用<attr title="超文本标记语言">HTML</attr>来组织网页语言。</p>

3.4标记联系方式

HTML 有个用于标记联系方式的元素——

。它仅仅包含联系方式，例如：

<address>
    <p>Chris Mills,Manchester,The Grim North,UK</p>
</address>

但要记住的一点是，<address>元素是为了标记编写 HTML 文档的人的联系方式，而不是任何其他的内容。因此，如果这是 Chris 写的文档，上面的内容将会很好。

3.5上标和下标

当使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。<sup> 和<sub>元素可以解决这样的问题。
有大量的 HTML 元素可以来标记计算机代码：

• <code>: 用于标记计算机通用代码。
• <pre>: 用于保留空白字符（通常用于代码块）——如果在文本中使用缩进或多余的空白，浏览器将忽略它，将不会在呈现的页面上看到它。但是，如果将文本包含在<pre></pre>标签中，那么空白将会以与在文本编辑器中看到的相同的方式渲染出来。
• <var>: 用于标记具体变量名。
• <kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
• <samp>: 用于标记计算机程序的输出。

3.6标记时间和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的 <time> 元素。例如：

<time datetime="2016-01-20">2016 年 1 月 20 日</time>