搞Web开发这些年我越来越觉得标签这个词在程序员圈子里其实有三副面孔一是HTML里那些尖括号包起来的标记也就是写网页最基础的标签二是浏览器顶上那个可以切换的标签页英文叫tab三是数据标注领域里的label比如图像语义分割时给每个像素打的类别标签。新手搜标签相关内容时经常会同时搜到这三种东西然后一头雾水。Day02这篇我先只讲第一副面孔——HTML标签但在最后一章会把容易混淆的浏览器标签页和组件标签也收进来帮大家把概念理清楚。如果你已经知道HTML是什么那这天的核心任务就是把标签的分类体系、常用标签的写法和使用边界彻底搞清楚。这个页面适合两类人一类是刚开始学前端、跟着教程写过几行HTML但没系统梳理过标签的新手另一类是用模板改过网页、经常要跟HTML打交道但知识零散、全靠CtrlC和CtrlV的半路出家选手。看完之后你会对一套完整页面的标签结构有清晰认识以后再看见网上那些被复制了无数遍的!doctype html html langzh-cn head meta charsetutf-8模板不会只觉得眼熟而是知道每一行在干什么、为什么这么写。1. HTML标签的本体先搞懂骨架再记住那些被全网复制的head模板1.1 标签的三层结构元素、属性、内容很多新手把标签理解为尖括号里的那串字这其实不够准确。标签(tag)、元素(element)、属性(attribute)是三个不同的东西但它们经常被混着说。我建议你这样理解元素 开始标签 内容 结束标签属性是写在开始标签里、用来描述元素行为的附加信息。a hrefhttps://example.com这是一个链接/a上面这段代码里a是开始标签/a是结束标签这是一个链接是内容hrefhttps://example.com是属性。把整个合起来我们才叫它a元素或a标签。平时口语说a标签没关系但心里要清楚标签的本质是标识元素的标记符。还有一类标签是自闭合的比如img、input、meta、br它们没有内容也不写结束标签。注意XHTML时代曾经流行写img /这种自闭合斜杠但在HTML5里斜杠可写可不写官方推荐不写。你在网上看到的模板里meta charsetutf-8没有斜杠就是这个原因。1.2 逐行拆解那套被复制了无数遍的head模板网上随便搜HTML模板跳出来的几乎都是下面这一套尤其是搜索词里反复出现的那串偏长代码!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title页面标题/title /head body !-- 这里放页面上看到的全部内容 -- /body /html我见过很多人直接复制这段但从来没人告诉他每一行是什么。我来逐行拆!doctype html文档类型声明。它告诉浏览器这是一份HTML5文档请用标准模式渲染。如果不写浏览器会进入怪癖模式(quirks mode)导致盒模型、行高、字体大小等一堆细节跟标准模式不一样页面在不同浏览器里会长得完全不像。它必须放在文件第一行前面连空格都不能有。html langzh-cn根元素所有标签都装在它里面。lang属性声明页面主要语言是简体中文搜索引擎和屏幕阅读器会据此识别语言浏览器翻译插件也会根据它判断要不要弹出翻译提示。如果是英文页面就写langen台湾繁体页面写langzh-Hant-TW香港繁体常见langzh-hk这些在搜索热词里都能看到。head存放页面的元信息配置信息不直接呈现给用户。meta charsetutf-8字符编码声明。utf-8基本覆盖全世界文字不写或者放得太靠后页面可能乱码。它必须放在head的前几个字符位置保证浏览器一进页面就拿到编码信息。meta nameviewport contentwidthdevice-width, initial-scale1.0移动端适配的关键让页面宽度等于设备宽度。不做这一步手机上打开桌面网页会被缩小成蚂蚁大小。title页面标题。它有两个作用一是显示在浏览器标签页上你看HTML标签和浏览器标签页在这里第一次相遇了二是作为搜索引擎结果里的标题。标题最好一句话说清页面内容。1.3 head里还能放什么head里除了meta和title还会放三类东西link引入CSS样式表、script引入JavaScript、少量meta信息描述页面。meta namedescription content这是页面的描述文字 link relstylesheet hrefstyle.css script srcapp.js/scriptmeta description在最早期对SEO有一定帮助现在搜索引擎虽然不把它当主要排名因素但搜索结果摘要经常从这里面截取还是值得写好。link和script要注意顺序CSS放head里先加载避免页面闪烁普通script如果不需要在渲染前执行建议放到/body前因为脚本加载会阻塞页面渲染。实操建议哪怕只写一个极简demo也把完整骨架敲出来不要只写body片段。很多在线编辑器会把head隐藏导致新手把页面复制到本地后因为缺少文档声明和字符编码出现样式错乱或中文乱码然后完全不知道问题出在哪。2. 资源与跳转标签a标签的新窗口、img标签的点击图层以及最常见的踩坑2.1 a标签target、rel与一键返回顶部a是全网出现频率最高的标签之一热搜里的a标签打开新窗口火狐浏览器点网页中链接跳转新标签都跟它有关。基础写法很简单但细节坑很多。a hrefhttps://example.com target_blank relnoopener noreferrer新窗口打开/atarget_blank表示在新标签页打开链接。这里有一个从老程序员嘴里经常听到的忠告加上relnoopener noreferrer。原因是早期浏览器里通过target_blank打开的页面能通过window.opener访问原页面的窗口对象存在被钓鱼篡改的风险同时也会带来性能损耗。现在Chrome和Firefox已经默认对新窗口隐式添加noopener行为但你的页面可能被老版本浏览器或某些内置WebView打开手动写上最稳妥也显得你专业。热搜里火狐浏览器点网页中链接跳转新标签这个搜索词其实是在问浏览器的行为有些链接不带target用户按住Ctrl再点击链接浏览器会在新标签打开如果没按修饰键一般就在当前标签打开。甚至可以在火狐的设置里调整打开新标签页时显示……以及在新标签页中打开链接之类的选项。也就是说这是用户端配置不是网页代码能完全控制的。a还有一个冷门玩法——锚点跳转。href#top可以让页面滚动回顶部a href#top返回顶部/a如果你把idtop放在body开始的地方点击这个链接页面就会回到顶部。这是最朴素的一键返回顶部算法不需要任何JavaScript。想平滑滚动加一行CSShtml { scroll-behavior: smooth; }如果页面里根本没有idtop的元素某些浏览器也会尝试滚动到顶部但这是未定义行为建议还是老实放一个id。另外把a当按钮用hrefjavascript:void(0)这种写法我劝你尽早戒掉既不利于无障碍访问也会在部分安全策略下被拦截。要按钮就写button要跳转就写a href别混着来。2.2 img标签从src、alt到点击跳出图层img是页面里最常用的资源标签热搜里的img标签点击跳出图层又是一个经典需求。先看规范写法img srcimages/logo.png alt公司Logo width200 height100 loadinglazysrc图片地址可以是相对路径、绝对路径也可以是URL。alt替代文本。图片挂掉时显示的文字也是屏幕阅读器读给视障用户的文字。这个属性被无数人忽略但它是HTML里少数有人文价值的属性。width和height建议写上浏览器可以先占位避免图片加载后页面内容跳动——也就是性能优化里常说的CLS累计布局偏移。loadinglazy懒加载图片在滚动到视口附近才开始下载长页面能省不少流量。热搜里img标签 点击跳出图层这个需求我实现过很多次。最简单粗暴的办法是让a包住img直接指向大图URLa hrefimages/photo-full.jpg target_blank img srcimages/photo-thumb.jpg alt照片缩略图 /a点击后浏览器打开新标签显示大图这叫跳出图层。想要更好看的做法是点开一个浮层弹窗lightbox可以在页面上盖一个遮罩层把大图放在遮罩中间点击遮罩关闭。用HTMLCSS也能做简单的弹层但需要配合一点JavaScript来切换类名。还有一个小知识热搜里在线音乐标签封面嵌入开源工具本质也是img标签的应用。这类工具做的事无非是帮你生成封面图的URL和合适的尺寸参数真正显示的时候还是img src...让你在页面里展示歌单封面。所以无论工具怎么变img标签的基本功绕不开。2.3 资源类标签的共同边界a、img、link、script、video、audio在概念上都属于资源引用型标签使用时有几个共同要点路径问题相对路径./img.png、绝对路径/img.png或完整域名要分清。本地双击打开HTML时用相对路径很正常一旦涉及路由或部署根路径和相对路径的差异就会咬人。跨域问题通过URL引用外部图片、脚本要留意对方服务器是否允许跨域调用。图片一般可以直接引用脚本通常也允许但字体、接口请求会受CORS限制。资源目录结构这也是打包多个html时最常出的问题。多个页面分散在不同子目录用相对路径引用图片很容易层层嵌套出错我见过有人写出../../images/xxx.png这种五层路径。更稳的做法是用统一的根路径或者构建工具帮你把路径全部重写成绝对路径。3. 表单类标签全家族input的type、HTML5新增控件以及实际验证的坑3.1 表单的基础骨架热搜词里专门的html——表单类的标签input标签说明很多人卡在这一块。表单标签的结构其实很标准form action/submit methodpost label forusername用户名/label input typetext idusername nameusername required label forpassword密码/label input typepassword idpassword namepassword required button typesubmit登录/button /form几个容易忽略的细节label forxxx的for必须指向对应控件的id这样点击文字时浏览器会聚焦到输入框移动端上也能扩大点击热区。name属性是提交到服务端时的字段名id只是页面内标识两者别混。很多人只写id忘记name结果表单提交过去服务端收不到值。method常用get和post。搜索表单用get参数会出现在URL里方便分享数据提交用post。3.2 input的type家族input是HTML里最人格分裂的标签因为它的type属性一变整个控件就变成另一种东西。我把常用类型整理成一张表type 取值作用注意点text单行文本默认类型几乎万能password密码框输入内容变圆点email邮箱移动端弹出键盘自带格式校验number数字可配min/max/step但样式难改tel电话移动端弹出数字键盘url网址校验必须是合法URLdate / time日期 / 时间桌面端显示原生选择器color取色器不同浏览器差异大range滑块常配output显示当前值checkbox复选框可多选值默认是onradio单选框同name一组互斥需配labelfile文件上传可加accept限制类型hidden隐藏字段不显示但随表单提交search搜索框部分浏览器自带清除按钮submit / reset / button提交/重置/普通按钮日常更推荐用button这个表建议存下来写表单时扫一眼大概率能找到你要的类型。记住一句话能用input自带类型解决的就不要自己写JavaScript模拟。3.3 HTML5新增表单标签datalist、output、progress、meterHTML5除了给input增加了几十个type还带来了几个独立的表单相关标签。input listbrowsers namebrowser datalist idbrowsers option valueChrome option valueFirefox option valueEdge /datalistdatalist给输入框提供一组建议值但它不像select限制死用户仍然可以自由输入。这个既给建议又不强制的特性很实用比如搜索框里的热门搜索词。output通常配合滑块和脚本显示实时结果input typerange min0 max100 value50 oninputthis.form.amount.valuethis.value output nameamount50/outputprogress是进度条适合显示正在加载上传进度meter是度量值适合表示磁盘使用率评分。一个关键区别progress表示进行中的过程值是动态变化的meter表示静态的区间数值可配min、max、low、high、optimum。很多人把两者混用语义一错屏幕阅读器和爬虫读出来的含义就全偏了。表单验证方面required、pattern、min、max、maxlength都是浏览器原生能力。比如input typeemail required在提交时不填或格式不对浏览器会直接拦截显示错误提示且不提交表单。这比写一大段JavaScript校验省事得多。但在实际项目中原生校验的提示样式太丑、文案不可控所以很多团队会用novalidate关掉原生校验交给脚本统一处理。这个取舍没有对错只是看产品要求。一个从实操里总结出来的坑datalist在Chrome和Firefox里交互不一致Chrome会在输入时显示建议列表Firefox对部分版本点击输入框后就有差异。依赖datalist做关键交互前一定要在主流浏览器里各点一遍。至于ubuntu的html编辑器这类问题我的答案是编辑器不重要VS Code加一个Live Server插件写HTML够用五年跟操作系统无关。4. 表格标签与colspan合并单元格的基本功以及HTML邮件这个冷门场景4.1 table的完整骨架与裸tr问题很多人写表格还是老一套——直接table里塞tr和td。这在简单页面上能跑但丢了表格标签的语义结构。规范的表格长这样table caption2025年一季度销售统计/caption thead tr th月份/th th销售额/th th环比/th /tr /thead tbody tr td1月/td td120万/td td8%/td /tr tr td2月/td td135万/td td12%/td /tr /tbody tfoot tr td合计/td td255万/td td—/td /tr /tfoot /tablecaption是表格标题thead放表头行tbody放数据行tfoot放汇总行。表头单元格用th而不是td浏览器会加粗居中而且屏幕阅读器能识别出它是表头这对无障碍访问很重要。想精简结构时caption可以省略但thead和tbody我建议保留。搜索引擎和转码工具解析表格时能正确区分表头和数据尤其在html转为md这类转换场景里规范的table结构转换出来的目录和列表更干净。很多在线HTML转Markdown工具遇到不带thead的表格会把第一行数据错当成表头。4.2 colspan和rowspan的合并陷阱热搜词colspan标签是什么问得很直接。其实colspan不是一个独立标签而是td或th上的属性表示这个单元格横跨几列对应的rowspan表示纵跨几行。table tr td rowspan2合并两行/td td第一行右侧/td /tr tr td第二行右侧/td /tr /table上面这个表格里第一个单元格往下跨了两行所以第二行只用写一个单元格。这个逻辑很好理解但实操时最容易翻车的是合并之后每一行的单元格总数必须一致。比如一个三列表格第一行有一个colspan3那这一行视觉上只有1个单元格但逻辑上占3列第二行如果写了3个普通单元格总数刚好对得上如果第二行写了2个浏览器会补一个空单元格你会看到表格出现一块莫名的空白怎么调CSS都调不掉。我的排查经验是合并完单元格后把td之间的空格和缩进全部去掉用浏览器开发者工具检查每一行的实际单元格数。如果数字对不上优先检查rowspan—— 因为它影响的不是本行而是它身后的所有行排查难度比colspan高一个量级。4.3 表格的现实用途数据展示、后台管理、HTML邮件现代布局里flex和grid已经取代表格去做页面排版但表格在三个场景里依然不可替代数据报表、后台管理系统、HTML邮件。特别是HTML邮件。你写邮件给用户时如果里面有一块多列内容几乎所有邮件客户端尤其是Outlook都不认flex和grid只有table布局最稳。这也是html邮件这个热搜词背后的大量真实需求一堆人写营销邮件时发现div排版全乱了最后只能回到古老的table td方案。建议如果是做后台管理系统的数据列表用表格如果是做营销邮件模板老老实实table布局如果是做整个页面的排版布局别用表格用flex或grid。这三条边界非常清晰记住就行。5. 标签的寿命font为什么被废弃、span是干什么的、语义化在讲什么5.1 font标签为什么死得这么彻底如果你翻过老教材一定见过这种写法font size4 colorred一段红色大字/fontfont标签在HTML 3.2时期很流行它直接控制文字的字体、大小、颜色。它的问题在于把表现和内容混在了一起。一个页面如果十个地方都要红色文字就得写十遍font colorred哪天要改成蓝色就得全文替换。这跟编程里的重复代码是同一个味道。CSS出现后这种内联样式的标签被彻底清理出HTML5标准舞台和它一起被废弃的还有center、marquee、bgsound等一批标签。你现在看到老教程里出现font直接跳过用CSS代替span classwarning一段红色大字/span style .warning { font-size: 20px; color: red; } /style这么做的好处是颜色和字号只定义一次改起来只改一处。所有展示样式的活都交给CSS这是HTML从标签即样式进化到标签即语义的核心转折点。5.2 span标签到底是干什么用的热搜词里span标签是干什么用的被问得很多比div还多。我的答案很简单span是一个没有任何默认样式的行内容器它存在的意义就是让你给一小段内容贴标签——加class、加id、加data属性然后CSS和JavaScript就能精确锁定这块内容。p今天气温span classhighlight28度/span适合户外活动。/pspan不换行宽度由内容决定这是它和div的根本区别div是块级容器独占一行span是行内容器嵌在文本流里。常见用途包括让某个词变色、给数字加特殊样式、放小图标、做badge角标、包住动态插入的文本节点。有人会问既然span没有默认样式那用em或strong不好吗这就要看你想要的语义了。em表示强调语气strong表示重要内容屏幕阅读器会改变语调span不带任何语义。如果你只是纯粹想上色span反而是最无害的选择不会让屏幕阅读器读错重音。5.3 语义化为什么是标签审美的一部分HTML5时代标签的重点从长什么样转向了是什么。于是出现了一批语义化标签header、nav、main、article、section、aside、footer。header nav导航/nav /header main article h1文章标题/h1 p正文/p /article aside侧边栏/aside /main footer版权信息/footer语义化不是玄学好处非常具体无障碍屏幕阅读器能告诉视障用户这是导航区这是正文区。SEO搜索引擎能更准确定位页面主体内容和标题层级。可维护性一年后回头看代码不用读完全部CSS就能知道每个区块是干嘛的。工具友好HTML转Markdown、网页转PDF、爬虫解析都依赖合理的标题层级h1-h6和区块结构。热搜里的html转为md遇到语义化清晰的页面转换出来的文档结构几乎不用二次整理。不过语义化也不需要矫枉过正。一个小页面没必要把section套得比俄罗斯套娃还深。我的原则是能用语义标签准确表达内容就用拿不准的时候用div或span不丢人把h1到h6的层级理清楚比纠结用article还是section重要得多。6. 当标签变成组件和界面include、tabs标签页、vue3样式定制6.1 服务端的include标签热搜词熟悉include标签的用法单独搜这个词的人多半被老教程绕晕了。要澄清一点HTML本身没有include这个内置标签。这个include其实是服务端模板的能力比如PHP的写法?php include header.php; ?JSP的写法jsp:include pageheader.jsp /老式服务器端包含SSI的写法!--#include virtual/header.html --它们解决的是同一个痛点导航、页脚、侧边栏这种公共片段在每个页面里都要出现如果每个页面都复制一遍改一处就要改几百个文件。include让你把公共片段抽成一个独立文件页面里引一行就能复用。现代前端框架解决这个问题用的是组件化Vue和React的组件本质上就是前端的include只是粒度更细、能力更强。如果你要做纯静态多页站点又不想上框架可以用JavaScript的fetch拉公共片段或者用构建工具在打包阶段做include。热搜里的打包多个html就是这个场景。我的建议超过三五个页面的静态站直接上一个静态站点生成器把公共头部、导航、页脚写成模板碎片打包时自动拼接进所有页面——原理跟include一脉相承只是更现代。6.2 浏览器标签页与tabs组件浏览器标签页tab是另一层标签概念。热搜里chrome 标签页分组怎么隐藏——Chrome的标签页分组是指将多个标签页归成一组可以给组命名和配色。想隐藏分组点一下分组名称左边的圆点就能把整组折叠只留下一个彩色圆点标签想彻底不显示在设置里关掉标签页组或把相关标签页拖出分组恢复成普通标签页。Edge浏览器的逻辑类似设置路径在外观-显示标签页操作按钮附近。前端框架里的tabs是另一回事它是页面里的一个组件几个标题按钮对应几块内容面板点击切换。它跟浏览器标签页的区别在于组件tabs只是页面内部的交互控件切换时浏览器地址栏不会变化。6.3 vue3修改tabs标签页样式热搜里vue3修改tabs标签页样式我猜是指前端组件库里的tabs组件Element Plus、Ant Design Vue这类。拿Element Plus举例组件库的样式通常带scoped隔离直接在页面样式里写.el-tabs__item { color: red }很容易失效。这时候要用Vue3的:deep()穿透选择器style scoped .my-tabs :deep(.el-tabs__item) { color: #666; font-weight: 500; } .my-tabs :deep(.el-tabs__item.is-active) { color: #409eff; font-weight: 700; }这里:deep()的作用是让父级上带scoped标记的样式能穿透到子组件内部去修改目标元素。写的时候要注意.my-tabs必须是你给tabs组件加的根类名否则:deep()找不到作用范围。想改下划线颜色重点是.el-tabs__active-bar这个元素。另外想提醒一句搜索引擎里echarts纵向柱状图 y轴的标签如何在每个柱子上面显示这种问题它说的标签是图表配置项里的axisLabel属于JavaScript配置跟HTML标签没关系。遇到这种搜索词先分清领域再动手否则很容易绕远路。PyQt5显示HTML同理那是在Qt的QTextBrowser或QWebEngineView里渲染HTML字符串支持程度和浏览器不完全一致写代码前要单独查文档。结尾一个关于标签学习的经验我学HTML标签的最大体会是不要背标签列表要背分类和边界。资源类、表单类、表格类、语义类每类记住三五个核心标签再加上它们之间的边界——什么时候用div、什么时候用span、什么时候用table、什么时候直接用CSS——比硬背一百个标签名单有用得多。最后分享一个小习惯我在本地建了一个tags-demo目录每遇到一个不熟的标签或属性就写一个几十行的小demo丢进去附带注释说明这个标签在什么场景下才值得用。半年之后那目录就成了我自己整理的手册比任何文档网站都顺手。Day02把标签基础打牢之后Day03就可以放心去啃CSS了——因为CSS干的所有事都是围绕HTML标签来的。