HTML Notes

HTML 基础笔记

HTML 负责网页的内容和结构。做个人主页时，我用 HTML 搭出了导航栏、首页区域、项目卡片、时间线和学习笔记页面。

HTML 是什么

HTML 的全称是 HyperText Markup Language，也就是超文本标记语言。它不是编程语言，而是一种用标签描述网页内容结构的标记语言。

简单理解：HTML 负责告诉浏览器“页面里有什么”。比如标题、段落、图片、链接、按钮、列表、导航、文章区域等。

基础页面结构

一个最基础的 HTML 页面通常长这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>我的网页</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>你好，世界</h1>
</body>
</html>

head：放网页信息，比如标题、编码、CSS 引入。
body：放用户真正能看到的页面内容。
meta viewport：让网页在手机端显示更正常。

常用标签

文本标签

<h1> 到 <h6> 是标题，<p> 是段落。

链接和图片

<a> 用来跳转链接，<img> 用来显示图片。

列表

<ul> 是无序列表，<li> 是列表项。

语义化结构

语义化标签能让页面结构更清楚，也更利于后期维护。我现在的个人主页已经用了这些：

<header>：页面顶部区域。
<nav>：导航栏。
<main>：页面主体。
<section>：页面中的一个独立内容区。
<article>：适合项目卡片、文章卡片这类独立内容。
<footer>：页面底部。

我在个人主页里用到的 HTML

这次项目里，HTML 主要负责这些结构：

导航栏

用 header + nav 组织顶部导航和设置按钮。

首页 Hero

用 section 分出首页大区域，里面再分左右内容。

项目和笔记卡片

用 article 表示每个独立项目或笔记入口。