引言

HTML（HyperText Markup Language）是构建网页的基础，对于想要学习网页设计和前端开发的人来说，掌握HTML是至关重要的第一步。本文将带你深入了解HTML的基础知识，并通过一系列的代码作业挑战，帮助你从零开始，逐步掌握HTML，轻松驾驭网页设计。

HTML基础

1. HTML结构

HTML文档的基本结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
  • <!DOCTYPE html>：声明文档类型和版本。
  • <html>：根元素，包含整个HTML文档。
  • <head>：包含元数据，如页面标题、链接、样式等。
  • <title>：定义页面标题。
  • <body>：包含页面的可见内容。

2. 常用标签

HTML中有许多标签，以下是一些常用的标签：

  • <h1> - <h6>：标题标签，<h1> 是最大的标题，<h6> 是最小的标题。
  • <p>：段落标签。
  • <a>：超链接标签。
  • <img>：图片标签。
  • <div>：块级元素，用于布局。
  • <span>：内联元素，用于文本格式化。

代码作业挑战

1. 创建一个简单的网页

任务描述：创建一个包含标题、段落、图片和超链接的简单网页。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的网页示例。</p>
    <img src="image.jpg" alt="示例图片">
    <a href="https://www.example.com">访问我的网站</a>
</body>
</html>

2. 使用列表

任务描述：创建一个包含无序列表和有序列表的网页。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>列表示例</title>
</head>
<body>
    <h2>无序列表</h2>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
    
    <h2>有序列表</h2>
    <ol>
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
    </ol>
</body>
</html>

3. 表格布局

任务描述：创建一个包含标题、行、列和单元格的表格。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>表格示例</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容4</td>
            <td>内容5</td>
            <td>内容6</td>
        </tr>
    </table>
</body>
</html>

总结

通过以上代码作业，你将能够掌握HTML的基础知识，并能够创建简单的网页。继续学习和实践，你将能够驾驭更复杂的网页设计和前端开发。祝你在代码作业之旅中取得成功！