前端学习打卡 Day1：从0到1认识前端与HTML基础结构
一、今日学习目标
理解前端的核心概念、技术体系与作用；掌握前端开发必备工具：编辑器、浏览器；理解 HTML 是什么、作用、特点；掌握 HTML 标签结构、分类、常用基础标签；熟练编写 HTML5 标准页面骨架并理解每一行含义完成人物介绍页面实战练习，巩固当日知识点。
二、今日学习内容详解
1. 什么是前端？
前端是Web 开发的客户端呈现层，指用户在浏览器、手机、平板上能直接看到、点击、交互的所有界面。它负责页面结构、样式展示、交互响应，是前后端分离项目中必不可少的一环。
前端三大核心技术：
- HTML：负责搭建页面结构（骨架）
- CSS：负责页面样式与布局（外观）
- JavaScript：负责页面交互与逻辑（行为）
2. 前端开发必备工具
前端开发不需要复杂环境，只需要两个工具：
代码编辑器作用：编写 HTML / CSS / JS 代码常用：VS Code、WebStorm、Trae（AI 辅助）
浏览器作用：运行页面、预览效果、调试代码；推荐：Chrome、Edge
3. 什么是 HTML？
HTML 全称：HyperText Markup Language（超文本标记语言）
- HTML不是编程语言，没有逻辑、循环、判断
- HTML 是一套标记标签语言，用来描述网页结构
- 所有网页的文字、标题、图片、按钮，都由 HTML 标签构成
一句话总结：HTML = 网页的骨架。
4. HTML 标签的组成与分类
（1）标签的组成
双标签格式：<开始标签> 内容 </结束标签>
（2）标签分类
- 双标签：有开始有结束（绝大多数）如：
<h1>、<p>、<div>、<body> - 单标签：自闭合，没有结束标签（少数）如：
<meta>、<img>、<input>
（3）今日学习常用标签
<h1> ~ <h6>：标题标签（数字越小字号越大）<p>：段落标签<hr>：分割线<br>：换行
5. HTML5 标准页面骨架（逐行详解）
所有网页必须遵循这个固定结构：
①<!DOCTYPE html>
- 含义：文档类型声明
- 详细解释：放在网页最第一行，不是 HTML 标签，只是一条声明指令。作用是告诉浏览器：当前这个网页，按照 HTML5 标准来解析、渲染。如果不写这一行，浏览器会进入怪异模式，页面样式、布局会错乱、兼容出问题。必须写，固定放在最顶部，不能省略、不能改位置。
②<html lang="zh-CN">
- 含义：网页根标签
- 详细解释：整个网页最大的父标签，所有其他标签，全部都要包裹在
<html>和</html>中间。lang="zh-CN"作用：告诉浏览器和搜索引擎，当前网页语言是简体中文，有利于网页收录、浏览器翻译识别。
③<head></head>
- 含义：网页头部配置区域
- 详细解释：head 里面写的内容不会在网页正文里显示出来。专门用来给浏览器、搜索引擎看的：设置编码、网页标题、移动端适配、引入样式、引入 JS、网站描述等。只做配置和底层设置，不放页面文字、图片内容。
④<meta charset="UTF-8">
- 含义：设置网页字符编码格式
- 详细解释：规定当前网页的文字编码为UTF-8 国际通用编码。核心作用：彻底解决中文乱码问题。如果不设置这行，中文大概率会变成问号、乱码、方框，所有含中文的 HTML 页面，这一行是标配，必须写。
⑤<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 含义：移动端视口适配标签
- 详细解释：专门适配手机、平板等移动设备。
width=device-width：让网页宽度自动等于手机屏幕宽度，不会出现左右滚动、页面过宽。initial-scale=1.0：页面默认缩放比例为 1 倍，不放大、不缩小，正常显示。做能在手机上正常浏览的网页，这一行是必写标配。
⑥<title></title>
含义：网页标题标签
- 详细解释：写在浏览器顶部标签栏的文字。比如打开百度，标签栏显示 “百度一下，你就知道”，就是 title 控制的。作用：标识网页用途、方便多标签区分、搜索引擎收录权重加分。
⑦<body></body>
- 含义：网页可视主体区域
- 详细解释：用户肉眼能看到的所有内容，全部都要写在 body 里面。文字、标题、图片、视频、按钮、导航栏、列表、输入框…… 全都放这里。简单记：head 给浏览器看，body 给用户看。
6. 第一个 HTML 页面创建流程（学会语法后再创建！）
步骤：
- 新建项目文件夹
- 新建文件，后缀必须为
.html - 编写 HTML 骨架代码
- 保存，双击用浏览器打开查看效果
7. 实战练习：人物介绍页面
三、今日遇到的问题与解决
1.问题：分不清<head>和<body>的区别
解决：<head>放配置，<body>放内容。
2.问题：不知道哪些是单标签、哪些是双标签
解决：包裹内容用双标签，单独功能用单标签。
四、今日学习感悟
今天正式进入前端学习，从前端概念、工具使用，到 HTML 语法、标签结构、页面骨架，完成了前端从 0 到 1 的入门。HTML 作为网页骨架，是前端最基础、最重要的部分，必须牢牢掌握。明天将继续学习图片、链接、列表等更丰富的标签。