警告：标签<p2>在此浏览器中无法识别

Question

我正在用 React 创建一个网站，它有一个简单的搜索引擎，可以搜索一些带有信息的卡片。 在 Card.js 文件中，我包含一个带有名称的 h2 标记和一个带有电子邮件的 p2 标记。 当网站被编译时，出现以下错误信息：

index.js:1375 Warning: The tag <p2> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    in p2 (at Card.js:9)
    in div (at Card.js:7)
    in div (at Card.js:5)
    in Card (at CardList.js:10)
    in div (at CardList.js:6)
    in CardList (at App.js:28)
    in div (at App.js:25)
    in App (at src/index.js:9)

Tried changing the p2 tag to "P2" but it does not compile.

Card.js file:

import React from 'react';

const Card = ({name, email, id}) => {
    return (
        <div className='tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
            <img alt='photos' src={`https://robohash.org/${id}?200x200`} />
            <div>
                <h2>{ name }</h2>
                <p2>{ email }</p2>
            </div>
        </div>
    );
}

export default Card;

Answer 1

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML 元素p2不存在。 尝试仅使用p 。

补充：它可能适用于纯粹由 html 和 css 构建的静态内容，但这不是推荐的做法。

检查： 为什么 CSS 可以使用假元素？

Answer 2

关于这个主题的更多信息：

通过添加不合格的元素以临时方式扩展 HTML 或任何标记语言是一种不好的做法。 将来，W3C 可能会扩展到包括 P2 等元素。 更好的做法是使用 CSS 类来导出相同的结果：

<p>Normal content</p>
<p class="my-p2">P2 content</p>

我为 W3c 做出了贡献，我们强烈反对人们以特别的方式扩展建议（W3C“标准”的官方术语）。 如果您必须扩展它，请使用命名空间以避免将来发生这样的冲突：

<my-namespace:p2>my P2 content</my-namespace:p2>