pathview实操：把差异基因画到KEGG通路上，从ID映射到在线渲染
2026/9/29 17:12:49
HTML这东西，说简单也简单，说复杂也复杂。我最初接触HTML时，以为记几个标签就行，后来才发现真正难的不是标签本身，而是标签、CSS、JavaScript叠在一起时那堆“看似正常却不出效果”的瞬间。这篇笔记是我自己实际学习和做页面时攒下来的，不按教材顺序写，而是按我踩过的坑、常用的套路和能直接抄走的代码来整理。想系统入门HTML的初学者，或者做了一段时间前端但基础不牢的朋友，都可以拿它当索引。里面的代码片段我尽量都在真实项目里验证过，像DOCTYPE、meta charset、lang属性这些容易被忽略的东西，会单独拿出来讲，因为它们直接影响页面能不能被正确解析、能不能在手机端有合理的排版。HTML不只是网页制作的“入门课”，它也是一切页面交互的底盘，搞懂这些基础，后面学CSS和JS会顺很多。
1. 笔记从哪开始：先搞懂一个HTML文档的骨架
1.1 不要跳过DOCTYPE和html标签
很多在线工具生成的代码开头都是<!DOCTYPE html><html lang="zh-cn">，复制下来就贴，却很少想过这两行到底在干什么。DOCTYPE其实不是HTML标签，它是文档类型声明，告诉浏览器“这是一份符合HTML5标准的文档”。少了它，浏览器会进入一种叫怪异模式的渲染状态，跟标准模式的规则差很多。
比如同样一个盒模型，怪异模式下元素宽度的计算方式可能和标准模式不一样，页面会莫名其妙错位。所以只要想写正经页面，第一行就是<!DOCTYPE html>，没有例外。html根标签里的lang属性也值得认真写，比如lang="zh-cn"，意思是我这个页面内容主要用简体中文。这个属性不光影响你，也影响别人。
搜索引擎和读屏软件会通过lang去判断页面语言，做SEO或者无障碍优化时，lang填错了可能影响抓取和朗读发音。至于<html lang="zh">和<html lang="zh-cn">的差别，前者是宽泛中文，后者明确简体中文，我一般按内容的实际用词来写。如果你做的页面是面向港澳台或繁体用户，写lang="zh-hk"或lang="zh-tw"更合适。别小看这个属性，它属于“写错不报错，但会影响别人”的隐性细节。
1.2 meta charset和viewport是页面的“体检单”
<head>里最常见的 meta 有两个：<meta charset="utf-8">和<meta name="viewport" content="width=device-width, initial-scale=1">。字符集声明解决的是乱码问题，HTML文件用什么编码保存，就要用对应的charset告诉浏览器。现在基本都用UTF-8，因为它能覆盖绝大多数语言符号，包括中文、日文、韩文和各类特殊符号。
viewport这个meta经常被新手漏掉，漏掉之后手机端打开页面就会按PC宽度渲染，文字小得跟蚂蚁一样，还要手动放大。加上这一行，页面宽度会跟随设备宽度，initial-scale=1表示初始缩放比例为1，这样移动端布局才有起码的保障。做网页时还要配合CSS里的媒体查询才能真正适配手机，但viewport不加，后面全是白搭。
除了这两个，有一个比较容易忽略的meta name="description"和meta name="keywords"，它们曾经是SEO的核心，现在description仍会在搜索结果里显示摘要，keywords的权重已经很弱了。我建议写description时用一句通顺的话说明页面主题，别堆关键词。示例：<meta name="description" content="HTML笔记：从文档骨架到实战页面的完整速查">。这些meta都放在<head>里，属于页面元信息，用户看不见，但对机器很友好。还有<meta name="author">可以标注作者，做团队项目时能帮助查来源。
1.3 标题、正文与换行：最容易被忽略的基础
页面内容要有标题层级，h1到h6我用得最多的是h1、h2、h3。一个页面尽量只出现一个h1，通常是网站名称或文章标题，h2是章节标题，h3是小标题，这样文档结构更清晰，也方便读者扫描内容。很多人一开始就把h1用成“大号加粗文字”，然后为了字体大小去改样式，这种习惯可以改一改，标题就该用标题标签，字体大小交给CSS，语义和样式分离才能减少后期维护成本。
正文用p标签，段落之间自然会有外边距。我常看到有人想在HTML里换行，直接按键盘回车，结果页面上仍然连成一行。HTML里的连续空白符（包括回车、空格、Tab）会被合并成一个空格，这是HTML解析的规则。真想换行，普通文本里用<br>，它是个空元素，不用闭合；段落之间应该用 p 或 blockquote 等块级元素来分隔，而不是硬堆<br>。
这里有个小经验：<br>的语义是“在诗歌或地址里进行换行”，正常段落不想新起一个p时可以用，但绝大多数情况应该用块级元素控制行距。还有人用 插入不断行空格，用来占位可以，别用来做页面间距，间距是CSS的margin和padding该管的事。做网页排版时，建议养成“先写结构，再调样式”的习惯，否则后期想改标题层级或段落间距，会满地都是br和nbsp。
2. HTML只是起点：配套CSS与JS的速记要点
2.1 选择器优先级和盒模型
HTML负责结构，CSS负责表现，二者是搭档。学CSS时第一个要背的不是属性，而是选择器优先级：!important> 内联样式 > id选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素。同一优先级下，后写的覆盖先写的。这个规则搞不清，就会出现“我明明写了class，为什么没生效”这种问题。
简化理解看权重：id是100，class是10，元素是1，内联样式是1000，!important无穷大。注意权重会累加，比如.nav .item权重是20，#main .item权重是110。调试时可以打开浏览器开发者工具，看哪条样式被划掉了，就能定位到底被谁覆盖。一个小技巧是优先用类选择器而不是id选择器，因为类的复用性强，不容易出现权重打架。
盒模型是另一个重中之重。标准盒模型中，width和height只包含内容区，不含padding和border。如果设置一个div的width为200px，padding为20px，border为1px，它在页面上占的宽度就是 200+20×2+1×2=242px，这经常导致布局溢出。想省事可以对元素设置box-sizing: border-box，这样width会包含padding和border，计算就直观很多。很多人喜欢给所有元素统一* { box-sizing: border-box; }，是个省心的做法，尤其做多栏布局时能少算很多数。
2.2 让页面“动”起来：JS事件入门
JS给HTML注入了交互。事件监听最基础的是click、mouseenter、mouseleave、input、submit。用原生JS绑定事件时，我推荐addEventListener，而不是在HTML标签里写onclick，原因是行为结构和样式分离，而且同一个事件可以挂多个处理函数。一个简单的点击事件示例：
document.getElementById('btn').addEventListener('click', function() { document.querySelector('.tip').style.display = 'block'; });这里要注意，script最好放在body结束标签之前，或者放到head里但使用defer属性。如果把script放在head里且不用defer，浏览器解析到script时会阻塞后面的HTML渲染，可能造成页面白屏或事件绑定时找不到DOM元素。这个坑我在刚写交互时踩过，后来统一把script放body末尾，问题就少了很多。
JS里的DOM操作，最常用的三类是querySelector、getElementById、innerHTML。querySelector支持css选择器，灵活但稍微慢一点；getElementById在大量操作时性能更好。改内容时，如果一个区域是纯文本，用textContent而不是innerHTML，既能避免XSS问题，也让代码更安全。这些细节在写“爱心代码”“烟花代码”时常遇到，因为动画往往需要不断改DOM，稍不留神就会卡。还有事件委托也很实用，比如给列表的父容器绑一个click，再用e.target判断点了哪个子项，性能比给每个子项都绑事件好很多。
2.3 常用功能代码笔记：下拉菜单、一键返回顶部、倒计时
下拉菜单最简单的做法是纯CSS，父级hover时显示子菜单：
.menu .submenu { display: none; } .menu:hover .submenu { display: block; }但移动端没有hover，就得用JS监听click来加class。无论哪种方案，都要注意子菜单的层级和定位，用position: absolute的父容器要设position: relative，不然菜单会飘到奇怪的位置。我在做导航菜单时习惯给当前激活项加一个.active类，让样式能区分“默认”和“展开”两个状态。
一键返回顶部，最简单的是<a href="#top">，但更顺滑的体验需要JS：
document.getElementById('backTop').addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); });注意浏览器兼容性，老版本不支持behavior时，可以加一个降级判断。不要用document.body.scrollTop这种老写法，不同浏览器兼容性很差。按钮的显示时机我也处理过，一般监听window的scroll事件，滚动超过一屏再显示返回按钮，减少视觉干扰。
倒计时页面在节假日常见，核心逻辑是计算目标时间和当前时间的差值：
function getLeftTime(targetDate) { let now = new Date().getTime(); let diff = new Date(targetDate).getTime() - now; if (diff < 0) return { day: 0, hour: 0, minute: 0, second: 0 }; return { day: Math.floor(diff / 86400000), hour: Math.floor(diff / 3600000) % 24, minute: Math.floor(diff / 60000) % 60, second: Math.floor(diff / 1000) % 60 }; }上面这些代码我实际都用过，直接抄没问题，但要注意对应HTML结构里的id和class保持一致。如果你用的是class选择器，事件绑定里就要写querySelector('.menu')，而不是getElementById('menu')。命名建议用语义化名称，比如backTop、submenu、countdown，这样别人看代码也容易懂。倒计时更新时，只更新“天时秒分”四个数字的textContent，比整个页面重绘性能好很多。
3. 工具链与转换笔记：编辑器、转Markdown、转表格、PyQt5显示HTML
3.1 Ubuntu下用哪个HTML编辑器
有人专门搜“ubuntu的html编辑器”，我顺便把我的经验写下来。在Linux下写HTML，轻量级方案是VS Code，装个Live Server插件能实时刷新页面，效率很高。如果追求极简，可以用Sublime Text或Vim，服务器上没有图形界面时Vim就很够用。不过需要调试CSS或看实时效果，还是图形化编辑器方便。
大多数编辑器里，我建议开启“自动保存”和“格式化代码”功能。格式化会把缩进整理整齐，但要注意，像pre或文本包含大量空格的场景，格式化有可能会改变内容结构，改完后要肉眼确认。HTML文件本身是纯文本，任何文本编辑器都能打开，但选择合适的编辑器能直接影响调试体验。我在Ubuntu下还习惯装一个“Preview HTML”类的插件，按快捷键就能在默认浏览器里看效果，省得每次手动拖文件。
另外说一个容易忽视的点：HTML文件保存时必须注意编码。编辑器默认是UTF-8，但个别工具会存成GBK或ASCII，一旦和<meta charset="utf-8">不一致，就会乱码。如果发现乱码，先检查保存编码，再检查meta，只有两者一致才能正常显示。Linux下可以用file命令查看文件编码，这个动作很快，定位乱码很有效。
3.2 把HTML转成Markdown的实践
“html转为md”是很多人需要的功能，尤其像我这种写博客的人，经常需要把一段网页内容转成Markdown。我不推荐纯手工复制粘贴，因为丢格式、多标签。自己写转换脚本时，最简单的思路是借助Node.js环境里的html-to-md或Python里的html2text。如果只是偶尔用一次，也可以在线工具搞定，但要注意代码块、表格、图片这些特殊内容，在线工具往往会转得比较粗糙。
我在项目里用过一个相对稳定的流程：先清洗DOM，只保留body里的内容，把不需要的script/style去掉，再把块级标签如div、p、h1-h6、ul、li映射成Markdown符号。表格转换比较麻烦，因为Markdown表格不支持单元格合并，如果原页面有复杂表格，转出来会损失结构，这时就要考虑是不是用截图更合适。
下面是一个用Python转换的示例：
from html2text import HTML2Text h = HTML2Text() h.ignore_links = False markdown_text = h.handle(html_content) print(markdown_text)html2text默认会把链接转成Markdown格式，ignore_links如果设为True会丢掉链接，一般保持False。转换后还要人工检查标题层级，因为网页里的标题标签可能用得混乱，Markdown需要一级一级跳转，比如从#直接跳到###，就要手动补一个二级标题。这个步骤别省。如果是批量转多个html，可以写一个循环，把href里的相对链接改写成相对路径，同时处理图片alt字段，尽量保留原意。
3.3 HTML转WPS表格、PyQt5显示HTML的落地笔记
有人搜索“html格式转换wps表格”，这里分两种情况：一种是本身就想提取HTML里的表格数据放进WPS表格。方法很简单，用浏览器打开页面，全选复制，粘贴到WPS里，表格结构一般能保留，但样式可能会乱。更保险的办法是用pandas里的read_html，直接抓取页面里的table转成DataFrame，再导出成Excel：
import pandas as pd dfs = pd.read_html('page.html') dfs[0].to_excel('output.xlsx', index=False)另一种是把整个网页嵌进WPS表格里。WPS本身不支持直接显示HTML网页，但可以通过超链接或嵌入对象的方式跳转，打开到默认浏览器。如果是在表格里展示网页内容，建议直接用Excel的“网页预览”能力或做嵌入式浏览器控件，别指望纯表格能渲染复杂网页。
PyQt5显示HTML也是一个我试过多次的需求，特别是写工具软件时，想把一些富文本结果展示在窗口里。PyQt5提供了一个QTextBrowser，可以setHtml()直接渲染HTML字符串，让样式生效。一个最简单的用法：
from PyQt5.QtWidgets import QApplication, QTextBrowser app = QApplication([]) browser = QTextBrowser() browser.setHtml('<h1>HTML笔记</h1><p>这是<strong>加粗</strong>的文本</p>') browser.show() app.exec_()如果只是展示简短的富文本或笔记内容，QTextBrowser足够；需要完整网页交互、带JavaScript的页面，才考虑QWebEngineView，但QWebEngineView依赖的QtWebEngine包体积较大，打包后体积会增加不少，内存占用也高。注意setHtml里如果包含外部图片，要用绝对路径或file://协议，不然图片不显示。还有一个坑是系统样式和网页样式的冲突，QTextBrowser的默认样式可能覆盖你CSS里的部分字体设定，这时要写完整的css并设置styleSheet。打包成exe后，QtWebEngine需要额外带翻译和资源目录，否则很多网页功能异常，最好提前看发行目录。
4. 实战笔记：从学习到能做出一个完整页面
4.1 综合项目实战怎么规划
搜“html网页综合项目实战”的人，多半是学到一定程度想做完整网站。我的建议是不要一上来就写代码，先画结构草图，哪怕用笔画两栏、导航、页脚。然后写一个最简HTML骨架，把主要区域用div或语义化标签搭出来，区域里先用h2或p占位。接着分步填充CSS：先全局reset或normalize，再布局主轴，再调细节。最后加JS交互。这个过程能避免很多问题。
实战里最常见的问题是“做着做着不知道写到哪了”，用版本管理或至少备份文件能解决，每次改版前保存一个副本。我个人的习惯是给文件命名带上版本号，比如index_v2.html，改坏了还能退回。项目再大一点就用Git，提交信息写清楚，这样能知道哪次改动引起了样式崩坏。
我在做综合页面时习惯把公共header和footer单独放在一个文件里，开发时用模板语言或JS引入。但纯静态HTML没有include能力，要么复制粘贴，要么用工具把多个页面打包合并。搜“打包多个html”其实也是很多纯前端项目的需求：把多个HTML页面的公共部分抽出来，统一编译生成。用Gulp或11ty这类静态站生成器可以做到，也可以手写一个node脚本，把相同片段替换进去。
4.2 节日代码：爱心/烟花/中秋节页面的套路
网上有很多“爱心代码大全html”“烟花代码html”“中秋节代码html”，其实都是同一个套路：先构建一个静态HTML结构，然后用大量CSS动画或Canvas绘制特效。我做爱心动画时，最常用的是CSS把心形用伪元素和rotate拼出来，再加上渐变色的跳动动画。效果看起来复杂，核心其实就是@keyframes里不断改变scale和opacity。
Canvas烟花则是一个简单粒子系统，每个烟花粒子有初始速度、重力和透明度衰减，用requestAnimationFrame循环更新位置。很多现成代码直接抄过来会出现一个问题：页面宽度变了，canvas尺寸没跟着变，导致特效只绘制在左上角。记得在resize事件里重新设canvas.width和height，并且区分设备像素比，否则在高分屏上会模糊。
中秋节这类页面更多是“氛围”需求，我建议做三个东西：一个半透明的背景图或渐变色，一段简单的中秋祝福文字，再加一个JavaScript控制的月亮或灯笼动画。这类页面本身不复杂，关键是文字内容要友善正面，代码里不要有奇怪的外部资源依赖，不然网页加载会很慢。给一个简单的Canvas粒子发射要点：
const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); function createParticle(x, y) { return { x, y, vx: (Math.random() - 0.5) * 8, vy: (Math.random() - 0.5) * 8, life: 1, color: `hsl(${Math.random() * 360}, 80%, 60%)` }; }每次请求动画帧里，更新粒子位置，减掉life，再根据life把fillStyle设置成对应透明度，就能画出一个彩色爆炸效果。这个代码还能扩展成“加字”版，把文字画到一个离屏canvas上，再根据文字像素位置发射粒子，就看到文字烟花。节日代码本质是给对方传达心意，所以文字和配色比特效更重要，不要只追求花哨。
4.3 打包多个HTML页面与部署注意
做站时多页面之间是靠链接串联的，链接常用相对路径，比如<a href="about.html">。本地打开没问题，部署到服务器上如果根目录结构变了，链接就会失效。我在打包多个HTML时，会先跑一个链接检查脚本，把所有href和src列出来，看是否有404风险。Linux下可以直接用grep -oE '(href|src)="[^"]+"' *.html快速提取所有资源引用。
静态页面部署最常见的方案是放到Nginx或对象存储里，保证首页是index.html。部署完成后要检查favicon、图片、CSS、JS是否都正常加载，浏览器开发者工具的Network面板能直接看到404状态码，这种问题别等用户反馈再发现。还有一个容易踩的坑：部署到HTTPS网站时，页面里的图片或请求如果是http://，会被浏览器拦截或提示不安全。建议所有静态资源都用相对路径或https链接。
如果是单文件HTML，尽量把图片转成base64嵌入，这样方便发给人看，适合做爱心代码分享之类的小页面，但会增大文件体积，需要权衡。打包多个HTML的另一个好处是能统一替换CSS版本号，避免浏览器缓存旧的样式文件。我通常会在发布前把<link rel="stylesheet" href="style.css?v=20250101">这样的版本参数加上，发布后改动会立即生效，也不用让用户强制刷新。
5. 常见问题排查与避坑
5.1 样式不生效：先检查这四件事
样式不生效是HTML新手最常遇到的问题，别急着怀疑CSS写法，按顺序排查：选择器写对没有，CSS文件有没有正确链接，样式顺序和优先级有没有被覆盖，有没有语法错误比如少了分号或花括号。我自己的习惯是打开开发者工具，选中目标元素，看右侧Styles面板。如果样式被划掉，说明优先级不够或后面有覆盖；如果面板里根本没有这条规则，那就是选择器没匹配上，或者CSS文件没加载。
还有一个冷门问题：多个HTML页面共用一个CSS时，可能因为某个页面里少写了class，导致整块样式不生效。这时看的是HTML结构，而不是CSS代码。另外，CSS里属性名拼写错误也很常见，比如background-color写成backgroundcolor。这类错误在开发者工具里不会报错，只是静默失效，需要一个个检查。我发现最快的方法是打开控制台，切换到Network面板，看CSS文件状态是不是200，如果404了就说明路径有问题。
如果你发现某个样式只在本地有效，部署到服务器后失效，先怀疑是不是文件没上传完整或者文件名大小写不一致。Linux服务器对大小写敏感，Style.css和style.css是两个文件。我碰到过一次线上CSS加载不出来的情况，就是本地Windows里文件名大小写不敏感，上传到Linux后链接写错了大小写。
5.2 表单标签的使用误区
表单相关标签非常有学问，搜“html——表单类的标签”的朋友应该都感受过。我第一次用form时，一直以为input要有name这个属性。后来发现，input不带name时，数据根本不会提交到服务端。这里有个细节：表单控件如果想被成功提交，必须有name属性，value是要发送的值。如果只有一个input，不写name，提交的数据就是空，后端很难判断字段叫什么。
几个容易出错的表单元素：
- input的类型：text、password、email、number、date等，不同浏览器默认样式可能不同；
- textarea没有value属性，它的默认内容写在标签之间；
- select要和option配套，select里的name放在select上，不是放在option上；
- label的for要和input的id对应，点击label能聚焦输入框，对用户体验提升很大。
还有一个提交按钮的坑：form里如果只有一个input type="text"且没有submit按钮时，按回车可能会意外提交表单。想阻止，可以在form上监听submit并调用preventDefault：
document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // 这里可以做前端校验 });表单校验尽量在前端做一层快速反馈，后端还是要做一遍，别只依赖前端。使用前端校验时，也可以用HTML5自带的required、pattern属性，但它们只是辅助，不能当安全边界。比如在email输入框上写type="email" required，浏览器会拦截格式不对的值，但如果用户改了DOM或直接发请求，后端没有校验依然会被脏数据打进来。还建议select设置一个默认placeholder选项，比如“请选择”，value为空，用于校验时判断用户有没有真的选。
5.3 换行与空白符的坑，以及“一键返回顶部”的兼容问题
前面提过HTML连续空白符会被合并，实际开发里我遇到过更隐蔽的问题：CSS的white-space属性会影响空格，比如white-space: pre可以保留空格，但如果忘记重置，复制过来的文本可能多了很多缩进。另一个常见坑是inline-block元素之间的空格，这种空格会占4~6px，导致两个div之间有缝隙。
解决办法是把父容器的font-size设为0，再在子元素上恢复font-size；或者用flex布局，基本就不会有这个缝隙了。flex现在兼容性已经很好，布局优先用flex比inline-block省心很多。一键返回顶部在移动端有兼容问题，尤其老浏览器不支持behavior:'smooth'时，可以这样写一层降级：
if ('scrollBehavior' in document.documentElement.style) { window.scrollTo({ top: 0, behavior: 'smooth' }); } else { window.scrollTo(0, 0); }这个判断很简单，能避免在老系统里直接闪跳或无效。页面跳转还有一种用自定义定时器做平滑滚动的老办法，但现代浏览器已经原生支持，没必要再自己写。页面锚点过多时，也要记得给目标元素加scroll-margin-top，不然固定导航会挡住标题。
5.4 其他笔记：爱心中文、放假倒计时的细节
网上很多“爱心代码大全html加字”和“放假倒计时html”的案例，想改造时最大的难点是文字和动画叠加。我一般把文字放到一个半透明的容器里，放在动画canvas上层，这样既不影响粒子效果，文字又能一直显示。注意z-index的层级要设对，canvas默认是auto，容器里设个position: relative和z-index: 10就行。
放假倒计时的数字显示经常因为“天数超过两位”而撑破布局。我的做法是把数字宽度固定，并用 monospace 字体或者font-variant-numeric: tabular-nums字体特性，保证秒数变化时页面不会抖动。这个小细节很多人忽略，做完后的视觉效果会差很多。还有一个体验优化：倒计时页面可以每秒执行一次DOM更新，但没必要把整个页面都重绘，只更新四个计时数字的textContent就好。我见过有人用innerHTML整体刷新，结果屏幕闪烁，改成textContent后明显清爽。
表单再补一个小经验：select下拉菜单的默认样式在不同浏览器里差别很大，如果你追求一致，必须自定义箭头图标和padding。最简单的是用CSSappearance: none去掉原生样式，再放一个背景图片当箭头。做响应式页面时，把select的宽度设成100%，再配合最大宽度控制，能在手机端更好点按。
最后再分享一个小技巧
写HTML笔记时不必追求系统全面，把每次调试的报错、哪个选择器覆盖了、哪个标签没有闭合这些问题记录成“症状-原因-解决”三条，比任何时候印象都深刻。我这篇笔记里很多内容就是自己踩坑后补的。比如按钮返回顶部的兼容判断、select的name放错位置、表格转换会丢失合并单元格结构，这些不看实际操作根本想不到。希望你在做页面时，也能少走这些弯路，把HTML真正变成顺手工具。下次再遇到“样式不生效”或“表单提交没反应”，别急着查大段文档，先看看自己的DOM结构和脚本位置，往往答案就在那几行被你忽略的代码里。