学前端第一步不是先折腾框架和工具链而是把 HTML 这层地基打牢。DAY01 的内容就是 HTML 基本标签看起来简单但很多人就是栽在“一看就会一写就废”上。这篇文章是我以学习日记形式整理的第一天笔记适合完全零基础、刚准备转行做 web 前端的小白也适合那些已经写了几天页面但总觉得标签用法模模糊糊的人。我会把每个标签的用法、为什么这样写、踩过的坑都按实际动手的顺序写出来。HTML 标签是构成网页内容的基本单位浏览器把我们从键盘敲进去的标签“翻译”成可视化页面。今天不碰 CSS、不碰 JavaScript只围绕 HTML 本身把结构类、文本类、链接图片类、列表表格类、表单类这些高频标签过一遍。看完之后你至少能独立写出一个语义正常、结构清晰的静态页面雏形而不是只会复制粘贴。1. 从零认识 HTML网页的骨架到底是什么1.1 HTML 不是编程语言它是一门“标记语言”很多新手第一天会纠结一个问题HTML 到底算不算代码严格来说HTMLHyperText Markup Language超文本标记语言不是编程语言它没有变量、没有循环、没有逻辑判断。它是用一套预定义的“标签”去标记内容类型比如“这是一级标题”“这是一个段落”“这是一张图片”。浏览器拿到这些标记后按规则渲染成用户看到的界面。用个生活化类比把网页想象成一份纸质报纸。HTML 就是编辑在稿纸上写的排版批注——“这里放通栏大标题”“这里是正文”“这里插图”。CSS 负责最终印刷时的字体、颜色、版式JavaScript 则像印刷机器的自动化控制程序。DAY01 我们只做“写批注”这件事。标签的基本形态是成对出现的比如p内容/p也有少数单标签比如img、br、hr它们没有结束标签。标签名不区分大小写但行业规范统一使用小写。一个标签内部还可以写属性属性写在开始标签中格式是属性名属性值。例如a hrefhttps://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”自动保存或者养成CtrlS的习惯。浏览器按F12打开开发者工具切到“Elements元素”面板你能实时看到页面的标签结构。这是排查 HTML 问题的第一现场。2.2 页面基本骨架每个标签都有自己的位置每一份 HTML 文档都应当有一个标准的骨架。很多教程会直接让你写html、head、body但新手往往不理解为什么要分这么多层。让我拆开说!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body !-- 可见内容都写在 body 里 -- /body /html!DOCTYPE html文档类型声明告诉浏览器“请用标准模式解析我”。不写它浏览器可能进入怪癖模式导致样式渲染各种诡异这是新手经常忽略的坑。html整个文档的根标签所有内容都套在它里面。langzh-CN声明页面主要语言是中文对无障碍阅读和搜索引擎理解有好处。head给机器看的“头部信息”。meta标签里的charsetUTF-8是字符编码如果不写或写错中文会显示成乱码。viewport是为了移动端适配保持默认即可。title浏览器标签页上显示的文字是页面的标题也是一张页面在搜索引擎结果里的主标题。body用户肉眼能看到的全部页面内容都放在这里。第一次写骨架时我建议不要用编辑器自带的快捷键一键生成而是手动敲一遍。不是为了练打字而是强迫自己记住每一行的含义。等你敲了十遍之后自然就形成了肌肉记忆。2.3 第一个可运行页面验证最小闭环现在动手做第一个小页面不需要花哨目标是建立“写代码 → 保存 → 浏览器打开 → 看到效果”的完整闭环。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleDAY01 第一个页面/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 h2DAY01 HTML 基础/h2 h31. 标签的分类/h3 h32. 标签的属性/h3 h2DAY02 CSS 入门/h2注意标题标签自带加粗和默认字号这是浏览器默认样式不是我们通过“h1 变大”来选择的。之后学了 CSS你完全可以覆盖这些默认样式但文档的语义层级永远不会变。3.2 段落、换行与水平线别再用换行代替段落文本内容撑起了大部分页面。最常用的三个标签是段落p、换行br、水平线hr。p这是第一段文字。p 标签之间会自动产生一定的垂直间距让阅读区隔更清晰。/p p这是第二段文字。写文章时不要把三段挤在一个 p 里。/pbr是单标签作用是强制换行适用于地址、诗词等需要手动断行的地方。但不要用br去制造段落间距——那是 CSS 的职责。一个典型错误是这样写p第一行brbrbr过了三行才出现的文字/p这种写法不仅毫无语义而且后期维护特别麻烦。同理hr表示“主题层面的分隔”常用于文章章节之间它隐藏的语义是“这里有一条分界线”而不是装饰性的横线。3.3 文本格式化标签强调不是靠加粗当你要让某个词变得显眼时需区分两组标签b与strongi与em。从视觉效果上看b加粗、strong加粗i斜体、em斜体。但真正的区别在于语义strong表示“强调”屏幕阅读器会加重语气em表示“着重”也会影响朗读。b和i只是纯粹的“样式偏移”不携带强调含义。W3C 官方文档里明确建议如果要表达强调使用strong和em如果只是视觉上的加粗斜体才考虑b和i。我们写代码时要养成“语义优先”的习惯。比如我想表达“这个功能非常危险”应该写p这个功能strong非常危险/strong操作前请仔细确认。/p3.4 div 与 span最通用的容器标签div和span是没有特定语义的“万能容器”。div默认是块级元素独占一行常用来划分页面大区块span默认是行内元素多个span可以排在同一行常用来包裹局部小区域。新手容易犯的错是“全页面都是 div”这被称为 div 滥用。比如表示一篇文章的标题明明有h2可用却非要写div classtitle。这样做的后果是页面结构失去了可读性别人接手你的代码时很难判断内容层级。正确做法是!-- 推荐语义标签 div 容器配合 -- div classarticle h2文章标题/h2 p正文内容.../p span classtag技术/span span classtag前端/span /div记住一句话能用语义标签表达的内容优先用语义标签div和span是兜底方案不是万能方案。4. 超链接与图片让页面互联起来4.1 a 标签从当前页面走向任何地方超链接是万维网的灵魂。a标签最核心的属性是href它表示链接目标不仅可以是网址还可以是本地文件、邮箱地址、页面内锚点甚至电话号码。常见写法a hrefhttps://example.com普通外链/a a hrefabout.html站内相对链接/a a hrefmailto:helloexample.com发邮件/a a href#section2跳到本页锚点/a新手总会疑惑外链到底用https://还是http://如果希望新窗口打开需要写target_blank。但有个安全细节要补上——relnoopener noreferrer。这是因为当页面用target_blank打开新窗口时新页面可以通过window.opener反向控制原页面的部分内容存在被钓鱼或篡改的风险。加上relnoopener noreferrer能切断这种关联。现代浏览器大多数默认会处理但规范写法依然是a hrefhttps://example.com target_blank relnoopener noreferrer新窗口打开/a4.2 img 标签图片的路径与尺寸问题img是单标签靠src指定图片来源alt是图片加载失败时显示的文字也是屏幕阅读器朗读的图片描述。img srcimages/logo.png alt网站Logo width200 height80关于图片路径可以分成两种情况相对路径图片与 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 liHTML/li liCSS/li liJavaScript/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 start3。还有一个type属性可以切换序号样式为罗马数字或字母但实际项目里很少直接在 HTML 里改一般都用 CSSlist-style-type控制。5.3 dl、dt、dd适合“名词解释型”内容自定义列表是比较容易被忽略的一组标签。dl是列表容器dt表示术语或标题dd表示对该术语的解释说明。它特别适合做图文词典、FAQ 问答、术语对照表。dl dtHTML/dt dd超文本标记语言用于描述网页结构。/dd dtCSS/dt dd层叠样式表用于描述网页表现。/dd /dl默认样式里dd会有左缩进这是正常的。自定义列表的语义价值在于“一条解释对应一条描述”比用div硬拼更加清晰。你以后做 FAQ 页面、组件文档时这组标签会非常顺手。6. 表格标签结构规整但别用来排版6.1 table 的基本构成行、列、表头表格由table标签包裹按行构建。每一行是tr行内的单元格分成表头th和普通单元格td。th默认加粗居中语义上表示“这一列的标题”。命名的记忆技巧是table row 是行table data 是数据单元格table head 是表头单元格。table border1 tr th标签/th th含义/th /tr tr tdp/td td段落/td /tr tr tda/td td超链接/td /tr /table上面加了border1是为了让新手能看到表格的边框。真实项目中border属性已经废弃表格样式统一交给 CSS。如果不加边框表格可能只是“看不见框线的数据排列”所以初学者常误以为表格没生效。6.2 合并单元格colspan 与 rowspan合并单元格是表格部分的难点也是面试和笔试常考点。colspan表示横向合并即一个单元格跨多列rowspan表示纵向合并即一个单元格跨多行。table border1 tr th姓名/th th科目/th th成绩/th /tr tr td rowspan2张三/td td语文/td td90/td /tr tr td数学/td td85/td /tr tr td李四/td td colspan2缺考/td /tr /table这里张三的rowspan2让“姓名列”占了纵向两格所以第二行的第一个位置直接空出来不能再写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 methodGET input typetext namekeyword button typesubmit搜索/button /form新手很容易漏写name属性。如果没有name表单提交时浏览器不知道这个字段叫什么后端也就收不到有效数据。可以这样理解name是数据的“字段名”用户在输入框填的内容是“值”提交的本质就是把一组字段名值发给服务器。7.2 input 的常用类型不是只有文本框input是单标签通过type属性切换不同形态。第一天至少要掌握这些typetext普通单行文本框。typepassword密码框输入内容会被掩码。typeradio单选按钮同一组单选要设置相同的name才能实现互斥。typecheckbox复选框支持多选。typeemail邮箱输入部分浏览器自带格式校验。typenumber数字输入框。typesubmit提交按钮。p性别/p labelinput typeradio namegender valuemale 男/label labelinput typeradio namegender valuefemale 女/label注意单选按钮的name必须相同否则每个选项自成一组就失去了单选效果。value是提交给后端的具体值而标签文字只是给人看的。7.3 label 与 textarea别小看可点击区域label标签的作用是让表单元素与文字产生关联。点击 label 文字时会聚焦到绑定的表单控件上提高操作便利性尤其是对于单选、复选框这种“很难点中”的元素。绑定方式有两种!-- 方式一用 for 属性关联 id -- label forusername用户名/label input typetext idusername nameusername !-- 方式二把控件嵌在 label 内部 -- label input typecheckbox nameagree 我已阅读并同意协议 /label方式一需要for值与控件id完全一致一个典型低级错误是for写成name导致点击文字没有任何反应。方式二无需id但结构稍微紧密一些。textarea是多行文本输入框没有type属性直接textarea namecontent/textarea。新手要注意它不是一个输入框换行就能跨行必须用开始标签和结束标签包裹。7.4 select 与 option下拉选择的正确姿势下拉列表用select包option组成可以设置默认选中项。select namecity option valuebeijing北京/option option valueshanghai selected上海/option option valueguangzhou广州/option /selectselected写在哪个option上哪个选项就是默认选中的。如果不写默认选第一个。这里有个实际项目里的经验如果用户没有主动选择依然需要提交一个有意义的值最好在第一个 option 中写上“请选择城市”之类并设置value再配合后端的非空校验避免误提交默认城市。8. 标签语义化的价值与两天内的常见问题排查8.1 为什么一堆初学者都在强调语义化标签你可能刷到过很多文章提“语义化”但不太理解它到底解决什么问题。语义化的本质是让 HTML 标签的含义与内容表达的意思尽量一致。声明一个标题就用标题标签声明一个段落就用段落标签声明一个导航就用nav声明一个页脚就用footer。这样做有四个直接好处无障碍访问屏幕阅读器能把页面正确朗读给视障用户标题跳转、列表识别都靠语义。搜索引擎优化爬虫更精确理解页面重点标题标签的含金量通常高于普通文本。团队协作别人接手代码时扫一眼标签就能知道页面有哪些模块不用读大量注释。稳定兼容新设备、新浏览器对语义标签的支持只会越来越完善。注意语义标签也不是越多越好。HTML5 新增了一批语义标签比如header、nav、main、article、section、aside、footer。它们适合在页面大区块中使用。一个常见的错误是把section当万能容器只要想包一层就用它但section要求内部通常有标题内容没有语义的纯布局应该用div。8.2 标签学完了页面为什么还是一团乱从第一天走出第一步有几个问题几乎人人都会遇到我把排查思路整理成速查表现象最可能原因怎么解决中文显示成乱码meta charsetUTF-8没写或写错在 head 里补全字符编码声明图片显示不显示src路径写错或文件名大小写不对确认图片文件位置用相对路径逐级检查超链接点了没反应href为空或地址写错检查是否遗漏https://本地文件注意后缀表格格子错位合并的行列数不匹配画表格草图数清每行单元格总数点击文字无法聚焦输入框for和id不一致检查 label 的 for 是否与输入框 id 完全相同页面结构和想象不一样缺少闭合标签用编辑器的代码高亮定位未闭合标签用编辑器写代码时尽量养成“写开始标签后立刻写结束标签再向中间填充内容”的习惯。这一步看起来慢却能从根源上减少一大半结构错误。8.3 常见问题排查示例一个综合纠错题最后给你留一个综合练习这是我在学习第一天结束时自己写的一段“带故障”代码。你能一眼看出几处问题说明今天的知识基本入脑了。!DOCTYPE html html head meta charsetUTF-8 title综合练习/title /head body h1我的第一个表单/h1 img srcimages/photo.png alt头像 p请填写以下信息/p form action/submit methodPOST label forusername用户名/label input typetext nameusername br label forpassword密码/label input typepassword namepassword br button typesubmit提交/button /form /body /html这里面的典型问题有两个第一个是label forusername绑定了username但输入框id缺失应该补上idusername否则前面的label关联失效第二个是img srcimages/photo.png如果图片不存在alt文字就会展示出来但如果你本来没放图片文件那就应当先补上目标文件或者修正路径。此外如果你仔细观察还会发现这里的提交按钮没有name属性如果后端期望接收按钮名称可能也会造成取值异常。DAY01 的内容最后停在这里不是因为没有更多东西可写而是我不希望你一次性吞太多。HTML 的标签大概上百个但高频使用的核心标签今天都覆盖到了。把上面的代码亲手敲一遍、改一遍、拆一遍再想想我刚才提到的那几个坑你的 HTML 基础就已经比很多“视频看完就忘”的人要扎实了。我个人这几年的体会是学 HTML 最忌讳“眼高手低”。你越觉得它简单越要逼着自己手写、自查、故意写错、再修错。这个过程比单纯看一百遍教程都有用。接下来 DAY02 可以进入 CSS 世界你就会发现没有今天这些标签结构的支撑样式根本无处附着。先慢慢消化今天的内容吧。