1. 每个页面都少不了的文档骨架从doctype到head不管你用记事本写也好用VS Code、Sublime这类编辑器写也罢任何一个HTML页面的起点都是同一套固定结构。很多新手第一次打开HTML文件时看到那几行模板代码会觉得很神秘甚至直接复制粘贴就完事了。其实这几行代码每一行都有明确的职责理解了它们你才算真正迈进了HTML的大门。先看最标准的骨架长什么样!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title页面标题/title /head body !-- 页面内容写在这里 -- /body /html1.1 doctype声明别小看这行废话!doctype html是全篇第一行它告诉浏览器请用最新的HTML标准来渲染我。这句话在HTML5里已经精简到了极致早年HTML 4.01时期doctype声明是一长串URL正常人根本记不住。现在这行代码的作用是强制浏览器进入标准模式standards mode而不是兼容模式quirks mode。兼容模式是浏览器为了兼容老网页而保留的降级渲染模式在兼容模式下盒模型、行高、字体大小都可能跟标准模式有差异同样一份CSS在两个模式下面效果完全不同。如果你发现做的页面在Chrome里正常、在某个老版本浏览器里却错位先检查一下是不是doctype丢了。实测中我发现忘记写doctype的页面在IE时代会出现各种莫名其妙的间距问题现在主流浏览器虽然宽容一些但依然建议每次新建页面都从这行开始。1.2 html和head页面的总容器与配置区html标签是文档根元素所有内容都被它包在里面。langzh-cn属性表示这个页面的主要语言是简体中文这个属性对屏幕阅读器、浏览器翻译功能、搜索引擎都友好。如果你的页面是英文就写langen按实际语言来。head区域是给浏览器和搜索引擎看配置信息的里面的内容不会直接显示在页面上。最关键的三个配置我刚才的模板里已经写出来了。1.3 meta标签的两个必填项字符集与视口第一个meta charsetutf-8解决中文乱码问题。UTF-8是目前最通用的字符编码能覆盖全世界几乎所有文字。如果漏掉这行页面在Windows服务器上多半会显示成一片锟斤拷乱码。我见过不少新手把HTML文件保存成了GBK编码然后又在meta里声明utf-8结果中文还是乱——这里有个常识meta声明的编码必须跟文件实际保存的编码一致否则声明等于白写。用VS Code的话看右下角状态栏就能确认文件编码。第二个meta nameviewport contentwidthdevice-width, initial-scale1是移动端适配的基石。它告诉浏览器页面的宽度跟设备宽度一致初始缩放比例为1。手机屏幕默认的渲染宽度是980像素这个值因浏览器而异没有这行meta的页面在手机上看会先缩小再放大字小得看不清用户要手动双指放大。做移动端页面这行是标配。title是标题栏上显示的文字也是搜索引擎结果里链接旁边的标题。它的重要性经常被低估——一个清晰、含关键词的title直接关系到页面点击率。页面内可以放多个meta namedescription来描述页面摘要搜索引擎有时会直接用它作为搜索结果里的描述文字。抛开模板本身我建议每个页面在head里还可以按需加这些东西meta namekeywords虽然百度权重已降低但聊胜于无、link relicon自定义浏览器标签页小图标、外链CSS和JS的标签。这些后面会讲到。2. 文本与多媒体标签日常使用频率最高的那一批骨架搭好了接下来就要往body里填内容了。文本和多媒体标签是你写页面时使用频率最高的标签没有之一。掌握了这一批你就能做出一个结构清晰、图文并茂的静态页面。2.1 标题与段落从h1到p的内容层次HTML里的标题分六级h1到h6数字越小级别越高。一个页面通常只有一个h1它是整页内容的主标题搜索引擎蜘蛛抓取页面时最先看的就是h1里写了什么。h2到h6是各级子标题用来划分章节。标题标签自带一定的字体大小和加粗效果但更关键的是语义上的结构作用。段落用p标签。如果你在代码里直接写了几个回车换行浏览器里是不会换行的——它会忽略连续的空白字符。这是新手最容易踩的第一个坑。换行必须用标签段落之间用p单行内强制换行用brbr是break的缩写自闭合标签不需要结束标签。水平分割线用hr表示内容主题的切换。文本样式方面strong表示重要内容浏览器默认加粗显示em表示强调内容默认斜体。这里我多说一句b和i也能实现加粗和斜体但它们只改变外观不带有语义HTML5规范推荐优先使用strong和em。重要的事情再说一遍HTML的职责是描述内容是什么样式的活儿应该交给CSS。你在HTML里写stylecolor:red可以但这不是好的实践后面维护起来会很痛苦。2.2 超链接与图片a与img的进阶属性a标签创建超链接核心属性是href。链接的目标可以是站内页面hrefabout.html、外部网站hrefhttps://example.com、页面内锚点href#section2甚至电子邮件地址hrefmailto:xxxexample.com。锚点链接很多人不会用。先在目标位置加一个带id的标签比如h2 idsection2第二章/h2然后链接写a href#section2跳转到第二章/a点击就能直接滚动过去。这在长文档页面里特别好用也常被用来做返回顶部在页面底部放一个a href#top然后在body开头随便一个标签上加idtop点击就回到顶部了。不过现在更顺滑的做法是用JavaScript的window.scrollTo({top:0, behavior:smooth})这个后面再谈。target_blank表示在新标签页打开链接。这里有个安全细节加上这个属性后最好同时加上relnoopener noreferrer新打开的页面无法通过window.opener获取原页面的引用防止钓鱼攻击还能在部分浏览器里提高性能。img标签插入图片src是图片路径alt是图片无法加载时显示的替代文字。alt不是可选项它对无障碍访问和SEO都至关重要——搜索引擎无法看图片只能通过alt理解图片内容。图片尺寸用width和height属性指定建议不要随意省略因为浏览器知道了宽高就能在图片加载前预留空间避免页面布局在图片加载完成时突然跳动这个现象叫布局偏移简称CLS会影响SEO得分。响应式图片可以加srcset属性让浏览器按屏幕宽度自动选择合适的分辨率但基础阶段先不展开知道有这个东西就行。2.3 列表与布局基本盘ul、ol、dl和div/span列表有三种。无序列表ul每一项用li包裹适合做导航菜单、商品列表等不分先后的内容有序列表ol同样用li但会自动编号适合教程步骤、排行榜这类有先后顺序的内容自定义列表dl由dt术语名称和dd术语描述组成适合做名词解释、商品参数这类名称—值配对的内容。div和span是两个万金油标签。div是块级元素独占一行常用于划分页面的大区块span是行内元素不会换行常用于在文本流中圈出一小段做特殊样式。它们本身没有任何语义纯粹是给CSS和JavaScript提供钩子。没有它们复杂的页面布局就玩不转。不过要注意能用语义化标签的地方尽量用语义化标签div用太多就会出现div山代码可读性很差这个习惯要早点养成。3. 表格与表单从展示到交互的关键一步表格负责把数据排列得整整齐齐表单负责收集用户输入。这两块是HTML里最重的部分标签多、属性多、注意点也多。但恰恰因为它们复杂学好了在实战中会非常吃香。3.1 表格标签实操table结构拆解与合并单元格一个完整的表格结构是这样的table caption学生成绩表/caption thead tr th姓名/th th语文/th th数学/th /tr /thead tbody tr td张三/td td92/td td88/td /tr tr td李四/td td85/td td95/td /tr /tbody /tablethead放表头tbody放数据主体tfoot放汇总行。为什么要分这三个部分第一是语义清晰第二是浏览器在渲染长表格时如果表格超过一屏thead可以在滚动时保持在可视区域这个特性在处理大量数据时非常实用。th是表头单元格默认加粗居中td是普通单元格。caption是表格标题放在table标签内的第一项。单元格合并是表格实操里必考的技能。colspan表示横向跨列比如td colspan2表示这个单元格占两列宽度rowspan表示纵向跨行。合并的逻辑是合并后被跨越的那个单元格要从代码里去掉了而不是留个空位。比如一个3列的表格第一行第一个单元格写了colspan2那这一行的第二个td就不能再写了否则会多出一列。这里就是个经典踩坑点新手合并单元格后表格总是莫名多出一行或一列多半就是没把被合并的那一格删掉。3.2 表单从零到一form、input、label的配套使用表单是页面和用户交互的核心通道。form定义了提交区域关键属性有两个action数据提交到哪个地址和method用什么方式提交最常见的是get和post。methodget会把数据拼在URL后面适合搜索等轻量操作methodpost把数据放在请求体里适合登录、注册、下单这类涉及隐私或较大数据量的场景。表单里最常用的是input标签它靠type属性变换形态。typetext是单行文本框typepassword是密码框输入内容以圆点显示typeemail在提交时会自动校验邮箱格式typenumber只允许输入数字typecheckbox是复选框可以多选typeradio是单选框同一组单选框必须设置相同的name属性才能实现互斥typefile是文件上传框typehidden是隐藏字段用来携带用户看不到但需要提交的数据。还有一个typesubmit它是提交按钮。多行文本用textarea下拉选项用select配合optionselect namecity option valuebeijing北京/option option valueshanghai上海/option /select这里我必须重点强调一个新手百分之百会踩的坑name属性。表单控件的name就是提交时的字段名服务器端靠它来识别哪个值对应什么含义。缺了name的input用户在浏览器里输入的内容根本不会被提交。我遇到过好几次页面一切正常就是提交后服务器收不到数据最后发现是某个input忘了写name。这个细节务必在写完表单后逐个检查。label标签用来绑定控件说明文字有两种用法一种是label forinputId配合控件的id另一种是直接把控件包在label里label用户名 input typetext nameusername/label加了label的好处是点击文字也能聚焦到输入框同时对屏幕阅读器友好。3.3 表单校验与HTML5带来的新控件HTML5给input增加了一些内置校验能力。required表示必填不填就无法提交minlength和maxlength限制长度min和max限制数值范围pattern可以用正则表达式校验输入格式比如手机号pattern1[3-9]\d{9}。这些校验不写任何JavaScript就能在浏览器端拦截大部分错误输入大大减轻了后端压力。但要注意前端校验只是提升体验不能替代后端校验。前端校验可以被绕过直接构造请求提交到服务器。这个安全常识做Web开发的人一定要记住。另外还有几个实用的HTML5新控件typedate是日期选择器、typecolor是取色器、typerange是滑块、typesearch是带清除按钮的搜索框。原生控件在不同浏览器里外观差异很大但胜在零依赖、稳定可靠。4. HTML5语义化标签写给浏览器也写给搜索引擎HTML4时代页面上到处都是div前端工程师之间调侃说一个页面从头到尾都是div。div本身没有含义浏览器和搜索引擎看完一个页面很难判断哪块是导航、哪块是正文、哪块是页脚。HTML5推出一批语义化标签就是为了解决这个问题。4.1 页面结构标签速览与应用场景header通常放站点logo、导航、搜索框等页头内容nav放主导航链接它是语义化导航的标配main包住页面当前的核心内容一个页面只允许出现一个mainarticle表示一篇独立文章比如博客正文、新闻帖子内容即使挪到别处也成立section用来给内容分块通常配一个标题aside放侧边栏、广告、相关内容推荐等次要信息footer放版权、联系方式、站点地图等页脚信息。一个典型的页面结构可以长这样body header站点头部/header nav导航菜单/nav main article h1文章标题/h1 p正文内容/p /article aside相关推荐/aside /main footer版权信息/footer /body语义化标签本身不会让你的页面变好看它们不改样式。但好处是隐性的搜索引擎能更快理解你的页面结构对SEO有益屏幕阅读器能按语义跳转导航方便视障用户团队的另一个前端接手你的代码一眼就能看出布局意图不用从头到尾翻样式。4.2 增强型标签figure、details与summaryfigure用来包裹配图、图表、代码片段等独立内容figcaption是它的标题。这个组合比单纯的divimg更语义化搜索引擎能识别图文对应关系。details和summary搭配实现点击展开收起的效果不需要写一行JavaScriptdetails summary查看更多/summary p这里是被折叠的详细内容。/p /details点击summary下面的内容就展开再点一次就收起。这个小功能使用场景很多FAQ问答、文章摘要、产品参数折叠。原生实现即可跨浏览器兼容性在主流浏览器里已经没问题。4.3 不要为了语义化而语义化语义化标签用起来有一个大原则不要为了用而用。如果一个标题只是视觉上长得像标题但内容上根本不是标题那就别用h标签直接用样式。同样如果有三两个无关紧要的边栏内容强行套一个aside反而奇怪。语义化的本质是让标签和内容的真实含义相匹配而不是机械地套模板。另外div和span依然有它们的用武之地。当你需要一个纯样式容器、没有任何语义含义时div依然是最合适的选择。语义化标签解决的是让机器理解结构的问题div解决的是给样式一个挂载点的问题两者并存不冲突。5. 常用标签速查表与周边场景实战心得理论说了一堆最后给一张速查表平时写到一半想不起来某个标签时直接翻这里就行。然后我再聊聊标签在实际场景里怎么配合周边工具链这部分经验是我自己踩坑踩出来的网上教程一般不会写。5.1 高频标签速查表标签作用关键属性a超链接href、targetimg图片src、alt、width、heightul/ol/li无序/有序列表—table/tr/td/th表格colspan、rowspanform表单容器action、methodinput输入控件type、name、value、requiredtextarea多行文本name、rows、colsselect/option下拉框name、selectedbutton按钮typesubmit/button/resetdiv/span无语义容器id、classheader/nav/footer页面区域语义化—main/article/aside内容语义化—details/summary展开收起open这里补充几个容易被忽略的细节。button在form里如果不写type默认值是typesubmit也就是说你随手放一个button在表单里点击它就会触发提交。我见过有人在表单里放了一个重置按钮因为没写typebutton点击后整个表单数据全被清空了用户气得跳脚。正确做法是普通按钮明确写typebutton提交按钮明确写typesubmit不要依赖默认值。5.2 围绕标签的周边工具从HTML转Markdown到PDF导出基础标签学会以后你会发现在实际工作中经常要和各种HTML处理场景打交道。比如HTML转Markdown很多人写文档时想把一个网页内容转成MD格式网上可以直接搜索pandoc工具一条命令搞定pandoc input.html -o output.md这背后的原理是pandoc内部解析HTML的标题、段落、列表等语义化标签然后映射成Markdown语法。你会发现HTML写得越规范用h1-h6、p、ul这些语义化标签转换的结果越干净。如果原页面从头到尾都是div转换工具根本无从判断哪些是标题、哪些是正文整个Markdown就会乱成一锅粥。这也是我前面反复强调语义化的另一个现实回报。再比如HTML转PDF加水印Java生态里常用iText7基本的思路是先用HtmlConverter把HTML转成PDF文档然后遍历每一页调用绘图接口在页面中叠加半透明文字作为水印。这类库对HTML的兼容程度各不相同有的支持CSS 2.1有的支持部分CSS 3遇到复杂布局很容易错位。经验是越是简单规整的HTML转换成功率越高CSS里尽量少用flex和grid这类现代布局多用表格和float的老实写法PDF转换效果反而更稳定。5.3 本地调试HTML的常用方式你写好的HTML文件双击用浏览器打开就能预览文件路径以file://协议加载。但这种方式有一个局限如果用到了Fetch API、ES6模块、某些浏览器的dedicated workerfile://协议下会报跨域错误。解决办法是用本地静态服务器。如果你装了Python一条命令就能开启python3 -m http.server 8000然后浏览器访问http://localhost:8000就能看到当前目录下的文件。这个方案零依赖、跨平台我用了好多年。Node.js用户可以用npx serve同样方便。在Linux环境比如Ubuntu下如果不想装IDE直接用系统自带的文本编辑器如gedit、nano写代码然后配合浏览器实时刷新预览对初学者来说完全够用。5.4 pyqt5显示HTML、打包多个HTML等实际需求有朋友在桌面应用里用PyQt5显示HTML主要用到QTextBrowser控件它自带setHtml()方法可以加载HTML字符串setSource()可以加载本地HTML文件。这里有个经验QTextBrowser对CSS的支持有限CSS3的新特性如flex、grid在桌面控件里效果不如浏览器渲染得好。所以在桌面端显示HTML时建议用表格布局加基础CSS老老实实写最兼容的那些标签。打包多个HTML的需求本质是组织静态资源。最简单的做法是保持目录结构不变把HTML、CSS、JS、图片统一放在一个文件夹里相对路径引用。如果要做成一个单文件分享给别人可以用构建工具把多个页面内联进一个HTML或者用data URI把图片编码进HTML里。在浏览器地址栏输入data:text/html,h1你好/h1可以直接把一小段HTML源码当成URL打开预览这个技巧适合临时调试但注意URL长度有限别放太大段的内容。6. 常见问题与排查技巧实录学习HTML的过程中会遇到一批经典问题。我挑几个出现频率最高的讲讲排查思路和解决方法。6.1 中文乱码的根源与解决现象页面打开后中文全是锟斤拷或者ä½ å¥½这种乱码。原因几乎只有一个浏览器解码时使用的字符集跟文件实际编码不一致。排查步骤确认HTML文件保存时用的编码。VS Code点击右下角的编码按钮如UTF-8可以查看和切换。确认meta charset声明的编码和文件保存编码一致。如果以上两步都没问题检查服务器返回的响应头。用浏览器开发者工具切换到Network面板查看文档请求的响应头里Content-Type字段如果服务器强制返回了charsetISO-8859-1之类的值浏览器会优先使用响应头而不是meta里的声明。解决办法是在服务器配置里正确设置字符集。Windows用户特别容易踩这个坑系统记事本保存文件时默认可能是ANSIGBK编码而HTML里写的charset却是utf-8结果必然乱码。用记事本保存时在另存为对话框里要手动把编码选成UTF-8。6.2 图片显示不出来的三种原因img标签写了图片却不显示排查顺序是检查路径。相对路径是相对于当前HTML文件所在的目录不是相对于网站根目录。src../images/logo.png的..是上一级目录这个最容易搞错。检查文件名后缀的大小写以及文件名里的空格。Logo.PNG和logo.png在Windows上可能可以显示但在Linux服务器上就是两个不同的文件。文件名里尽量不要用中文和空格服务器兼容性会好很多。检查文件权限。服务器上的图片目录如果权限不对浏览器会返回403。本地打开文件时一般不会遇到这个问题。还有一个常见坑alt文字显示出来了但图片没显示说明图片压根没加载成功。此时按F12打开开发者工具看Console报错信息能直接看到加载失败的具体原因。6.3 表单提交后收不到数据表现点击提交按钮页面跳转到了action地址但服务端收到的数据是空的。九成原因是表单控件缺少name属性。input、textarea、select都必须有name才会把值提交上去。还有一成原因是用button提交时这个button自己也有个name和value会被一起提交上去如果和业务逻辑冲突也会造成干扰。如果是用get方式提交留意地址栏URL后面的参数?usernameabcage20。每一个参数都是namevalue的形式对照检查就知道哪些字段没提交上来。用post方式时看开发者工具的Network面板在请求的Form Data部分能看到提交的字段列表。6.4 样式与布局错乱的通用排查思路页面效果和预期不符先打开开发者工具F12定位到出问题的元素右侧Styles面板会列出全部生效的CSS规则。排查顺序检查元素是否被其他样式覆盖了。CSS的覆盖规则是后加载的在前、更具体的选择器优先、内联样式优先按这个顺序找原因。检查盒模型。display、width、padding、border、margin任何一个变化都会影响实际占据的空间。开发者工具的Computed面板能看到最终计算出来的盒模型长宽一目了然。检查布局方式。flex和grid布局里子元素默认行为跟普通元素完全不同很多多出来的空白、对不齐问题都出自这里。如果CSS样式的优先级没问题盒模型也对但看起来还是不对那就逐层删元素删一个看一次效果能很快缩小问题范围。这个方法土但比我见过很多所谓的高级调试技巧都管用。6.5 一张表总结高频问题现象常见原因解决方案中文乱码文件编码与charset不一致统一为UTF-8图片不显示路径错误、文件名大小写、权限问题用相对路径并检查权限表单数据缺失控件缺name属性逐个控件检查name点击按钮页面刷新button默认typesubmit加typebutton手机上页面很宽缺少viewport meta添加viewport配置布局错乱CSS优先级、盒模型问题开发者工具逐项排查最后再分享一个个人习惯我每写完一个页面都会右键选择查看网页源代码从头到尾读一遍自己写的HTML标签检查标签闭合是否完整、嵌套是否合理、语义化是否到位。这个动作只需要几分钟但极大地减少了我后期排错的时间。HTML这种标着简单的科目恰恰是最能在细节上拉开差距的——标签写得规范不规范别人拿过去看几秒钟就能判断出你的功底。