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

【问题标题】：Warning: The tag <p2> is unrecognized in this browser警告：标签 <p2> 在此浏览器中无法识别
【发布时间】：2019-11-17 10:14:11
【问题描述】：

我正在使用 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;

【问题讨论】：

HTML中没有<p#>标签，只有简单的<p>（段落），但有<h#>标签，如<h1>，<h6>

标签： javascript html css reactjs

【解决方案1】：

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

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

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

检查： Why does CSS work with fake elements?

【讨论】：

【解决方案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>

【讨论】：