做界面开发这么多年面试过不少新人也带过一些刚入行的朋友。每次聊到HTML很多人的反应都是这不就是一堆标签嘛有什么好学的结果真到了写页面的时候问题一个接一个——中文乱码了、图片出不来、表单数据传丢了、样式怎么调都对不上最后折腾半天发现是标签嵌套错了。HTML确实不难但它是一切的底子。CSS再漂亮、JavaScript再花哨最后都得落在HTML这个结构上。这篇笔记是我自己平时写页面、带新人时反复用到的基础知识点总结覆盖面比较全文档结构、高频标签、核心概念、HTML5新能力、落地细节还有一份踩坑排查清单。适合刚接触前端的同学做系统梳理也适合写了一阵子但基础不太牢的人查漏补缺。1. 先搞明白HTML到底在干什么1.1 浏览器、HTML和网页三者的关系HTML的全称是HyperText Markup Language超文本标记语言。它负责的只有一件事告诉浏览器页面上有什么内容以及这些内容大致是什么身份——是一级标题、一段文字、一张图片还是一个输入框。用一个生活化的类比如果把网页比作一栋房子HTML就是毛坯房的墙体结构和房间分区CSS是装修风格——墙刷什么颜色、家具摆哪里JavaScript则是水电和智能家居系统负责响应你的操作。没有HTML后面两个都无从附着。很多新手容易混淆“页面效果”和“HTML”。比如用浏览器打开一个精美网站按F12看到的那些div、section、span才是网页的“本质内容”。浏览器收到HTML文本后会解析成DOM树再根据CSS和JavaScript把样式和行为渲染出来。所以HTML写得好不好直接决定后续CSS和JS的工作量。结构混乱的HTML后面调样式、绑事件都会很痛苦。1.2 一份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是文档类型声明告诉浏览器“请按现代标准模式解析”。别小看这一行缺失它IE等老浏览器会进入怪异模式盒模型计算都不一样页面直接变形。现在写HTML5这一行固定写成!DOCTYPE html就行不用带版本号。html langzh-CN声明页面语言。zh-CN表示简体中文en表示英文。这个属性对搜索引擎识别页面语言、屏幕阅读器选择发音规则都有帮助。head里放元信息和资源引用charset声明字符集业界统一是UTF-8能涵盖绝大多数语言的字符viewport这行是移动端适配的关键title是页面标题会显示在浏览器标签页上也是SEO排名的重要参考。body里放的所有内容才是用户能在页面里看到的东西。头部、导航、正文、底部全部从这里开始。1.3 开发工具怎么选工欲善其事必先利其器。HTML是纯文本格式理论上用系统自带记事本都能写。但实际干活最好还是选个像样的编辑器。个人推荐VS Code。免费、跨平台Windows、macOS、Linux包括Ubuntu都有版本插件生态非常丰富。装好之后再补几个插件就很顺手Live Server保存文件后浏览器自动刷新写静态页面效率翻倍。Prettier自动格式化代码统一团队风格。HTML CSS Support提供完整的标签和属性提示。有人问过我用Ubuntu怎么选HTML编辑器其实VS Code在Linux下体验也很好安装deb包或者用官方源都行。如果机器配置比较老也可以用Sublime Text或者Vim前者轻量后者是终端里的经典选择习惯了效率很高。2. 高频必会的HTML标签2.1 文本标签标题、段落、强调、换行、水平线文本是网页的基本组成。学会合理安排文本标签页面结构才会清楚。标题标签h1到h6权重从高到低。一个页面建议只出现一个h1一般放品牌名或核心标题h2用于主要区块h3再往下细分。搜索引擎抓取页面的内容结构主要就是看这套标题层级。段落标签p每一个自然段用一对p包起来。注意在HTML源码里直接按回车换行是不生效的浏览器会把连续空白折成一个空格。想要强制换行要用br。强调标签有strong和em。strong表示重要的内容默认加粗em表示语气上的强调默认斜体。尽量别为了加粗而用b、为了斜体而用i语义和表现要分开这是写HTML的一条原则。水平线hr用于章节分隔。文本级别的分组可以用span它是纯内联容器适合包住一小段文字后再用CSS调整样式p这是一段文字其中span stylecolor: red;这部分/span用红色突出。/p2.2 链接和图片a、img、锚点超链接是HTML里最核心的标签之一写着简单但功能不少a hrefhttps://example.com target_blank relnoopener noreferrer打开新页面/ahref是跳转目标可以是站外地址、站内路径也可以是mailto:邮件地址、tel:电话号。target_blank表示新标签页打开。这里有个安全细节加了target_blank的链接最好再加上relnoopener noreferrer防止新页面通过window.opener操作原页面。锚点也是a标签的常见用法。给目标元素加id然后让链接的href指向#ida href#footer跳到底部/a footer idfooter这里是页面底部内容/footer很多“一键返回顶部”的按钮本质上就是href#top配合idtop的元素或者用JS里的scrollTo方法实现。纯HTML方案更简单适合做页面内跳转。图片标签img srcimages/logo.png alt公司Logo width120 height60src写图片路径alt是图片无法显示时替代的文字也是无障碍访问和SEO的重要一环。width和height建议给上避免图片加载过程中页面布局跳动。2.3 列表和表格列表分三种无序列表ulli、有序列表olli、自定义列表dldtdd。导航菜单、新闻列表、商品条目全是列表制造的ul li首页/li li关于我们/li li联系方式/li /ul表格用于展示结构化数据结构比列表复杂一些table caption近三个月销售统计/caption thead tr th月份/th th销售额/th /tr /thead tbody tr td1月/td td12000/td /tr /tbody /tablecaption是表格标题thead、tbody、tfoot分别定义表头、主体、表尾。跨行跨列用rowspan和colspan。这里顺带提一个行业冷知识很多HTML邮件模板至今还在用表格布局因为邮件客户端的CSS解析能力参差不齐表格布局的兼容性最稳。所以别觉得学表格没用搞邮件开发时这就是基本功。2.4 表单数据是怎么交上来的表单是前端和后端交互的门面签个完整的表单需要掌握这些元素form action/login methodPOST label forusername用户名/label input typetext idusername nameusername required label forpassword密码/label input typepassword idpassword namepassword required select namecity option valuebeijing北京/option option valueshanghai上海/option option valueguangzhou广州/option /select textarea namecomment rows4 cols30默认内容/textarea button typesubmit提交/button /form关键的几个点form的action指定提交地址method是请求方式input的name属性是提交数据时传给后端的字段名忘记写name数据根本传不出去。label的for属性绑定到input的id点击文字时就能聚焦到对应输入框这对小屏设备尤其重要。input的类型也值得挨个过一遍text文本、password密码、checkbox多选、radio单选、file文件上传、submit提交按钮。每个类型都有自己默认的交互逻辑比如password会自动掩码显示。3. 必须吃透的几个核心概念3.1 块级元素和内联元素这是新手最容易混乱的概念之一但理解之后很多布局问题会迎刃而解。块级元素在页面上独占一行默认宽度撑满父容器。常见的有div、p、h1-h6、ul、ol、li、table、form、header、footer、section、article等。内联元素只在水平方向排列默认宽度由内容撑开不能设置宽高。常见的有a、span、strong、em以及表单里的input、select、textarea等。举例说明写三个div它们会自动换行排成三行写三个span会挤在同一行。需要临时改变这种特性时可以给元素设置CSS的display: block;或display: inline;。注意CSS里还有第四种大杀器inline-block它同时具备“可排在同一行”和“可设宽高”的特性做导航栏和横向标签非常好用。有一个细节值得提醒p标签内不能嵌套块级元素比如div。如果你写了pdiv内容/div/p浏览器解析时会自动打断这个结构最终DOM和你的预期完全不一样。这也是很多“样式奇奇怪怪”问题的根源。3.2 语义化标签语义化是写出高质量HTML的分水岭。所谓“语义化”就是选标签时优先考虑“标签本身含义是否符合内容的含义”而不是“标签长什么样”。举个例子导航栏可以用div加个class救命也可以用nav。视觉上两者一模一样但nav有导航语义屏幕阅读器能直接识别出这是导航区域搜索引擎也能更好地理解页面结构。HTML5带来了一批专门的语义标签header页眉、区块的头部区域。nav导航区域。main页面主体内容一个页面建议只用一个。article独立成块的内容比如一篇博文、一条评论。section一个主题区域。aside侧边栏、补充信息。footer页脚。不用害怕语义标签限制发挥。实际项目中div仍然大量存在但“能用语义标签时尽量用语义标签用不了再用div”这条原则会让页面结构干净很多。以前维护过一个老项目整个页面全是嵌套了七八层的div不看注释根本分不清哪块是哪块。后来重构时换成语义化标签团队同事接手成本直线下降。3.3 HTML属性全局属性与自定义属性属性是元素的附加信息。常见的有id、class、style、title等。id在整个页面里必须唯一class可以重复使用style是行内样式优先级很高、复用性差建议只在调试或者极特殊情况时用。title属性能让鼠标悬停时显示提示文字对用户交互体验有微妙的帮助。还有几个少见的全局属性也很有用hidden隐藏元素。>button>document.querySelector(button).addEventListener(click, function() { console.log(this.dataset.id); // 1001 });lang单独给某段内容指定语言多语言页面会用到。属性嵌套时的写法也容易踩坑。属性名不区分大小写但id、class的值区分大小写。属性值建议统一用双引号包裹保持团队风格一致。4. HTML5新增的核心能力4.1 语义化结构标签刚才提过一次语义化标签这里展开讲一下它们怎么组合使用。一个典型的HTML5页面布局body header nav导航链接/nav /header main article h2文章标题/h2 p文章正文/p /article aside侧边推荐/aside /main footer p版权信息/p /footer /body这套结构的可读性非常好看一眼代码就能知道页面大概的区块规划。如果换成清一色div需要读一会儿注释才能明白。另外article和section可以互相嵌套比如一个article里可以有多个section一个section里也可以有多篇article。判断标准很简单这个内容单独拿出来是否还有完整意义有就放到article里。4.2 表单输入类型增强HTML5给表单带来的提升是巨大的以前需要引入JS库才能做的校验现在原生的几个属性就能搞定。新增的输入类型typeemail浏览器自动校验邮箱格式。typeurl校验URL格式。typenumber只能输入数字还能配合min、max。typedate弹出日期选择器。typecolor颜色选择器。typerange滑块。约束属性required必填项不填就无法提交。placeholder输入框的占位提示文字。pattern用正则校验格式比如手机号。autofocus页面加载后自动聚焦。autocomplete关闭表单联想填充。input typeemail placeholder请输入邮箱 required input typetel pattern1[3-9][0-9]{9} placeholder手机号 required这些都是“一行代码搞定”的硬核能力。但要注意原生表单校验只能在“手写提交”场景生效如果你用JS的submit()方法强行提交部分浏览器会绕过校验。另外后端仍然必须做校验前端校验只是改善用户体验的手段不能当安全措施。4.3 多媒体与网页绘图HTML5之前在网页里放视频要写一堆object、embed代码还得装插件。现在两个标签解决video controls width640 postercover.png source srcmovie.mp4 typevideo/mp4 source srcmovie.webm typevideo/webm 你的浏览器不支持视频播放。 /videocontrols让浏览器显示播放控件poster是视频封面图source可以写多个备用格式浏览器会按顺序找到第一个能播放的。audio标签用法类似。绘图方面有canvas标签。它的本质是一个画布要配合JavaScript才能绘制内容。用于图表、动效、游戏画面渲染。还有svg标签用于绘制矢量图形放大不失真图标和Logo用得很广。canvas idmyCanvas width200 height100/canvasconst canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); ctx.fillStyle #4C9AFF; ctx.fillRect(20, 20, 100, 50);这部分对只做页面结构的人来说可能用不上但了解它们的存在至少面试时不会两眼一抹黑。5. 从“能跑”到“能看”的落地细节5.1 字符编码与中文乱码问题中文乱码是新手遇到最多的经典问题。现象很统一浏览器里显示一堆“鏂囩珷”之类的乱字。问题根源基本就是meta charsetUTF-8缺失或者说文件保存时的编码不是UTF-8。HTML文件本质是文本文件保存时用什么编码浏览器就必须用什么编码来解读。两边对不上自然就乱码。解决办法分两步在head里加meta charsetUTF-8放在title之前。确认文件本身是以UTF-8保存的。VS Code右下角状态栏会显示当前文件的编码点击可以切换。如果是老项目源文件是GB2312那么meta也得对应改成gb2312保持统一。还有一个隐蔽场景POST表单提交出现乱码。那时因为页面编码和服务端接收解码的编码不一致前端能做的也是统一声明UTF-8并确认form里有accept-charsetUTF-8多数情况不需要显式写但遇到了就得知道。5.2 viewport与移动端适配移动端网页的入门必选项是这一行meta nameviewport contentwidthdevice-width, initial-scale1.0不写这行会怎样你写了一个宽度800px的页面在手机上打开浏览器为了“完整显示”会把整个页面缩小于是字变得芝麻大小用户得放大才能阅读。加上这行页面宽度会跟随设备的宽度比例按1:0正常渲染字体大小正常。widthdevice-width含义是页面宽度取设备的物理宽度initial-scale1.0是初始缩放比例1倍。如果要禁用用户手动缩放可以加maximum-scale1, user-scalableno但从无障碍角度不太推荐除非产品有特定要求。5.3 图片格式选择与懒加载页面里图片太多性能和流量压力会很大。格式选对能省不少带宽JPEG适合照片类、色彩丰富的图体积可控。PNG适合有透明需求的图比如Logo、图标。WebPGoogle推出的格式压缩率更高同等画质体积比JPEG小30%左右现代浏览器都支持。SVG矢量图适合图标、简单插画缩放不糊。图片懒加载现在原生就支持img srcplaceholder.png>p文字strong强调/p/strong正确的写法是先打开的标签后闭合p文字strong强调/strong/p闭合遗漏。忘了写/div或/li后续所有样式全部错乱。浏览器解析时会自动尝试修复但修复结果往往不是你想要的结构。调试时可以按F12打开Elements面板看到标红的节点通常就是解析出问题的地方。大小写混用。标签名和属性名不区分大小写DIV和div等价但习惯和规范都是小写。统一小写团队协作时diff才会干净。6.2 特殊字符转义在HTML里有些字符有特殊含义直接写会出问题。最典型的就是小于号和大于号。你想在页面上显示“5 10”直接写会变成标签必须用字符实体显示结果字符实体说明lt;小于号gt;大于号amp;与符号quot;双引号apos;单引号空格不换行nbsp;连续空格©copy;版权符号写技术文档、代码展示、数学公式时转义是必须处理的环节。有些人转义内容位忘了结果页面上整段内容被浏览器当成标签吞掉。6.3 常见问题速查表问题现象可能原因排查方向中文乱码缺meta charset或文件保存编码不一致查看head与编辑器右下角编码图片不显示src路径错误或文件名大小写不对F12控制台看404信息样式不生效标签嵌套错误、选择器写错、未引入CSS检查结构、检查link路径表单数据传不到后端input缺name或form缺action查看form与name属性字体极小缺viewport meta补上viewport标签CSS样式串了类名重复或全局选择器太宽泛检查class命名与优先级有些问题看着千奇百怪实际追溯到最后总能在HTML结构上找到根因。所以我一直建议前端新人遇到bug先按F12看元素面板把DOM结构的真实状态搞明白再去找CSS和JS的麻烦。很多时候你以为CSS写错了其实HTML压根不是你以为的那个结构。还有一个值得提的实际问题是用脚本或爬虫解析HTML时。很多人拿正则去匹配HTML里的标签遇到嵌套结构非常容易出错。更专业的做法是用BeautifulSoup这类库先解析成DOM树再操作。当然这是另一个话题了但已经写过爬虫的同学应该深有体会。HTML这门语言很像个“老好人”——它容错性很强写错了往往不会直接报错只是默默地以奇怪的方式渲染出来。这种特性对用户友好但对开发者不友好。所以写HTML时养成好习惯远比事后纠错重要。我个人在实际操作中的体会是写HTML最大的收获不是记住多少个标签而是培养一种“结构化思维”——拿到一个需求先划分区块再填充内容最后才是调整细节。这套思维是通用的不管以后转不转行、学不学别的框架都不亏。最后分享一个小技巧写完页面后把页面文字全部复制到纯文本编辑器里如果读起来逻辑通顺、章节分明说明HTML结构基本合格如果文字东一块西一块那结构多半有问题。结构对了后面的路就好走了。
做界面开发这么多年面试过不少新人也带过一些刚入行的朋友。每次聊到HTML很多人的反应都是这不就是一堆标签嘛有什么好学的结果真到了写页面的时候问题一个接一个——中文乱码了、图片出不来、表单数据传丢了、样式怎么调都对不上最后折腾半天发现是标签嵌套错了。HTML确实不难但它是一切的底子。CSS再漂亮、JavaScript再花哨最后都得落在HTML这个结构上。这篇笔记是我自己平时写页面、带新人时反复用到的基础知识点总结覆盖面比较全文档结构、高频标签、核心概念、HTML5新能力、落地细节还有一份踩坑排查清单。适合刚接触前端的同学做系统梳理也适合写了一阵子但基础不太牢的人查漏补缺。1. 先搞明白HTML到底在干什么1.1 浏览器、HTML和网页三者的关系HTML的全称是HyperText Markup Language超文本标记语言。它负责的只有一件事告诉浏览器页面上有什么内容以及这些内容大致是什么身份——是一级标题、一段文字、一张图片还是一个输入框。用一个生活化的类比如果把网页比作一栋房子HTML就是毛坯房的墙体结构和房间分区CSS是装修风格——墙刷什么颜色、家具摆哪里JavaScript则是水电和智能家居系统负责响应你的操作。没有HTML后面两个都无从附着。很多新手容易混淆“页面效果”和“HTML”。比如用浏览器打开一个精美网站按F12看到的那些div、section、span才是网页的“本质内容”。浏览器收到HTML文本后会解析成DOM树再根据CSS和JavaScript把样式和行为渲染出来。所以HTML写得好不好直接决定后续CSS和JS的工作量。结构混乱的HTML后面调样式、绑事件都会很痛苦。1.2 一份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是文档类型声明告诉浏览器“请按现代标准模式解析”。别小看这一行缺失它IE等老浏览器会进入怪异模式盒模型计算都不一样页面直接变形。现在写HTML5这一行固定写成!DOCTYPE html就行不用带版本号。html langzh-CN声明页面语言。zh-CN表示简体中文en表示英文。这个属性对搜索引擎识别页面语言、屏幕阅读器选择发音规则都有帮助。head里放元信息和资源引用charset声明字符集业界统一是UTF-8能涵盖绝大多数语言的字符viewport这行是移动端适配的关键title是页面标题会显示在浏览器标签页上也是SEO排名的重要参考。body里放的所有内容才是用户能在页面里看到的东西。头部、导航、正文、底部全部从这里开始。1.3 开发工具怎么选工欲善其事必先利其器。HTML是纯文本格式理论上用系统自带记事本都能写。但实际干活最好还是选个像样的编辑器。个人推荐VS Code。免费、跨平台Windows、macOS、Linux包括Ubuntu都有版本插件生态非常丰富。装好之后再补几个插件就很顺手Live Server保存文件后浏览器自动刷新写静态页面效率翻倍。Prettier自动格式化代码统一团队风格。HTML CSS Support提供完整的标签和属性提示。有人问过我用Ubuntu怎么选HTML编辑器其实VS Code在Linux下体验也很好安装deb包或者用官方源都行。如果机器配置比较老也可以用Sublime Text或者Vim前者轻量后者是终端里的经典选择习惯了效率很高。2. 高频必会的HTML标签2.1 文本标签标题、段落、强调、换行、水平线文本是网页的基本组成。学会合理安排文本标签页面结构才会清楚。标题标签h1到h6权重从高到低。一个页面建议只出现一个h1一般放品牌名或核心标题h2用于主要区块h3再往下细分。搜索引擎抓取页面的内容结构主要就是看这套标题层级。段落标签p每一个自然段用一对p包起来。注意在HTML源码里直接按回车换行是不生效的浏览器会把连续空白折成一个空格。想要强制换行要用br。强调标签有strong和em。strong表示重要的内容默认加粗em表示语气上的强调默认斜体。尽量别为了加粗而用b、为了斜体而用i语义和表现要分开这是写HTML的一条原则。水平线hr用于章节分隔。文本级别的分组可以用span它是纯内联容器适合包住一小段文字后再用CSS调整样式p这是一段文字其中span stylecolor: red;这部分/span用红色突出。/p2.2 链接和图片a、img、锚点超链接是HTML里最核心的标签之一写着简单但功能不少a hrefhttps://example.com target_blank relnoopener noreferrer打开新页面/ahref是跳转目标可以是站外地址、站内路径也可以是mailto:邮件地址、tel:电话号。target_blank表示新标签页打开。这里有个安全细节加了target_blank的链接最好再加上relnoopener noreferrer防止新页面通过window.opener操作原页面。锚点也是a标签的常见用法。给目标元素加id然后让链接的href指向#ida href#footer跳到底部/a footer idfooter这里是页面底部内容/footer很多“一键返回顶部”的按钮本质上就是href#top配合idtop的元素或者用JS里的scrollTo方法实现。纯HTML方案更简单适合做页面内跳转。图片标签img srcimages/logo.png alt公司Logo width120 height60src写图片路径alt是图片无法显示时替代的文字也是无障碍访问和SEO的重要一环。width和height建议给上避免图片加载过程中页面布局跳动。2.3 列表和表格列表分三种无序列表ulli、有序列表olli、自定义列表dldtdd。导航菜单、新闻列表、商品条目全是列表制造的ul li首页/li li关于我们/li li联系方式/li /ul表格用于展示结构化数据结构比列表复杂一些table caption近三个月销售统计/caption thead tr th月份/th th销售额/th /tr /thead tbody tr td1月/td td12000/td /tr /tbody /tablecaption是表格标题thead、tbody、tfoot分别定义表头、主体、表尾。跨行跨列用rowspan和colspan。这里顺带提一个行业冷知识很多HTML邮件模板至今还在用表格布局因为邮件客户端的CSS解析能力参差不齐表格布局的兼容性最稳。所以别觉得学表格没用搞邮件开发时这就是基本功。2.4 表单数据是怎么交上来的表单是前端和后端交互的门面签个完整的表单需要掌握这些元素form action/login methodPOST label forusername用户名/label input typetext idusername nameusername required label forpassword密码/label input typepassword idpassword namepassword required select namecity option valuebeijing北京/option option valueshanghai上海/option option valueguangzhou广州/option /select textarea namecomment rows4 cols30默认内容/textarea button typesubmit提交/button /form关键的几个点form的action指定提交地址method是请求方式input的name属性是提交数据时传给后端的字段名忘记写name数据根本传不出去。label的for属性绑定到input的id点击文字时就能聚焦到对应输入框这对小屏设备尤其重要。input的类型也值得挨个过一遍text文本、password密码、checkbox多选、radio单选、file文件上传、submit提交按钮。每个类型都有自己默认的交互逻辑比如password会自动掩码显示。3. 必须吃透的几个核心概念3.1 块级元素和内联元素这是新手最容易混乱的概念之一但理解之后很多布局问题会迎刃而解。块级元素在页面上独占一行默认宽度撑满父容器。常见的有div、p、h1-h6、ul、ol、li、table、form、header、footer、section、article等。内联元素只在水平方向排列默认宽度由内容撑开不能设置宽高。常见的有a、span、strong、em以及表单里的input、select、textarea等。举例说明写三个div它们会自动换行排成三行写三个span会挤在同一行。需要临时改变这种特性时可以给元素设置CSS的display: block;或display: inline;。注意CSS里还有第四种大杀器inline-block它同时具备“可排在同一行”和“可设宽高”的特性做导航栏和横向标签非常好用。有一个细节值得提醒p标签内不能嵌套块级元素比如div。如果你写了pdiv内容/div/p浏览器解析时会自动打断这个结构最终DOM和你的预期完全不一样。这也是很多“样式奇奇怪怪”问题的根源。3.2 语义化标签语义化是写出高质量HTML的分水岭。所谓“语义化”就是选标签时优先考虑“标签本身含义是否符合内容的含义”而不是“标签长什么样”。举个例子导航栏可以用div加个class救命也可以用nav。视觉上两者一模一样但nav有导航语义屏幕阅读器能直接识别出这是导航区域搜索引擎也能更好地理解页面结构。HTML5带来了一批专门的语义标签header页眉、区块的头部区域。nav导航区域。main页面主体内容一个页面建议只用一个。article独立成块的内容比如一篇博文、一条评论。section一个主题区域。aside侧边栏、补充信息。footer页脚。不用害怕语义标签限制发挥。实际项目中div仍然大量存在但“能用语义标签时尽量用语义标签用不了再用div”这条原则会让页面结构干净很多。以前维护过一个老项目整个页面全是嵌套了七八层的div不看注释根本分不清哪块是哪块。后来重构时换成语义化标签团队同事接手成本直线下降。3.3 HTML属性全局属性与自定义属性属性是元素的附加信息。常见的有id、class、style、title等。id在整个页面里必须唯一class可以重复使用style是行内样式优先级很高、复用性差建议只在调试或者极特殊情况时用。title属性能让鼠标悬停时显示提示文字对用户交互体验有微妙的帮助。还有几个少见的全局属性也很有用hidden隐藏元素。>button>document.querySelector(button).addEventListener(click, function() { console.log(this.dataset.id); // 1001 });lang单独给某段内容指定语言多语言页面会用到。属性嵌套时的写法也容易踩坑。属性名不区分大小写但id、class的值区分大小写。属性值建议统一用双引号包裹保持团队风格一致。4. HTML5新增的核心能力4.1 语义化结构标签刚才提过一次语义化标签这里展开讲一下它们怎么组合使用。一个典型的HTML5页面布局body header nav导航链接/nav /header main article h2文章标题/h2 p文章正文/p /article aside侧边推荐/aside /main footer p版权信息/p /footer /body这套结构的可读性非常好看一眼代码就能知道页面大概的区块规划。如果换成清一色div需要读一会儿注释才能明白。另外article和section可以互相嵌套比如一个article里可以有多个section一个section里也可以有多篇article。判断标准很简单这个内容单独拿出来是否还有完整意义有就放到article里。4.2 表单输入类型增强HTML5给表单带来的提升是巨大的以前需要引入JS库才能做的校验现在原生的几个属性就能搞定。新增的输入类型typeemail浏览器自动校验邮箱格式。typeurl校验URL格式。typenumber只能输入数字还能配合min、max。typedate弹出日期选择器。typecolor颜色选择器。typerange滑块。约束属性required必填项不填就无法提交。placeholder输入框的占位提示文字。pattern用正则校验格式比如手机号。autofocus页面加载后自动聚焦。autocomplete关闭表单联想填充。input typeemail placeholder请输入邮箱 required input typetel pattern1[3-9][0-9]{9} placeholder手机号 required这些都是“一行代码搞定”的硬核能力。但要注意原生表单校验只能在“手写提交”场景生效如果你用JS的submit()方法强行提交部分浏览器会绕过校验。另外后端仍然必须做校验前端校验只是改善用户体验的手段不能当安全措施。4.3 多媒体与网页绘图HTML5之前在网页里放视频要写一堆object、embed代码还得装插件。现在两个标签解决video controls width640 postercover.png source srcmovie.mp4 typevideo/mp4 source srcmovie.webm typevideo/webm 你的浏览器不支持视频播放。 /videocontrols让浏览器显示播放控件poster是视频封面图source可以写多个备用格式浏览器会按顺序找到第一个能播放的。audio标签用法类似。绘图方面有canvas标签。它的本质是一个画布要配合JavaScript才能绘制内容。用于图表、动效、游戏画面渲染。还有svg标签用于绘制矢量图形放大不失真图标和Logo用得很广。canvas idmyCanvas width200 height100/canvasconst canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); ctx.fillStyle #4C9AFF; ctx.fillRect(20, 20, 100, 50);这部分对只做页面结构的人来说可能用不上但了解它们的存在至少面试时不会两眼一抹黑。5. 从“能跑”到“能看”的落地细节5.1 字符编码与中文乱码问题中文乱码是新手遇到最多的经典问题。现象很统一浏览器里显示一堆“鏂囩珷”之类的乱字。问题根源基本就是meta charsetUTF-8缺失或者说文件保存时的编码不是UTF-8。HTML文件本质是文本文件保存时用什么编码浏览器就必须用什么编码来解读。两边对不上自然就乱码。解决办法分两步在head里加meta charsetUTF-8放在title之前。确认文件本身是以UTF-8保存的。VS Code右下角状态栏会显示当前文件的编码点击可以切换。如果是老项目源文件是GB2312那么meta也得对应改成gb2312保持统一。还有一个隐蔽场景POST表单提交出现乱码。那时因为页面编码和服务端接收解码的编码不一致前端能做的也是统一声明UTF-8并确认form里有accept-charsetUTF-8多数情况不需要显式写但遇到了就得知道。5.2 viewport与移动端适配移动端网页的入门必选项是这一行meta nameviewport contentwidthdevice-width, initial-scale1.0不写这行会怎样你写了一个宽度800px的页面在手机上打开浏览器为了“完整显示”会把整个页面缩小于是字变得芝麻大小用户得放大才能阅读。加上这行页面宽度会跟随设备的宽度比例按1:0正常渲染字体大小正常。widthdevice-width含义是页面宽度取设备的物理宽度initial-scale1.0是初始缩放比例1倍。如果要禁用用户手动缩放可以加maximum-scale1, user-scalableno但从无障碍角度不太推荐除非产品有特定要求。5.3 图片格式选择与懒加载页面里图片太多性能和流量压力会很大。格式选对能省不少带宽JPEG适合照片类、色彩丰富的图体积可控。PNG适合有透明需求的图比如Logo、图标。WebPGoogle推出的格式压缩率更高同等画质体积比JPEG小30%左右现代浏览器都支持。SVG矢量图适合图标、简单插画缩放不糊。图片懒加载现在原生就支持img srcplaceholder.png>p文字strong强调/p/strong正确的写法是先打开的标签后闭合p文字strong强调/strong/p闭合遗漏。忘了写/div或/li后续所有样式全部错乱。浏览器解析时会自动尝试修复但修复结果往往不是你想要的结构。调试时可以按F12打开Elements面板看到标红的节点通常就是解析出问题的地方。大小写混用。标签名和属性名不区分大小写DIV和div等价但习惯和规范都是小写。统一小写团队协作时diff才会干净。6.2 特殊字符转义在HTML里有些字符有特殊含义直接写会出问题。最典型的就是小于号和大于号。你想在页面上显示“5 10”直接写会变成标签必须用字符实体显示结果字符实体说明lt;小于号gt;大于号amp;与符号quot;双引号apos;单引号空格不换行nbsp;连续空格©copy;版权符号写技术文档、代码展示、数学公式时转义是必须处理的环节。有些人转义内容位忘了结果页面上整段内容被浏览器当成标签吞掉。6.3 常见问题速查表问题现象可能原因排查方向中文乱码缺meta charset或文件保存编码不一致查看head与编辑器右下角编码图片不显示src路径错误或文件名大小写不对F12控制台看404信息样式不生效标签嵌套错误、选择器写错、未引入CSS检查结构、检查link路径表单数据传不到后端input缺name或form缺action查看form与name属性字体极小缺viewport meta补上viewport标签CSS样式串了类名重复或全局选择器太宽泛检查class命名与优先级有些问题看着千奇百怪实际追溯到最后总能在HTML结构上找到根因。所以我一直建议前端新人遇到bug先按F12看元素面板把DOM结构的真实状态搞明白再去找CSS和JS的麻烦。很多时候你以为CSS写错了其实HTML压根不是你以为的那个结构。还有一个值得提的实际问题是用脚本或爬虫解析HTML时。很多人拿正则去匹配HTML里的标签遇到嵌套结构非常容易出错。更专业的做法是用BeautifulSoup这类库先解析成DOM树再操作。当然这是另一个话题了但已经写过爬虫的同学应该深有体会。HTML这门语言很像个“老好人”——它容错性很强写错了往往不会直接报错只是默默地以奇怪的方式渲染出来。这种特性对用户友好但对开发者不友好。所以写HTML时养成好习惯远比事后纠错重要。我个人在实际操作中的体会是写HTML最大的收获不是记住多少个标签而是培养一种“结构化思维”——拿到一个需求先划分区块再填充内容最后才是调整细节。这套思维是通用的不管以后转不转行、学不学别的框架都不亏。最后分享一个小技巧写完页面后把页面文字全部复制到纯文本编辑器里如果读起来逻辑通顺、章节分明说明HTML结构基本合格如果文字东一块西一块那结构多半有问题。结构对了后面的路就好走了。
