简介这套HTML系列编程示例面向网页开发初学者以源码方式整理了十四个可直接运行和修改的练习文件覆盖基础文档结构、框架、表格、表单、列表、图片、区块引用等常用知识点适合配合教材或自学时按顺序动手实践。全部内容均为轻量级本地文件其中十二个超文本标记语言示例文件配有两个图片素材总体积仅五十二千字节下载后无需复杂环境即可在浏览器中直接打开查看效果。目前已有一百五十四人学习使用内容虽简短却覆盖了入门阶段最核心的语法与页面组织方式。与单纯阅读理论不同这套示例刻意保留了精简清晰的代码结构学习者可参照示例逐步搭建自己的页面并通过修改属性、嵌套标签和添加层叠样式表CSS来加深理解快速跨过从看懂语法到写出完整网页的门槛。 HTML 是我见过最容易上头也最容易劝退的一门语言。说它容易是因为不管新手还是老手打开任意一个网页按 F12 都能看到一段类似!doctype htmlhtml langzh-cn...的骨架说它劝退是很多教程只顾着把标签一个个罗列出来却很少告诉你这些标签到底应该怎么组合着用。所以我整理了这套 HTML 系列编程示例从基本标签到表格、表单、3D 旋转、返回顶部再到一个完整的小型网页项目全部都是能直接复制跑起来的代码。每个例子我都会解释一句“为什么这么写”方便刚入门和准备前端面试的朋友少走弯路。1. HTML 文档骨架先让浏览器知道你在说什么1.1 文档类型声明与字符编码的作用经常看到有人问为什么网上复制的网页源代码第一行都是!doctype html这个声明看着不起眼但它是在告诉浏览器“我这份文档是按照 HTML5 标准写的请用标准模式渲染我。”很多老版本浏览器如果没有这行会进入“怪异模式”盒模型、行高、字体继承全都会和预期打架。所以你手写页面时这一行别省别觉得少几个字符无所谓。文档头部里langzh-cn是给搜索引擎和屏幕阅读器看的表示页面主要内容是简体中文。meta charsetutf-8更关键它的意思是文档用 UTF-8 编码保存和解析。有些朋友用记事本写完 HTML中文变成了乱码八成就是这里没写或者文件保存时选成了 ANSI。这种情况也不用慌把head里的 charset 改回utf-8再把文件另存为 UTF-8 编码即可。一个标准 HTML 骨架大概是这样的!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML 系列示例/title /head body h1你好HTML/h1 /body /html这段代码里还多写了一行 viewport作用是在手机上让页面宽度等于设备宽度、缩放比例为 1。做移动端适配的时候这行基本必加这也是面试经常问到的点没有 viewport 的页面在手机上会出现横向滚动条或字体自动放大。1.2 标签语法与层级别把标签“写反”了HTML 的语法核心就两件事标签要配对层级要正确。p开始就必须有/p结束按钮、图片这类自闭合标签如img可以不写结束标签但还是建议写成img src... alt...老代码和现代编辑器都能正确识别。层级也就是“谁套着谁”比如ul li列表项/li /ul这里的li必须包在ul或ol里面反过来就不合法。很多新手写表格和表单时最容易把标签交叉嵌套比如在p里套div浏览器虽然不会报错但渲染结果可能完全不是你想要的。HTML 标签还有块级和内联的区别。块级元素像div、p、h1会独占一行适合搭页面结构内联元素像span、a、strong不会换行适合在文字中间加样式或链接。理解这个区别之后再遇到“图片下方多出一块空白”之类的问题你就会有排查方向了。2. 基础标签系列示例文本、表格、表单与图片定位2.1 文本排版一个干净的内容卡片我练习 HTML 时最喜欢做的第一个示例是一个“内容卡片”因为它能把标题、段落、强调、列表全串起来也最容易看到成果。你可以新建一个.html文件把下面代码贴进去h2代码笔记/h2 p今天整理了 strongHTML 常用标签/strong包括文本、列表、链接。/p ul liem强调文本/em 用 codelt;emgt;/code/li li加粗用 codelt;stronggt;/code/li li换行不回车用 codelt;brgt;/code/li /ul这里有一个很容易踩的坑在代码里直接写p、strong这些标签时浏览器会把它当成真实标签解析掉所以需要用lt;和gt;表示小于号和大于号才能在页面上显示标签本身。我在带新人时发现十个里面有八个都会在这里卡一下所以特意把这段写出来。2.2 表格与表单数据展示和用户输入的正确姿势表格这个知识点看起来简单写起来门道很多。基础结构是table套tr行、th表头单元格、td普通单元格。如果你要合并单元格用colspan横向合并、rowspan纵向合并容易出错的位置是合并之后表格的总列数会变比如table border1 tr th科目/th th周课时/th /tr tr td前端基础/td td4/td /tr tr td colspan2总计以课表为准/td /tr /table这段代码里最后一行用了colspan2意思是这一格横跨两列。如果你把它漏掉表格就会变成三列显示布局直接乱掉。表单标签是另一个重点。最基础的表单实现要包含form、input、textarea、select、button。注意提交按钮的name属性很有用后端接口靠它识别字段label的for属性要与输入框的id对应这样点击文字时输入框会自动聚焦对提高体验很有帮助。form label forname姓名/label input typetext idname namename required brbr label forcity城市/label select idcity namecity option valuebeijing北京/option option valueshanghai上海/option /select brbr button typesubmit提交/button /form2.3 图片位置调整三种常用写法搜索热词里有一个“html 如何改变图片位置”估计是很多新手在做第一个页面时都会遇到的问题。图片默认是内联元素会随着文字流排列。想真正“定位”图片建议用 CSS而不是在 HTML 里硬塞一堆空格或br。第一种方式是display: block; margin: 0 auto;可以让图片居中第二种是用float: left;或float: right;让图片环绕在文字旁边第三种是position: absolute;在父容器设置position: relative;后用top、left精确定位。三种方式看起来差不多但适用场景不同。布局复杂时我一般优先选第三种因为它不依赖文档流不容易被其他元素顶跑。3. 加点动态效果3D 旋转、一键返回顶部与爱心代码3.1 3D 旋转卡片的关键参数很多初学者看到 3D 旋转组件觉得很酷以为要写很多 JS其实核心只是 CSS 的三行属性perspective、transform-style: preserve-3d和transform。perspective是透视距离数值越小3D 效果越强烈preserve-3d让子元素保留三维空间位置transform里写rotateY()或rotateX()就能让卡片绕轴旋转。比如做一个鼠标移入时卡片轻微翻转的效果可以这样写.card { width: 200px; height: 260px; transform-style: preserve-3d; transition: transform 0.6s; } .card:hover { transform: rotateY(180deg); }如果想让它自动旋转可以在 JS 里每隔 16 毫秒把rotateY的角度加 0.2再用requestAnimationFrame驱动。这里最容易被忽略的是给卡片外层的容器设置perspective不加它的话旋转看起来就只是一个平面压扁完全体会不到“3D 感”。这个点面试时经常作为 CSS 动画的进阶题目出现值得亲手试一遍。3.2 返回顶部按钮的核心算法“一键返回顶部”看起来是个小功能但处理不好会让用户很难受。最简单的写法是给按钮绑定点击事件然后调用window.scrollTo({ top: 0, behavior: smooth });不过真正的“算法”在于什么时候让按钮出现。你要在window.onscroll里读取document.documentElement.scrollTop或window.scrollY当它大于某个阈值比如 300 像素时显示按钮否则隐藏。如果要求更顺滑的手动缓动可以这样写function scrollToTop() { if (window.scrollY 0) { window.scrollBy(0, -100); requestAnimationFrame(scrollToTop); } }这个写法是每次往上滚动 100 像素再用动画帧循环直到回到顶部。核心思想是每次动画只做一小步浏览器下一帧再继续而不是一次性跳过去。很多面试官会追问为什么不用while循环因为 JS 是单线程的循环会让页面卡死动画根本没有机会渲染。3.3 爱心代码一个适合练习的“小彩蛋”热搜词里的“html 爱心代码”估计又是一个新手刷到的炫酷案例。这种代码基本上是用 CSS 画两个圆再旋转组合成一个心形或者用 canvas 一帧一帧绘制粒子爱心。作为入门练习我挺推荐你敲一遍倒不是为了表白而是能顺便练习transform、canvas的坐标计算和requestAnimationFrame的用法。不过要提醒一句这类效果在简历作品里只能当彩蛋不能当核心功能。我做项目评审时看到过不少人把爱心动画放在页面最显眼的位置结果用户并不知道它想表达什么。比如你可以在页脚放一个“点击查看彩蛋”的小按钮让爱心动画在弹窗里出现既有趣又不干扰主流程。4. 综合项目实战把 HTMLCSSJS 串成一个完整页面4.1 页面结构如何拆分前面讲了那么多零散示例现在来一个“html css js 网页设计”的综合项目。与其记碎片知识不如做一个“产品介绍页”。我习惯先把页面拆成四个区域页头导航、主内容区、侧边信息、页脚。页头放 logo 和菜单主内容区放产品卡片侧边信息放一段表格用来对比产品参数页脚放版权。文件也不用搞得太复杂单页里用style和script包起来就好学习阶段越简单越好管理。4.2 示例代码带导航、卡片和返回顶部的页面下面是一份可以直接复制运行的完整页面里面用到了文本标签、表格、CSS 布局、JS 返回顶部可以把它保存为index.html打开!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title产品介绍页示例/title style body { margin: 0; font-family: sans-serif; } header { background: #333; color: #fff; padding: 16px; } nav a { color: #fff; margin-right: 12px; text-decoration: none; } main { max-width: 900px; margin: 24px auto; padding: 0 16px; } .card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; } table { border-collapse: collapse; margin-top: 16px; width: 100%; } th, td { border: 1px solid #ccc; padding: 8px; } #goTop { display: none; position: fixed; right: 24px; bottom: 40px; padding: 10px 14px; border: none; border-radius: 6px; background: #333; color: #fff; cursor: pointer; } /style /head body header nav a href#首页/a a href#产品/a a href#关于/a /nav /header main div classcard h2新款学习套件/h2 p适合 strong前端入门/strong 的完整示例涵盖 HTML、CSS、JS 基础语法。/p /div table trth模块/thth内容/th/tr trtdHTML/tdtd标签语义化/td/tr trtdCSS/tdtd布局与动画/td/tr trtdJS/tdtd事件与交互/td/tr /table /main button idgoTop返回顶部/button script var btn document.getElementById(goTop); window.onscroll function () { btn.style.display window.scrollY 300 ? block : none; }; btn.onclick function () { window.scrollTo({ top: 0, behavior: smooth }); }; /script /body /html这里你可以看到所有图片定位、表格边框、按钮显隐都是靠 CSS 完成的JS 只负责两件事监听滚动、处理点击。这是一个人门级综合项目最舒服的分工方式。4.3 动手调试比背教程更重要每次带新人我都会让他们把这个页面拿去做改动练习把卡片文字换掉给表格加一行把导航链接改成新页面。改完以后按 F12 打开浏览器开发者工具在 Elements 面板里临时修改样式观察页面变化。这个过程比背十遍标签都管用。调试时有个很实用的技巧不确定某个元素为什么多出一条边先在 Elements 面板点击该元素看右侧的盒模型图。如果 width、padding、border 三项谁扩大了问题基本就找到了。很多朋友说“HTML 文件无法预览”其实不是文件坏了而是代码里某个标签没闭合浏览器按容错模式渲染出了奇怪效果。5. 工具链、格式转换与面试避坑速查5.1 编辑器选择与 HTML 文件无法预览的排查写 HTML 不需要重型 IDE我用过的编辑器从记事本、VS Code 到 Ubuntu 下的 Sublime Text、vim 都有。新手认准 VS Code 即可装上 Live Server 插件可以直接在浏览器里热更新如果在 Ubuntu 上命令行为主用nano或vim写简单页面也完全够用。遇到“HTML 文件无法预览”时先按这三个顺序查一是文件扩展名是否真的是.html有些系统默认隐藏扩展名你存成index.html.txt还以为是网页文件二是文件路径里是否有中文或特殊字符浏览器解析本地路径时容易出问题三是浏览器有没有缓存旧页面用“强制刷新”快捷键 CtrlF5 试一次。5.2 格式转换HTML 转 Markdown、转 WPS 表格、data:text/htmlHTML 在日常工作中经常要转换成其他格式。最经典的场景是写完周报想转成 Markdown可以直接用 pandoc 命令pandoc report.html -t markdown -o report.md如果是 HTML 里的表格想转成 WPS 表格最快的方式是直接在浏览器里打开 HTML选中表格区域复制再粘贴到 WPS 表格里。粘贴前记得先建一个新工作表粘贴时选择“匹配目标格式”这样边框和列宽会相对正常。另一个容易被忽略的小技巧是data:text/html协议。你可以在浏览器地址栏直接输入data:text/html,h1你好/h1并回车浏览器会把它当成一个临时 HTML 页面渲染。这个玩法适合快速测试一段 HTML 片段或把代码存成浏览器书签比如写一段自动设置页面背景色的 JavaScript 书签。5.3 PyQt5 里显示 HTML 的另类玩法如果你不是只做网页而是用 Python 写桌面工具那么 PyQt5 里的QTextBrowser或QWebEngineView可以让你直接用 HTML 渲染富文本和复杂排版。比如在QTextBrowser中显示一段说明文档可以调用setHtmlfrom PyQt5.QtWidgets import QApplication, QTextBrowser app QApplication([]) browser QTextBrowser() browser.setHtml(h3说明/h3p这是strongHTML/strong渲染的段落。/p) browser.show() app.exec_()这个思路在做本地工具、数据报告或聊天窗口时非常实用因为它避免了逐个控件摆放位置的麻烦。需要注意QTextBrowser对 CSS 的支持有限复杂页面建议用QWebEngineView但那个组件体积大很多如果只是渲染一段说明文字QTextBrowser完全够用。5.4 HTML 高频面试题清单与答题思路整理热词的时候我发现“html 面试”“html css 面试”这些词的搜索量一直不低。这里列几个我常用来考察候选人的点!DOCTYPE html的作用是什么HTML5 新增了哪些语义化标签块级元素和内联元素的区别href和src的区别localStorage、sessionStorage和 Cookie 的区别页面加载时 CSS 和 JS 的阻塞情况。这些问题并不难但很能看出基础扎不扎实。比如问我“HTML5 新增加载提示”最关键的是别把细节背错删除线用del不是s进度条用progress不是meter。能准确说出来面试官会觉得你有真实写码经历而不是只刷过题。5.5 常见问题速查表最后把这一年来看到最多的几个问题整理成一张表方便你遇到时快速查找现象大概率原因排查方法中文乱码文件保存编码与 meta charset 不一致另存为 UTF-8 编码图片不显示路径写错或图片文件被移动用相对路径并检查文件名大小写样式没生效选择器写错或样式被覆盖F12 查看 Computed 样式点击返回顶部无效JS 监听位置错误或按钮被遮挡确认按钮不在父容器之外HTML 文件无法预览扩展名 .txt 或缓存未更新查看扩展名并强制刷新表格对不齐合并单元格未调整总列数检查 colspan/rowspan 是否合理这六类问题是我在带开发新人时遇到最频繁的很多看起来诡异的问题最后都压在文件编码、路径、缓存和标签闭合这四件事上。把这些基础问题排查顺了你写的 HTML 才能真正稳定“跑起来”。我个人在实际操作中的体会是HTML 的入门门槛确实低但别因此小看它。把每一类标签都单独写成一个可运行示例存成独立文件再慢慢组合成项目是效率最高的方式。这个系列从基础骨架到综合项目每一步都对应真实开发中会用到的能力建议你从第 2 节开始每天敲一个示例一周之后回头看你会发现自己对网页的理解完全不一样。本文还有配套的精品资源点击获取
HTML从入门到实战：标签、表格、表单与3D旋转示例
简介这套HTML系列编程示例面向网页开发初学者以源码方式整理了十四个可直接运行和修改的练习文件覆盖基础文档结构、框架、表格、表单、列表、图片、区块引用等常用知识点适合配合教材或自学时按顺序动手实践。全部内容均为轻量级本地文件其中十二个超文本标记语言示例文件配有两个图片素材总体积仅五十二千字节下载后无需复杂环境即可在浏览器中直接打开查看效果。目前已有一百五十四人学习使用内容虽简短却覆盖了入门阶段最核心的语法与页面组织方式。与单纯阅读理论不同这套示例刻意保留了精简清晰的代码结构学习者可参照示例逐步搭建自己的页面并通过修改属性、嵌套标签和添加层叠样式表CSS来加深理解快速跨过从看懂语法到写出完整网页的门槛。 HTML 是我见过最容易上头也最容易劝退的一门语言。说它容易是因为不管新手还是老手打开任意一个网页按 F12 都能看到一段类似!doctype htmlhtml langzh-cn...的骨架说它劝退是很多教程只顾着把标签一个个罗列出来却很少告诉你这些标签到底应该怎么组合着用。所以我整理了这套 HTML 系列编程示例从基本标签到表格、表单、3D 旋转、返回顶部再到一个完整的小型网页项目全部都是能直接复制跑起来的代码。每个例子我都会解释一句“为什么这么写”方便刚入门和准备前端面试的朋友少走弯路。1. HTML 文档骨架先让浏览器知道你在说什么1.1 文档类型声明与字符编码的作用经常看到有人问为什么网上复制的网页源代码第一行都是!doctype html这个声明看着不起眼但它是在告诉浏览器“我这份文档是按照 HTML5 标准写的请用标准模式渲染我。”很多老版本浏览器如果没有这行会进入“怪异模式”盒模型、行高、字体继承全都会和预期打架。所以你手写页面时这一行别省别觉得少几个字符无所谓。文档头部里langzh-cn是给搜索引擎和屏幕阅读器看的表示页面主要内容是简体中文。meta charsetutf-8更关键它的意思是文档用 UTF-8 编码保存和解析。有些朋友用记事本写完 HTML中文变成了乱码八成就是这里没写或者文件保存时选成了 ANSI。这种情况也不用慌把head里的 charset 改回utf-8再把文件另存为 UTF-8 编码即可。一个标准 HTML 骨架大概是这样的!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML 系列示例/title /head body h1你好HTML/h1 /body /html这段代码里还多写了一行 viewport作用是在手机上让页面宽度等于设备宽度、缩放比例为 1。做移动端适配的时候这行基本必加这也是面试经常问到的点没有 viewport 的页面在手机上会出现横向滚动条或字体自动放大。1.2 标签语法与层级别把标签“写反”了HTML 的语法核心就两件事标签要配对层级要正确。p开始就必须有/p结束按钮、图片这类自闭合标签如img可以不写结束标签但还是建议写成img src... alt...老代码和现代编辑器都能正确识别。层级也就是“谁套着谁”比如ul li列表项/li /ul这里的li必须包在ul或ol里面反过来就不合法。很多新手写表格和表单时最容易把标签交叉嵌套比如在p里套div浏览器虽然不会报错但渲染结果可能完全不是你想要的。HTML 标签还有块级和内联的区别。块级元素像div、p、h1会独占一行适合搭页面结构内联元素像span、a、strong不会换行适合在文字中间加样式或链接。理解这个区别之后再遇到“图片下方多出一块空白”之类的问题你就会有排查方向了。2. 基础标签系列示例文本、表格、表单与图片定位2.1 文本排版一个干净的内容卡片我练习 HTML 时最喜欢做的第一个示例是一个“内容卡片”因为它能把标题、段落、强调、列表全串起来也最容易看到成果。你可以新建一个.html文件把下面代码贴进去h2代码笔记/h2 p今天整理了 strongHTML 常用标签/strong包括文本、列表、链接。/p ul liem强调文本/em 用 codelt;emgt;/code/li li加粗用 codelt;stronggt;/code/li li换行不回车用 codelt;brgt;/code/li /ul这里有一个很容易踩的坑在代码里直接写p、strong这些标签时浏览器会把它当成真实标签解析掉所以需要用lt;和gt;表示小于号和大于号才能在页面上显示标签本身。我在带新人时发现十个里面有八个都会在这里卡一下所以特意把这段写出来。2.2 表格与表单数据展示和用户输入的正确姿势表格这个知识点看起来简单写起来门道很多。基础结构是table套tr行、th表头单元格、td普通单元格。如果你要合并单元格用colspan横向合并、rowspan纵向合并容易出错的位置是合并之后表格的总列数会变比如table border1 tr th科目/th th周课时/th /tr tr td前端基础/td td4/td /tr tr td colspan2总计以课表为准/td /tr /table这段代码里最后一行用了colspan2意思是这一格横跨两列。如果你把它漏掉表格就会变成三列显示布局直接乱掉。表单标签是另一个重点。最基础的表单实现要包含form、input、textarea、select、button。注意提交按钮的name属性很有用后端接口靠它识别字段label的for属性要与输入框的id对应这样点击文字时输入框会自动聚焦对提高体验很有帮助。form label forname姓名/label input typetext idname namename required brbr label forcity城市/label select idcity namecity option valuebeijing北京/option option valueshanghai上海/option /select brbr button typesubmit提交/button /form2.3 图片位置调整三种常用写法搜索热词里有一个“html 如何改变图片位置”估计是很多新手在做第一个页面时都会遇到的问题。图片默认是内联元素会随着文字流排列。想真正“定位”图片建议用 CSS而不是在 HTML 里硬塞一堆空格或br。第一种方式是display: block; margin: 0 auto;可以让图片居中第二种是用float: left;或float: right;让图片环绕在文字旁边第三种是position: absolute;在父容器设置position: relative;后用top、left精确定位。三种方式看起来差不多但适用场景不同。布局复杂时我一般优先选第三种因为它不依赖文档流不容易被其他元素顶跑。3. 加点动态效果3D 旋转、一键返回顶部与爱心代码3.1 3D 旋转卡片的关键参数很多初学者看到 3D 旋转组件觉得很酷以为要写很多 JS其实核心只是 CSS 的三行属性perspective、transform-style: preserve-3d和transform。perspective是透视距离数值越小3D 效果越强烈preserve-3d让子元素保留三维空间位置transform里写rotateY()或rotateX()就能让卡片绕轴旋转。比如做一个鼠标移入时卡片轻微翻转的效果可以这样写.card { width: 200px; height: 260px; transform-style: preserve-3d; transition: transform 0.6s; } .card:hover { transform: rotateY(180deg); }如果想让它自动旋转可以在 JS 里每隔 16 毫秒把rotateY的角度加 0.2再用requestAnimationFrame驱动。这里最容易被忽略的是给卡片外层的容器设置perspective不加它的话旋转看起来就只是一个平面压扁完全体会不到“3D 感”。这个点面试时经常作为 CSS 动画的进阶题目出现值得亲手试一遍。3.2 返回顶部按钮的核心算法“一键返回顶部”看起来是个小功能但处理不好会让用户很难受。最简单的写法是给按钮绑定点击事件然后调用window.scrollTo({ top: 0, behavior: smooth });不过真正的“算法”在于什么时候让按钮出现。你要在window.onscroll里读取document.documentElement.scrollTop或window.scrollY当它大于某个阈值比如 300 像素时显示按钮否则隐藏。如果要求更顺滑的手动缓动可以这样写function scrollToTop() { if (window.scrollY 0) { window.scrollBy(0, -100); requestAnimationFrame(scrollToTop); } }这个写法是每次往上滚动 100 像素再用动画帧循环直到回到顶部。核心思想是每次动画只做一小步浏览器下一帧再继续而不是一次性跳过去。很多面试官会追问为什么不用while循环因为 JS 是单线程的循环会让页面卡死动画根本没有机会渲染。3.3 爱心代码一个适合练习的“小彩蛋”热搜词里的“html 爱心代码”估计又是一个新手刷到的炫酷案例。这种代码基本上是用 CSS 画两个圆再旋转组合成一个心形或者用 canvas 一帧一帧绘制粒子爱心。作为入门练习我挺推荐你敲一遍倒不是为了表白而是能顺便练习transform、canvas的坐标计算和requestAnimationFrame的用法。不过要提醒一句这类效果在简历作品里只能当彩蛋不能当核心功能。我做项目评审时看到过不少人把爱心动画放在页面最显眼的位置结果用户并不知道它想表达什么。比如你可以在页脚放一个“点击查看彩蛋”的小按钮让爱心动画在弹窗里出现既有趣又不干扰主流程。4. 综合项目实战把 HTMLCSSJS 串成一个完整页面4.1 页面结构如何拆分前面讲了那么多零散示例现在来一个“html css js 网页设计”的综合项目。与其记碎片知识不如做一个“产品介绍页”。我习惯先把页面拆成四个区域页头导航、主内容区、侧边信息、页脚。页头放 logo 和菜单主内容区放产品卡片侧边信息放一段表格用来对比产品参数页脚放版权。文件也不用搞得太复杂单页里用style和script包起来就好学习阶段越简单越好管理。4.2 示例代码带导航、卡片和返回顶部的页面下面是一份可以直接复制运行的完整页面里面用到了文本标签、表格、CSS 布局、JS 返回顶部可以把它保存为index.html打开!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title产品介绍页示例/title style body { margin: 0; font-family: sans-serif; } header { background: #333; color: #fff; padding: 16px; } nav a { color: #fff; margin-right: 12px; text-decoration: none; } main { max-width: 900px; margin: 24px auto; padding: 0 16px; } .card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; } table { border-collapse: collapse; margin-top: 16px; width: 100%; } th, td { border: 1px solid #ccc; padding: 8px; } #goTop { display: none; position: fixed; right: 24px; bottom: 40px; padding: 10px 14px; border: none; border-radius: 6px; background: #333; color: #fff; cursor: pointer; } /style /head body header nav a href#首页/a a href#产品/a a href#关于/a /nav /header main div classcard h2新款学习套件/h2 p适合 strong前端入门/strong 的完整示例涵盖 HTML、CSS、JS 基础语法。/p /div table trth模块/thth内容/th/tr trtdHTML/tdtd标签语义化/td/tr trtdCSS/tdtd布局与动画/td/tr trtdJS/tdtd事件与交互/td/tr /table /main button idgoTop返回顶部/button script var btn document.getElementById(goTop); window.onscroll function () { btn.style.display window.scrollY 300 ? block : none; }; btn.onclick function () { window.scrollTo({ top: 0, behavior: smooth }); }; /script /body /html这里你可以看到所有图片定位、表格边框、按钮显隐都是靠 CSS 完成的JS 只负责两件事监听滚动、处理点击。这是一个人门级综合项目最舒服的分工方式。4.3 动手调试比背教程更重要每次带新人我都会让他们把这个页面拿去做改动练习把卡片文字换掉给表格加一行把导航链接改成新页面。改完以后按 F12 打开浏览器开发者工具在 Elements 面板里临时修改样式观察页面变化。这个过程比背十遍标签都管用。调试时有个很实用的技巧不确定某个元素为什么多出一条边先在 Elements 面板点击该元素看右侧的盒模型图。如果 width、padding、border 三项谁扩大了问题基本就找到了。很多朋友说“HTML 文件无法预览”其实不是文件坏了而是代码里某个标签没闭合浏览器按容错模式渲染出了奇怪效果。5. 工具链、格式转换与面试避坑速查5.1 编辑器选择与 HTML 文件无法预览的排查写 HTML 不需要重型 IDE我用过的编辑器从记事本、VS Code 到 Ubuntu 下的 Sublime Text、vim 都有。新手认准 VS Code 即可装上 Live Server 插件可以直接在浏览器里热更新如果在 Ubuntu 上命令行为主用nano或vim写简单页面也完全够用。遇到“HTML 文件无法预览”时先按这三个顺序查一是文件扩展名是否真的是.html有些系统默认隐藏扩展名你存成index.html.txt还以为是网页文件二是文件路径里是否有中文或特殊字符浏览器解析本地路径时容易出问题三是浏览器有没有缓存旧页面用“强制刷新”快捷键 CtrlF5 试一次。5.2 格式转换HTML 转 Markdown、转 WPS 表格、data:text/htmlHTML 在日常工作中经常要转换成其他格式。最经典的场景是写完周报想转成 Markdown可以直接用 pandoc 命令pandoc report.html -t markdown -o report.md如果是 HTML 里的表格想转成 WPS 表格最快的方式是直接在浏览器里打开 HTML选中表格区域复制再粘贴到 WPS 表格里。粘贴前记得先建一个新工作表粘贴时选择“匹配目标格式”这样边框和列宽会相对正常。另一个容易被忽略的小技巧是data:text/html协议。你可以在浏览器地址栏直接输入data:text/html,h1你好/h1并回车浏览器会把它当成一个临时 HTML 页面渲染。这个玩法适合快速测试一段 HTML 片段或把代码存成浏览器书签比如写一段自动设置页面背景色的 JavaScript 书签。5.3 PyQt5 里显示 HTML 的另类玩法如果你不是只做网页而是用 Python 写桌面工具那么 PyQt5 里的QTextBrowser或QWebEngineView可以让你直接用 HTML 渲染富文本和复杂排版。比如在QTextBrowser中显示一段说明文档可以调用setHtmlfrom PyQt5.QtWidgets import QApplication, QTextBrowser app QApplication([]) browser QTextBrowser() browser.setHtml(h3说明/h3p这是strongHTML/strong渲染的段落。/p) browser.show() app.exec_()这个思路在做本地工具、数据报告或聊天窗口时非常实用因为它避免了逐个控件摆放位置的麻烦。需要注意QTextBrowser对 CSS 的支持有限复杂页面建议用QWebEngineView但那个组件体积大很多如果只是渲染一段说明文字QTextBrowser完全够用。5.4 HTML 高频面试题清单与答题思路整理热词的时候我发现“html 面试”“html css 面试”这些词的搜索量一直不低。这里列几个我常用来考察候选人的点!DOCTYPE html的作用是什么HTML5 新增了哪些语义化标签块级元素和内联元素的区别href和src的区别localStorage、sessionStorage和 Cookie 的区别页面加载时 CSS 和 JS 的阻塞情况。这些问题并不难但很能看出基础扎不扎实。比如问我“HTML5 新增加载提示”最关键的是别把细节背错删除线用del不是s进度条用progress不是meter。能准确说出来面试官会觉得你有真实写码经历而不是只刷过题。5.5 常见问题速查表最后把这一年来看到最多的几个问题整理成一张表方便你遇到时快速查找现象大概率原因排查方法中文乱码文件保存编码与 meta charset 不一致另存为 UTF-8 编码图片不显示路径写错或图片文件被移动用相对路径并检查文件名大小写样式没生效选择器写错或样式被覆盖F12 查看 Computed 样式点击返回顶部无效JS 监听位置错误或按钮被遮挡确认按钮不在父容器之外HTML 文件无法预览扩展名 .txt 或缓存未更新查看扩展名并强制刷新表格对不齐合并单元格未调整总列数检查 colspan/rowspan 是否合理这六类问题是我在带开发新人时遇到最频繁的很多看起来诡异的问题最后都压在文件编码、路径、缓存和标签闭合这四件事上。把这些基础问题排查顺了你写的 HTML 才能真正稳定“跑起来”。我个人在实际操作中的体会是HTML 的入门门槛确实低但别因此小看它。把每一类标签都单独写成一个可运行示例存成独立文件再慢慢组合成项目是效率最高的方式。这个系列从基础骨架到综合项目每一步都对应真实开发中会用到的能力建议你从第 2 节开始每天敲一个示例一周之后回头看你会发现自己对网页的理解完全不一样。本文还有配套的精品资源点击获取
