HTML初相识：从零搭建网页结构

大家好，这里是你的HTML入门笔记。今天我们来拆解一下网页的骨架——HTML，掌握最基础的结构和标签知识。

一、HTML文档的基本骨架

一个标准的HTML文档，就像盖房子的地基和框架。在VS Code等编辑器中，输入!后按Tab或Shift + !可以快速生成这个基础结构。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

小技巧：

  • Shift + !：快速生成网页基本结构（Emmet语法）。

  • Ctrl + /：快速生成/取消注释，写代码的好帮手。

二、网页开发“三剑客”

如果把网页比作一套房子，那这三者各司其职：

角色

作用

比喻

HTML​

搭建网页结构

毛坯房 (承重墙、房间布局)

CSS​

修饰网页外观

精装修 (墙纸、地板、灯光)

JavaScript​

实现页面交互

智能家居 (开关灯、自动门)

三、标签的分类与详解

HTML的核心就是标签，我们可以从两个维度来理解它们。

1. 按形式分类

  • 双标签：有开始和结束，成对出现。

    • 语法：<标签名> 内容 </标签名>

    • 例子：<html></html>，<div></div>，<p></p>

  • 单标签 / 自结束标签：没有内容，自己就代表一个完整的元素。

    • 语法：<标签名 />或<标签名>

    • 例子：<meta>，<link>，<br>，<hr>

2. 按显示特点分类

这是前端布局中最关键的概念，决定了元素在页面上的排列方式。

类型

特点

常见标签

块级元素​

独占一行，宽度默认占满父容器；可以设置宽高；可以包裹任何其他元素。

<div>，<p>，<h1>~<h6>，<ul>，<li>

行内元素​

不独占一行，与其他行内元素排在一行；无法直接设置宽高，大小由内容撑开；一般只包裹文字或其他行内元素。

<span>，<a>，<strong>，<em>

行内块元素​

不独占一行，可以排在一行；可以设置宽高；元素之间会有天然的间隙。

<img>，<input>，<td>

补充表格：

行内块标签

不独占一行，可设置宽高，有间距

四、标签之间的关系（DOM树）

标签之间的嵌套形成了层级关系，理解这些关系对后续学习CSS选择器和JavaScript DOM操作至关重要。

  • 父子关系：一个标签直接包裹另一个标签。

    • 例：<html>是<head>的父元素。

  • 祖先后代关系：一个标签直接或间接包裹另一个标签。

    • 例：<html>是<title>的祖先元素。

  • 兄弟关系：两个标签拥有同一个直接的父元素。

    • 例：<meta>和<title>是兄弟元素（它们的共同父元素是<head>）。

五、结构嵌套规范（重要！）

虽然浏览器很宽容，但遵循规范能避免很多奇怪的布局问题。

  1. 块级元素：可以包裹任意内容（块、行内、行内块）。这是最自由的容器。

  2. 行内元素：一般只包裹文字或其他行内元素，尽量不要包裹块级元素。

  3. 特殊规则：

    • <p>标签：段落标签，内部只能放文字、行内元素或行内块元素，绝对不能包含块级元素（如<div>）。

    • <a>标签：超链接标签，可以包裹块、行内、行内块元素，让它变成一个可点击的“大按钮”。但是，<a>标签不能嵌套另一个<a>标签。

六、注释

注释是写给开发者看的，浏览器会完全忽略它。养成写注释的好习惯，能让你的代码逻辑更清晰。

<!-- 这是一个单行注释 --> <!-- 这是一个多行注释 可以写很多内容 注意：不能在注释内部再嵌套另一个注释！ -->

总结：

今天我们从HTML的骨架结构，学到了标签的分类、关系和嵌套规范。记住“三剑客”的分工，搞懂“块、行内、行内块”的区别，你就已经迈出了网页开发的第一步。

下次见！