什么是 HTML？

HTML（超文本标记语言）是用于创建网页的标准标记语言。它描述网页的结构，由一系列元素组成，这些元素告诉浏览器如何显示内容。

HTML 不是编程语言，而是一种标记语言。它使用标签来定义内容的结构和含义。

HTML 基本结构

每个 HTML 文档都应遵循以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <!-- 页面内容放在这里 -->
</body>
</html>
                

结构解析

<!DOCTYPE html> - 声明文档类型为 HTML5

<html> - HTML 文档的根元素

<head> - 包含文档的元信息，如标题、字符集等

<body> - 包含可见的页面内容

文本标签

HTML 提供了多种标签来格式化文本：

<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<p>这是一个段落。</p>
<p>这是另一个段落，包含<strong>粗体</strong>和<em>斜体</em>文本。</p>
<p>这是<span style="color: red;">红色</span>的文本。</p>
                

效果预览

这是一个一级标题

这是一个二级标题

这是一个三级标题

这是一个段落。

这是另一个段落，包含粗体和斜体文本。

这是红色的文本。

链接与图片

链接和图片是网页中最常见的元素：

<!-- 链接 -->
<p>访问<a href="https://www.example.com">示例网站</a>。</p>
<p><a href="page2.html" target="_blank">在新标签页打开第二页</a></p>

<!-- 图片 -->
<img src="https://via.placeholder.com/300x150" alt="示例图片">
<img src="image.jpg" alt="本地图片" width="200" height="100">
                

效果预览

访问示例网站。

在新标签页打开第二页

注意： 使用图片时，alt 属性非常重要，它为屏幕阅读器和图片无法显示时提供替代文本。

列表

HTML 支持有序列表、无序列表和定义列表：

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

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

<!-- 定义列表 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>
                

效果预览

无序列表

苹果
香蕉
橙子

有序列表

第一步
第二步
第三步

定义列表

HTML: 超文本标记语言
CSS: 层叠样式表

表格

表格用于展示结构化数据：

<table border="1">
    <caption>学生成绩表</caption>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>90</td>
        <td>85</td>
        <td>92</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>88</td>
        <td>92</td>
        <td>87</td>
    </tr>
</table>
                

效果预览

学生成绩表
姓名	语文	数学	英语
张三	90	85	92
李四	88	92	87

表单

表单用于收集用户输入：

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required><br><br>
    
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" required><br><br>
    
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required><br><br>
    
    <label for="gender">性别:</label>
    <select id="gender" name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">其他</option>
    </select><br><br>
    
    <label>兴趣:</label>
    <input type="checkbox" id="sports" name="interest" value="sports">
    <label for="sports">运动</label>
    <input type="checkbox" id="reading" name="interest" value="reading">
    <label for="reading">阅读</label>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">音乐</label><br><br>
    
    <label for="message">留言:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
    
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
                

效果预览

姓名:

邮箱:

性别:

兴趣:

运动阅读音乐

留言:

布局元素

HTML5 引入了语义化布局元素，使页面结构更清晰：

<header>
    <h1>网站标题</h1>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">联系</a>
    </nav>
</header>

<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
    
    <aside>
        <h3>侧边栏</h3>
        <p>相关内容...</p>
    </aside>
</main>

<footer>
    <p>版权信息 © 2023</p>
</footer>
                

效果预览

网站标题

文章标题

文章内容...

实践项目：创建个人简介页面

现在让我们应用所学知识，创建一个简单的个人简介页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人简介</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }
        h1 {
            color: #2c3e50;
        }
        section {
            margin-bottom: 30px;
        }
        h2 {
            color: #3498db;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 5px;
        }
        ul {
            padding-left: 20px;
        }
        footer {
            text-align: center;
            margin-top: 50px;
            color: #7f8c8d;
        }
    </style>
</head>
<body>
    <header>
        <img src="profile.jpg" alt="个人照片" class="profile-img">
        <h1>张三</h1>
        <p>前端开发工程师 | 网页设计师</p>
    </header>
    
    <section>
        <h2>关于我</h2>
        <p>我是一名热爱技术的前端开发工程师，专注于创建美观且功能强大的网站。</p>
    </section>
    
    <section>
        <h2>技能</h2>
        <ul>
            <li>HTML5 & CSS3</li>
            <li>JavaScript</li>
            <li>响应式设计</li>
            <li>UI/UX设计</li>
        </ul>
    </section>
    
    <section>
        <h2>联系我</h2>
        <p>邮箱: example@email.com</p>
        <p>电话: 123-456-7890</p>
    </section>
    
    <footer>
        <p>© 2023 张三. 保留所有权利.</p>
    </footer>
</body>
</html>
                

练习： 复制上面的代码到一个新的 HTML 文件中，保存并在浏览器中打开。然后尝试修改内容，添加你自己的信息！

HTML 从零开始教程

学习导航

学习提示

什么是 HTML？

HTML 基本结构

结构解析

文本标签

效果预览

这是一个一级标题

这是一个二级标题

这是一个三级标题

链接与图片

效果预览

列表

效果预览

无序列表

有序列表

定义列表

表格

效果预览

表单

效果预览

布局元素

效果预览

网站标题

文章标题

实践项目：创建个人简介页面