HTML（超文本标记语言）是构建网页的基础。让我们从最基本的结构开始学习。

1. HTML文档基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

小贴士

HTML文档必须以 <!DOCTYPE html> 声明开始，这告诉浏览器这是一个HTML5文档。

2. 常用HTML标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

一级标题

二级标题

三级标题

段落和文本格式化

<p>这是一个段落。</p>
<strong>粗体文本</strong>
<em>斜体文本</em>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->

这是一个段落。

粗体文本
斜体文本

3. 链接和图片

<!-- 链接 -->
<a href="https://www.example.com">点击这里</a>

<!-- 图片 -->
<img src="image.jpg" alt="图片描述">

alt 属性为图片添加描述文本，当图片无法显示时会显示这段文字。这对网页可访问性很重要。

4. 列表

<!-- 无序列表 -->
<ul>
    <li>项目一</li>
    <li>项目二</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

项目一
项目二

第一步
第二步

5. 表单

<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    
    <button type="submit">提交</button>
</form>

原创 制作简单的个人网页教程

1. HTML文档基本结构

小贴士

2. 常用HTML标签

标题标签

一级标题

二级标题

三级标题

段落和文本格式化

3. 链接和图片

4. 列表

5. 表单

原创制作简单的个人网页教程