新手小白学前端day1前言：我让cursor帮我"整理一个新手自学前端的学习路线", 它帮我制定了详细的学习计划。接下

前言：我让cursor帮我"整理一个新手自学前端的学习路线", 它帮我制定了详细的学习计划。接下来介绍下Day1的学习内容:

Day 1 ### （HTML 结构）

学习：HTML 语义化标签（header/main/section/article/footer）、页面结构
实战：做一个“个人介绍页”（含头图、介绍、联系方式）
目标：完成一个语义化个人主页，不追求花哨样式，先把结构打稳。
验收：手机和电脑都能正常显示

Day1 照单执行版（2小时）

目标：完成一个语义化个人主页，不追求花哨样式，先把结构打稳。

0）准备（10分钟）

新建目录：week1-day1-profile-page
新建文件：index.html
初始化 git：git init
第一次提交（空项目也行）：chore: init day1 project

1）任务清单（70分钟）

任务A：页面骨架

必须包含这些语义标签：

header：站点标题 + 导航
main：主体内容
section（至少3个）：自我介绍、技能、项目
footer：联系方式/版权

验收：

不看样式只看 HTML，也能知道页面结构和内容层级。

任务B：导航与锚点

nav 内放 3-4 个链接
每个链接跳到对应 section（锚点）

验收：

点击导航能跳转到正确区块。

任务C：个人信息与列表

个人信息区：头像、姓名、简介
技能区：用 ul/li
项目区：至少 2 个项目卡片（标题+描述+链接）

验收：

列表语义正确，不要用 div 假装列表。

任务D：联系表单（基础）

使用 form
字段：姓名、邮箱、留言
至少一个必填（required）

验收：

空提交时浏览器能拦截并提示。

2）最低样式（20分钟）

只做这 5 件事：

全局字体和行高
主体宽度（如 max-width + 居中）
section 间距
卡片边框/圆角
按钮基础样式

验收：

页面可读、间距舒服，不追求精致 UI。

3）自测清单（10分钟）

逐条过一遍：

是否只有一个 h1
标题层级是否连续（h1 -> h2）
图片是否有 alt
表单是否有关联 label
链接文字是否有意义（避免“点这里”）
页面语言是否设置 <html lang="zh-CN">
是否设置 <meta charset="UTF-8"> 和 viewport

4）提交规范（10分钟）

建议两次提交：

feat: build semantic profile page structure
style: add basic readable layout styles

Day1 常见错误检查表（重点）

用一堆 div，不用语义标签
一个页面多个 h1
label 没有绑定输入框
锚点写了但 id 不匹配
图片没 alt
直接复制模板但自己讲不清结构

Day1 完成标准（通过线）

满足这 4 条就算过关：

语义标签完整（header/main/section/footer）
有可用导航锚点
有基础表单校验
有一次以上 git 提交

每日打卡模板

今日学习：语义标签
今日实现：个人主页html
遇到问题：
- 什么是语义标签？
- 为什么要用语义标签？
- 这些在现代前端页面开发中还用得到吗？现在基本上都是用框架，比如vue/react
- 什么是页眉？
- 什么是锚点？
- 为啥喵点没有效果？
- 如何设置全局字体和行高？
- 如何设置主体宽度（如 max-width + 居中）
- 如何设置section间距？
- 卡片边框/圆角
如何解决：
明日计划：
今日耗时：

遇到的问题

1. 什么是语义标签？

语义标签是指那些能清晰描述自身内容含义的 HTML元素。它们不仅告诉浏览器“这是一个盒子”，更告诉浏览器（搜索引擎、屏幕阅读器）这个盒子里面的内容是什么、起什么作用。

对比：非语义 vs 语义

非语义（只是容器）	语义（有含义）
`<div>` – 无任何含义，只是块级容器	`<header>` – 表示页眉（logo、导航、标题区）
`<span>` – 行内容器，无含义	`<nav>` – 导航链接区域
无	`<main>` – 页面主要内容（一个页面只有一个）
无	`<article>` – 独立的文章或内容块
无	`<section>` – 文档中的一节（有主题的分组）
无	`<aside>` – 侧边栏、补充信息
无	`<footer>` – 页脚（版权、作者信息）

一个简单的语义化个人主页结构示例

<body>
  <header>
    <h1>张三的个人主页</h1>
    <nav>
      <ul>
        <li><a href="#about">关于</a></li>
        <li><a href="#projects">项目</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>关于我</h2>
      <p>我是一名前端学习者，热爱...</p>
    </section>

    <section id="projects">
      <h2>我的项目</h2>
      <article>
        <h3>项目1：记账本</h3>
        <p>一个简单的记账应用...</p>
      </article>
      <article>
        <h3>项目2：待办清单</h3>
        <p>支持标签筛选的待办工具...</p>
      </article>
    </section>
  </main>

  <aside>
    <h3>技能标签</h3>
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript</li>
    </ul>
  </aside>

  <footer>
    <p>© 2025 张三 | 联系方式: <a href="mailto:zhang@example.com">zhang@example.com</a></p>
  </footer>
</body>

2.为什么要用语义标签？

之前稍微看过一点vue的东西，你会发现组件template里基本上看不到这些标签，一般是各种div，学这些是不是有点过时了呢？

其实是因为现在是从“手动写”变成了“组件产出的基础结构”。无论是 Vue 还是 React，最终渲染到浏览器的依然是 HTML。你写的组件模板，最终都会变成真实的 DOM 节点。使用语义标签，是让这个 DOM 树具有可读性。

实际场景：Vue 组件中使用语义标签

<template>
  <article class="blog-post">   <!-- ✅ 语义 -->
    <header>
      <h1>{{ title }}</h1>
      <div class="meta">作者：{{ author }}</div>
    </header>
    <section v-html="content"></section>
    <footer>
      <a :href="`/posts/${id}`">阅读全文</a>
    </footer>
  </article>
</template>

如果全部换成 <div>：

<div class="blog-post">   <!-- ❌ 无语义 -->
  <div class="header">...</div>
  <div class="body">...</div>
  <div class="footer">...</div>
</div>

两者视觉效果一样，但：

搜索引擎理解前者是“一篇文章”，有标题区、正文区、页脚；后者只是一堆没有结构的 div。
屏幕阅读器用户可以利用快捷键直接跳转到 <article> 或 <header>，提高可访问性。

为什么感觉“用不上”？—— 框架可能隐藏了它们

原因1：组件库封装

很多 UI 组件库（如 Ant Design、Element Plus）的内部组件会产出语义标签。例如 <a-layout-header> 最终渲染的就是 <header>。你虽然没直接写 <header>，但框架底层依然在使用。

原因2：CSS 框架（如 Tailwind）的类名掩盖了标签

在 Tailwind 流行的项目中，开发者习惯写 <div class="flex ...">，而很少主动使用 <nav>。这是可以改进的地方——你依然可以用 <nav class="flex ..."> 来保持语义。

原因3：单页面应用（SPA）的初始 HTML 可能只有一个 `<div id="app">`

Vue/React 通常挂载到一个空的 <div id="app">，所有内容由 JS 动态生成。这导致搜索引擎爬虫可能看不到完整的语义结构（除非做 SSR 或预渲染）。因此，对于需要 SEO 的页面（如博客、电商），推荐使用 Nuxt/Vue 或 Next/React 进行服务端渲染，而在这些 SSR 框架中，语义标签依然非常重要。

为什么要用语义标签？

SEO（搜索引擎优化）：搜索引擎能更好地理解页面结构，知道哪里是主要内容、哪里是导航，有助于提升排名。
无障碍（a11y）：屏幕阅读器等辅助设备依赖语义标签来导航，帮助视障用户理解页面。
代码可读性：自己和他人阅读代码时，一眼就能看出区块的作用，比全是 <div> 更容易维护。
未来兼容：语义标签是 HTML5 标准的一部分，浏览器会持续支持。

3. 什么是页眉（Header）？

页眉是网页顶部的一个区域，通常包含网站的品牌标识（Logo）、网站名称、主导航菜单，有时还会有搜索框、用户登录入口等。

它的作用是：让用户一眼知道“我在哪个网站”，并能快速跳转到网站的主要栏目。

3.1 页眉 vs 头部（`<head>`）的区别

很多新手容易混淆这两个概念：

概念	位置	内容	用户是否可见
页眉（`<header>`）	页面主体的顶部区域	Logo、导航栏、标题等	✅ 可见
头部（`<head>`）	HTML 文档的元数据区	字符集、标题、CSS链接、SEO信息等	❌ 不可见（除标题栏）

简单记忆：<head> 是写给浏览器和搜索引擎看的，<header> 是写给用户看的。

3.2 HTML 中的语义标签 `<header>`

<header> 是 HTML5 引入的语义标签，用来表示一组介绍性或导航性的内容。

常见用法：

作为整个页面的页眉（通常放在 <body> 开头）：

<body>
  <header>
    <h1>我的个人主页</h1>
    <nav>
      <a href="#about">关于</a>
      <a href="#projects">项目</a>
      <a href="#contact">联系</a>
    </nav>
  </header>
  <!-- 其他内容 -->
</body>

作为某个区块的页眉（比如 <article> 或 <section> 的标题区）：

<article>
  <header>
    <h2>文章标题</h2>
    <p>发布时间：2025-01-01</p>
  </header>
  <p>文章正文...</p>
</article>

3.3 页眉通常包含什么？

对于个人主页，一个简单的页眉可以包括：

你的名字（用 <h1> 或 <span>）
导航链接（用 <nav> + <a>）：比如“关于我”、“项目”、“联系”

示例：

<header>
  <h1>李小明的学习笔记</h1>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
    <a href="/projects">项目</a>
  </nav>
</header>

3.4 页眉在页面布局中的位置

通常页眉位于页面最上方，紧接着 <body> 开始标签。下面是一个典型的语义化个人主页结构：

<body>
  <header>页眉区</header>
  <main>主要内容区</main>
  <footer>页脚区</footer>
</body>

有了页眉，用户进入你的网站就能立刻知道这是谁的网站，以及如何浏览其他页面。没有页眉，用户可能会感到迷失。

3.5 总结

页眉 = 网页顶部的标识 + 导航区域，用户可见。
用 <header> 标签包裹，语义清晰。
对于个人主页，最简单的页眉只需要名字 + 几个导航链接。

新手小白学前端day1