html美化代码

作者：妳明白莪還在等待嗎？发布日期:2025-06-14 浏览:70

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 美化代码示例</title>
    <style>
        /* 使用 CSS 来美化 HTML 代码 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
        }
        p {
            line-height: 1.6;
            color: #555;
        }
        code {
            background-color: #eee;
            padding: 2px 4px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML 美化代码示例</h1>
        <p>通过使用 CSS，我们可以让 HTML 页面看起来更加美观。例如，可以设置字体、背景颜色、边距等样式。</p>
        <p>下面是一个简单的 HTML 结构：</p>
        <code>
            &lt;!DOCTYPE html&gt;<br>
            &lt;html&gt;<br>
            &nbsp;&nbsp;&lt;head&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;页面标题&lt;/title&gt;<br>
            &nbsp;&nbsp;&lt;/head&gt;<br>
            &nbsp;&nbsp;&lt;body&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;这是一个段落。&lt;/p&gt;<br>
            &nbsp;&nbsp;&lt;/body&gt;<br>
            &lt;/html&gt;
        </code>
    </div>
</body>
</html>

解释说明：

HTML 基本结构：此代码包含了一个完整的 HTML 文档结构，包括 <!DOCTYPE html> 声明、<html> 标签、<head> 和 <body> 部分。
CSS 样式：在 <style> 标签中定义了 CSS 样式，用于美化页面。这些样式包括字体、背景颜色、边距、内边距和阴影效果等。
容器布局：使用 .container 类来创建一个居中的内容区域，并为其添加了一些内边距和阴影效果，使页面看起来更整洁。
代码块展示：使用 <code> 标签来展示 HTML 代码片段，并为代码块设置了背景颜色和内边距，使其易于阅读。

上一篇：html代码转换

下一篇：html中b标签的作用