零基础玩转HTML：核心标签与页面构建

HTML作为前端开发的入门基石，是每一个想走进网页开发世界的开发者都绕不开的必修课。它看似只是由一个个简单标签组成的标记语言，却能搭建起所有网页的核心骨架。最近重新梳理了HTML的基础知识点，从页面结构到常用标签，把最核心、最实用的内容整理成了这篇笔记，无论是纯新手还是想巩固基础的小伙伴，都能快速上手掌握。

🔹 一、HTML基础：网页的骨架

HTML（HyperText Markup Language）是构建网页的标准标记语言，它不是编程语言，而是由一系列标签组成的标记语言。一个标准的HTML页面结构通常包含以下几个核心部分：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>这是我的第一篇HTML练习。</p>
</body>
</html>
• <!DOCTYPE html>：声明文档类型，告诉浏览器这是HTML5文档

• <html>：根标签，所有其他标签都包含在其中

• <head>：头部标签，包含网页的元信息，如字符编码、页面标题等

• <title>：定义网页标题，显示在浏览器标签上

• <body>：主体标签，包含所有可见的网页内容

🔹 二、常用标签详解

标题与段落

• 标题标签：从<h1>到<h6>，字号依次递减，<h1>通常用于页面主标题

• 段落标签：<p>用来定义一个段落，浏览器会自动在段落前后添加空白行
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<p>这是一个段落，用来展示一段完整的文字内容。</p>
2. 超链接：网页的灵魂

超链接用<a>标签实现，核心属性是href，用来指定跳转的目标地址。
<a href="https://www.example.com" target="_blank">
点击跳转到示例网站
</a>
• target="_blank"：让链接在新窗口打开，避免用户离开当前页面

• href的值可以是网址、本地文件路径，甚至是邮箱地址（mailto:）

注释标签

注释不会在页面显示，但对维护代码非常重要。用来添加。

🔹 三、字体格式与美化

基础文本格式化

• <strong>：加粗文本

• <em>：斜体文本

• <u>：下划线文本

• <del>：删除线文本
<p>这是<strong>加粗</strong>的文字，这是<em>斜体</em>的文字。</p>
2. 字体大小与颜色

可以通过style属性直接设置字体的大小、颜色等样式。
<p style="font-size:24px; color:#ff0000;">
这是24号大小的红色文字
</p>
• 颜色值：可以用十六进制（如#ff0000）、RGB值（如rgb(255,0,0)），或者直接写颜色名（如red）

• 字体单位：常用px（像素）、em（相对单位），也可以用pt（磅）

🔹 四、多媒体元素：让网页更生动

图片标签（img）

用<img>插入图片，必须包含src（路径）和alt（替代文本）。
<img src="logo.png" alt="网站Logo" width="200">
• src：图片的路径，可以是本地或网络地址

• alt：图片加载失败时显示的文字，对无障碍和SEO都很重要

• width/height：设置图片尺寸，建议只设一个保持比例

音频标签（audio）

在网页中嵌入音频，支持mp3、wav等格式。
<audio src="music.mp3" controls>
您的浏览器不支持音频播放
• controls：显示播放控件

• autoplay：自动播放（部分浏览器会阻止）

• loop：循环播放

视频标签（video）

嵌入视频的方式和音频类似，支持mp4、webm等格式。
<video src="video.mp4" controls width="600">
您的浏览器不支持视频播放
</video>

🔹 五、容器与布局

div标签：通用容器

<div>是块级元素，常用于组合其他HTML元素，进行布局划分。
<div style="background-color:lightgray; padding:20px;">
<h2>这是一个容器</h2>
<p>容器里的内容</p>
</div>
2. 表格标签

使用<table>、<tr>、<td>等标签创建表格。
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

🔹 六、我的学习心得

语义化优先：尽量使用合适的标签表达内容含义，如<header>、<nav>、<article>，让代码更易读，SEO更友好
多动手实践：哪怕只是写一个简单的页面，也比只看教程有用
善用开发者工具：按F12打开浏览器调试工具，实时看效果
结合CSS学习：HTML负责结构，CSS负责美化，两者结合才能做出好看的页面

HTML作为前端的入门语言，看似简单，但打好基础才能走得更远。希望这篇笔记能帮到和我一样的初学者，我们一起进步！