前端笔记-格式化-20221020
HTML 文本格式化
1.文本格式化
<strong>标签：是一个短语标签，用来定义计算机程序的样本重要的文本。浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开。如果说用 <em> 标签修饰的文本好像是在大声呼喊，那么用 <strong> 标签修饰的文本就无异于尖叫了。
<big>标签：和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。
<em>标签：是一个短语标签，用来呈现为被强调的文本。
<small>标签：使文本字体比文档的基本字体小一号（如大到中、中到小等） 在 HTML5 中，<small> 标签用于标识次要的重要性，例如版权、旁注和法律声明。
<sup>标签：定义上标文本。
<sub>标签：定义下标文本。
2.预格式文本
<pre>标签：元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
pre元素是块级元素，但是只能包含文本或行内元素。也就是说，任何块级元素（常见为可以导致段落断开的标签）都不能位于pre元素中。
注意：
pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 <a> 标签）放到<pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。
3.计算机输出标签
<code>标签：用于表示计算机源代码或者其他机器可以阅读的文本内容。<code> 标签的功能有：将文本变成等宽字体；还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能，将来浏览器可能会根据自己的实际情况添加效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某 些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。
p标签和code标签区别与联系：
code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。
p标签和code标签可以嵌套使用。
<code>Document</code>
<kbd>标签： 定义键盘文本。说到技术概念上的特殊样式时，就要提到 <kbd> 标签。<kbd> 标签经常用在于计算机相关的文档和手册中。
<kbd>document</kbd>
<tt>标签：用来定义打字机文本，<tt>标签标记的文本呈现类似打字机或者等宽的效果；html5已经不支持<tt>标签。
<samp>标签：是一个短语标签，用来定义计算机程序的样本文本。用于表示浏览器中计算机程序或脚本的示例输出。
1 2 3 | <p><samp>Error 5: Access is denied.</samp></p> |
<var>标签：是一个短语标签，用来定义变量。<var> 标签是计算机文档中应用的另一个小窍门，这个标签经常与 <code> 和 <pre> 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用 <var> 标签标记的文本通常显示为斜体。
<b>标签：加粗
3.地址标签
<address>标签：定义文档或文章的作者/拥有者的联系信息。
1 2 3 4 5 | <address> written by <a href="mailto:webmaster@example.com">Donald Duck</a><br> Visited us at: <br> example.com <br> </address> |
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
注意：
提示：<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
提示：<address> 元素通常连同其他信息被包含在 <footer> 元素中。
4.缩写和首字母标签
<abbr>标签：用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。
通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
<p> the <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
</p>
#title悬浮是会显示
<acronym>标签：HTML5 不支持 <acronym> 标签。请使用 <abbr> 标签代替它。
5.文字方向标签
<bdo>标签：bdo 指的是 bidi 覆盖（Bi-Directional Override）。<bdo> 标签用来覆盖默认的文本方向。
属性为dir,值有“rtl","ltr"两个。
1 2 3 | <div> <bdo dir="rtl">猫吃鱼</bdo></div> |
6.块引用标签
<blockquote>标签：这是长的引用。使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
| 属性 | 值 | 描述 |
|---|---|---|
| cite | URL | 规定引用的来源。 |
7.删除文字效果和插入文字效果标签
<del>标签：就是在字上面画上横杠。<del> 和 <ins> 一起使用，描述文档中的更新和修正。
<ins>标签：插入标签。
1 2 3 | <p> a dozen is <del> not 20</del> <ins>12</ins></p> |
补充知识：
1.W3C：
- W3C 指万维网联盟（World Wide Web Consortium）
- W3C 创建于1994年10月
- W3C 由 Tim Berners-Lee 创建
- W3C 是一个会员组织
- W3C 的工作是对 web 进行标准化
- W3C 创建并维护 WWW 标准
- W3C 标准被称为 W3C 推荐（W3C 规范）
2.区分标签的意义：
标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从你的文档中提取信息以及文档中提到的有用参数。再一次强调，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通