HTML 教程学习笔记

什么是 HTML？

HTML（HyperText Markup Language）是一种用于创建网页的标记语言，它描述了网页的结构和内容。HTML 使用标记将文本、图像和其他内容组织起来，以便浏览器可以理解和显示。

HTML 基础语法

HTML 文档由许多元素（Element）组成，每个元素都由一个开始标记（Opening Tag）和一个结束标记（Closing Tag）组成。标记之间的内容就是该元素的内容。

下面是一个简单的 HTML 文档：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个 HTML 页面</title>
  </head>
  <body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是我的第一个 HTML 页面。</p>
  </body>
</html>

在上面的例子中，<!DOCTYPE html> 表示使用 HTML5 标准，<html> 元素是整个文档的根元素，<head> 元素包含文档头部信息，<title> 元素定义了文档的标题，<body> 元素包含了文档的内容，<h1> 元素定义了一个一级标题，<p> 元素定义了一个段落。

HTML 常用标签

以下是一些常用的 HTML 标签及其用途：

<p>：定义段落
<h1> 至 <h6>：定义标题，从大到小依次递减
<a>：定义链接
<img>：定义图像
<ul> 和 <li>：定义无序列表
<ol> 和 <li>：定义有序列表
<table>、<tr>、<th> 和 <td>：定义表格
<form>、<input> 和 <button>：定义表单及其控件

HTML 实例

下面是一个使用以上标签的简单 HTML 页面实例：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>HTML 实例</title>
  </head>
  <body>
    <h1>我的第一个 HTML 页面</h1>
    <p>这是一个段落。</p>
    <h2>链接</h2>
    <p>这是一个指向<a href="https://www.google.com">谷歌搜索引擎</a>的链接。</p>
    <h2>图像</h2>
    <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="郁金香">
    <h2>列表</h2>
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
    <ol>
      <li>第一步</li>
      <li>第二步</li>
      <li>第三步</li>
    </ol>
    <h2>表格</h2>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>18</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>20</td>
      </tr>
    </table>
    <h2>表单</h2>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username">
      <br>
      <label for="password">密码：</label>
      <input type="password" id="password" name="password">
      <br>
      <button type="submit">提交</button>
    </form>
  </body>
</html>

上述实例展示了 HTML 中常用标签的基本用法，可以通过修改文本、链接、图像和表单控件等内容来练习 HTML 的使用。