HTML基础详解：从Web标准到表格标签的完整入门指南

认识Web与浏览器内核

网页主要由文字、图像和超链接等元素构成，此外还可以包含音频、视频以及Flash等多媒体内容。浏览器是网页显示和运行的平台，其内核（又称排版引擎、解释引擎或渲染引擎）负责读取网页内容、整理信息、计算显示方式并最终呈现页面。

不同浏览器使用不同的内核，常见对应关系如下：

• IE：Trident 内核，也被猎豹安全、360极速浏览器、百度浏览器等使用。
• Firefox：Gecko 内核，曾广泛使用，但近年因打开速度慢、升级频繁等原因逐渐没落。
• Safari：WebKit 内核，常被误认为是 Chrome 内核，实际上 Chrome 已转向 Blink。
• Chrome：Chromium/Blink 内核，Blink 是 WebKit 的分支，大部分国产浏览器最新版均采用此内核进行二次开发。
• Opera：现跟随 Chrome 使用 Blink 内核。

Web标准及其构成

Web标准由以下三部分构成：

• 结构标准（HTML）：用于对网页元素进行整理和分类。
• 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观属性。
• 行为标准（JavaScript）：用于定义网页模型及交互行为。

遵循 Web 标准具有以下优点：

• 易于维护：只需更改 CSS 文件即可改变整站样式。
• 页面响应快：HTML 文档体积变小，响应时间缩短。
• 可访问性：语义化的 HTML 更容易被屏幕阅读器识别。
• 设备兼容性：不同样式表可让网页在不同设备上呈现不同样式。
• 搜索引擎优化：语义化 HTML 更容易被搜索引擎解析，有助于提升排名。

HTML初识

HTML（Hyper Text Markup Language）即超文本标记语言。所谓“超文本”包含两层含义：一是可以加入图片、声音、动画、多媒体等内容，超越文本限制；二是可以从一个文件跳转到另一个文件，与世界各地主机的文件建立超链接。

HTML骨架格式

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>
        <!-- 标题标签 -->
        <title></title>
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

团队约定：HTML 标签名、类名、标签属性和大部分属性值统一使用小写。

HTML元素标签分类

• 常规元素（双标签）：如 <body>我是文字</body>，包含开始标签和结束标签。
• 空元素（单标签）：如 <br /> 或 <br>，无需结束标签。

HTML标签关系

• 嵌套关系（父子级包含关系）：子元素最好缩进一个 Tab 键的位置（通常为 4 个空格）。
• 并列关系（兄弟级并列关系）：标签上下对齐。

文档类型与页面语言

文档类型声明 <!DOCTYPE> 用于说明 HTML 或 XHTML 的版本，并告知浏览器按照 HTML5 标准解析页面。页面语言通过 lang 属性指定，例如 <html lang="en"> 表示英语，<html lang="zh-CN"> 表示中文。其作用包括：设定 CSS 样式或字体、帮助搜索引擎精确识别、辅助语法检查程序、翻译工具和网页阅读程序进行语言识别。

字符集

字符集（Character Set）是多个字符的集合，计算机通过字符编码来识别和存储各种文字。UTF-8 是目前最常用的字符集编码方式，HTML 文件应以 UTF-8 编码保存，浏览器据此解码页面内容。设置方式如下：

<meta charset="UTF-8" />

meta viewport 与 meta 属性

viewport 指浏览器（或 WebView）中用于显示网页的区域。移动端与 PC 端的视口不同，移动端包含布局视口、视觉视口和理想视口三个概念。meta 标签有两个重要属性：name 和 http-equiv。

name 属性的常见取值包括：

• keywords：告诉搜索引擎网页的关键字。
• description：描述网站主要内容。
• viewport：移动端窗口设置。
• robots：定义搜索引擎爬虫的索引方式。
• author：作者信息。
• generator：网页制作软件。
• copyright：版权信息。

http-equiv 相当于 HTTP 文件头的作用，可向浏览器传递有用信息以帮助正确显示网页内容。常见参数包括：

• content-Type：设定网页字符集（HTML4 用法，不推荐）。
• Expires：设定网页到期时间，过期后需重新从服务器获取。
• Pragma：禁止浏览器从本地缓存调阅页面内容。
• Refresh：自动刷新并跳转到新页面。
• cache-control：指定请求和响应遵循的缓存机制。

一个典型的 meta 配置示例：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML标签的语义化

语义化 HTML 具有以下好处：方便代码阅读和维护，样式丢失时页面仍能呈现清晰结构；有利于 SEO，搜索引擎根据标签确定上下文和关键字权重；方便其他设备解析，如盲人阅读器可根据语义渲染网页。

base 标签

<base> 标签用于规定页面上所有链接的默认 URL 和整体链接的打开方式。示例：

<head>
    <base href="http://www.baidu.com" target="_blank">
</head>
<body>
    <a href="">测试</a> 跳转到百度
</body>

HTML常用标签

1. 排版标签

排版标签主要与 CSS 搭配使用，用于显示网页结构，是布局中最常用的标签。

• 标题标签：h1 至 h6。
• 段落标签：p，将文档分割为若干段落。
• 水平线标签：hr。
• 换行标签：br。
• div 和 span：无语义标签，是网页布局中最重要的两个盒子。

2. 文本格式化标签

• b 和 strong：文字粗体显示。
• i 和 em：文字斜体显示。
• s 和 del：文字加删除线。
• u 和 ins：文字加下划线。

3. 标签属性（行内式）

通过属性可以为 HTML 标签提供更多信息，基本语法为：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

注意事项：标签可拥有多个属性，必须写在开始标签中；属性之间不分先后顺序，以空格分隔；采用键值对格式，如 key="value"。

4. 图像标签 img

图像标签用于在网页中嵌入图片，常用属性包括 src（图片路径）、width、height、border、title（鼠标悬停提示）等。示例：

<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />

5. 链接标签

链接标签用于创建超链接，基本语法：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

target 属性取值：_self 为默认值，在当前窗口打开；_blank 在新窗口打开。

src 与 href 的区别：src 用于替换当前元素，指向外部资源并嵌入文档中，如 js、img 等，浏览器解析时会暂停其他资源下载；href 用于建立当前文档与引用资源之间的联系，如 CSS 文件，浏览器会并行下载且不停止处理当前文档。

链接使用注意事项：

• 外部链接需添加 http:// 或 https:// 协议前缀。
• 内部链接直接链接内部页面名称，如 <a href="index.html">首页</a>。
• 未确定链接目标时，可将 href 设为 #，表示空链接。
• 图像、表格、音频、视频等元素均可添加超链接。

锚点定位：通过创建锚点链接，用户可快速定位到目标内容。实现方法：

<h3>第2集</h3>
<a href="#two">跳转到第2集</a>

6. 注释标签

<!-- 注释语句 -->

快捷键：Ctrl + / 或 Ctrl + Shift + /。团队约定：注释内容前后各留一个空格，注释位于被注释代码上方且单独占一行。

7. 路径

路径分为相对路径和绝对路径。相对路径是相对于当前文件的路径，绝对路径是从根目录开始的完整路径。在网页开发中，通常使用相对路径引用本地资源。

8. 其他知识

预格式化文本 pre：<pre> 标签会保留文本中的空格和换行符，并以等宽字体显示，适合展示代码或预排版的文本。

特殊字符：在 HTML 中，某些字符具有特殊含义，需使用实体字符表示，例如 < 表示小于号 <，> 表示大于号 >，  表示不换行空格等。

XHTML 简介

XHTML（可扩展超文本标记语言）是更严格、更纯净的 HTML 版本，目标在于取代 HTML。它与 HTML 4.01 几乎相同，但要求标签必须小写、正确关闭、顺序正确，属性必须使用双引号。XHTML 是 W3C 标准。

编写 HTML 代码的注意事项

• 尽可能少用无语义的 div 和 span。
• 语义不明显时，优先使用 p 而非 div，因为 p 默认有上下间距，对特殊终端更友好。
• 不使用纯样式标签（如 b、font、u），改用 CSS 设置。
• 强调文本使用 strong 或 em，而非 b 或 i。
• 表格需使用 caption 作为标题，thead、tbody、tfoot 划分结构，表头用 th，单元格用 td。
• 表单域用 fieldset 包裹，并用 legend 说明用途；每个 input 标签需配合 label 使用，通过 for 和 id 关联。

表格标签

表格标签用于显示和展示表格式数据，使数据规整、可读性好，尤其适合后台数据展示。

创建表格

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table、tr、td 是创建表格的基本标签，缺一不可：

• table：定义表格。
• tr：定义表格中的行，必须嵌套在 table 内。
• td：定义单元格，必须嵌套在 tr 内，可容纳所有元素。

表头单元格 th

表头单元格通常位于表格第一行或第一列，文本默认加粗居中，使用 th 标签替代 td 即可。

表格标题 caption

caption 标签定义表格标题，通常居中显示于表格上方，必须紧随 table 标签之后。示例：

<table>
   <caption>我是表格标题</caption>
</table>

表格属性

常用表格属性包括 border（边框）、cellpadding（单元格内边距）、cellspacing（单元格间距）等。实际开发中，这三个参数常设为 0，即“三参为0”。

合并单元格

合并顺序遵循“先上后下、先左后右”的原则，合并后需删除多余的单元格。

• 跨行合并：rowspan="合并单元格的个数"
• 跨列合并：colspan="合并单元格的个数"

表格标签总结

表格划分结构

复杂表格可分割为三个部分：thead（表头）、tbody（主体）、tfoot（表尾），以便更好地分清结构。注意：thead 内部必须包含 tr 标签，所有结构标签均需放在 table 内。

总结

本文详细介绍了 HTML 的基础知识，包括 Web 标准、浏览器内核、HTML 骨架结构、常用标签、属性用法、路径与表格等核心内容。掌握这些基础是前端开发的重要一步，后续可进一步学习 CSS 和 JavaScript 以构建完整的网页应用。