html在线编程工具手机-手机html5编程工具

创建一个简单的HTML页面

在开始之前，请确保你已经安装了支持HTML和CSS的浏览器,并且熟悉基本的网页布局。

打开你喜欢的HTML编辑器（如VSCode、Sublime Text或Brackets）。
在文件中输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">简单HTML页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .container {
            text-align: center;
        }
        h1 {
            color: #333;
        }
        p {
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Hello, World!</h1>
        <p>This is a simple HTML page created with an online code editor.</p>
    </div>
</body>
</html>

这段代码创建了一个包含标题“Hello, World!”和一段文本说明的页面,你可以使用这个示例来了解如何添加结构化内容到HTML文档中。

解释代码

<!DOCTYPE html>: 声明文档类型为HTML5。
<html lang="en">: 标记HTML文档及其语言设置。
<head>: 包含元数据信息。
- <meta charset="UTF-8">: 设置字符编码为UTF-8,保证跨平台显示正确。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 控制网页视口的宽度及缩放级别,适用于移动设备。
- <title>简单HTML页面</title>: 页面标题。
<style>: 定义外部样式表，使网页看起来更美观。
- .container { ... }: 给.container类定义样式。
- text-align: center;: 将文本居中对齐。
- font-family: Arial, sans-serif;: 额外选择了Arial字体,作为默认字体。
- margin: 0; padding: 0;: 清除边距和内边距,避免默认样式的影响。
- display: flex; justify-content: center; align-items: center;: 使用Flexbox实现水平和垂直居中。
- height: 100vh;: 设置容器高度等于视窗高度。
- background-color: #f0f0f0;: 背景颜色为浅灰色。
<body>: 包含实际的网页内容。
- <div class="container">: 创建一个名为container的盒模型。
- <h1>...</h1>: 创建一级标题。
- <p>...</p>: 创建段落文本。