HTML基础语法

2. 文本格式化标签

3. 链接和图片

4. 列表

5. 表格

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

• <table>：定义表格。
• <tr>：定义表格行。
• <th>：定义表头单元格（加粗居中）。
• <td>：定义标准单元格。

6. 表单（用户输入）

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="username"><br><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="useremail"><br><br>

  <input type="submit" value="提交">
</form>

• <form>： 定义表单容器。
• <input>： 定义输入字段，type 属性决定其类型（文本、密码、复选框等）。
• <label>： 为输入字段定义标签。
• <textarea>： 多行文本输入框。
• <select>： 下拉选择列表。
• <button>： 按钮。

HTML 文档结构

所有 HTML 文档都遵循一个基本模板。下面是 HTML5 的标准结构：

<!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>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

HTML 中的空白

什么是 HTML 空白？

在 HTML 中，"空白" 指的是以下字符：

• 空格 ()
• 制表符 (\t)
• 换行符 (\n)

当你在 HTML 代码中敲击空格键、Tab 键或回车键时，就产生了空白字符。

<p id="noWhitespace">狗狗很 呆萌。</p>
<p id="whitespace">
    狗狗很    呆萌。
</p>

在上面的例子中，你可能注意到代码中包含了很多空白。这是可选的。这两个代码片段是等效的。

核心规则：HTML 引擎在解析时，会将连续的多个空白字符（包括空格、换行、制表符）压缩为一个单一的空格。

虽然空格和不空格近似等效，但也不能乱空格/换行，要保证代码的可读性，代码风格的统一性。

字符实体

为什么需要字符实体？

在 HTML 中，某些字符具有特殊含义，比如：

• < 和 > 用于定义标签
• " 用于定义属性值
• & 用于开始字符实体

如果你直接在 HTML 中使用这些字符，浏览器会误解你的意图。所以我们需要使用 字符实体。

字符实体的两种形式

1. 字符实体引用

使用易于记忆的名称来引用字符。
语法： &实体名称;

2. 数字字符实体

使用字符的 Unicode 码点来引用字符。
语法： &#数字; (十进制) 或 &#x十六进制; (十六进制)

常用字符实体速查表

1. HTML 特殊字符

2. 空白和标点

3. 货币符号

4. 数学符号

5. 法律和商标符号

HTML 注释

HTML 注释 不会在浏览器中显示，而是为开发者提供说明和笔记。

HTML 注释的语法

<!-- 这里是注释内容 -->
<p>这是一个段落</p>

<!-- 
  这是一个多行注释
  可以在这里写很多说明文字
  比如这个页面的功能、作者、更新时间等
-->
<p>这是一个段落</p>

<p>这是一段正常文本<!-- 这里是行内注释 -->继续的文本</p>

语法规则：

• 以 <!-- 开头
• 以 --> 结尾
• 注释内容可以包含多行文字
• 注释不能嵌套

注释的实际应用场景

1. 代码说明和文档

<!-- 
  页面头部区域
  作者：张三
  更新时间：2024-01-15
-->
<header>
  <nav><!-- 主导航菜单 --></nav>
</header>

2. 调试和临时禁用代码

<!-- 暂时隐藏这个广告横幅，稍后恢复 -->
<!--
<div class="ad-banner">
  <img src="ad.jpg" alt="广告">
</div>
-->

<!-- 调试时注释掉有问题的代码 -->
<!-- <script src="problematic-script.js"></script> -->

3. 标记代码区块

<!-- ========== 产品列表开始 ========== -->
<section id="products">
  <div class="product-item">产品1</div>
  <div class="product-item">产品2</div>
</section>
<!-- ========== 产品列表结束 ========== -->

<!-- 主导航 -->
<nav>...</nav>

<!-- 页脚内容 -->
<footer>...</footer>

4. TODO 和 FIXME 标记

<!-- TODO: 这里需要添加搜索功能 -->
<div class="search-area">
  <p>搜索功能开发中...</p>
</div>

<!-- FIXME: 图片路径需要修正 -->
<img src="temp-image.jpg" alt="临时图片">