企业官网建设流程全解析

学前端第一步，不是先折腾框架和工具链，而是把 HTML 这层地基打牢。DAY01 的内容就是 HTML 基本标签，看起来简单，但很多人就是栽在“一看就会，一写就废”上。这篇文章是我以学习日记形式整理的第一天笔记，适合完全零基础、刚准备转行做 web 前端的小白，也适合那些已经写了几天页面但总觉得标签用法模模糊糊的人。我会把每个标签的用法、为什么这样写、踩过的坑，都按实际动手的顺序写出来。

HTML 标签是构成网页内容的基本单位，浏览器把我们从键盘敲进去的标签“翻译”成可视化页面。今天不碰 CSS、不碰 JavaScript，只围绕 HTML 本身，把结构类、文本类、链接图片类、列表表格类、表单类这些高频标签过一遍。看完之后，你至少能独立写出一个语义正常、结构清晰的静态页面雏形，而不是只会复制粘贴。

1. 从零认识 HTML：网页的骨架到底是什么

1.1 HTML 不是编程语言，它是一门“标记语言”

很多新手第一天会纠结一个问题：HTML 到底算不算代码？严格来说，HTML（HyperText Markup Language，超文本标记语言）不是编程语言，它没有变量、没有循环、没有逻辑判断。它是用一套预定义的“标签”去标记内容类型，比如“这是一级标题”“这是一个段落”“这是一张图片”。浏览器拿到这些标记后，按规则渲染成用户看到的界面。

用个生活化类比：把网页想象成一份纸质报纸。HTML 就是编辑在稿纸上写的排版批注——“这里放通栏大标题”“这里是正文”“这里插图”。CSS 负责最终印刷时的字体、颜色、版式，JavaScript 则像印刷机器的自动化控制程序。DAY01 我们只做“写批注”这件事。

标签的基本形态是成对出现的，比如<p>内容</p>，也有少数单标签，比如<img>、<br>、<hr>，它们没有结束标签。标签名不区分大小写，但行业规范统一使用小写。一个标签内部还可以写属性，属性写在开始标签中，格式是属性名="属性值"。例如：

<a href="https://example.com" target="_blank">点我跳转</a>

这里href是属性名，双引号里是属性值，多个属性之间用空格隔开。属性决定了标签的额外行为，“a 标签怎么跳转、跳到哪里、是否新开窗口”，都由属性控制。

1.2 为什么前端学习要从标签而不是从工具开始

现在前端工具链极其复杂，打包器、脚手架、组件库多到让人头晕。但无论多高级的框架，最后到浏览器里都会编译成 HTML、CSS、JavaScript 三件套。组件库生成的界面，底层依然是div、span、input这些基础标签。如果你连标签本身都不熟悉，出了问题根本不知道是框架的锅还是自己写错了结构。

我在实际带新人的时候，经常遇到一种情况：同学用某流行框架能跑出页面，但让他手写一个静态表单，他连label的for属性应该指向谁都想不起来。这就是地基不牢。DAY01 的内容虽然朴素，但它是后续一切前端能力的前置条件。先把标签语义和嵌套关系练成本能，后面学 CSS 选择器、学 Flex 布局、学组件化，都会顺利得多。

2. 动手前的准备：浏览器、编辑器与第一个页面骨架

2.1 工具选型：别在编辑器上花太多时间

第一天学 HTML，工具不需要复杂。一个现代浏览器（无论是 Edge、Chrome 还是 Firefox）用于预览调试，一个文本编辑器用于写代码。编辑器方面，新手推荐 VS Code，因为后缀提示、标签自动补全、Emmet 语法支持做得成熟。但如果你不喜欢折腾插件，用系统自带的记事本或者任何简易编辑器也能完成今天的全部练习。

安装好 VS Code 后，建议打开“Auto Save”自动保存，或者养成Ctrl+S的习惯。浏览器按F12打开开发者工具，切到“Elements（元素）”面板，你能实时看到页面的标签结构。这是排查 HTML 问题的第一现场。

2.2 页面基本骨架：每个标签都有自己的位置

每一份 HTML 文档，都应当有一个标准的骨架。很多教程会直接让你写<html>、<head>、<body>，但新手往往不理解为什么要分这么多层。让我拆开说：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个页面</title> </head> <body> <!-- 可见内容都写在 body 里 --> </body> </html>

• <!DOCTYPE html>：文档类型声明，告诉浏览器“请用标准模式解析我”。不写它，浏览器可能进入怪癖模式，导致样式渲染各种诡异，这是新手经常忽略的坑。
• <html>：整个文档的根标签，所有内容都套在它里面。lang="zh-CN"声明页面主要语言是中文，对无障碍阅读和搜索引擎理解有好处。
• <head>：给机器看的“头部信息”。meta标签里的charset="UTF-8"是字符编码，如果不写或写错，中文会显示成乱码。viewport是为了移动端适配，保持默认即可。
• <title>：浏览器标签页上显示的文字，是页面的标题，也是一张页面在搜索引擎结果里的主标题。
• <body>：用户肉眼能看到的全部页面内容都放在这里。

第一次写骨架时，我建议不要用编辑器自带的快捷键一键生成，而是手动敲一遍。不是为了练打字，而是强迫自己记住每一行的含义。等你敲了十遍之后，自然就形成了肌肉记忆。

2.3 第一个可运行页面：验证最小闭环

现在动手做第一个小页面，不需要花哨，目标是建立“写代码 → 保存 → 浏览器打开 → 看到效果”的完整闭环。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>DAY01 第一个页面</title> </head> <body> <h1>这是我的学习日记</h1> <p>今天开始学习 HTML 基本标签。</p> </body> </html>

把文件保存为index.html，注意后缀必须是.html而不是.txt。然后双击文件，或者直接把这个文件拖进浏览器窗口。如果一切正常，你会看到一行大标题和一行段落文本。从此刻起，你写的“网页”已经真正能被访问了，虽然它只有本地文件，但这就是万维网所有页面的最小单元。

3. 文本与结构标签：整张页面的阅读基础

3.1 标题标签 h1 - h6：层级感比大小更重要

HTML 提供了六个级别的标题标签，从<h1>到<h6>。新手最容易犯的思维误区是“h1 字体大，所以我要多用 h1”，这完全跑偏了。标题标签表达的是文档的层级结构，而不是单纯的字体尺寸。

一份合理的页面结构应当是<h1>只出现一次，代表整页的最高主题；下面按章节使用<h2>、<h3>依次降级。搜索引擎爬虫会依据标题层级判断内容重点；屏幕阅读器用户也依靠标题结构在页面中跳转导航。你可以打开任意一个新闻门户，肉眼观察它的标题层级，会发现几乎都遵循这个逻辑。

<h1>前端学习日记</h1> <h2>DAY01 HTML 基础</h2> <h3>1. 标签的分类</h3> <h3>2. 标签的属性</h3> <h2>DAY02 CSS 入门</h2>

注意标题标签自带加粗和默认字号，这是浏览器默认样式，不是我们通过“h1 = 变大”来选择的。之后学了 CSS，你完全可以覆盖这些默认样式，但文档的语义层级永远不会变。

3.2 段落、换行与水平线：别再用换行代替段落

文本内容撑起了大部分页面。最常用的三个标签是段落<p>、换行<br>、水平线<hr>。

<p>这是第一段文字。p 标签之间会自动产生一定的垂直间距，让阅读区隔更清晰。</p> <p>这是第二段文字。写文章时不要把三段挤在一个 p 里。</p>

<br>是单标签，作用是强制换行，适用于地址、诗词等需要手动断行的地方。但不要用<br>去制造段落间距——那是 CSS 的职责。一个典型错误是这样写：

<p>第一行<br><br><br>过了三行才出现的文字</p>

这种写法不仅毫无语义，而且后期维护特别麻烦。同理，<hr>表示“主题层面的分隔”，常用于文章章节之间，它隐藏的语义是“这里有一条分界线”，而不是装饰性的横线。

3.3 文本格式化标签：强调不是靠加粗

当你要让某个词变得显眼时，需区分两组标签：<b>与<strong>，<i>与<em>。

从视觉效果上看，<b>加粗、<strong>加粗；<i>斜体、<em>斜体。但真正的区别在于语义：<strong>表示“强调”，屏幕阅读器会加重语气；<em>表示“着重”，也会影响朗读。<b>和<i>只是纯粹的“样式偏移”，不携带强调含义。W3C 官方文档里明确建议：如果要表达强调，使用<strong>和<em>；如果只是视觉上的加粗斜体，才考虑<b>和<i>。

我们写代码时，要养成“语义优先”的习惯。比如我想表达“这个功能非常危险”，应该写：

<p>这个功能<strong>非常危险</strong>，操作前请仔细确认。</p>

3.4 div 与 span：最通用的容器标签

<div>和<span>是没有特定语义的“万能容器”。div默认是块级元素，独占一行，常用来划分页面大区块；span默认是行内元素，多个span可以排在同一行，常用来包裹局部小区域。

新手容易犯的错是“全页面都是 div”，这被称为 div 滥用。比如表示一篇文章的标题，明明有<h2>可用，却非要写<div class="title">。这样做的后果是页面结构失去了可读性，别人接手你的代码时很难判断内容层级。正确做法是：

<!-- 推荐：语义标签 + div 容器配合 --> <div class="article"> <h2>文章标题</h2> <p>正文内容...</p> <span class="tag">技术</span> <span class="tag">前端</span> </div>

记住一句话：能用语义标签表达的内容，优先用语义标签；div和span是兜底方案，不是万能方案。

4. 超链接与图片：让页面互联起来

4.1 a 标签：从当前页面走向任何地方

超链接是万维网的灵魂。<a>标签最核心的属性是href，它表示链接目标，不仅可以是网址，还可以是本地文件、邮箱地址、页面内锚点甚至电话号码。常见写法：

<a href="https://example.com">普通外链</a> <a href="about.html">站内相对链接</a> <a href="mailto:hello@example.com">发邮件</a> <a href="#section2">跳到本页锚点</a>

新手总会疑惑：外链到底用https://还是http://？如果希望新窗口打开，需要写target="_blank"。但有个安全细节要补上——rel="noopener noreferrer"。这是因为当页面用target="_blank"打开新窗口时，新页面可以通过window.opener反向控制原页面的部分内容，存在被钓鱼或篡改的风险。加上rel="noopener noreferrer"能切断这种关联。现代浏览器大多数默认会处理，但规范写法依然是：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">新窗口打开</a>

4.2 img 标签：图片的路径与尺寸问题

<img>是单标签，靠src指定图片来源，alt是图片加载失败时显示的文字，也是屏幕阅读器朗读的图片描述。

<img src="images/logo.png" alt="网站Logo" width="200" height="80">

关于图片路径，可以分成两种情况：

• 相对路径：图片与 HTML 文件在同一项目内，使用images/logo.png、../images/logo.png这类写法。./表示当前目录，../表示上一级目录。
• 绝对路径：图片在外部服务器上，直接写完整的 URL，例如https://example.com/logo.png。但依赖外链图片有可能面临失效风险，生产环境建议尽量用本地资源。

alt属性容易被偷懒不写。如果图片因为路径错了加载不出来，页面会显示一个破碎的图标，再加上一串路径，体验很差。写了alt之后，至少用户能知道这里原本想放什么。另外，width和height可以控制显示尺寸，但除非是固定尺寸的图，否则建议留给 CSS 处理。图片过大时，你可以在 HTML 里先限制宽高，但原始文件大小不会变，页面加载速度依然会受影响，这是后续性能优化的范畴。

5. 列表标签：无序、有序与自定义

5.1 ul + li：用于没有先后顺序的内容

列表是页面中极其常见的结构。无序列表用<ul>包裹，每一项是<li>，默认前面带一个圆点项目符号。适合“导航菜单”“商品特性”“标签集合”等不需要强调顺序的场景。

<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>

一个非常常见的错误是直接在<ul>下面写纯文字，而不把内容放进<li>里。比如：

<ul> 苹果 香蕉 </ul>

浏览器虽然不报错，但结构是无效的，后续加样式会出现各种怪问题。规范要求<ul>的直接子元素只能是<li>。

5.2 ol + li：步骤、排行、编号场景

有序列表用<ol>包裹，每一项也是<li>，默认前面显示数字序号。适合“操作步骤”“排行榜”“说明书流程”这类内容。

<ol> <li>打开编辑器</li> <li>新建 index.html</li> <li>输入 HTML 骨架</li> </ol>

有序列表有一个好用但冷门的属性start，可以指定起始数字。比如你想用“3、4、5”开始编号，可以写<ol start="3">。还有一个type属性，可以切换序号样式为罗马数字或字母，但实际项目里很少直接在 HTML 里改，一般都用 CSSlist-style-type控制。

5.3 dl、dt、dd：适合“名词解释型”内容

自定义列表是比较容易被忽略的一组标签。<dl>是列表容器，<dt>表示术语或标题，<dd>表示对该术语的解释说明。它特别适合做图文词典、FAQ 问答、术语对照表。

<dl> <dt>HTML</dt> <dd>超文本标记语言，用于描述网页结构。</dd> <dt>CSS</dt> <dd>层叠样式表，用于描述网页表现。</dd> </dl>

默认样式里<dd>会有左缩进，这是正常的。自定义列表的语义价值在于“一条解释对应一条描述”，比用div硬拼更加清晰。你以后做 FAQ 页面、组件文档时，这组标签会非常顺手。

6. 表格标签：结构规整，但别用来排版

6.1 table 的基本构成：行、列、表头

表格由<table>标签包裹，按行构建。每一行是<tr>，行内的单元格分成表头<th>和普通单元格<td>。<th>默认加粗居中，语义上表示“这一列的标题”。命名的记忆技巧是：table row 是行，table data 是数据单元格，table head 是表头单元格。

<table border="1"> <tr> <th>标签</th> <th>含义</th> </tr> <tr> <td>p</td> <td>段落</td> </tr> <tr> <td>a</td> <td>超链接</td> </tr> </table>

上面加了border="1"是为了让新手能看到表格的边框。真实项目中，border属性已经废弃，表格样式统一交给 CSS。如果不加边框，表格可能只是“看不见框线的数据排列”，所以初学者常误以为表格没生效。

6.2 合并单元格：colspan 与 rowspan

合并单元格是表格部分的难点，也是面试和笔试常考点。colspan表示横向合并，即一个单元格跨多列；rowspan表示纵向合并，即一个单元格跨多行。

<table border="1"> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>90</td> </tr> <tr> <td>数学</td> <td>85</td> </tr> <tr> <td>李四</td> <td colspan="2">缺考</td> </tr> </table>

这里张三的rowspan="2"让“姓名列”占了纵向两格，所以第二行的第一个位置直接空出来，不能再写<td>。很多新手合并后“格子错位”，原因就是合并之后行内单元格数量对不上。你需要在上手之前先用草稿画出目标表格形状，数清每一行占多少个格子，再决定是否合并、合并方向。

6.3 别再拿表格做页面布局

在互联网早期，CSS 还不成熟，开发者确实会用<table>拼页面布局，比如把整页切成左右两栏。这种做法在今天被称为“表格布局”，早已被淘汰。原因主要有三个：表格结构冗长导致代码可读性差；浏览器渲染表格时不容易渐进加载，性能不好；用屏幕阅读器阅读时会按表格语义误读页面层级。

正确的姿势是：页面布局交给 div 配合 CSS Flex/Grid；真正的二维数据展示（如数据报表、价目表）才使用表格。这个观念第一天就要建立，否则容易养成用表格堆页面的坏习惯。

7. 表单标签：让人机交互从输入开始

7.1 form 标签：数据收集的集装箱

谈到交互，绕不开表单。<form>是表单容器，核心属性是action和method。action表示表单数据提交到哪个地址，method常用GET或POST。”GET 会把数据拼在 URL 后面，适合搜索等不敏感场景；POST 把数据放在请求体里，适合登录、注册等敏感场景。DAY01 阶段我们无需真正搭建后端，只需写对结构。

<form action="/search" method="GET"> <input type="text" name="keyword"> <button type="submit">搜索</button> </form>

新手很容易漏写name属性。如果没有name，表单提交时浏览器不知道这个字段叫什么，后端也就收不到有效数据。可以这样理解：name是数据的“字段名”，用户在输入框填的内容是“值”，提交的本质就是把一组字段名=值发给服务器。

7.2 input 的常用类型：不是只有文本框

<input>是单标签，通过type属性切换不同形态。第一天至少要掌握这些：

• type="text"：普通单行文本框。
• type="password"：密码框，输入内容会被掩码。
• type="radio"：单选按钮，同一组单选要设置相同的name才能实现互斥。
• type="checkbox"：复选框，支持多选。
• type="email"：邮箱输入，部分浏览器自带格式校验。
• type="number"：数字输入框。
• type="submit"：提交按钮。

<p>性别：</p> <label><input type="radio" name="gender" value="male"> 男</label> <label><input type="radio" name="gender" value="female"> 女</label>

注意单选按钮的name必须相同，否则每个选项自成一组，就失去了单选效果。value是提交给后端的具体值，而标签文字只是给人看的。

7.3 label 与 textarea：别小看可点击区域

<label>标签的作用是让表单元素与文字产生关联。点击 label 文字时，会聚焦到绑定的表单控件上，提高操作便利性，尤其是对于单选、复选框这种“很难点中”的元素。绑定方式有两种：

<!-- 方式一：用 for 属性关联 id --> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <!-- 方式二：把控件嵌在 label 内部 --> <label> <input type="checkbox" name="agree"> 我已阅读并同意协议 </label>

方式一需要for值与控件id完全一致，一个典型低级错误是for写成name，导致点击文字没有任何反应。方式二无需id，但结构稍微紧密一些。

<textarea>是多行文本输入框，没有type属性，直接<textarea name="content"></textarea>。新手要注意它不是一个输入框换行就能跨行，必须用开始标签和结束标签包裹。

7.4 select 与 option：下拉选择的正确姿势

下拉列表用<select>包<option>组成，可以设置默认选中项。

<select name="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="guangzhou">广州</option> </select>

selected写在哪个<option>上，哪个选项就是默认选中的。如果不写，默认选第一个。这里有个实际项目里的经验：如果用户没有主动选择，依然需要提交一个有意义的值，最好在第一个 option 中写上“请选择城市”之类并设置value=""，再配合后端的非空校验，避免误提交默认城市。

8. 标签语义化的价值与两天内的常见问题排查

8.1 为什么一堆初学者都在强调语义化标签

你可能刷到过很多文章提“语义化”，但不太理解它到底解决什么问题。语义化的本质是：让 HTML 标签的含义与内容表达的意思尽量一致。声明一个标题就用标题标签，声明一个段落就用段落标签，声明一个导航就用<nav>，声明一个页脚就用<footer>。

这样做有四个直接好处：

• 无障碍访问：屏幕阅读器能把页面正确朗读给视障用户，标题跳转、列表识别都靠语义。
• 搜索引擎优化：爬虫更精确理解页面重点，标题标签的含金量通常高于普通文本。
• 团队协作：别人接手代码时，扫一眼标签就能知道页面有哪些模块，不用读大量注释。
• 稳定兼容：新设备、新浏览器对语义标签的支持只会越来越完善。

注意语义标签也不是越多越好。HTML5 新增了一批语义标签，比如<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>。它们适合在页面大区块中使用。一个常见的错误是把<section>当万能容器，只要想包一层就用它，但<section>要求内部通常有标题内容，没有语义的纯布局应该用div。

8.2 标签学完了页面为什么还是一团乱

从第一天走出第一步，有几个问题几乎人人都会遇到，我把排查思路整理成速查表：

用编辑器写代码时，尽量养成“写开始标签后立刻写结束标签，再向中间填充内容”的习惯。这一步看起来慢，却能从根源上减少一大半结构错误。

8.3 常见问题排查示例：一个综合纠错题

最后给你留一个综合练习，这是我在学习第一天结束时自己写的一段“带故障”代码。你能一眼看出几处问题，说明今天的知识基本入脑了。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>综合练习</title> </head> <body> <h1>我的第一个表单</h1> <img src="images/photo.png" alt="头像"> <p>请填写以下信息</p> <form action="/submit" method="POST"> <label for="username">用户名</label> <input type="text" name="username"> <br> <label for="password">密码</label> <input type="password" name="password"> <br> <button type="submit">提交</button> </form> </body> </html>

这里面的典型问题有两个：第一个是label for="username"绑定了username，但输入框id缺失，应该补上id="username"，否则前面的<label>关联失效；第二个是img src="images/photo.png"如果图片不存在，alt文字就会展示出来，但如果你本来没放图片文件，那就应当先补上目标文件或者修正路径。此外，如果你仔细观察，还会发现这里的提交按钮没有name属性，如果后端期望接收按钮名称，可能也会造成取值异常。

DAY01 的内容最后停在这里，不是因为没有更多东西可写，而是我不希望你一次性吞太多。HTML 的标签大概上百个，但高频使用的核心标签今天都覆盖到了。把上面的代码亲手敲一遍、改一遍、拆一遍，再想想我刚才提到的那几个坑，你的 HTML 基础就已经比很多“视频看完就忘”的人要扎实了。

我个人这几年的体会是，学 HTML 最忌讳“眼高手低”。你越觉得它简单，越要逼着自己手写、自查、故意写错、再修错。这个过程比单纯看一百遍教程都有用。接下来 DAY02 可以进入 CSS 世界，你就会发现，没有今天这些标签结构的支撑，样式根本无处附着。先慢慢消化今天的内容吧。