3_28用 p 元素代表段落（基础HTML和HTML5）

文章来源：freecodecamp网址：

https://chinese.freecodecamp.org/

HTML 是一种标记语言，使用特殊的语法或标记来向浏览器描述网页的结构。HTML 元素由开始和结束标签构成，标签之间是文本内容。不同的标签可以让文本内容以标题、段落、列表等形式展现。

在这个课程中，你将通过编写一个展示猫咪图片的应用，学习最常见的 HTML 元素——它们可以用来构成任何网页。

注：本示例为第三个示例，以下内容来自freecodecamp。文章中图示为调试当时界面，供学习参考。

用 p 元素代表段落通过

p 元素是网站上段落文本使用的元素。 p 是“paragraph（段落）”的缩写。

你可以像这样创建一个段落：

<p>I'm a p tag!</p>

要求：在 h2 元素下方添加一个 p 元素，其内容是 Hello Paragraph。

注意：按照惯例，所有 HTML 标签都应该是小写字母，例如应使用 <p></p>，而不会使用 <P></P>。

原始代码界面：

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>

更改后代码如下：

nicode：修饰符 “u” 和 class \p{...}

JavaScript 使用 Unicode 编码（Unicode encoding）对字符串进行编码。大多数字符使用 2 个字节编码，但这种方式只能编码最多 65536 个字符。

这个范围不足以对所有可能的字符进行编码，这就是为什么一些罕见的字符使用 4 个字节进行编码，比如（数学符号 X）或者（笑脸），一些象形文字等等。

以下是一些字符对应的 unicode 编码：

字符	UNICODE	UNICODE 中的字节数
a	0x0061	2
≈	0x2248	2
	0x1d4b3	4
	0x1d4b4	4
	0x1f604	4

所以像 a 和 ≈ 这样的字符占用 2 个字节，而，和的对应编码则更长，它们具有 4 个字节的长度。

很久以前，当 JavaScript 被发明出来的时候，Unicode 的编码要更加简单：当时并没有 4 个字节长的字符。所以，一部分语言特性在现在仍旧无法对 unicode 进行正确的处理。

比如 length 认为这里的输入有 2 个字符：

alert(''.length); // 2
alert(''.length); // 2

…但我们可以清楚地认识到输入的字符只有一个，对吧？关键在于 length 把 4 个字节当成了 2 个 2 字节长的字符。这是不对的，因为它们必须被当作一个整体来考虑。（即所谓的“代理伪字符”（surrogate pair），你可以在这里进一步阅读有关的的信息字符串）。

默认情况下，正则表达式同样把一个 4 个字节的“长字符”当成一对 2 个字节长的字符。正如在字符串中遇到的情况，这将导致一些奇怪的结果。我们将很快在后面的文章中遇到 [集合和范围 ...]。

与字符串有所不同的是，正则表达式有一个修饰符 u 被用以解决此类问题。当一个正则表达式使用这个修饰符后，4 个字节长的字符将被正确地处理。同时也能够用上 Unicode 属性（Unicode property）来进行查找了。我们接下来就来了解这方面的内容。

Unicode 属性（Unicode properties）\p{…}

在 Firefox 和 Edge 中缺乏支持

尽管 unicode property 从 2018 年以来便作为标准的一部分, 但 unicode 属性在 Firefox (bug) 和 Edge (bug) 中并没有相应的支持。

目前 XRegExp 这个库提供“扩展”的正则表达式，其中包括对 unicode property 的跨平台支持。

Unicode 中的每一个字符都具有很多的属性。它们描述了一个字符属于哪个“类别”，包含了各种关于字符的信息。

例如，如果一个字符具有 Letter 属性，这意味着这个字符归属于（任意语言的）一个字母表。而 Number 属性则表示这是一个数字：也许是阿拉伯语，亦或者是中文，等等。

我们可以查找具有某种属性的字符，写作 \p{…}。为了顺利使用 \p{…}，一个正则表达式必须使用修饰符 u。

举个例子，\p{Letter} 表示任何语言中的一个字母。我们也可以使用 \p{L}，因为 L 是 Letter 的一个别名（alias）。对于每种属性而言，几乎都存在对应的缩写别名。

在下面的例子中 3 种字母将会被查找出：英语、格鲁吉亚语和韩语。


let str = "A ბ ㄱ";

alert( str.match(/\p{L}/gu) ); // A,ბ,ㄱ
alert( str.match(/\p{L}/g) ); // null（没有匹配的文本，因为没有修饰符“u”）

以下是主要的字符类别和它们对应的子类别：

- 字母（Letter）  L
  - 小写（lowercase） `Ll`
  - 修饰（modifier） `Lm`,
  - 首字母大写（titlecase） `Lt`,
  - 大写（uppercase） `Lu`,
  - 其它（other） `Lo`。

- 数字（Number） N
  - 十进制数字（decimal digit） `Nd`,
  - 字母数字（letter number） `Nl`,
  - 其它（other） `No`。

- 标点符号（Punctuation）  P
  - 链接符（connector） `Pc`,
  - 横杠（dash） `Pd`,
  - 起始引用号（initial quote） `Pi`,
  - 结束引用号（final quote） `Pf`,
  - 开（open） `Ps`,
  - 闭（close） `Pe`,
  - 其它（other） `Po`。

- 标记（Mark） M (accents etc):

  - 间隔合并（spacing combining） `Mc`,
  - 封闭（enclosing） `Me`,
  - 非间隔（non-spacing） `Mn`。

- 符号（Symbol）   S:
  - 货币（currency） `Sc`,
  - 修饰（modifier） `Sk`,
  - 数学（math） `Sm`,
  - 其它（other） `So`。

- 分隔符（Separator）   Z

  - 行（line） `Zl`,
  - 段落（paragraph） `Zp`,
  - 空格（space） `Zs`。

- 其它（Other）   C :
  - 控制符（control） `Cc`,
  - 格式（format） `Cf`,
  - 未分配（not assigned） `Cn`,
  - 私有（private use） `Co`,
  - 代理伪字符（surrogate） `Cs`。

因此，比如说我们需要小写的字母，就可以写成 \p{Ll}，标点符号写作 \p{P} 等等。

也有其它派生的类别，例如：

Alphabetic (Alpha), 包含了字母 L, 加上字母数字 Nl （例如 Ⅻ – 罗马数字 12），加上一些其它符号 Other_Alphabetic (OAlpha)。
Hex_Digit 包括 16 进制数字 0-9，a-f。
…等等

Unicode 支持相当数量的属性，列出整个清单需要占用大量的空间，因此在这里列出相关的链接：

列出一个字符的所有属性 https://unicode.org/cldr/utility/character.jsp.
按照属性列出所有的字符 https://unicode.org/cldr/utility/list-unicodeset.jsp.
属性的对应缩写形式：https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt.
以文本格式整理的所有 Unicode 字符，包含了所有的属性：https://www.unicode.org/Public/UCD/latest/ucd/.

实例：16 进制数字

举个例子，让我们来查找 16 进制数字，写作 xFF 其中 F 是一个 16 进制的数字（0…1 或者 A…F）。

一个 16 进制数字可以表示为 \p{Hex_Digit}：


let regexp = /x\p{Hex_Digit}\p{Hex_Digit}/u;

alert("number: xAF".match(regexp)); // xAF

实例：中文字符

让我们再来考虑中文字符。

有一个 unicode 属性 Script （一个书写系统），这个属性可以有一个值：Cyrillic，Greek，Arabic，Han （中文）等等，这里是一个完整的列表。

为了实现查找一个给定的书写系统中的字符，我们需要使用 Script=<value>，例如对于西里尔字符：\p{sc=Cyrillic}, 中文字符：\p{sc=Han}，等等。


let regexp = /\p{sc=Han}/gu; // returns Chinese hieroglyphs

let str = `Hello Привет 你好 123_456`;

alert( str.match(regexp) ); // 你,好

实例：货币

表示货币的字符，例如 $，€，¥，具有 unicode 属性 \p{Currency_Symbol}，缩写为 \p{Sc}。

让我们使用这一属性来查找符合“货币，接着是一个数字”的价格文本：


let regexp = /\p{Sc}\d/gu;

let  str = `Prices: $2, €1, ¥9`;

alert( str.match(regexp) ); // $2,€1,¥9

之后，在文章量词 +,*,? 和 {n} 中我们将会了解如何查找包含很多位的数字。

总结

修饰符 u 在正则表达式中提供对 Unicode 的支持。

这意味着两件事：

4 个字节长的字符被以正确的方式处理：被看成单个的字符，而不是 2 个 2 字节长的字符。
Unicode 属性可以被用于查找中 \p{…}。

有了 unicode 属性我们可以查找给定语言中的词，特殊字符（引用，货币）等等。

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Thu Aug 25 2016 09:23:24 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>

<html>

<body>

document.write(Date());

</script>

</body>

</html>

	绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了 <p>元素的内容：

实例

<html>

<body>

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="新文本!";

</script>

</body>

</html>

本例改变了 <h1> 元素的内容：

实例

<!DOCTYPE html>

<html>

<body>

<h1 id="header">Old Header</h1>

var element=document.getElementById("header");

element.innerHTML="新标题";

</script>

</body>

</html>

实例讲解：

上面的 HTML 文档含有 id="header" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

本例改变了 <img> 元素的 src 属性：

实例

<!DOCTYPE html>

<html>

<body>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

实例讲解：

上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：“放歌青春”北京音乐新兴青年成长计划启动，全网征集原创音乐作品
下一篇：HTML常用英文单词，快来背单词吧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

3_28用 p 元素代表段落（基础HTML和HTML5）

用 p 元素代表段落通过

nicode：修饰符 “u” 和 class \p{...}

Unicode 属性（Unicode properties）\p{…}

实例：16 进制数字

实例：中文字符

实例：货币

总结

您的项目需求