做技术的都绕不开HTML。哪怕你不是前端岗位只要想折腾个人博客、做个简单网页、把表格转成在线文档或者临时给公司活动页改个按钮文案都得跟这一层代码打交道。很多人一看到HTML就以为是编程其实它更像一套“网页的骨骼结构”负责告诉浏览器哪里是标题、哪里是段落、哪里该放图、哪里能点一下跳到别处。今天这篇我从最小页面骨架讲起再聊HTMLCSSJS三种基础语法怎么配合最后把几个高频衍生场景和坑一起捋一遍尽量做到看完就能上手改自己的页面。1. 一个网页到底长什么样先看懂HTML骨架1.1 最小页面结构打开任意一个网页右键“查看网页源代码”你会看到一堆尖括号的东西。如果把它去掉所有样式和脚本剩下的核心骨架几乎都一样长这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1你好世界/h1 p这是一个段落。/p /body /html这段代码里!DOCTYPE html是给浏览器看的声明告诉它“我是现代HTML文档按标准模式解析”。别小看这一行少写了它老IE浏览器会进入非常古老的怪异模式页面边距、盒模型全都乱掉。html是文档根元素里面所有内容都是它的子级langzh-CN声明页面语言为简体中文对搜索引擎和屏幕阅读器都有帮助。head里放的是页面的“配置信息”不会直接显示在浏览器内容区但非常重要。meta charsetUTF-8解决中文乱码问题很多新手页面出现“锟斤拷”乱码十有八九是没写这行或者文件保存编码选错了。meta nameviewport是移动端适配的关键没有它手机浏览器会把页面当成960px宽缩成小字有了它页面宽度才会跟随设备宽度。title是浏览器标签页上显示的文字也是搜索引擎结果里的大标题一定要写清楚。body才是用户真正看得到的内容区域。一个页面可以没有JS、没有CSS但不能没有body里的结构。初学阶段你不需要背所有标签只需要记住一个原则先在body里搭内容骨架再考虑样式和交互。1.2 head里还有哪些常用meta除了charset和viewporthead里还有几个高频meta很多基础教程讲得不细我顺手列一下。meta namedescription content这里是页面描述通常会在搜索引擎结果中显示 meta namekeywords content关键词, 标签, 主题 meta nameauthor content作者名 meta propertyog:title content分享到社交平台时显示的标题这里面description对SEO有一定帮助搜索引擎抓取页面时会参考它生成摘要og:title是Open Graph协议的一部分微信、QQ、微博分享时经常读这个字段如果你想让网页链接分享出去更好看就把og相关meta补上。keywords的作用现在已经很弱Google根本不看百度权重也不高写不写都行但完整的页面结构里保留着也正常。有一个容易忽略的细节meta标签是写在head里的不是写在body里的。我见过不少新手把meta误写到body开头的div里页面可能不会立刻报错但校验时会提示错误一些第三方解析工具也会读取不到。1.3 用“盒子”理解嵌套关系HTML的标签不是平铺在页面上的而是一层一层嵌套起来的。我给学生讲的时候特别喜欢用一个比喻整个页面是一个大箱子body是卧室header是门口的玄关main是客厅footer是阳台。箱子里面还能再放小箱子比如客厅中央放一张茶几section茶几上放一个果盘article果盘里的苹果就是p或img。这种嵌套关系就是DOM树。浏览器拿到HTML字符串后会解析成一颗节点树每个标签对应一个节点。CSS和JS都依赖这颗树来定位元素。理解嵌套后你就明白为什么写HTML要保证标签配对为什么p里不能嵌p为什么ul的直接子元素应该是li而不是div。标签配对错误浏览器虽然会尽力纠错但最终的DOM结构可能和你预期完全不一样样式和脚本也会跟着出问题。写嵌套时缩进是给自己看的。浏览器不在乎缩进但一个好的缩进习惯能让代码结构一目了然。建议每嵌套一层就空出两个空格或一个Tab长期维护时你会感谢自己。2. 高频标签逐个拆解从标题到正文把页面撑起来2.1 文本类标签标题、段落、列表、引用网页内容本质上是文本的容器。最常用的文本标签是h1到h6六级标题以及p段落。注意h1通常一个页面只放一个做主标题如果出现多个h1搜索引擎和屏幕阅读器会困惑这也是页面无障碍评分常见的扣分点。h2、h3依次往下走形成内容层级类似一篇文章的大标题、小节标题。段落后面如果需要换行但不能开启新段落可以用br。这里有个隐藏细节br是空标签不需要结束标记但XHTML风格会写成br/。现代HTML5里两种写法都合法团队规范统一即可。很多新手用多个br来制造垂直间距这不是合理的做法间距应该交给CSS的margin或padding否则维护起来全是废墟。列表有两种常用形态无序列表ul和有序列表ol。无序列表常用于导航菜单、文章分类有序列表常用于步骤说明、排行榜。列表里的每一项都用li包裹。常见的错误是直接在ul下面写div或者忘记把li闭合。还有一个冷门但好用的标签dl用于定义列表由dt词条和dd描述组成比如产品参数表、名词解释这类场景用起来很语义化。引用内容的场景长引语可以用blockquote短引语可以用q。pre标签保存了空格和换行适合展示代码块code用来标记行内代码。需要强调的文字可以用strong粗体或em斜体但注意别用来纯粹改样式样式的事交给CSS这两个标签是有语义的屏幕阅读器会加重语气。2.2 链接与图片理解绝对路径和相对路径超链接是HTML的灵魂写法是a hrefhttps://example.com target_blank relnoopener noreferrer访问示例站/ahref指向目标地址。如果是外部网站要写完整的https://开头如果是站内页面可以直接写相对路径比如about.html、../pages/index.html。我建议初学者把相对路径的逻辑搞清楚./表示当前目录../表示上一级目录。这个基础搞不清后面本地预览正常、部署到子目录就全部404是最容易踩的坑。target_blank是在新标签页打开但如果你这么写最好同时加上relnoopener noreferrer否则老浏览器里新页面可能通过window.opener操纵你的原页面存在安全风险。现在很多现代浏览器默认已经隔离了但养成这个习惯没坏处。图片标签img跟a不一样它是空标签没有闭合标签。核心属性是src和altimg src./images/logo.png alt公司Logo width200 height80alt是图片无法加载或屏幕阅读器朗读时显示的替代文本不要偷懒省略。width和height可以写在HTML属性里但真正控制响应式缩放还是建议用CSS。要注意的是图片资源最好用相对路径或完整URL别用本地C:/Users/...这样的绝对路径否则别人访问你网站时这图片压根不存在。2.3 块级元素与行内元素布局的地基HTML元素按显示方式大致分成两类块级元素和行内元素。块级元素独占一行能设置宽高和上下margin比如div、p、h1、ul行内元素在水平方向排成一排宽高和上下margin设置无效比如span、a、strong、em。这个区别是CSS布局入门的基础。但HTML5已经淡化了块级和行内这种叫法更推荐用内容模型来描述。实际写代码时我们依然会遇到“为什么给span设置宽度没用”这类问题。解决办法有两个把span的CSS设成display: inline-block;或者直接改用div。我在实际项目里的习惯是行内碎片用span独立区块用div需要横排但保留盒模型能力时用display: inline-block或flex容器。还要提一个很容易被忽略的规则块级元素里可以放行内元素但行内元素里面不能放块级元素。比如a里面直接放div在HTML5中其实语法上允许特定情况但普通情况下会导致结构混乱比如点击区域异常。我自己踩过这类坑把a包着一个大div做成卡片链接结果发现嵌套后的行为在不同浏览器不一致。后来老老实实改用div加onclick或者把a直接设为display:block问题才消停。2.4 语义化标签div太多不行header/main/footer怎么用HTML5新增了一批语义化标签header、footer、nav、main、section、article、aside。它们不改变页面外观但把结构意图表达得很清楚。比如一个博客页面header nav a href/首页/a a href/archive归档/a /nav /header main article h1博文标题/h1 p正文内容/p /article aside h2侧边栏/h2 /aside /main footer p版权信息/p /footer好处很明显搜索引擎理解页面结构更好屏幕阅读器可以直接跳到main内容区域团队协作时也不用靠注释才能分清哪块是哪块。但注意section通常带一个标题如果一块内容没有自然标题用div更合适。article适合独立成篇的内容比如单篇博客、论坛帖、新闻条目。aside是侧边栏或补充信息跟主要内容关联但不依赖。很多人刚学语义化容易走向另一个极端把整个页面每一个区块都套上语义标签反而比div更乱。我个人的判断标准是如果你对这个区域能说清楚“它是什么类型的内容”就用对应标签如果只是一个用来包一下、以便加样式的容器就用div。语义化不是越多越好是合适才好。3. HTMLCSSJS三种基础语法怎么配合工作3.1 内联样式、内部样式、外部样式该用哪个HTML负责结构CSS负责外观JS负责行为。三者配合最经典的方式是HTML文件里写结构CSS文件里写样式JS文件里写逻辑页面加载时通过link和script把文件引进来。CSS有三种挂载方式!-- 外部样式最推荐 -- link relstylesheet href./css/style.css !-- 内部样式写在style标签里 -- style .box { color: red; } /style !-- 内联样式写在元素属性上 -- div stylecolor: red;内联/div内联样式的优先级最高但不建议多用。它让代码跟结构耦合在一起改起来必须逐个找元素而且没法利用缓存。内部样式适合单页面小工具或者邮件模板外部样式最利于复用和维护。实际项目里几乎都是外部样式表配合版本管理工具跟踪样式变化。唯一例外是HTML邮件邮件客户端对link支持很差几乎必须把所有样式内联到每个元素上这部分后面衍生场景我会再提。CSS语法本身不复杂大部分是一个选择器加一组声明body { margin: 0; font-family: Arial, sans-serif; } .card { background: #fff; border: 1px solid #e0e0e0; padding: 16px; }关键是要练熟选择器标签选择器p、类选择器.card、ID选择器#header、后代选择器.nav a。类选择器最常用ID选择器应保持唯一避免用于样式复用。新手优先掌握这四种就够用后面的伪类和结构选择器可以边做边学。3.2 选择器和盒模型基础盒模型是CSS里绕不开的概念。每个HTML元素都可以看成一个盒子包含四层内容content、内边距padding、边框border、外边距margin。默认布局下width设置的是内容区的宽度再加上padding和border才是元素实际占的宽度。这个机制经常让新手困惑明明设了宽度300px加上左右padding各20px实际占了340px导致布局错位。解决的常见做法是设置* { box-sizing: border-box; }border-box模式下width包含padding和border元素实际宽度就是设定值做布局容易得多。这个属性几乎已经成为项目标配。但要注意margin永远不算在元素自身尺寸里面它是盒子外部推挤其他元素的空间所以外边距不会因box-sizing改变而改变。选择器还有一个重点层叠和继承。浏览器默认样式、外部样式表、行内样式按特定规则叠加同优先级时后加载的覆盖先加载的。这是一个越早理解越好的坑。我见过不少新人改了CSS却没生效一看发现内联样式写在style标签后面或者两个样式文件加载顺序反了。排查顺序一般先看选择器是否命中再看优先级和加载顺序。3.3 JavaScript接入页面事件、DOM、调试基础JS在HTML里的引入方式也是三类比较推荐的是外部脚本并且放在/body前面或者使用defer属性放在head里script src./js/main.js defer/script /bodydefer表示脚本在HTML解析完成后再执行这样可以避免脚本阻塞页面渲染。简单说你不在head里直接写操作body的脚本十有八九会报“找不到元素”的错误因为脚本执行时body还没解析完。用defer或把script放底部都是解决办法。JS操作页面的核心是DOM操作。最常用的几个APIdocument.querySelector(.btn); // 找元素 element.addEventListener(click, fn); // 绑定事件 element.style.display none; // 改样式 element.innerHTML p新内容/p; // 改内容这里要提醒一句innerHTML很方便但不要把用户输入直接拼进innerHTML否则容易造成XSS攻击。换成textContent更安全。比如聊天窗口显示用户名有人填scriptalert(xss)/script如果直接innerHTML就会被执行。生产环境永远要对用户输入做转义或使用textContent。调试方面浏览器自带的开发者工具F12是最重要的工具。Console面板看JS报错Elements面板看DOM和CSSNetwork面板看资源加载状态。学会使用F12的“检查元素”你会发现“为什么样式不生效”这类问题十有八九能在Elements面板里直接看出来——要么选择器写错要么样式被其他声明覆盖。3.4 一个可复用的“返回顶部”小算法很多落地页、博客都有“返回顶部”按钮实现方式看着简单但细节不少。最基础的做法是button idbackTop返回顶部/buttonconst backTop document.getElementById(backTop); backTop.addEventListener(click, function() { window.scrollTo({ top: 0, behavior: smooth }); });behavior: smooth会平滑滚动用户体验比瞬间跳转好很多。但如果你想把滚动过程做成动画比如滚动到一定高度才显示按钮可以再加监听window.addEventListener(scroll, function() { if (window.scrollY 300) { backTop.style.display block; } else { backTop.style.display none; } });一个容易被忽略的坑在很长的页面里直接监听scroll并频繁修改display性能其实还好但如果scroll事件里执行大量计算页面会卡。进阶方案是使用requestAnimationFrame来节流。不过基础阶段上述写法足够。建议把按钮固定在右下角用CSS的position: fixed; bottom: 20px; right: 20px;避免滚动时按钮跟着页面跑。4. 表单与HTML功能实战不要只写死页面4.1 表单元素拆解input、label、select、textarea表单是网页跟用户交互最直接的方式。HTML表单不只长得像若干个输入框背后有一套完整的提交逻辑。一个最基础的表单长这样form action/submit methodpost label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 required label foremail邮箱/label input typeemail idemail nameemail required label forintro简介/label textarea idintro nameintro rows4 cols30/textarea select idcity namecity option valuebeijing北京/option option valueshanghai上海/option /select button typesubmit提交/button /form几个细节值得记住label的for要对应输入框的id这样点击文字时输入框会聚焦对鼠标操作和屏幕阅读器都友好。input的name属性决定提交到服务器时的字段名这个很容易忽略——哪怕页面样式再漂亮没有name手机收到的数据就是空的。type属性里有玄机typeemail会在多数手机上弹出邮箱键盘typenumber弹数字键盘typepassword会隐藏输入内容。这些原生行为比你自己写正则再判断快得多。还有按钮button如果不指定type在表单里默认就是submit。我做过一个项目想加一个普通按钮结果没写type一按整个页面刷新了数据也丢了。后来凡是按钮我都显式写typebutton或typesubmit再没出过这种问题。4.2 form的提交方式与常用校验属性表单提交方式最常用的是methodget和methodpost。GET会把表单数据拼在URL问号后面适合搜索、筛选这种无副作用请求POST会把数据放在请求体里适合登录、注册、发送短信等操作。基础页面如果只是静态演示可以用action#但实际上线一定是指向后端接口。HTML5内置校验不要太香。required表示必填不填就点提交会出现浏览器默认提示不用写JS。minlength、maxlength控制文本长度pattern可以用正则约束格式比如手机号input typetel namephone pattern^1[3-9]\d{9}$ required如果格式不对浏览器会阻止提交并提示。但注意浏览器校验只是体验优化不是安全措施。攻击者完全可以用curl直接向接口发请求绕过前端校验所以后端必须再做一次校验。这一点跟HTML基础有关但更重要的是一种安全意识做表单时从第一天就要记住。另外表单里的数据如果涉及用户隐私建议加上autocomplete属性做控制。比如登录页的验证码不要自动填充可以写autocompleteoff这两个词拼不对也没事浏览器会自动补全。4.3 邮件链接、锚点、页面内跳转除了表单提交HTML还有几个小而美的交互功能。邮件链接用mailto:协议a hrefmailto:helloexample.com?subject咨询body你好发送邮件/a点击后会唤起用户电脑上的邮件客户端subject和body是预填的标题和正文。但现代互联网上这个功能越来越鸡肋很多人根本没有桌面邮件客户端点了没反应。所以现在更常见的是做一个“联系”表单通过后端或第三方服务发邮件。锚点跳转是单页面长文档的利器。比如文章目录点击后滚动到对应小节a href#section2跳转到第二节/a ... h2 idsection2第二节/h2href里写#加上目标元素的id浏览器就会滚动到那个元素位置。配合之前说的CSSscroll-behavior: smooth;整页滚动会平滑很多。这是实现“一键返回顶部”的另一种思路a href#top加上顶部元素的idtop不过它一直依赖页面内锚点且不支持自定义动画所以实际项目里我更多用JS的scrollTo。5. 常见HTML衍生场景与工具链5.1 在Ubuntu里挑一个趁手的HTML编辑器很多初学者把一个简单问题想复杂了用什么软件写HTML其实记事本、Vim、VS Code都可以。区别在于编辑器能不能帮你高亮标签、自动补全、实时预览。Windows下大家习惯直接用记事本或VS CodeUbuntu下也有几个高频选择VS Code是跨平台的装好直接用Sublime Text轻量快速Vim适合已经习惯键盘操作的老手。我自己的建议是Ubuntu下装VS Code理由很简单插件生态强装一个Live Server插件右键就能在浏览器里实时预览改完保存页面自动刷新。这比手动开浏览器、按F5高效太多。不过新手别一上来就折腾一堆插件先把基础语言语法吃透。编辑器只是工具别本末倒置。很多人问我“有没有好用的HTML可视化编辑工具不写代码那种”我的答案是如果你是做正经网页一定要能看懂代码。可视化工具生成的代码冗余严重改起来更痛苦。5.2 HTML转PDF、转Word/Markdown按场景选工具HTML是个中间格式经常需要导出成PDF、Word甚至Markdown。最经典的做法是浏览器打开页面后CtrlP打印目标格式选“另存为PDF”就能得到一份排版还不错的PDF。这是零代码方案适合一次性导出。如果想批量或自动化可以用Puppeteer、Playwright这类无头浏览器或者Java后端用iText的HTML转PDF组件都能实现。我在实际项目里用iText7处理过合同模板先把数据渲染成HTML模板再转成PDF并加上水印。加水印的核心思路是在PDF生成过程中对每一页绘制水印文本或图片HTML模板里写一个普通的div不会自动每页重复必须借助PDF库的页面事件来处理。HTML转Markdown常用工具是Pandoc一条命令pandoc input.html -o output.md它会尽量保留标题、列表、链接结构。反过来Markdown转HTML也用它。但要注意Pandoc对复杂嵌套表格、脚本、样式的转换并不完美转换后可能需要手动清理。HTML转Word最省事的思路不是直接转而是先把内容整理成结构化文本再通过工具生成。如果是纯表格数据想直接转成WPS表格能打开的HTML思路是一样的用table标签写一套简单的HTMLWPS和Excel都能直接打开识别双击表格元素就能编辑这就是所谓的“HTML格式转换WPS表格”最常见的做法。一份干净的HTML表格远比打印后让人重新录一遍强。5.3 多个HTML打包成一个静态站点常见的合并方案“打包多个HTML”这个需求通常出现在几个场景一是做离线发布的电子书或资料包希望一个文件包含所有内容二是把多个活动页面合并成一个多页签应用三是把项目做成单一HTML工具发出去就能用不依赖服务器。最直接的办法是用构建工具比如用Node.js脚本读取多个HTML文件把head里的style和script内联进一个模板页面再通过拼接生成单文件。如果不想引入复杂工具链也可以直接用浏览器打印到PDF把所有页面合并成一个PDF文件当作离线分发版。但这种方法会丢失交互性JS功能全部失效。另一种“打包”是做成SPA单页应用用锚点或JS切换不同区块所有HTML都在一个文件里。比如一个个人简历页面可以用JS根据hash切换“关于我”“作品集”“联系方式”三个section体验上像多个页面实际上一个HTML搞定。这种方式适合内容少、功能简单的小工具代码维护起来比多文件简单但内容一多文件会膨胀得很厉害加载变慢。5.4 在非浏览器环境里显示HTMLPyQt5与Shell终端有些场景需要在桌面程序或终端里展示HTML内容。Python的PyQt5/QtWebEngine或者PyQt5自带的QTextBrowser都能加载HTML字符串。如果你只是想展示一段富文本QTextBrowser就够如果要跑完整页面、执行JS就得用QWebEngineView。这里有个经验QTextBrowser支持的是富文本子集很多CSS3特性压根不生效别指望它能完美渲染线上页面。用它展示一个带标题、列表、粗体的文档没问题渲染复杂布局还是要切换内核。Shell终端显示HTML的需求常见于远程服务器上想快速看一个页面的大致内容。可以用w3m或lynx这类文本浏览器w3m index.html它会丢弃图片、JS和CSS把页面文字内容以纯文本形式输出。这个方法非常适合在Linux服务器上检查页面标题、正文结构、链接地址是否写错比下载到本地再打开快得多。但它不能替代真正的浏览器遇到JS渲染的页面终端里看到的基本是空壳。5.5 其他两个实战场景天气卡片和HTML邮件热搜里有一句“百度首页天气html制作”本质是前端获取天气数据并渲染成HTML。最简单的方案是找天气API返回JSON然后用JS的fetch请求数据把温度、城市、天气图标动态插入到指定DOM节点。这里要提醒一下天气API一般有跨域限制本地直接用fetch可能被CORS拦截常见做法是用后端代理或使用支持JSONP的接口。新手做练习时可以直接用一个模拟数据文件代替API先把渲染流程跑通再联调真实数据。HTML邮件是个很特殊的场景。大部分邮件客户端不支持style标签和外部CSS很多客户端甚至不支持class所以邮件模板必须把所有样式内联到元素上用table布局替代div布局。我做过一次活动通知邮件在Outlook里看到的效果和Gmail完全不一样后来才知道Outlook使用Word引擎渲染HTML对边距、背景色的支持很弱。如果只是基础入门不建议一上来就啃邮件模板先把它当成“不能用外部CSS、不能用flex的受限HTML”来理解即可。6. 常见问题排查与避坑清单6.1 字符乱码、样式不生效、图片裂开的排查做HTML基础练习时最容易碰到的三个问题我把排查思路整理成一张表照着查能省很多时间。现象常见原因排查方法中文显示乱码文件保存编码不是UTF-8或head里没写charset编辑器右下角改成UTF-8保存确认meta charsetUTF-8样式不生效选择器写错、样式文件引错、优先级被覆盖F12检查元素看Style面板里有没有对应规则确认link路径图片裂开src路径不对、文件名大小写不一致、图片不在同域看Network面板图片请求状态确认相对路径和文件名点击链接没反应href写错、href为空、JS阻止了默认行为先检查href再看控制台是否有JS报错乱码问题里还有一个隐蔽点如果你的meta charset写在title之后某些老浏览器可能在解析到meta之前已经把标题按默认编码处理了所以习惯上把meta charsetUTF-8放在head最开头并且在文件里保证物理字符确实是UTF-8。这个习惯养成后基本不会再有乱码。样式不生效还有一种常见原因重复的id。浏览器对重复id不是报错而是会把样式只作用到第一个后面的元素不受影响。这提醒我们同一页面id必须唯一即使是动态渲染的组件也尽量动态生成唯一id或改为class。6.2 兼容性viewport和H5标签HTML5新增的header、section、article等在非常老的IE浏览器里默认是inline元素会失去块级布局。基础阶段如果用这些标签顺手给它们补一个header, main, footer, article, section, aside, nav { display: block; }不过我平时基本不建议为了老IE做兼容除非你的用户群体明确要求老浏览器。现在国内主流浏览器更新速度很快重点还是要保证新浏览器体验一致。viewport我之前提过这里再补一个细节如果在移动端发现页面文字特别小通常是因为没有写viewport或者像素比适配没做好。最基础的做法就是全站统一加meta nameviewport contentwidthdevice-width, initial-scale1.0如果需要控制缩放可以再加maximum-scale、user-scalable但为了无障碍体验不建议禁止用户缩放。这个点属于移动端优化的基础HTML学习者至少要知道它存在。6.3 缩进、编码、文件命名习惯HTML项目虽小也值得遵守基本工程习惯。文件命名建议全部小写用连字符-分隔单词比如about-us.html不要用About Us.html。空格和大写字母在Linux服务器上经常导致404而且跨平台拷贝时容易出奇怪问题。图片名也用logo-header.png这种格式尽量不用中文名和空格。缩进统一两个空格或四个空格整个项目保持一致。标签要么全部小写要么保持一致HTML不区分大小写但XHTML和团队规范一般要求小写。我见过有些案例里DIV和div混用浏览器能解析但代码review时非常想打人。文件编码方面建立项目时先确认编辑器默认编码是UTF-8。很多编辑器新建文件默认GBK本地写的时候看着正常部署到服务器别人打开就是乱码。保存的时候可以留意右下角编码状态或者直接用VS Code的默认设置强制UTF-8。6.4 必备速查表最后给一个最精简的速查表适合放在手边快速参考。标签作用常用属性html文档根元素langhead页面配置信息不直接显示meta元数据charset、name、contenttitle浏览器标签标题文本内容body可见内容区域全局属性h1~h6标题层级全局属性p段落全局属性a超链接href、target、relimg图片src、alt、width、heightul/ol列表嵌套lidiv/span无语义容器配合CSS/JS使用header/main/footer语义化区块全局属性form表单容器action、methodinput输入框type、name、valuebutton按钮typescriptJS脚本src、deferlink引用外部CSSrel、href这张表看起来简单但你把每个标签的属性真正查一遍、敲一遍、踩过坑之后基础就算扎实了。别急着追求冷门标签先把这十几个高频标签和它们之间的嵌套关系搞透彻后面学CSS、JS、框架都会轻松很多。我自己带新人的时候始终有个感受HTML基础不牢后面写CSS和JS经常是在“碰运气”。比如样式无效时不知道从DOM树入手事件绑不上不知道是元素没加载还是选择器没选中。反过来如果能把标签语义、嵌套关系、meta配置、表单提交逻辑这四件事吃透前面的路会顺很多。最后再分享一个小建议刚学HTML时每学一个新标签就把它放到一个能运行的页面里用浏览器F12看一下它对DOM结构的影响不要只看文字教程。手底下敲一遍比背二十遍都管用。