跳转至

2.0 HTML

Purpose of HTML

HTML（Hyper Text Markup Language）描述了网页的 semantic content（语义内容）以及内容之间的 logical relationships（逻辑关系）。它最初由 Tim Berners-Lee 于 1990 年定义为 SGML 的一种类型。Hypertext（超文本）是 Web 的一个关键卖点。

HTML philosophy

HTML5 于 2008 年发布，是一次重大的修订。HTML5 的哲学包括：

  • Interoperability（互操作性）：应能在多种浏览器上呈现。
  • Graceful error recovery（优雅的错误恢复）：小错误不应阻止页面渲染。
  • Backwards compatible（向后兼容）：新特性不应破坏现有网页。
  • Prioritise users（用户优先）：用户 > 网页设计者 > 浏览器实现者 > 理论家。
  • Separation of concerns（关注点分离）：描述信息的类型，而不是其显示方式。

值得注意的是，为了符合 HTML5 哲学，网页浏览器渲染器非常宽松。浏览器会忽略未识别的标签、换行符、制表符、多个空格。甚至可以不需要 <htm>, <head>, <body> 等关键文档标签，以及匹配的开闭标签（尽管强烈建议匹配，因为这是 bugs 的简单来源）。标签更像是对浏览器的建议，甚至可能被忽略。

HTML Document Structure Mapping

一个 HTML 文档由 elements（元素）组成。一个元素通常由 opening and closing tags（开闭标签）及其之间的 content（内容）构成。元素的内容可以包含其他元素。因此，HTML 文档是一个 tree data structure（树形数据结构）。

HTML5 文档通常以 <!DOCTYPE html> 声明开始。文档的 root（根）是 <html> 标签。文档包含 <head> 和 <body>。<title> 标签用于为文档设置标题，通常显示在浏览器窗口的标题栏中。Visible elements（可见元素）位于 <body> 分支上。

例如：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Main Heading</h1>
    <p>Some content.</p>
</body>
</html>

Common HTML Elements and Attributes

以下是一些常见的 HTML 元素及其目的和属性：

  • Text Elements

（文本元素）：

  • Headings: <h1>, <h2>, <h3>, <h4> 等用于定义不同级别的标题。
  • Paragraphs: <p> 用于定义段落。
  • Code: <code> 用于表示代码片段。
  • Emphasis: <em> 用于表示强调文本。 这些元素可以嵌套。特殊字符使用 &…; 表示。
  • Attributes（属性）：所有 HTML 标签都可以有一系列属性，它们出现在开闭标签的名称和右括号之间。
  • Images（图像）：使用 <img/> 标签插入图像，需要 src 属性指定图像源。alt 属性提供替代文本，用于图像无法显示或屏幕阅读器。 例如：<img src="logo.png" alt="Company Logo"/>
  • Lists

（列表）：

  • Ordered List（有序列表）：使用 <ol> 标签。type 属性可以改变列表标记（如字母）。
  • Unordered List（无序列表）：使用 <ul> 标签。type 属性可以改变列表标记（如方形）。
  • List Items: 列表项使用 <li> 标签作为 <ol> 或 <ul> 的内容。 例如：
<ol type="A">
    <li>First item</li>
    <li>Second item</li>
</ol>
<ul>
    <li>Item A</li>
    <li>Item B</li>
</ul>
  • Tables

（表格）：使用 

<table>

标签定义表格。每行使用 

<tr>

。行标题使用 

<th>

。数据单元格使用 

<td>

。 例如：

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

表格属性包括 

cellspacing

（设置单元格间距）、

cellpadding

（设置单元格内容与内壁的间距）和 

border

（设置单元格边框宽度，没有则无可见边框）。

重要提示

非常不建议使用无边框表格进行网页布局，因为它违反语义意图（屏幕阅读器会将其读作表格）、浏览器可能仍然将其渲染为表格、难以维护且渲染速度慢。

  • Hypertext Links（超文本链接）：使用 <a> (anchor) 标签创建链接，需要 href (hypertext reference) 属性指定链接目标。<a> 标签的内容是文档中的可见链接（可以是文本、图像等）。 例如：<a href="https://www.example.com">Visit Example</a> 链接可以在同一页面或同一网站内使用 relative addressing（相对地址），而不是 absolute addressing（绝对地址）。可以通过 id 属性链接到同一文档中的元素。链接可以指向任何文件，不限于 HTML。 例如（链接到同一页面内的元素）：<a href="#section2">Go to Section 2</a> (假设页面中有 <h2 id="section2">)
  • Grouping Elements

（分组元素）：

  • <span>: 用于分组 inline content（行内内容），如句子中的单词。默认不渲染。
  • <div>: 用于分组 multi-line block（多行块）内容，如多个段落或图像。默认不渲染。 这些元素通常用于共同格式化或框选元素。
  • Advanced Layout Elements

（高级布局元素）：HTML5 引入了一些具有语义目的的布局元素。

  • <canvas>: 创建一个矩形区域，可以使用 JavaScript 绘制位图图形，用于创建交互式动画和游戏。
  • <header>: 包含章节或页面的介绍性信息。
  • <nav>: 用于包含文档导航链接的部分。
  • <section>: 代表通用的文档或应用部分，类似于 <div>。
  • <article>: 代表页面中可独立存在的部分，如博客文章或论坛条目。
  • <aside>: 代表与文档主要区域相关的内容，通常在侧边栏中（如相关文章、标签云）。
  • <footer>: 用于标记当前页面或页面中每个章节的页脚。

HTML Forms, Input Types, and Submission

<form> 元素是获取浏览器信息发送到服务器的标准方式。在 <form> 内，可以使用 <input> 元素自动创建用于收集信息的控件（如文本框、单选按钮、复选框）。<input> 元素可以使用 <fieldset> 元素分组。可以使用 <label> 元素为 <input> 创建标签，并通过 for 属性与对应 <input> 的 id 属性链接。

Input Type Attributes（输入类型属性）： <input> 元素的 type 属性决定了它如何渲染。常见的类型有：button, checkbox, color, date, email, file, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week 等。 其他输入属性包括：

  • value: 设置输入的初始值。
  • readonly: 意味着用户不能编辑它。
  • placeholder: 提供输入值类型的提示。
  • required: 强制用户输入值。 许多属性依赖于使用的类型，例如 autocomplete, min, max。使用正确的 semantic input type（语义输入类型）可以方便用户，例如，使用 email, url, tel 而非纯文本时，屏幕键盘会相应改变。

Form Submission（表单提交）： 表单有一个特殊的输入类型 submit，它生成一个提交按钮。当点击表单的提交按钮时，表单的当前值会发送到 action 属性指定的服务器 URL。每个输入的值作为 key-value pair（键值对）发送，其中 key 是 name 属性的值。<form> 标签上的 method 属性决定了传输值的协议。

  • get 方法将表单值附加到服务器请求的 URL 中。
  • post 方法则将值编码在服务器请求的 body 中。

例如，一个使用 get 方法的表单：

<form action="/action_page.php" method="get">
  <label for="mail">Email:</label>
  <input type="email" id="mail" name="my-mail">
  <input type="submit" value="Submit">
</form>

提交后可能会发送请求 /action_page.php?my-mail=whiskers@gmail.com。

HTML Form Validation

确保用户在表单中输入有效数据有两种主要方法：

  1. Native HTML validation

（原生 HTML 验证）：

  • 对 email, url, tel 输入类型提供自动基本验证。
  • 提供各种依赖于类型的验证属性：
    • 对于数字输入 (number, range)：max, min, step。
    • 对于文本输入 (text, email, search, url, tel, password)：maxlength, pattern。
  1. JavaScript validation

（JavaScript 验证）：

  • 在浏览器中使用 JavaScript 编写代码来检查输入，这更灵活。

重要提示：Client-side validation（客户端验证），无论使用哪种方法，都非常容易绕过。因此，始终也要在服务器端验证您的值。