HTML 基础笔记：网页的骨架

#HTML#前端基础#学习笔记

什么是 HTML

HTML（HyperText Markup Language，超文本标记语言）是网页的骨架。 它用一系列标签来定义网页的结构和内容。

基本结构

每个 HTML 页面都有以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>页面标题</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>
  • <!DOCTYPE html> — 声明这是一个 HTML5 文档
  • <html> — 根元素，lang 属性指定语言
  • <head> — 元信息（不显示在页面上）
  • <body> — 页面可见内容

常用标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

段落和文本

<p>这是一个段落</p>
<strong>加粗文本</strong>
<em>斜体文本</em>

链接和图片

<a href="https://example.com">这是一个链接</a>
<img src="image.jpg" alt="图片描述" />

列表

<!-- 无序列表 -->
<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

语义化标签

HTML5 引入了语义化标签，让页面结构更清晰：

标签用途
<header>页面或区块头部
<nav>导航栏
<main>主要内容
<article>独立文章内容
<footer>页面或区块底部

小提示：使用语义化标签不仅让代码更易读，对 SEO 和无障碍访问也有帮助。

学习建议

  1. 先掌握常用标签的用法
  2. 理解文档结构的概念
  3. 多写多练，动手敲代码
  4. 不要死记硬背，用的时候查文档就好

下一篇笔记会整理 CSS 的基础知识，敬请期待！