Dark Dwarf Blog background

HTML 基础

2728 words • 14 min read views
#Frontend#HTML#Program Language

HTML 基础

1. 基本概念

HTML (HyperText Markup Language) 定义了网页的结构和内容。我们使用 HTML 元素 (Elements) 来创建构成典型网页的所有段落、标题、列表、图像和链接。

a.a. HTML 标签

HTML 标签 (Tags) 是定义网页结构和内容的基本构建块。它由如下部分组成：

  • 开标签 (Opening tags)：告诉浏览器 HTML 元素的开始。它们由尖括号 <> 中包含的关键字组成。例如：<p>。
  • 闭标签 (Closing tags)：告诉浏览器元素的结束位置。它们与开标签几乎相同，唯一的区别是在关键字前有一个正斜杠。例如：</p>。

b.b. HTML 元素

几乎 HTML 页面上的所有元素都只是包裹在开标签和闭标签中的内容片段。一个完整的元素由开标签、内容和闭标签组成。

<p>some text content</p>
  • <p> 是开标签。
  • some text content 是内容。
  • </p> 是闭标签。

使用正确的元素（语义化HTML）对于搜索引擎排名和可访问性至关重要。

c.c. 空元素

一些 HTML 元素没有闭标签，因为它们内部没有任何内容。这些元素被称为空元素。

  • 例如：<br>（换行）和 <img>（图像）。
  • 它们不能像其他标签那样包裹内容。
  • 有时会看到自闭合形式（如 <br />），但 HTML5 规范不推荐使用。

2. HTML 样板代码

所有 HTML 文档都有一个必须具备的基本结构或样板。

a.a. 基本结构

一个最小的 HTML5 文档结构如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

其中：

  • <!DOCTYPE html> 是文档类型声明，告诉浏览器使用哪个 HTML 版本来渲染文档。这是 HTML5 的声明。

  • <html> 元素是文档的根元素，所有其他元素都是它的后代。

  • lang 属性（如 lang="en"）指定了元素中文本内容的语言，有助于提高网页的可访问性。

  • <head> 元素包含了页面的元信息，这些信息不会直接显示在页面上。

  • <meta charset="UTF-8">：指定字符编码，确保特殊符号和多语言字符能正确显示。

  • <title>：定义浏览器标签页上显示的标题，如果缺失，将默认显示为文件名。

  • <body> 元素包含了所有将要显示给用户的内容，如文本、图片、列表、链接等。

3. 处理文本

a.a. 段落

浏览器会忽略 HTML 代码中的多个空格和换行符。要创建段落，必须使用 <p> 元素。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

b.b. 标题

HTML 提供六个级别的标题，从 <h1> (最重要) 到 <h6> (最不重要)。标题在视觉上更大更粗，并且具有层次结构。

<h1>页面主标题</h1>
<h2>一个次级标题</h2>

c.c. 加粗

<strong> 元素用于使文本加粗，并从语义上标记其为重要内容。屏幕阅读器可能会以不同的音调来朗读它。

<p>这是一个<strong>重要</strong>的词。</p>

d.d. 斜体

<em> 元素用于使文本变为斜体，并从语义上表示强调。

<p>这是一个需要<em>强调</em>的词。</p>

e.e. 嵌套与缩进

当一个元素包含在另一个元素内部时，它们之间形成了父子关系。

  • 父元素 (Parent)：包含其他元素的元素。
  • 子元素 (Children)：被嵌套的元素。
  • 兄弟元素 (Siblings)：在同一嵌套级别的元素。
<body> <!-- 父元素 -->
  <p>子元素1 (段落)</p> <!-- p 和 h1 是兄弟元素 -->
  <h1>子元素2 (标题)</h1>
</body>

f.f. HTML 注释

注释对浏览器不可见，用于为开发者提供代码上下文。

<!-- 这是一条注释，不会显示在页面上 -->

4. 列表

a.a. 无序列表

无序列表用于创建项目顺序不重要的列表。列表项以项目符号（bullet points）开头。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>牛奶</li>
</ul>

b.b. 有序列表

有序列表用于创建项目顺序很重要的列表，如步骤说明。列表项以数字开头。

<ol>
  <li>第一步：...</li>
  <li>第二步：...</li>
  <li>第三步：...</li>
</ol>

c.c. 列表项

<li> (list item) 元素用于定义 <ul> 和 <ol> 中的每一个列表项。

5. 链接与图片

a.a. 链接

链接（或锚点 anchor）是 HTML 的核心功能之一，使用 <a> 元素创建。它具有如下属性：

  • href 属性 (hypertext reference)：定义链接的目标地址。
  • target="_blank"：使链接在新标签页中打开。
  • rel="noopener noreferrer"：与 target="_blank" 一起使用，出于安全原因，防止新页面访问原始页面。
<a href="https://www.theodinproject.com/">访问 Odin Project</a>

<a href="https://google.com" target="_blank" rel="noopener noreferrer">在新标签页打开谷歌</a>

b.b. 绝对与相对链接

  • 绝对链接 (Absolute Links)：链接到互联网上其他网站的页面。它包含完整的协议和域名（例如 https://www.google.com/）。
  • 相对链接 (Relative Links)：链接到自己网站内部的其他页面。它只包含从当前页面到目标文件的路径。
    • about.html：链接到同一目录下的 about.html 文件。
    • ./pages/about.html：链接到当前目录下的 pages 文件夹中的 about.html 文件。
    • ../images/dog.jpg：链接到父目录下的 images 文件夹中的 dog.jpg 文件。

c.c. 图片

<img> 是一个空元素，用于在页面上嵌入图片。

  • src 属性 (source)：指定图片的路径（可以是绝对或相对路径）。
  • alt 属性 (alternative text)：提供图片的描述。如果图片无法加载，将显示此文本。这对屏幕阅读器用户至关重要。
  • width 和 height 属性：指定图片的尺寸，有助于浏览器在加载图片前预留空间，防止页面跳动。
<img src="./images/dog.jpg" alt="一只可爱的哈巴狗" width="300" height="200">

6. 表格

表格 (Tables) 用于以行和列的形式展示数据。

a.a. 基本表格结构

  • <table>：定义表格的容器。
  • <tr> (table row)：定义表格中的一行。
  • <td> (table data)：定义一个单元格。
<table>
  <tr>
    <td>单元格 1.1</td>
    <td>单元格 1.2</td>
  </tr>
  <tr>
    <td>单元格 2.1</td>
    <td>单元格 2.2</td>
  </tr>
</table>

b.b. 表格标题 (Table Headers)

<th> (table header) 元素用于定义表头单元格。浏览器通常会将其中的文本加粗并居中。这对于可访问性和SEO很重要。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

c.c. 表格的语义化结构

为了更好地组织表格，可以使用 <thead>、<tbody> 和 <tfoot> 元素。

  • <thead>：用于组合表格的头部内容。
  • <tbody>：用于组合表格的主体内容。
  • <tfoot>：用于组合表格的脚部内容。

这些元素有助于浏览器进行内部优化，并为屏幕阅读器提供更好的上下文。

<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>$1.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>$1.00</td>
    </tr>
  </tfoot>
</table>

d.d. 跨行与跨列

  • colspan 属性：使单元格水平跨越多列。
  • rowspan 属性：使单元格垂直跨越多行。
<table>
  <tr>
    <th colspan="2">姓名与年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

7. 表单 (Forms)

表单用于收集用户的输入信息，例如登录、注册或搜索。

a.a. <form> 元素

<form> 元素是所有表单控件的容器。

  • action 属性：指定当表单提交时，数据将被发送到的 URL。
  • method 属性：指定用于发送数据的 HTTP 方法，通常是 GET 或 POST。
<form action="/submit-form" method="post">
  <!-- 表单控件将放在这里 -->
</form>

b.b. 文本输入

  • <label>：为表单控件定义标签。for 属性应与控件的 id 匹配，以提高可访问性。
  • <input>：最常用的表单元素，通过 type 属性定义不同类型的输入字段。
    • type="text"：单行文本输入。
    • type="password"：密码输入，字符会被隐藏。
  • <textarea>：多行文本输入区域。
<label for="username">用户名:</label>
<input type="text" id="username" name="username">

<label for="bio">简介:</label>
<textarea id="bio" name="bio"></textarea>

c.c. 选择项

  • type="radio"：单选按钮。同一组的单选按钮必须有相同的 name 属性才能确保只能选择一个。
  • type="checkbox"：复选框，允许用户选择一个或多个选项。
<p>性别:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

<p>兴趣:</p>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">编程</label>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音乐</label>

d.d. 下拉列表

使用 <select> 创建下拉列表，<option> 定义列表中的每个选项。

<label for="car">选择一辆车:</label>
<select id="car" name="car">
  <option value="volvo">沃尔沃</option>
  <option value="saab">萨博</option>
  <option value="mercedes">梅赛德斯</option>
</select>

e.e. 按钮

  • <input type="submit">：创建一个提交按钮，用于提交表单。
  • <button> 元素：更灵活的按钮，可以包含 HTML 内容（如 <img>）。默认 type 是 submit。
<input type="submit" value="提交">

<button type="submit">
  <img src="icon.png" alt="提交图标"> 立即注册
</button>

8. 语义化 HTML

语义化 HTML (Semantic HTML) 指的是使用具有明确含义的 HTML 标签来描述内容的结构。这有助于搜索引擎、屏幕阅读器和开发者更好地理解页面。它具有如下的优点：

  • 可访问性 (Accessibility)：屏幕阅读器可以根据标签的语义（如 <nav>、<main>）为视障用户提供更好的导航。
  • SEO (搜索引擎优化)：搜索引擎可以更好地理解页面内容的主次关系，从而提高排名。
  • 可维护性：代码结构清晰，易于开发者阅读和维护。

a.a. 常见的布局元素

HTML5 引入了许多用于页面布局的语义化标签，以替代通用的 <div>。

  • <header>：定义文档或区域的页眉，通常包含标题、logo、导航等。
  • <nav>：定义导航链接的区域。
  • <main>：定义页面的主要内容，每个页面应该只有一个 <main>。
  • <footer>：定义文档或区域的页脚，通常包含版权信息、联系方式等。
<body>
  <header>
    <h1>我的网站</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  </header>
  
  <main>
    <p>这里是主要内容...</p>
  </main>
  
  <footer>
    <p>&copy; 2025 我的网站</p>
  </footer>
</body>

b.b. 内容组织元素

  • <article>：定义独立的、自包含的内容，如博客文章、新闻报道。
  • <section>：定义文档中的一个区域或章节，通常带有一个标题。
  • <aside>：定义与主要内容相关性较低的侧边栏内容，如广告、相关链接。
  • <figure> 和 <figcaption>：figure 用于包裹图片、图表等，figcaption 为其提供标题。
<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
  
  <section>
    <h3>相关评论</h3>
    <p>评论内容...</p>
  </section>
</article>

<aside>
  <h3>相关阅读</h3>
  <ul>
    <li><a href="#">链接1</a></li>
  </ul>
</aside>

<figure>
  <img src="chart.png" alt="数据图表">
  <figcaption>图1：年度增长图</figcaption>
</figure>