重学前端 段落的空格解析/br和wbr/常见文本格式化标签/详解pre（white-space）/q（初见lang）/对比bdo和bdi/详解a（target cursor 链接- id）（第三天）

文章目录

段落拆行（br）合适处拆行（wbr）文本格式化prewhite-space

q （初见lang）bdi 和 bdo链接（a）targetcursor链接- id 属性

菜鸟突然发现，每个标签研究起来还真是有点意思，而且东西也很多！

段落

这里还是p标签：

p里面的 回车键（Firefox不会被解析为空格，当然也不会解析成回车键，什么效果也没有；goole会解析为一个空格） p里面 再多的空格 = 一个空格

拆行（br）

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 < br /> 标签。

这里菜鸟发现了，其实不同浏览器对 br 的解析是不一样的，Firefox的br大小为：0.0166626 x 18（和空白区域的高度相当，宽度几乎为零），goole的br大小为：auto x auto （实际显示0x21，和p的高度一致）。

（其它浏览器可能不同，希望有其它浏览器的读者，可以试试，然后来积极留言！）

注意：

这里br是拆行，并不是产生 产生上面这个图片的效果，只是因为上一个元素是块元素，所以换行就直接到下一行去了；对于行内元素，得连续用两次，才能产生如上效果！

合适处拆行（wbr）

（2020年7月28日补） < wbr> (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。

提示： 如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 < wbr> 元素来添加 Word Break Opportunity（单词换行时机）。

如果大家是在菜鸟教程上学习的，那么会发现这个问题： 发现并没有换行！菜鸟一开使也是这个疑惑，不过看了前面的提示，就感觉事情好像并没有那么简单！

当你像菜鸟一样： 你会发现，本来没有wbr不会换行的单词，现在却换行了！

所以，wbr其实与其说是添加换行符，不如说是合适处换行，而且还是你规定的合适处！只有当你规定的wbr处遇到可换行也可以不换行时，就会显示其作用！

文本格式化

这里h5废弃了不少，因为类似于 big 、b 、i 、small …都是可以用css写出来的，而且这些元素纯粹是为页面展示用的，这些内容理应由CSS完成。

ML 5 规范声明：标题应该用 < h1> - < h6> 标签表示，被强调的文本应该用 < em> 标签表示，重要的文本应该用 < strong> 标签表示，被标记的或者高亮显示的文本应该用 < mark> 标签表示。 提示：您也可以使用 CSS 的 “font-weight” 属性设置粗体文本。

菜鸟这里只列举较为有用的，及h5能用，而靠css不好实现的。(可能会遗漏，望读者积极留言补充，菜鸟会查看资料后添加)

名称作用效果ins标签定义已经被插入文档中的文本 [ 颜色样式都会继承：text-decoration-style: initial; text-decoration-color: initial; 下面 del、s同 ]del、sdel 标签定义文档中已删除的文本；s 标签对那些不正确、不准确或者没有用的文本进行标识。（s 标签不应该用来定义替换的或者删除的文本，如果要定义替换的或者删除的文本，请使用 del 标签）sub标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方[ vertical-align: sub; ]，但是与当前文本流中文字的字体和字号都是一样的[ font-size: smaller; 对应的font-weight是normal的]。下标文本能用来表示化学公式，比如：H2O [ goole设置其font-weight，100~300一样，400 ~500一样，600以上一样；Firefox设置font-weight，100 ~500一样，500以上一样。 ]sup标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方[ vertical-align: super; 后面和sub一样，不讲了 ]，但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注，比如：WWW[1]pre标签可定义预格式化的文本。被包围在 pre标签 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。（开头的< pre>标签之后的回车不会显示回车，结尾< /pre>标签之前的回车就会解析为回车）abbr标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。(提示：在某些浏览器中，当您把鼠标移至带有 abbr标签的缩写词/首字母缩略词上时，abbr标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。)[ 会继承父元素的颜色：text-decoration-color: initial; ]bdo 和 bdibdo 指的是 bidi 覆盖（Bi-Directional Override），bdo 标签用来覆盖默认的文本方向，方向由 dir属性指定。（ltr—>left to right；rtl—>right to left） bdi 指的是 bidi 隔离（Bi-directional Isolation），< bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置，在发布用户评论或其他您无法完全控制的内容时，该标签很有用（见下方详解）这两个标签，需要配合使用，就是知道外面的内容是什么方向，但是里面的内容不知道时，用 bdi 包裹即可blockquote标签定义摘自另一个源的块引用。浏览器通常会对 blockquote 元素进行缩进。（两端40px，上下1em）q标签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。 （open-qute意思是开引号）

pre

先给大家看看pre得源css： 这里有一个神奇的现象，那就是虽然上下margin都为1em，但是在没有修改的情况下，居然是 13px，这里应该是和pre里面的字体（font-family）有关。

white-space

还有一个值得说的就是white-space这个属性：

white-space属性指定 元素内的空白怎样处理

属性值和作用 详见： 详解文本格式（Text）[第二天]

q （初见lang）

当元素是q的时候，可以无需使用::after或者::before选择器，直接就可以为q元素的内容添加标记元素。

实例：

蚂蚁部落欢迎您

运行结果： 但是当不是q标签时，如p是不起效果的，要传统的加::before、::after选择器。(::before、::after后面会讲，见：css 伪类 / 伪元素 [第十天])

实例：

Some text A quote in a paragraph Some text.

运行结果： lang详见： css 伪类 / 伪元素 [第十天]

bdi 和 bdo

bdo:

This text will go right

to left.

结果： bdi：

This text will go right to left.

结果： 可能有读者问，这有什么效果？菜鸟搜到了，这里直接借用！ 其实感觉bdi更加常用，bdo部分情况下会使用

（菜鸟感觉常用的格式化文本的属性基本上就是这了）

链接（a）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

在标签< a> 中使用了href属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中（可能不同浏览器不同）：

一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。a的样式不会随父元素改变，只能单独设置！

每种状态如何编辑，详见： 链接样式 列表样式 表格样式[第三天]

target

使用 target 属性，你可以定义被链接的文档在何处显示。参数和作用如下：

名称作用_blank新窗口打开_self这个目标的值对所有没有指定目标的 < a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(一般使用的就这两个，另外的两个感觉不多见)

cursor

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。这是为什么？看看a的源css： 和鼠标有关系的就是cursor属性：

cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）

所有的取值和样式：

链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中插入ID：

< a id=“tips”>有用的提示部分< /a>

在HTML文档中创建一个链接到" 有用的提示部分(id=“tips”）“：

< a href=“#tips”>访问有用的提示部分< /a>

或者，从另一个页面创建一个链接到" 有用的提示部分(id=“tips”）"：

< a href=“https://www.runoob.com/html/html-links.html#tips”> 访问有用的提示部分< /a>

这里可以看看： html新增标签 2021/1/30 中提到的链接污染，菜鸟不是很懂