html预览

作者：枫尘于往逝发布日期:2025-06-29 浏览:59

<!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>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        h1 {
            color: #333;
        }
        p {
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML 预览示例</h1>
        <p>这是一个简单的 HTML 页面，用于展示如何创建一个基本的网页。你可以通过浏览器直接打开这个文件来预览它。</p>
        <p>在这个示例中，我们使用了以下元素：</p>
        <ul>
            <li><code>&lt;html&gt;</code> 标签定义了 HTML 文档的根元素。</li>
            <li><code>&lt;head&gt;</code> 部分包含文档的元数据，例如字符集、视口设置和标题。</li>
            <li><code>&lt;body&gt;</code> 部分包含页面的实际内容。</li>
            <li><code>&lt;style&gt;</code> 标签用于内联 CSS 样式，以控制页面的外观。</li>
        </ul>
        <p>你可以在本地保存这个 HTML 文件，并通过双击它来在浏览器中预览。</p>
    </div>
</body>
</html>

解释说明：

<!DOCTYPE html>：声明文档类型为 HTML5。
<html lang="zh-CN">：指定文档的语言为简体中文。
<head> 部分：包含页面的元数据，如字符编码 (<meta charset="UTF-8">) 和视口设置 (<meta name="viewport" content="width=device-width, initial-scale=1.0">)，以及页面的标题 (<title>)。
<style> 标签：用于定义页面的样式，包括字体、颜色和布局等。
<body> 部分：包含页面的主要内容，如标题 (<h1>)、段落 (<p>) 和列表 (<ul>)。
<div class="container">：用于包裹页面的内容，使其居中并限制最大宽度。

你可以将此代码保存为 .html 文件并在浏览器中打开以预览效果。

上一篇：40个常见的html标签及含义

下一篇：padding是什么意思html