HTML基础标签这个话题我每次带新人或者给初级前端做培训的时候都会重新讲一遍。看着都是简单基础必备可真往深了问很多人连!DOCTYPE html为什么能省略那一长串URL都说不清楚。这篇文章就来系统过一遍HTML里最常用、最基础的标签顺带把HTML5新增的标签也整理进来后续我会不定期更新每次新学到的、新踩到的坑都会往里补。适合谁看刚学前端、准备系统地补一遍页面结构知识的初学者或者写了两年代码但发现自己在某些标签的细节上还在靠不断试错来兜底的开发者。我会尽量把每个标签背后那些文档里不太会写、但实际工作里一定会用到的小细节拿出来聊。1. 文档骨架与元信息标签一个HTML页面的“地基”1.1 文档类型声明!DOCTYPE html与html langzh-cn!DOCTYPE html是HTML文档第一行必须出现的东西。老版本HTML里要写一长串DTD网址才能声明文档类型HTML5直接把这个过程简化成了一行纯小写字母。浏览器看到这一行就知道要用标准模式来解析页面而不是去执行早期IE那种怪异模式。当年很多前端老炮都有这个记忆少了这行同样一套CSS在不同浏览器里的margin、padding全部对不上因为怪异模式下盒模型走的是IE6时代的规则。html langzh-cn里的lang属性很多人写了完全不知道干嘛。它其实对三件事都有实际影响搜索引擎判断页面主要语种、浏览器翻译插件决定要不要给你弹翻译提示、屏幕阅读器按什么语音库朗读网页内容。所以中英文混合的页面lang也要按主要语言来不要随手填en。1.2 head里的元信息标签head不直接给页面画任何东西但浏览器该怎么渲染页面几乎全听head的话。meta charsetutf-8是解决中文乱码的关键。字符集声明必须放在head最前面最好在前五行以内——因为浏览器读到这个标签之前如果已经按默认编码去解析了字节流中文就可能变成锟斤拷。UTF-8能覆盖全世界几乎所有字符除了明确需要兼容老系统的GBK之外新页面都直接UTF-8就好别再自己造编码选择困难症。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的命根子。没有这行手机浏览器会把980px宽度的桌面页面硬塞进小屏幕所有的字都变成蚂蚁大小。写了这行页面才会按设备的真实逻辑宽度来排。做H5页面的第一行代码基本就是这个所以那些H5可视化工具生成的模板里viewport永远是标配。还有几个不那么常被提起但很实用的元信息meta namedescription content...在搜索结果里显示的那段描述直接影响到手率。meta namekeywords content...对搜索引擎的作用现在已经微乎其微别指望靠它做SEO。link relicon hreffavicon.ico浏览器标签页上的小图标不配也没事配了显得专业。title是页面标题它有两份职责一是浏览器标签页上的文字二是搜索引擎结果里的主标题。页面写完分享到微信时显示乱码标题基本就是title里写了非常规字符或者页面编码出了问题。1.3 body与注释body是页面所有可见内容的容器。有个属性叫bgcolor老代码里能见到HTML5里已经被废弃背景色请交给CSS的background-color。body里可以放文字、图片、视频、表单所有用户能感知的内容都在body内。HTML注释的格式是!-- 内容 --。有两点实际经验一是压缩工具默认会去掉注释所以别把重要提醒写在注释里压缩后就没了二是注释里不要放隐私或者吐槽内容任何用浏览器打开页面的人都能在开发者工具里看到注释原文。另外HTML注释不能嵌套写注释时里面不能再套一层!--否则闭合逻辑会乱掉。2. 文本与排版标签把内容清清楚楚地摆出来2.1 标题、段落和常见文本修饰标签h1到h6六个级别的标题一个页面最好只出现一个h1。h1在SEO里权重很高它相当于整页内容的主题句。有的站点把logo也放进h1其实不太建议更合理的做法是真正的内容标题放在h1logo和站点名用其他标签加样式处理就行。p是段落。p是块级元素前后自动有间距。一堆连续文本如果不包p浏览器也会自己换行但可读性和语义就差了。有一个容易踩的坑p里不能嵌套块级元素比如div和另一个p都不能放在p里面。因为HTML的闭合规则会产生意外闭合后续代码会被挤到p外面去布局就乱了。br是手动换行hr是水平分割线。br在HTML5里直接写br就行不需要写成br /XHTML才需要自闭合写法hr同理。实际排版中br主要用在地址、诗歌、签名这类需要固定换行的场景不要在段落之间用它来制造间距那是CSS的margin该干的事。文本修饰类标签我按使用频率排个序strong表示重要内容默认加粗b只是视觉加粗没有任何语义。读屏软件会重读strong但不会管b。做无障碍或者SEO时该用strong就用strong。em表示强调默认斜体i只是视觉斜体通常用来放图标字体或者外语词语义上是另一种语气。del显示删除线ins显示下划线表示插入这两个标签写旧价格和新价格时语义特别清楚。mark是黄底高亮HTML5新增用来标记搜索结果中命中的关键词非常方便不需要再拿span加class模拟。sub下标和sup上标化学式、数学公式、脚注编号里常出现。small本来是纯小字号标签在HTML5里被重新定义为旁注、免责声明、版权说明这类语义用法含义变了。font标签的生死font在老代码里非常常见比如font colorred文字/font。HTML5已经彻底废弃它了——样式的活全部交给CSS。font标签现在页面里还能渲染出来但属于历史遗留新写的代码不要再用了。网上搜font标签这个词的人大概率是在看老代码看到它的第一反应就应该是这段代码可以翻新。2.2 特殊字符实体与块级、行内那点事HTML里有一些字符要写成实体才不会出错小于号写成lt;大于号写成gt;与符号写成amp;连续空格用nbsp;版权符号©可以写成copy;。最常见的场景就是文章里要展示一段代码如果直接把div写进HTML页面浏览器会把标签吃掉。这时要么用实体转义要么用code标签配合实体把代码原文原样显示出来。块级元素和行内元素的区别是前面好几个标签的隐藏分界线。块级元素默认占满整行高宽可以设置行内元素默认和别的内容排在同一行设置width、height无效上下margin也常常不生效。div是万能块级容器span是万能行内容器。说万能是因为它们没有自带语义纯粹用来装结构和范围。实际经验是能用语义标签尽量用语义标签div和span是兜底方案。一行里要给某个词语加个颜色用span包起来要给一块独立区域做完整布局用div包起来这个习惯保持好页面结构会清爽很多。3. 链接、图片与媒体标签把页面和整个世界连起来3.1 a标签最常用也最容易用错的标签a是超链接标签核心属性是href。它的取值类型比你想的丰富指向内部页面的相对路径href./about.html指向外部网址的绝对路径hrefhttps://example.com页面内部锚点href#section2配合目标元素idsection2就能跳转邮件hrefmailto:xxxqq.com电话hreftel:1234567移动端点击会拉起拨号界面还有运行JavaScript的写法hrefjavascript:void(0)但现在更推荐在事件回调里处理因为javascript:协议一堆边界情况容易踩坑。关于a标签打开新窗口这个热搜词搜的人应该挺多的这里一次性说透。target_blank可以让链接在新标签页打开但有个安全细节必须补上不写relnoopener noreferrer的话新页面可以通过window.opener引用原页面对象存在被钓鱼和篡改的风险。最佳实践是a hrefhttps://example.com target_blank relnoopener noreferrer打开新窗口/adownload属性可以强制下载而不是打开预览前提是链接的资源和页面同源跨域资源这个属性一般不生效。图片外链、按钮态链接这些需求也很常见注意a标签里不能再嵌套a标签否则浏览器解析直接乱套。3.2 img标签图片显示的基础款img必须有src和alt两个属性。src是图片地址alt是图片加载失败时显示的文字也是读屏软件描述图片的依据对SEO也有价值。width和height建议写上不然图片加载过程中页面高度会跳一下用户会看到布局抖动。实际项目用CSS控制图片尺寸也行但HTML的宽高属性至少要占个位。HTML5新增的loadinglazy属性可以让页面滚动到图片附近时才加载图片首屏图片多的时候提速效果很明显。srcset属性用来做响应式图片让不同屏幕加载不同尺寸的图img srcsmall.jpg srcsetmiddle.jpg 768w, big.jpg 1200w sizes(max-width: 768px) 100vw, 50vw alt响应式示例figure和figcaption是HTML5推荐的图文组合标签图片带说明文字时结构更规范比随便把文字放图片旁边要语义更清晰。picture标签是更进一步的响应式方案可以根据屏幕宽度选择图片格式比如WebP替换JPEG但平时写基础页面用得不多。图片底部3px空隙这个问题我处理过不止一次。原因是图片作为行内元素它的基线对齐会留下一点空隙。解决办法最简单的是把img设置成display:block或者给父容器写font-size:0。网上搜img标签点击跳出图层的其实是给img外层包一个a标签把a的href指向大图地址再配一个轻量JS做灯箱效果。3.3 audio、video与source标签媒体播放的时代变化audio和video是HTML5新增的放音乐、放视频不再需要装任何插件了。video controls width640 postercover.jpg source srcmovie.mp4 typevideo/mp4 p你的浏览器不支持video请升级浏览器。/p /videoaudio和video共有的常用属性是controls、autoplay、loop、preload。controls显示播放控件autoplay有个现实限制大部分浏览器要求页面在用户交互之后才允许自动播放直接写autoplay会被浏览器拦截别指望一打开页面就自动响音乐移动端尤其严格poster是视频未播放时的封面帧属性相当于给视频一张海报。source标签的作用是提供多份备选资源浏览器会按顺序选择第一个能播放的格式。所以通用格式放前面备用格式放后面再留一个文本兜底是媒体播放的推荐写法。做直播类H5页面的话播放器通常是别人封装好的SDK底层原理就是video加协议解析标签层面的东西反而没那么复杂。4. 表格与列表标签邮件排版和管理后台的日常4.1 表格的结构化标签与合并单元格基础表格由table、tr行、td单元格、th表头单元格组成。HTML5推荐用thead、tbody、tfoot把表格分成三块区域浏览器不写也能正常渲染但结构清晰之后CSS和JS处理都方便很多。thead放表头行tbody放数据行tfoot放汇总行。网上搜colspan标签是什么的不少这里说清楚。colspan表示一个单元格横跨几列rowspan表示竖跨几行。比如table border1 tr th姓名/th th colspan2联系方式/th /tr tr td张三/td td手机/td td邮箱/td /tr /table这个表格里第一行的姓名占一列联系方式横跨两列所以第二行下面能放下两个单元格。rowspan同理某一行单元格往下合并。合并单元格之后整个表格的列数要保持一致这是新手最容易写乱的地方。真实使用中遇到过td里内容很长把表格撑破的问题。解决办法是加table-layout:fixed固定布局再给td设置overflow处理超长内容。邮件里写表格必须用table标签因为邮件客户端对CSS的支持参差不齐table布局是最稳妥的方案所以很多可视化邮件模板里全是table套table。4.2 列表标签无序、有序和定义列表ul无序列表配li列表项是导航、菜单、文章列表的主力。ol有序列表用数字编号它的type属性可以设置编号方式比如1、A、a、I、istart属性可以指定从几开始。比如ol start3列表就会从3开始编号这个属性现在很多人不知道。dl定义列表由dt和dd组成dt是术语名dd是术语描述适合做名词解释、参数说明这类排版。比如一个商品规格表用dl列出来语义比div加span干净得多。列表可以嵌套ul里套ul只要语义正确也可以混合ol里套ul实现二级编号的效果。CSS里最常用的list-style:none就是把默认圆点清除掉做导航条时几乎必写。浏览器默认ul列表有左padding和圆点想完全对齐时必须清掉。5. 表单与输入标签前后端交互的入口5.1 form标签的基础属性form actionsubmit.php methodpost enctypemultipart/form-data是表单的标准骨架。action是提交地址method有get和post两种get把参数拼在URL上适合搜索这种无副作用的操作但URL长度有限制post放在请求体里适合提交数据和修改操作。enctype默认是application/x-www-form-urlencoded但只要表单里有文件上传必须改成multipart/form-data否则后端收到的文件永远是空的。form还有onsubmit事件提交前做校验很常用novalidate属性可以关闭HTML5自带的自动校验想完全自己控制校验逻辑时用。form内部所有带name属性的表单控件提交时都会作为参数发送所以哪个字段不想提交就不要给它写name属性。一个非常常见的坑form里button标签的默认type是submit写button保存/button没加type点一下就整个表单提交刷新页面了排查半天以为是JS问题。要么写typebutton要么直接用input做按钮。5.2 input标签的type类型矩阵input是表单里最重要的标签type属性决定了一切。我把常用类型按使用场景过一遍text单行文本框最常用的灰字提示属性是placeholder替代老时代的JS占位方案。password密码框输入自动遮蔽有些浏览器会自动弹出记住密码提示。radio单选按钮同一组name必须相同否则可以同时勾选多个这是很多人第一次做表单踩的坑。checked标记默认选中。checkbox复选框同name的可以选多个也支持checked默认勾选。file文件上传配合accept限制文件类型比如accept.jpg,.pngmultiple属性允许多选。hidden隐藏字段用来提交页面数据但不用展示比如订单ID。number数字输入有min、max、step属性移动端会弹数字键盘。email自带邮箱格式校验url校验网址tel电话主要作用是移动端弹电话键盘。date、time、datetime-local日期时间控件移动端会调起原生选择器做H5页面时比引第三方日期插件轻量得多。color取色器range滑块适合调音量、亮度这类场景。search搜索框部分浏览器里多一个清空的小叉。input的通用属性里required必填、disabled禁用、readonly只读、maxlength限制字符数、autocomplete控制自动填充这几个最常用。有个细节经常有人搞混disabled禁用字段不会被表单提交readonly只读字段会被提交只是不能改而已。label标签和input组合时for属性必须等于input的id值。这样点击label文字就能聚焦到输入框整个点击区域变大用户手感明显更好。很多新手写label不写for等于白包了一层。5.3 HTML5新增表单标签和属性HTML5新增了几个表单标签值得单独拿出来说。datalist给input提供下拉建议但用户仍然可以自己输入它和select有本质区别input listcities datalist idcities option value北京/option option value上海/option option value广州/option /datalistoutput显示计算结果常配JS动态更新数值比如计算器场景。progress显示进度条上传、下载、任务进度都可以用不用再纯靠CSS造一个假的进度条。meter显示度量值比如内存使用率、评分它和progress长得像但语义不同一个表示动态进度一个表示当前度量。HTML5新增表单属性里最实用的是placeholder灰字提示。required必填校验不填时浏览器直接拦截提交。pattern正则校验比如pattern1[3-9]\d{9}校验手机号格式。autofocus页面加载后自动聚焦某个输入框。multiple让file上传或多个选择控件支持多选。min、max、step配合number和date类型使用。需要提醒一句这些属性都是纯浏览器层面的校验只解决输入体验问题。服务端必须再校验一次——前端校验只是降低错误提交率完全防不了恶意请求。这个认知从入行第一天就要建立。5.4 textarea、select与button标签textarea多行文本域默认右下角可拖动调整大小如果不想要这个拖拽CSS里写resize:none就行。指定行数和列数的属性是rows、cols但实际开发中几乎都用width和height来控制尺寸rows和cols用的场合反而少。select下拉框option是选项optgroup可以把选项分组显示multiple支持多选配合Ctrl键selected标记默认选中。实际工作中option经常是JS动态渲染的但标签结构本身是前端基础理解select默认值、联动逻辑对做复杂表单很有帮助。button标签有三种typesubmit提交表单、reset重置表单、button无默认行为。写按钮时优先用button而不是input因为button内部可以放文字、图标、各种HTML结构样式自由度更高而input typebutton只能接受value里的纯文本。6. HTML5新增语义化标签页面结构从“一坨div”走向清晰6.1 布局语义标签header、nav、main、article、section、aside、footer在HTML5出现以前所有页面布局都靠div加id或class比如div idheader、div classnav。这本身能用但搜索引擎和读屏软件很难理解页面结构。HTML5引入的语义化标签让页面结构信息清楚了很多。header页头放logo、导航或页面标题。nav导航区域放链接列表通常是ul加li。main页面主体内容一个页面只能有一个main不要嵌套在header/footer里面。article独立、可复用的一篇文章、帖子、评论。section页面内容的一个分组一般要带自己的标题。aside侧边栏放广告、相关阅读、补充信息。footer页脚写联系信息、版权声明。实际使用建议是布局大框架优先用这些语义标签搜索引擎更容易识别核心内容对SEO有一定正面价值。一个标准页面的骨架大概是body header站点标题和导航/header main article h1文章标题/h1 section h2章节标题/h2 p内容/p /section /article aside侧边栏/aside /main footer版权信息/footer /bodysection和article经常被混淆。最简单的区分标准这段内容单独拿出来放到一个独立页面依然说得通就用article它只是整页内容的一部分起分组作用就用section。article内部可以包含多个sectionsection里也可以有article层级是灵活的不是死规则。6.2 更冷门但好用的H5标签details、summary、mark、time、dialog这几个标签属于知道的人不多但真能省事的类型。details和summary组合可以实现原生的折叠展开不需要写一行JSdetails summary点击展开/summary p这里是折叠起来的内容。/p /detailsmark高亮文字搜索结果页面中标注命中关键词用它最合适效果和手写黄色背景span差不多但语义上表示标记出来的相关内容。time语义化时间标签加了datetime属性后机器也能读出标准时间格式对搜索和日历类应用更友好。dialog是原生弹窗标签配合showModal()方法可以打开模态框基础使用比引弹窗库轻量。还有progress、meter在表单部分说过了。这些标签在低版本浏览器比如IE11里基本都不认但现在做新项目很少需要考虑这种老浏览器直接用没毛病。7. 实操中容易踩的坑与经验速查7.1 我印象最深的几个基础标签坑第一个坑是图片底部3px空隙前面提过把img变成display:block或者给父容器设font-size:0基本一治一个准。第二个坑是表单无意提交button保存/button没写type在form里点击时直接执行提交刷新页面。排查半天以为是JS问题其实只是按钮默认submit。第三个坑是把a href#当按钮用点了之后页面回到顶部。想写一个不跳转的链接推荐hrefjavascript:void(0)或者在点击事件里调用e.preventDefault()。但从可访问性角度说普通按钮直接用button标签最好。第四个坑是包含文件上传的form漏了enctypemultipart/form-data后端收到的文件数据永远是空的。这个错我见过好几个新同事踩过。第五个坑是忘记给radio分组name不同导致多个radio能同时选中。诊断也很简单看name是否一致不一致就合并。网上html一键返回顶部的热搜词也在说回顶部这个功能。老做法是用a nametop加#top锚点但页面很长时不友好。现在的做法是跟一个按钮点击后执行window.scrollTo({top: 0, behavior: smooth})这已经到了JS层面不算HTML标签的事了。7.2 基础标签自检清单写完一个页面我现在的习惯是从头过一遍这些点doctype和lang写了吗meta charset在head最前面吗图片都有alt吗宽高有没有占位a标签开新窗口时带rel了吗form里的按钮type想清楚是button还是submit了吗有文件上传的form设置enctype了吗布局用的是语义标签还是div军团能改成header/nav/main/footer吗同组的radio name都一致吗这篇基础标签的内容先整理到这里里面每一个坑都是我自己踩过或者身边的人踩过的写出来就是希望你能直接绕开。HTML标签本身不难难的是搞清楚每个标签为什么存在、默认行为是什么、什么时候不该用它。我后续还会不定期补充分支内容比如表单校验细节、表格复杂场景、视频音频兼容处理、语义化在SEO里的实际效果。建议你把这份内容当个随查随用的笔记遇到陌生标签先想它属于哪一类再查它的具体行为会比死记硬背学得快得多。