首页 > 技术文章 > HTML-pre标签和code标签

sucker 2019-05-27 21:15 原文

<pre>:预格式化标签

<code>:将字符设置为等宽字符的标签

在html文件中需要显示一些比如< >这种符号时需要使用到实体化字符

> &#60

< &#62

<!  DOCTYPE html>
<html>
<head>
    <title>预格式化</title>
    <meta charset = “utf-8”>
    <meta name = “viewport” content = “width=device-width, initial-scale=1.0”>
    <meta name = “keyword” content = “预格式化文本”>
    <meta name = “description” content = “预格式化纯文本”>
    <meta author = “王思怡”>
    <style>
    body{
    background:pink;
    }
    </style>    
</head>
<body>
    <!—- 以下代码的括号需要使用实体化字符来写 —->
    <pre>
    &#60;DOCTYPE !html&#62;
    &#60;html&#62;
    &#60;head&#62;
        &#60;title&#62;预格式化&#60;/title&#62;
        &#60;meta charset = “utf-8”&#62;
        &#60;meta name = “viewport” content = “width=device-width” initial = 1.0&#62;
        &#60;meta name = “keyword” content = “预格式化文本”&#62;
        &#60;meta name = “description” content = “预格式化纯文本”&#62;
        &#60;meta author = “王思怡”&#62;
        &#60;style&#62;
        body{
        background:pink;
        }
        &#60;/style&#62;    
    &#60;/head&#62;
    &#60;/html&#62;
    </pre>
<body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>code标签的使用</title>
    <meta charset = “utf-8”>
    <meta name = “viewport” content = “width=device-width, initial-scale=1.0”>
    <meta name = “keyword” content = “code标签的使用”>
    <meta name = “description” content = “code标签的使用”>
    <meta author = “王思怡”>
    <style>
    body{
    background:pink;
    }
    </style>
</head>
<body>
    <pre>
    <code>
        &#60;DOCTYPE !html&#62;
        &#60;html&#62;
        &#60;head&#62;
            &#60;title&#62;预格式化&#60;/title&#62;
            &#60;meta charset = “utf-8”&#62;
            &#60;meta name = “viewport” content = “width=device-width” initial = 1.0&#62;
            &#60;meta name = “keyword” content = “预格式化文本”&#62;
            &#60;meta name = “description” content = “预格式化纯文本”&#62;
            &#60;meta author = “王思怡”&#62;
            &#60;style&#62;
            body{
            background:pink;
            }
            &#60;/style&#62;    
        &#60;/head&#62;
        &#60;/html&#62;
    </code>
    </pre>
</body>
</html>

 

推荐阅读