简介面向初学者的HTML系列编程示例是一份以实际代码为核心的基础练习资源。示例围绕网页开发中最常用的知识点展开包括页面基本结构、段落与不同级别标题、超链接、图片插入、列表、表格、表单及框架布局等适合编程入门者自学、教师课堂演示以及课后对照练习这些示例大多可直接在浏览器中打开文件结构清晰便于按主题逐个学习。资源包共14个文件其中12个为html示例页另有jpg和bmp图片各1张作为素材压缩包整体仅52KB下载后即可使用已有155人学习使用。通过动手改写这些小程序读者能够熟悉元素嵌套、属性设置和表单交互等基础操作还能顺带理解与HTML配套的CSS简单样式控制为后续学习HTML5新特性、响应式布局等进阶内容打下扎实基础。1. html系列编程示例到底在解决什么问题做前端这些年我经常收到“给我一段能跑的HTML”这种需求真正动手时才发现很多人以为HTML就是记事本里随便写写就能出页面结果一打开全是乱码、点按钮没反应、换个目录图片全挂。html系列编程示例说的就是一套能直接抄走、能跑通、能讲清楚原理的页面代码合集从最基础的!doctype html骨架到爱心动画、一键返回顶部、天气卡片这类常见交互再到HTML转Markdown、PyQt5里嵌入HTML、多文件打包这种边界场景。它的价值在于让你不用从零推演浏览器行为照着示例改参数就能得到预期效果。适合刚学编程的人搭第一个页面也适合后端和嵌入式工程师临时需要一个操作界面时快速落地。这套示例和网上那些碎片代码不一样每条都带参数说明和失败表现你能同时看到它为什么有效、以及它会在什么情况下失效。后面章节按“骨架 - 特效 - 工具链 - 排错”推进每一段代码都保存成本地文件直接双开就能看效果不需要装框架和构建工具。2. 先把HTML骨架写对doctype、meta与最小可运行模板2.1 一个能稳定运行的最小HTML模板逐个标签说清楚我见过太多页面翻车根源不在后面的业务逻辑而是开头三行没写对。这里是每一个HTML文件都应该照抄的开头!doctype html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title示例页面/title /head body h1第一个示例/h1 p这是一个可以直接保存为 index.html 双击打开的最小页面。/p /body /html这段代码里有几个位置是“错一点都不行”的。第一行的!doctype html告诉浏览器用标准模式解析页面不写的话浏览器会进入怪异模式后面所有CSS的盒模型计算方式都会变明明设了width: 100%结果横向滚动条还是冒出来。第二行的html langzh-CN不是摆设屏幕阅读器靠它判断朗读发音搜索引擎靠它识别页面语言做SEO或者无障碍改造时这个属性影响很大。meta charsetutf-8必须放在head的最前面至少要在title之前。浏览器的解析是流式的读到title里的中文时如果还没看到字符编码声明就会用系统默认编码去解码常见结果是GBK和UTF-8互相猜满屏问号和方块。viewport是移动端适配的命门widthdevice-width让布局宽度等于屏幕物理宽度initial-scale1关掉移动浏览器默认的缩放行为忘了写它手机上看PC页面就是缩小的一整块需要手动放大才能读。下面是这个最小模板里三个关键标签的常见错误对照我在代码评审时基本就盯着这几行看标签作用常见错误!doctype html切换浏览器到标准模式漏写或写在HTML注释之后meta charsetutf-8声明字符编码放在title后面导致中文乱码meta nameviewport移动端视口控制忘写导致手机端页面过窄2.2 文字、列表、表格、表单的示例组合骨架定了接下来是页面里最常出现的一组元素。把文字、列表、表格和表单控件放在一起是最常见的HTML网页制作入门练习下面这个示例基本覆盖了日常需求section h2用户信息登记/h2 ul li姓名input typetext placeholder请输入姓名/li li角色 select option valuestudent学生/option option valueteacher老师/option /select /li li备注textarea rows2 cols30/textarea/li /ul table border1 trth课程/thth状态/th/tr trtdHTML基础/tdtd已完成/td/tr trtdCSS布局/tdtd进行中/td/tr /table button onclickalert(提交成功)提交/button /section列表用ul加li语义是“无序的一组项”适合表单字段这种没有先后关系的场景。如果步骤有顺序比如安装教程里的第一步第二步应该用ol浏览器会自动编号。表格用table加tr、th、tdth是表头默认加粗居中border1只是示例用途真实项目里应该用CSS类控制边框而不是这个属性。表单控件直接嵌在li里是我比较推荐的做法相比用br换行列表结构更清晰屏幕阅读器也能把标签和输入框关联起来。placeholder只是灰色提示文字不是值提交时拿不到它。需要默认值时用value属性这是新手最容易绕晕的点。这组示例跑通后你自然会遇到一个需求把页面里的表格搬到WPS或Excel里。直接在浏览器里选中表格复制、到WPS里粘贴单元格结构和数值能保住但边框和底色全丢这是HTML转WPS表格最常见的损失。想保留多一些格式就在浏览器里按CtrlS把页面另存为HTML文件再用WPS打开这个文件样式保留度会高很多。3. 网页特效示例爱心动画、一键返回顶部和天气卡片3.1 用canvas画一个可交互的爱心动画“HTML爱心代码”是搜索热度很稳定的一个词很多新手就是想先做出一个酷炫的东西来建立信心。用canvas实现爱心比用CSS拼两个半圆加一个方块要灵活得多因为它是逐帧画的可以随时改颜色、加动画、挂点击事件。下面是一个最小可跑的版本!doctype html html langzh-CN head meta charsetutf-8 titleCanvas 爱心动画/title style body { margin: 0; background: #1a1a2e; } canvas { display: block; } /style /head body canvas idheart/canvas script const canvas document.getElementById(heart); const ctx canvas.getContext(2d); canvas.width window.innerWidth; canvas.height window.innerHeight; // 爱心参数方程x16sin^3(t)y13cos(t)-5cos(2t)-2cos(3t)-cos(4t) function heartX(t) { return 16 * Math.pow(Math.sin(t), 3); } function heartY(t) { return 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(12, 12); ctx.beginPath(); for (let t 0; t 2 * Math.PI; t 0.01) { const x heartX(t); const y -heartY(t); if (t 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.strokeStyle #ff4757; ctx.lineWidth 0.15; ctx.stroke(); ctx.restore(); } draw(); /script /body /html这段代码里最关键的是那个参数方程。t从0扫到2π每个t值算出一个(x, y)坐标点把所有点连起来就是爱心轮廓。ctx.translate把坐标系原点移到画布中心因为方程的坐标原点在(0,0)不平移爱心就会画在左上角。ctx.scale(12, 12)把方程里的小数值放大成像素级坐标12这个缩放系数决定爱心大小改大爱心就大。y轴取负是因为canvas坐标系里y轴向下为正数学坐标系里y轴向上不取负爱心就是倒着的。这个静态轮廓画完后想加点交互很简单给canvas挂一个点击事件每次点击换一个颜色是熟悉Canvas状态机的好练习script const colors [#ff4757, #ffa502, #2ed573, #1e90ff]; let colorIndex 0; canvas.addEventListener(click, () { colorIndex (colorIndex 1) % colors.length; draw(); }); /script注意draw()里strokeStyle用的是闭包外的colors[colorIndex]所以每次点击重画时颜色会变。这个阶段的常见翻车点是canvas尺寸canvas.width设置的是画布实际像素CSS里的width只是显示尺寸两者不一致会导致画出来的爱心发虚或者被拉伸这里直接用JS同步成window.innerWidth窗口大小变了需要重设并重绘。3.2 一键返回顶部两种写法与平滑滚动的参数网页一长返回顶部按钮就成了刚需。网上有无数个版本但真正常见的做法其实就是两种现代浏览器一行搞定老环境用requestAnimationFrame手动控制。先看最省事的一种button idtoTop styleposition: fixed; right: 20px; bottom: 20px;返回顶部/button script const btn document.getElementById(toTop); // 方法一浏览器自带平滑滚动 btn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); }); /scriptwindow.scrollTo的behavior: smooth是CSSOM规范里的标准参数Chrome、Firefox、Edge和Safari都支持页面会以浏览器内置的缓动曲线滚回顶部。这个方案的问题在于它没有给你任何控制感。滚动时长、先快后慢还是匀速全部是浏览器说了算。需要在特定时长内完成滚动、或者想统一不同浏览器手感时就得手动写。下面这段是我常用的固定时长版本script function scrollToTop(duration 400) { const start window.pageYOffset; const startTime performance.now(); function step(now) { const progress Math.min((now - startTime) / duration, 1); const eased 1 - Math.pow(1 - progress, 3); // easeOutCubic 先快后慢 window.scrollTo(0, start * (1 - eased)); if (progress 1) requestAnimationFrame(step); } requestAnimationFrame(step); } btn.addEventListener(click, () scrollToTop(600)); /script这个手写版本的核心是把“滚动距离”和“时间进度”解耦。progress从0到1表示时间走了多少eased是经过缓动函数换算后的实际位移比例easeOutCubic让滚动开头快、结尾慢视觉上不会像线性滚动那样生硬。duration是总时长400到600毫秒是比较舒服的范围太短了像瞬移超过了800毫秒用户会觉得拖沓。两种做法我建议都留在代码里用特性检测选路因为老式浏览器虽然少见了但总能在某个定制环境里碰到。先判断window.scrollTo是否带behavior支持不支持就走手写版本。所谓“一键返回顶部算法”核心不在那行跳转语句而在缓动函数和时长的配合。3.3 静态天气卡片不靠后端也能做的页面很多人想做百度首页那种天气模块以为必须有个后端服务。其实做一个能看能用的天气卡片HTML加一次fetch请求就够了。先从纯静态版本开始胜在稳定div classweather-card div classcity上海/div div classtemp26°C/div div classinfo多云 · 东南风 3级 · 湿度 60%/div /div style .weather-card { width: 220px; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, #74b9ff, #a29bfe); color: #fff; font-family: sans-serif; } .temp { font-size: 36px; font-weight: bold; } .info { font-size: 13px; opacity: 0.9; } /style这个卡片本身没有任何动态逻辑适合先确认样式再往里面塞数据。想显示真实天气可以用免费天气接口返回JSON前端解析后填入对应DOM节点。我一般这样写div classweather-card div classcity上海/div div classtemp idtemp加载中.../div div classinfo idinfo正在获取天气数据/div /div script async function loadWeather(city) { const url https://wttr.in/${city}?formatj1; try { const res await fetch(url); if (!res.ok) throw new Error(bad status); const data await res.json(); const current data.current_condition[0]; document.getElementById(temp).textContent current.temp_C °C; document.getElementById(info).textContent current.weatherDesc[0].value · 湿度 current.humidity %; } catch (err) { document.getElementById(temp).textContent 天气数据暂时不可用; } } loadWeather(shanghai); /script这段代码有两个必须注意的参数点。第一是接口的formatj1它决定返回JSON而不是纯文本解析时current_condition数组里才有temp_C和humidity这些字段。第二是try/catch必须有因为天气接口跨域策略、本地离线环境、接口限流都会让fetch失败没有catch分支页面就卡在“加载中”永远不动。现实项目里还要加超时控制否则断网时Promise可能长时间挂起。静态版本和接口版本的区别在于静态版是HTML网页制作练手的好素材接口版涉及异步编程、错误处理、DOM更新是往真实业务靠的第一步。新手我建议先做静态版确认布局没问题再换接口版两步都能跑通你对“数据从哪来”这件事就有了体感。4. HTML不是孤立文件转换、嵌入与多文件打包示例4.1 HTML转Markdown用html2text保住结构和代码块写技术文档时经常碰到这种情况手头只有一份HTML页面想转成Markdown放进笔记系统或README里。手工复制粘贴丢格式在线转换器又怕内容外泄。本地用Python的html2text库是最常见做法几行代码就能跑import html2text h html2text.HTML2Text() h.ignore_links False # 保留超链接 h.body_width 0 # 不自动换行避免切断长链接 h.ignore_images False # 保留图片引用 h.protect_links True # 链接地址不会被后续文本吞掉 with open(page.html, r, encodingutf-8) as f: html_content f.read() markdown h.handle(html_content) with open(page.md, w, encodingutf-8) as f: f.write(markdown)body_width 0是这套参数里最容易踩的一处。html2text默认会在80列处自动换行这个行为对普通段落没影响但碰到一长串URL或代码块时会把链接地址从中间截断生成的Markdown里链接直接失效。设为0之后工具保留原始换行结构只在Markdown语法需要的地方换行。ignore_links False决定a标签转成[文字](地址)还是只留文字默认行为是保留链接但有些场景你只想要纯文本比如把页面内容抽取成API文档描述时改成True会让输出干净很多。protect_links True是另一个细节开关它防止链接地址被后面的中文标点“吸收”比如链接后面紧跟句号时没有这个开关句号可能被误判成URL的一部分。转换质量还取决于源HTML的规范程度。列表嵌套、粗体斜体、行内代码这些标准元素html2text处理得很稳。真正会翻车的是复杂表格多列表头加colspan的表格转换后直接退化成一行普通文本列对齐关系全丢。遇到这种我的处理办法是先看表格是不是必须转成MarkdownMarkdown的表格语法本身就不支持单元格合并硬转没有意义不如把那个表格截图旁边放链接或者在源HTML里改写成简单单行表头再转。代码块也有要求必须是precode.../code/pre这种严格嵌套写成pre里直接放文本的输出会变成带缩进的普通段落高亮语法全没。4.2 在PyQt5界面里显示HTMLbaseUrl不设就会翻车的图片桌面端程序经常需要在界面里渲染富文本PyQt5的QTextBrowser和QTextEdit都支持HTML子集。比如一个设备状态面板用HTML排版比用一堆QLabel拼界面省事得多。但这里有个几乎所有新手都会撞上的坑图片不显示。import sys from PyQt5.QtWidgets import QApplication, QTextBrowser from PyQt5.QtCore import QUrl app QApplication(sys.argv) browser QTextBrowser() html html body h2设备状态/h2 pimg srcimages/ok.png width20 height20 运行正常/p pimg srcimages/warn.png width20 height20 温度偏高/p /body /html # 第二个参数是baseUrl让相对路径从 html 所在目录解析 browser.setHtml(html, QUrl.fromLocalFile(/opt/device_status/index.html)) browser.show() sys.exit(app.exec_())setHtml的第二个参数是很多人不知道的坑。如果不传baseUrlQt会用进程当前工作目录去解析images/ok.png而不是HTML文件所在的目录。程序在IDE里运行时工作目录恰好对得上图片能显示打包成exe放在其他路径启动图片立刻全挂典型的环境相关“玄学”问题。QUrl.fromLocalFile接受的是一个假想的HTML文件路径你不需要真的创建这个文件它只是用来告诉Qt“相对路径以这个目录为准”。更稳妥的做法是用os.path.dirname(os.path.abspath(__file__))动态拼接资源目录程序被换到任何位置都能找到图片。另外注意QLabel的setText也支持HTML但只支持一个很简陋的子集字体、颜色、粗体斜体、简单图片。table布局和复杂样式在QLabel里经常渲染不全需要表格或完整文档结构时直接用QTextBrowser或QTextEdit别在QLabel上浪费时间。QTextBrowser默认是只读的适合展示QTextEdit可编辑适合做简单的富文本编辑器。两者都支持同一套HTML解析器代码可以通着用。4.3 多个HTML打包成一个相对路径与资源内联做示例合集时最常碰到的需求是一个页面引用了十几个HTML文件发给别人后全是一堆文件夹对方打开发现样式没了、图片裂了然后过来问你“是不是文件没发全”。这种问题几乎都是相对路径引起的解决方式有两类一类是把资源内联进单个HTML另一类是统一目录结构并用本地HTTP服务打开。资源内联最直接的做法是把多个文件的内容合并进一个HTMLCSS放style里JS放script里小图片转成base64塞进src属性img srcdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABxRk3j...base64图片会把文件体积撑大约33%这是编码本身的损耗100KB以上的图片就不建议内联了否则一个页面几MB加载体验很糟糕。内联的适用场景是图标、logo、透明小装饰图这一类体积小的资源。图片较多的页面正确做法是维持相对路径并且保证整个目录移动时内部结构不变。多HTML文件本身的合并是另一个问题。比如你有5个示例页面想整理成一个总入口常见做法不是用iframe硬嵌套而是做成单页多视图所有示例的HTML都放在同一个文件的不同div里用JavaScript控制显示和隐藏。这样一份文件、零外部资源浏览器双击就打开不会被window.open拦截也不会出现iframe滚动条嵌套的混乱nav button>const { JSDOM } require(jsdom); const html !doctype html htmlbody button idtoTop返回顶部/button /body/html ; const dom new JSDOM(html); const { window } dom; const btn window.document.getElementById(toTop); if (!btn) { throw new Error(smoke test failed: toTop button not found); } btn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); }); btn.click(); console.log(smoke test passed);这个脚本的核心是两步第一步断言关键节点存在第二步模拟触发事件确认回调函数不抛异常。getElementById返回null时立刻抛错避免后面操作空对象。真实项目里我会把每个示例的关键选择器和预期行为写成一个清单用循环跑完所有页面任何一步失败就在控制台输出对应页面名。我的个人习惯是每个示例保留两个版本一个不带任何注释的干净HTML用于实际使用一个带全量注释的reference版本用于回头看原理。多年下来的血泪经验是HTML本身的坑远没有环境带来的坑多——编码不对、doctype丢了、相对路径解析错乱这些问题占了调试时间的一大半。把骨架写对、路径锚点稳固、转换前的源数据检查到位这套html系列编程示例才能真正变成你自己的工具而不是永远在复制粘贴后祈祷它能跑。希望帮到你。本文还有配套的精品资源点击获取