HTML这门语言说简单是真的简单说烦也是真的烦。我见过不少新手看教程的时候觉得全会了一上手写页面却完全不知道从哪开第一行也见过有人写了半年标签还是分不清 div 和 span 究竟怎么用、为什么导航栏死活对齐不了。这篇学习日记是DAY01我不会按手册顺序把到挨个念一遍而是用一整个“能跑通”的个人介绍页Demo把HTML基本标签、文档骨架、属性和那些必须提前知道的坑串起来。看完你不仅能看懂别人的页面源码还能自己动手写出第一张像样的网页。1. 从文档骨架看起doctype、head 与 body 到底在干什么1.1 HTML 不是编程语言而是内容的“骨架”很多人有个误解觉得HTML是编程语言一上来就开始背“语法”。实际上HTML全称是 HyperText Markup Language翻译过来是“超文本标记语言”——重点在“标记”不在“逻辑”。它不负责计算不负责判断它干的事情只有一件把内容按结构框起来告诉浏览器“这里是一个大标题”、“这里是一个段落”、“这里可以点”。用装修来类比会更直观HTML是毛坯房的水泥墙和承重柱决定了每个房间在哪、门开在哪CSS是刷漆、铺地板和软装负责好看JS则是装电灯、门铃和智能锁让房子“能动起来”。DAY01我们只做墙体不碰油漆和电路。1.2 每一份HTML页面都必须有的四件事哪怕你写的是公司官网、个人博客还是购物车页面最外层永远是这个样子!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleX同学的简历页/title /head body !-- 用户能看见的内容全部写在 body 里 -- /body /html这里面的东西一个都不能少我逐个说!DOCTYPE html文档类型声明。它的作用是告诉浏览器“请用现代标准模式来渲染我”而不是用老旧的怪癖模式。不写它同一段CSS在不同浏览器里可能有完全不同的表现这是很多“为什么我的样式中看不中用”的根本原因之一。html langzh-CN语言声明。zh-CN告诉搜索引擎和浏览器这个页面主要使用简体中文对SEO和无障碍阅读都有价值。head给浏览器和搜索引擎看的信息区。里面的内容不会直接显示在网页上。meta charsetUTF-8字符编码声明。不写这句HTML文件里的中文在部分环境下会显示成乱码“锟斤拷”。我见过不止一个新手把这句话删了然后整个项目的中文全部炸掉。meta nameviewport ...移动端适配的核心声明。它告诉手机浏览器“按设备的宽度来渲染页面”。少了它页面在手机上会默认按桌面宽度显示然后被自动缩小字小到需要用放大镜。title标签页上显示的文字同时也是搜索引擎结果里的标题。很多人忽略它但它提升点击量的效果远比你想象中明显。body所有会在浏览器里被看到的内容全部放在这里。提示如果你用的是Windows记事本新建文件后记得在“另存为”时把编码选成UTF-8否则哪怕HTML里写了charsetUTF-8也可能乱码。1.3 编辑器怎么选直接影响你写代码的手感编辑器这件事我不想说得太绝对但如果你是真的想入门前端别用记事本折磨自己。起步阶段我用的是VS Code装两个插件就够一个用来实时预览HTML页面另一个用来高亮括号和自动补齐标签。VS Code里有个非常实用的技巧输入英文感叹号!然后按Tab会自动生成完整的HTML5骨架就是上面那十几行基础代码。省去手打doctype和head的时间能让你更专注在body——也就是真正的内容上。不过自动生成只解决“框架记忆”的问题不理解每一行意味着什么迟早会踩坑。我会强制自己把骨架默写三遍直到闭着眼能打出来为止。这件事很笨但值得。2. 最常用内容标签逐一上手标题、段落、链接和图片2.1 标题标签 h1 到 h6层级比字号更重要标题标签有六个级别h1、h2、h3、h4、h5、h6。默认字体会从大到小但你要记住标签的意义是“表达层级”而不是“控制字号”。想放大字号应该用CSS的font-size而不是挑一个更大的h标签。打个比方一份论文里h1是书名h2是章节名h3是章节下的小节h4再往下是小节里的要点。如果你因为“觉得字太小”就把一个段落标题从h3换成h1在视觉上可能看不出大问题但在搜索引擎理解页面结构和屏幕阅读器朗读顺序时页面大纲就会变得混乱。实操中我的建议是一个页面只保留一个h1通常是网站名称或者文章主标题。其他标题从h2开始往下合理嵌套。不要跳级比如从h2直接跳到h4中间缺了h3会让文档结构缺失。这里是我今天Demo里真实用到的一组标题h1X同学的个人主页/h1 h2我做过的一些小事/h2 h3一个周末写的记账小工具/h32.2 段落标签 p 与文本修饰标签别用一堆 br 强行换行p标签用于包裹一个段落。浏览器渲染时段落之间默认会有垂直间距所以文档读起来是有呼吸感的。新手最常犯的手癖是把p当成“换行工具”一个段落里塞几十个br。需要反思一下这样做的后果br在HTML里的本意是“在诗歌或地址中必须断行的地方换行”是一种无奈之下的强制折行而不是排版的常规武器。行间距、段间距这些属于样式的范畴应该交给CSS的margin和padding来处理。如果你在2024年还在用十个br来拉开两个元素的间距页面一旦要做响应式适配你就会知道有多痛。段落内部需要强调文字的用这几个标签strong表示重要内容默认加粗语义上是“语气加重”。em表示强调内容默认斜体语义上是“读音加重”。span本身没有语义通常配合class用来给部分文字做样式定制比如把一段话里的某个词标成红色。举个例子p我是一个strong前端学习日记/strong系列的作者目前正在em一步一步/em补齐HTML基础。/p这里strong和em不只是“加粗”和“斜体”而是给了文字层次搜索爬虫和读屏软件读到这里时能感知哪些内容更重要。2.3 链接标签 ahref 是核心target 和 rel 是细节链接是整个互联网存在的基础。没有a标签网页和网页之间就是一座座孤岛。写法a hrefhttps://example.com target_blank relnoopener noreferrer访问示例网站/ahref目标地址可以是绝对地址https://...也可以是相对路径./about.html。target_blank在新标签页打开。不加的话默认在当前页面跳转会直接盖掉你的网站影响访问深度。relnoopener noreferrer配合target_blank一起用。它的作用是防止新打开的页面通过window.opener反向操作你的原网页。这既是安全策略也是性能优化。另有使用率极高但常被忽略的锚点功能。给页面里的某个区块加个id再用href#区段id点击后就能平滑滚动到对应位置a href#contact跳到联系方式/a h2 idcontact联系方式/h2这是单页导航最基础的手艺比用JS硬算滚动距离简单很多。2.4 图片标签 imgalt 不是可以偷懒的属性图片的写法img srcimages/avatar.png altX同学的头像一只戴眼镜的橘猫 width200几个重点src图片地址可以是网络URL也可以是本地相对路径。alt图片加载失败时显示的文字同时也是读屏软件识别图片内容的关键。对SEO来说搜索引擎看不到图片内容主要靠alt判断图片含义。width/height建议只设置其中一个另一个会自动等比缩放避免图片被拉伸变形。写alt时最忌讳的事是偷懒写“图片”两个字。你要做的是用一句话说清楚“这张图里有什么”比如“项目截图登录页面顶部导航栏和注册表单”。如果图片只是纯装饰没有任何信息量才能把alt写成空字符串alt表示读屏软件可以直接跳过它。2.5 列表标签ul、ol、li 的语义比你想的更常用列表有三种无序列表ul、有序列表ol、自定义列表dl。应用场景远比“列举几条要点”更广网站导航栏、商品属性展示、文章目录树几乎所有成组的内容都能用列表结构来表示。无序列表每一项前面默认有小圆点ul li前端HTML / CSS / JavaScript/li li后端Node.js 基础/li li工具VS Code / Git/li /ul有序列表每一项前面默认是数字适合步骤说明ol li填写基本资料/li li上传头像/li li点击提交按钮/li /olli只能放在ul或ol里面这是嵌套规则硬把li直接塞在body下属于语法错误浏览器渲染时也会帮你“纠正”但纠正后的DOM结构往往不是你想要的。3. 属性入门class/id 的边界与 HTML5 语义化标签带来的改变3.1 class 与 id一字之差规则完全不同属性是标签的“补充说明”。常见的有href、src、alt但对新手来说最核心的是class和id因为后面学CSS时全靠它们选中元素。先说区别id页面里必须唯一一个id值只能在文档中出现一次。就像身份证号一个人只有一个。它通常用于定位锚点或者给JS提供操作入口。class可以多个元素共用同一个元素也可以同时挂多个class用空格分隔。就像衣服尺码一批人共享同一个码。实操中我给class起名时会用短横线分隔的语义化名比如nav-item、article-title不用驼峰navItem也不用下划线nav_item。这样在CSS里写选择器时读起来更顺也符合社区主流习惯。3.2 块级元素与内联元素布局理解的第一道坎HTML标签按默认的显示方式可以分为两大类类别常见标签默认行为块级元素divph1~h6ullisection独占一行宽度默认撑满父容器后面内容另起一行内联元素spanaimgstrongem和相邻文字在同一行宽度只占内容本身这个区别非常关键因为新手最常见的布局混乱就是忘记div是块级的写两个div想在页面上左右并排结果发现它们上下叠着然后开始怀疑CSS写错了。其实没写错是块级元素“默认独占一行”的规则在起作用要让它俩并排需要借助CSS的flex或grid。div是纯粹的块级容器用来“圈地”本身没有任何语义span是纯粹的内联容器用来圈文字。写页面时尽量少用带语义倾向的标签来做纯布局这句话等讲到语义化你就明白了。3.3 语义化标签header、main、section 解决了什么问题HTML5之前页面布局基本是div走天下一个页面写出来乌泱泱全是div classheader、div classfooter。阅读性和可维护性都很差。HTML5推出了一套语义化标签让结构“自己会说话”body header网站顶栏放LOGO和导航/header nav主导航菜单/nav main article h2文章标题/h2 p文章内容/p /article aside侧边栏相关阅读、广告位/aside /main footer版权信息和底部链接/footer /body这套标签的意义在于“看到名字就知道它放什么内容”编写时不用再看class。而且搜索引擎爬虫和读屏软件对这种结构的理解远超一坨div。我写页面时从这套结构出发语义明确样式又好挂。需要在article和section之间做选择的记住一句口诀article是“一篇完整内容”比如一篇博客、一条论坛帖子section是“内容分区”它更接近一个章节容器通常内部带有标题。如果一个区块可以被独立订阅或转载用article如果只是页面内部的某个分区用section。3.4 注释的作用远比你想的大给未来的自己留张纸条HTML注释写在!-- 注释内容 --里面。浏览器不会渲染它但它对维护项目的人来说太重要了。我见过有的同学写页面不加注释两周后回来改自己写的代码看到一排排标签完全不记得当初为什么要这么嵌套。反过来注释写得太啰嗦也会影响阅读体验。我的习惯是结构层次的边界加注释比如“header开始”“main结束”某些因业务限制不得不采用的奇怪写法加了注释说明原因防止后人误改。4. 写页面时最常踩的五个坑与检查习惯4.1 标签不闭合浏览器不会报错但页面会幽灵式错乱HTML不像JavaScript语法错误往往会直接在控制台报出来。标签漏写闭合时浏览器会尝试“智能补全”但补全结果常常出乎意料。举一个我实际遇到过的例子某同学的列表代码是这样的ul li第一项 li第二项 /ul因为漏写了/li浏览器自动补全时把第二个li嵌套进了第一个里面导致后续样式怎么选都选不中第二个列表项。这种“幽灵式错乱”最难排查因为页面上看不太出来CSS一问就懵。我的自查办法是写完一个区块后立刻在编辑器里把外标签折叠起来看内部层级是否整齐或者直接用VS Code的自动格式化功能缩进一乱马上就能看出来。标签闭合这件事是最不起眼但最值得较真的基本功。4.2 属性值不引引号、拼写错误问题基本都来自这两个HTML属性值建议统一使用双引号。虽然HTML规范允许某些情况下省略引号但一旦属性值里出现空格省略引号就会出问题!-- 错误示范 -- img srcimages/avatar.png alt一只戴眼镜的橘猫 !-- 正确示范 -- img srcimages/avatar.png alt一只戴眼镜的橘猫属性名的拼写错误则更隐蔽。比如src写成了scr图片静默加载失败href写成了herf链接点击毫无反应。这类错误浏览器同样不会给红色报错提示唯一验证方法是打开浏览器的开发者工具在Elements面板里检查元素属性是否有红色波浪线。养成写完一个标签就打开DevTools看一眼的习惯能救回大量时间。4.3 中文乱码九成是编码声明缺失或文件保存编码不对中文显示成“锟斤拷”或者“秦”时先查两件事HTML的head里有没有meta charsetUTF-8。编辑器右下角保存文件时编码是不是UTF-8。我自己早期写第一个HTML文件时在网页里输入“我的第一个网页”保存后一刷新全变成了乱码。后来才发现是记事本默认保存成了ANSI编码而页面声明的是UTF-8两边对不上自然就乱了。现在统一用VS Code默认UTF-8再没出过这类问题。4.4 相对路径与绝对路径的混淆图片不显示的高频原因写img标签时负责图片的src有两种路径写法绝对路径从根目录或完整网址开始比如/images/banner.png、https://example.com/images/banner.png。相对路径相对于当前文件的路径比如./images/banner.png当前目录下的images文件夹、../images/banner.png上一级目录下的images文件夹。新手常犯的错是在根目录下的index.html里写images/banner.png明明文件在html文件夹里图片却引用到项目外了。页面刷新后图片区域是一个裂图图标开发者工具却能正常打开这个地址。我的建议是所有图片路径统一用相对路径并且一定搞清楚“当前文件在哪里”、“目标文件相对于当前文件在哪一层”。打开DevTools的Network面板如果图片资源状态是404就说明路径没对一步步顺着报错地址反推就行了。4.5 嵌套规则错乱p 标签里套 div浏览器直接拆给你看HTML对嵌套有严格规则块级元素不能随便往内联元素里塞某些标签有固定的子元素要求。最典型的是p标签它里面不能套div、h1这类块级元素。我以前“想当然”地写过这样的代码p 这是一个段落 div我是强行塞进来的块级内容/div /p浏览器处理的时候会直接把div从p里拆出来渲染成两个并列的块最终页面结构和HTML源代码结构不一致稍后写CSS时又会产生迷惑。正确的做法是段落纯文本或行内内容用p包裹如果需要在段落下方放一个独立区块就关闭/p后再写div。这类嵌套规则不用死记只需要养成一个习惯写完一个标签在DevTools的Elements面板里对照一下浏览器实际解析出来的结构和源码是否一致。看多了哪些默认拆开、哪些正常嵌套心里自然有数。写完这个Demo我自己最大的感受是HTML入门真的不难但每一项错误都极其隐蔽页面不报错、不崩溃只是静悄悄地“不对”。解决的办法不是更聪明的脑子而是更勤快的手——多写、多开DevTools看结构、多问自己“浏览器到底把这个标签解析成了什么”。如果你今天跟着把这篇文章里的标签都亲手敲了一遍你已经比那些只看不练的同学领先一大截了。下一步我会在DAY02把CSS接进来让这个个人主页真正有点“设计感”。到时候见。