JWE实战：从JWT裸奔到端到端加密，API安全令牌升级指南
2026/9/24 19:49:40
HTML这个关键词隔三差五会在热搜里冒出来，尤其带着“HTML 1”这种看起来像教程编号的标签。我这些年跟网页开发打交道，发现很多人一上来就急着背标签，背完就忘，真正卡住的反而是那些最基础的结构细节，比如为什么每个网页开头都要放那串<!doctype html>，lang="zh-cn"到底有没有用，meta charset="utf-8"是不是必须写的。这篇就当系列第一篇，把网页骨架讲透，同时把热搜里那些高频需求——表单、换行、选择框、网页制作、CSS和JS基础语法、转MD、打包多个HTML、一键返回顶部——全部用实战视角捋一遍。适合零基础想入门的朋友，也适合那些平时要做些简单页面的产品、运营和测试同学。
1. 先搞懂HTML到底是什么，以及热搜里那串“标准开头”为什么长这样
1.1 HTML不是编程语言，它是网页的骨架
很多人第一次打开HTML文件，看到一屏幕尖括号就发怵。其实你完全可以把它理解成一份“文档结构说明书”。HTML的全称是HyperText Markup Language，超文本标记语言，它不包含复杂的逻辑判断，也不负责数据计算，它的任务就是用一系列标签告诉浏览器：这里是一个标题，那里是一段文字，这个地方放一张图片，下方是一个输入框。浏览器拿到这份说明书，再把对应的内容渲染成你看到的网页。
一个合格的HTML文件，结构上可以拆成三块：文档类型声明、头部信息、主体内容。这也是为什么几乎所有教程里，代码永远长这样：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> </head> <body> <!-- 页面内容 --> </body> </html>你可以把<html>当成整个页面的根容器，<head>是给浏览器和搜索引擎看的“配置区”，<body>才是用户真正看到的“展示区”。只要理解这三层，后面学什么标签都不会乱。
1.2 那个让人头疼的DOCTYPE和lang="zh-cn"
热搜里反复出现<!doctype html>和<html lang="zh-cn">，不是没有原因的。先说DOCTYPE。它是Document Type的缩写，作用是告诉浏览器“请按标准模式解析这份文档”。在很久以前，浏览器有两种渲染模式：怪异模式和标准模式，如果漏掉这行声明，页面在不同浏览器里可能出现完全不同的排版效果，尤其体现在盒模型和元素对齐上。现在HTML5已经标准化，写<!doctype html>是最短最稳的做法，它不区分大小写，但习惯上小写比较多。
lang="zh-cn"很多新手容易忽略，它声明页面语言是简体中文。这个东西看起来不起眼，实际会影响两件事：一是浏览器翻译插件判断是否自动翻译，二是屏幕阅读器按哪种语言规则发音。如果你的站点是中文内容，建议老老实实写上lang="zh-cn"，如果是繁体页面就写lang="zh-hant"，英文页面写lang="en"。热搜里出现的zh-cn和zh-hk就是不同中文地区的语言标记。
<meta charset="utf-8">同样关键。字符编码决定浏览器怎么解读文件里的字节。UTF-8是国际通用编码，能同时覆盖中文、英文、日文、emoji等各种字符。如果不写，浏览器可能按系统默认编码解析，轻则中文乱码，重则整页变成一堆看不懂的符号。我见过不少人折腾半天，最后发现就是少了这一行。所以新写页面时，请把这三件套当成习惯动作：DOCTYPE、lang、charset，一个都不能少。
2. 网页制作必会的核心标签与语法细节
2.1 文本、标题、段落与换行的正确姿势
网页内容最基本的单位是文字，HTML里用来组织文字的核心标签就那么几个：<h1>到<h6>是六级标题，<p>是段落，<br>是换行，<strong>是加粗强调，<em>是斜体强调，还有<hr>是水平分割线。这些标签本身很好记，难的是什么时候用哪个。
拿换行举例，我看到太多人用一堆<br>来制造间距。这不是不行，但很丑。<br>本意是“在段落内部强制换行”，比如写一首诗、一段地址、一行代码展示，这些场景用它是合理的。如果是想让两个块之间拉开距离，正确做法是用CSS的margin或padding，而不是疯狂敲回车。记住一个原则：HTML负责结构和语义，CSS负责视觉表现。能交给CSS的，就不要用HTML硬撑。
标题标签的使用也有讲究。<h1>一个页面最好只出现一次，通常是网站Logo区域或文章大标题，搜索引擎主要靠它判断页面主题。<h2>到<h6>按层级递进，就像写论文的章节编号。很多人为了字体大小直接选<h3>或<h4>，但字号完全可以用CSS控制，标签选错会导致文章结构混乱，对SEO也有负面影响。
2.2 链接、图片与路径：页面之间怎么串起来
网页之所以叫“超文本”，靠的就是链接。<a>标签的最基本写法是<a href="https://example.com">链接文字</a>，href是目标地址，中间的文字是给用户点击的。它还有其他几个常用属性：target="_blank"表示在新标签页打开，title表示鼠标悬停时的提示文字。如果是页内锚点跳转，可以让href指向某个元素的id，比如<a href="#section2">跳转到第二节</a>，配合对应元素的id="section2"就能实现。
图片标签<img>是自闭合标签，写法是<img src="图片地址" alt="图片说明">。src是图片路径，alt是图片加载失败或屏幕阅读器读取时的替代文本。很多人不写alt，这会让无障碍体验很差，也会让搜索引擎无法识别图片内容。如果你想让图片在点击后放大或跳转，可以把它包在<a>里面。
路径是新手重灾区。相对路径./images/photo.jpg表示当前目录下的images文件夹，../表示上一级目录；绝对路径/images/photo.jpg或https://...表示从站点根目录或完整URL开始。我建议本地练习时统一用相对路径，这样整个文件夹拷到别的电脑或服务器上，路径依然有效。如果用了C:\Users\...这种本地绝对路径，换台机器就废了，还会暴露不必要的本机信息。
2.3 表单类标签：输入框、选择框、按钮一次讲清
热搜里“html选择框”这个词经常出现，说明很多人卡在表单上。表单是用户跟网页交互的主要入口，常见的<form>、<input>、<textarea>、<select>、<button>都属于表单标签。一个最基础的表单结构：
<form action="/submit" method="post"> <label for="username">用户名</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <label for="city">城市</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select> <label for="intro">个人简介</label> <textarea id="intro" name="intro" rows="4"></textarea> <button type="submit">提交</button> </form>这里有几个容易踩坑的点。<label>的for属性要跟对应控件的id相同，这样点击文字时就能聚焦到输入框，对鼠标操作和屏幕阅读器都友好。name属性是提交数据时的字段名，后台靠它识别数据，漏了name，前端再好看也提交不上有效数据。<input>的type有很多种，常见的有text、password、email、number、radio、checkbox、file，类型选对了，浏览器会自带一些基础校验，比如email会检测格式，number会在移动端弹出数字键盘。
<select>里的<option>如果有selected属性，表示默认选中项。<textarea>不是自闭合标签，必须要写结束标签，而且rows和cols控制初始行列数，实际宽高一般还是用CSS调整。<button>的type属性一定要留意，默认值是submit，如果你只是想要一个普通按钮，记得写type="button"，否则放在表单里一点就会触发提交，页面瞬间刷新，排查半天都找不到原因。
2.4 容器与语义化标签：别再一锅端全是div
很多初学者写页面喜欢一个<div>走天下，所有内容都往div里塞。这样不是不能运行，但后期维护和SEO都不理想。HTML5提供了一批语义化标签，让代码一看就懂：<header>是页头，<nav>是导航栏，<main>是主体内容，<section>是内容分块，<article>是独立文章，<aside>是侧边栏，<footer>是页脚。这些标签本质上都类似div，但比div多了一层“含义”。
语义化有什么好处？第一，团队协作时，别人扫一眼结构就知道哪里是导航、哪里是正文；第二，搜索引擎爬虫能更准确地识别页面重点；第三，对屏幕阅读器友好，视障用户可以借助标签跳转导航。所以我的习惯是：先用语义化标签搭骨架，遇到确实没有对应语义的纯容器再上div或span。这不是强制规范，但长期来看，收益远大于成本。
3. 从HTML单页到完整网页：CSS与JS的协同工作
3.1 CSS怎么挂上去：行内、内嵌、外链的选择
HTML只解决“页面上有什么”，不解决“长什么样”。要让页面变好看，需要CSS（Cascading Style Sheets，层叠样式表）。CSS有三种引入方式。
第一种是行内样式，直接在标签上写style="color:red;"，优点是写起来最快，缺点是无法复用，改一个颜色可能要改几十处，适合临时调试，不适合正式项目。第二种是内嵌样式，在<head>里写<style>标签，适合单页小应用，比如一个活动落地页、一个特效页面。第三种是外链样式，把CSS单独存成一个.css文件，在HTML里用<link rel="stylesheet" href="style.css">引入，这是项目开发中的主流做法，文件分离、缓存友好、团队协作方便。
CSS的基本语法看起来像“属性名: 值;”，比如：
body { font-family: "Microsoft YaHei", sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } .article-title { font-size: 24px; color: #333; text-align: center; }类选择器以.开头，ID选择器以#开头，标签选择器直接写标签名。优先级方面，一般规则是内联样式 > ID选择器 > 类选择器 > 标签选择器，同时!important可以强行提升优先级，但滥用会把代码搞乱，不推荐新手使用。
3.2 JS基础语法：在HTML里跑起来
JS（JavaScript）负责的是“交互”。我们常说的“HTML+CSS+JS基础语法”基本上就是网页三件套：HTML是骨架，CSS是外表，JS是行为。
往页面里塞JS最简单的方式，是在<body>结束前加<script>标签：
<script> function changeText() { document.getElementById('demo').innerText = '文字被改变了'; } </script> <p id="demo">原始文字</p> <button onclick="changeText()">点击我</button>这段代码里，getElementById是DOM操作的基本入口，innerText可以替换元素里的文本，onclick是按钮的点击事件。新手学JS不需要一开始就啃完整本语法书，先把“选中元素、监听事件、修改内容”这条链路跑通，后面再学变量、函数、数组、对象，会轻松很多。
热搜里提到的“html一键返回顶部算法”，其实就是JS最典型的应用之一。实现思路很简单：监听按钮点击，用window.scrollTo把滚动条位置调回顶部，想要平滑滚动，可以加上behavior: 'smooth'。如果还想显示“返回顶部”按钮的时机，可以监听页面的scroll事件，滚动超过一定距离再显示按钮。
<button id="backTop" style="display:none; position:fixed; bottom:30px; right:30px;">返回顶部</button> <script> const btn = document.getElementById('backTop'); window.addEventListener('scroll', function () { btn.style.display = window.scrollY > 200 ? 'block' : 'none'; }); btn.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script>这段代码里用到了三元表达式和箭头函数，如果你还没学过，可以先照抄跑起来，再慢慢理解。实践是最好的入门方式。
3.3 一键返回顶部的常见实现细节
“一键返回顶部”听起来简单，但热搜词还带着“算法”两个字，说明优化空间不小。上面给的版本已经能满足大多数场景，但有几个细节可以再打磨。
第一，scrollY有兼容性问题，老版本浏览器可能需要document.documentElement.scrollTop或者document.body.scrollTop，写的时候可以做一个兼容判断。第二，behavior: 'smooth'虽然方便，但在某些老旧浏览器里不支持，如果你需要兼容IE，就得自己写定时器动画，或者引入成熟的平滑滚动库。第三，按钮的层级问题，position: fixed配合较大的z-index，避免被页面其他元素盖住。
还有一点很多教程没提：返回顶部按钮要在移动端上做得大一点，别让它挡住阅读内容。常用做法是让按钮固定在下拉角，半径40像素左右，平时半透明，鼠标悬停或手指触碰时恢复不透明。这些小细节，往往决定了功能好不好用。
4. 实操过程：从零手写一个“网页小项目”并解决那些热门需求
4.1 选择一个真实场景：做一个旅游路书页面
理论讲再多，不如动手做一遍。结合热搜里的“旅游路书html”，我建议新手做一个旅行路书单页。这个项目不大不小，正好能覆盖前面讲过的知识：结构化标题、图片、视频、表格、列表、表单，还能练习CSS排版和JS交互。
页面结构可以这样安排：<header>放站点名称和导航，<main>分几个<section>，分别写路线概览、每日行程、预算表格、留言表单，<footer>放版权信息。每个区块用<h2>作为标题，行程列表用<ul>，预算表格用<table>，截图和景点照片用<figure>包起来。
在写预算表格时，<table>相关的标签需要串一下：<table>是表格容器，<thead>是表头，<tbody>是表体，<tr>是行，<th>是表头单元格，<td>是数据单元格。想让表格好看，CSS里给th加背景色，给td加边框和间距，网上随便抄一段漂亮的表格样式都能用。这个项目做完，你的HTML基础基本就过关了。
4.2 加点氛围：爱心代码、中秋节代码这类特效如何实现
热搜里的“爱心代码html”和“中秋节代码html”是很多人入门的兴趣点。这类特效页面通常由三部分组成：一个占满全屏的画布、一段定时更新画面的JS逻辑、一些微交互的CSS动画。
如果你想快速做一个爱心粒子效果，不需要从零研究物理引擎，直接搜索“canvas爱心粒子”就能找到很多开源代码。关键是要能读懂核心逻辑，而不是复制完就完。比如用Canvas画爱心的思路，一般是先计算爱心曲线方程：
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); }t的范围从0到2π，遍历这个区间就能得到一串爱心轮廓上的坐标点，再配合requestAnimationFrame做动画循环，就能让爱心飘动或变色。中秋节页面也一样，月亮圆缺、星星闪烁、文字祝福，本质都是CSS动画加时间控制。
我个人的建议是，特效可以玩，但别本末倒置。项目里塞满动画会严重影响加载速度和阅读体验。如果是个人练习，随便折腾；如果是正式业务页面，特效点到为止，比如只在背景或标题区域小范围使用。
4.3 打包多个HTML：纯前端站点的文件组织
当你的页面不止一个，而是变成“首页、关于页、列表页、详情页”等多个HTML文件时，就要考虑打包组织了。这里的“打包”不一定是压缩混淆，最简单的是把整个站点放在一个目录里，保持相对路径。比如：
mysite/ index.html about.html css/ style.css js/ main.js images/ logo.png页面之间的跳转用相对链接，index.html里写<a href="about.html">关于我们</a>，这样整个文件夹拖到服务器或双击本地打开都能正常跑。
如果想把多个HTML合并成一个单文件，主要用于离线分发或方便分享。思路有两种：一是把页面公共部分抽成模块，渲染前用脚本拼接（适合Node.js构建场景）；二是直接把CSS和JS内联到HTML里，把图片转成Base64格式嵌进去，这样单文件体积会变大，但确实能做到“一个文件全带走”。不过要注意，Base64图片会让文件增加约33%的体积，大图慎用。
5. 工具链与格式转换：那些被人问烂的HTML相关工具问题
5.1 在Ubuntu上选什么HTML编辑器
热搜里有“ubuntu的html编辑器”，说明Linux环境下写网页的需求不小。如果你用的是Ubuntu，我首推VS Code，原因无他：免费、插件生态好、开箱即用。装好之后建议安装Live Server插件，写HTML时右键“Open with Live Server”，浏览器就能实时刷新，非常提高效率。
如果不方便装VS Code，轻量一点可以用Sublime Text或Vim，但新手不推荐一上来就磕Vim。还有一个选择是直接使用系统自带的GNOME Text Editor，虽然功能弱一些，但语法高亮也有，临时改个文件够用。
在Ubuntu上写好HTML后，注意文件权限和默认编码。如果文件之前用其他工具编辑过，编码不是UTF-8，浏览器打开容易乱码。可以用file 文件名命令查看编码，再用iconv转一下，基本就能解决。
5.2 用PyQt5显示HTML：把网页塞进桌面应用
热搜里还有“pyqt5显示html”，这是把Web技术嫁接到桌面端的常见需求。PyQt5提供了QWebEngineView组件，可以加载本地或远程HTML页面。一个最简示例：
import sys from PyQt5.QtWidgets import QApplication from PyQt5.QtWebEngineWidgets import QWebEngineView app = QApplication(sys.argv) view = QWebEngineView() view.setHtml('<h1>Hello HTML</h1><p>这是PyQt5里直接显示的HTML。</p>') view.show() sys.exit(app.exec_())这样做的好处是，你可以用HTML和CSS写界面，再用Python处理后端逻辑，兼顾Web前端的表现力和Python的方便性。不过要注意，QWebEngineView是Chromium内核，体积比较大，打包出来的应用也会偏大。如果只是显示简单富文本，可以用QTextEdit配合setHtml()，更轻量。
5.3 HTML转MD、WPS表格转HTML：格式转换的正确姿势
“html转为md”这个需求经常出现在写作场景。如果你只想转换一次文字稿，推荐使用在线工具或Pandoc命令行。Pandoc是文档格式转换神器，一条命令就能搞定：
pandoc input.html -o output.md命令会把HTML里的标题、段落、链接、列表自动转成Markdown格式，效果相当不错。但如果HTML结构很复杂，存在大量嵌套div和表格，转换结果可能需要手工清理。
“html格式转换wps表格”这个热搜，理解起来有点绕，实际上是把表格另存为HTML。在WPS或Excel里选中表格区域，另存为网页文件，就能得到表格对应的HTML。这里有个技巧：生成的HTML里会塞一堆样式和XML头，非常冗余，你只需要提取<table>标签到</table>之间的部分，粘贴到自己的页面里就行。如果想控制单元格样式，最好在另存之前先设置好边框、底色、列宽，生成后微调就够了。
“html邮件”与表格格式有关。邮件客户端的CSS支持非常保守，很多人用div排版发出去的邮件会错位。传统做法是用<table>做布局，样式写成内联，图片用绝对URL，宽度尽量控制在600像素左右。这个知识比较老，但至今仍然管用。
6. 常见问题与排查技巧实录
6.1 中文乱码、路径错误、样式不生效的排查顺序
新手遇到最多的问题，排行榜上永远有这三个：中文乱码、图片不显示、CSS样式没生效。我建议按下面的顺序排查。
中文乱码：先看HTML文件本身保存时是不是UTF-8编码，再看<head>里有没有<meta charset="utf-8">，两个条件缺一不可。如果文件是GBK编码，光改meta也没用，需要用编辑器另存为UTF-8。
图片不显示：依次检查路径大小写、文件是否存在、src有没有写错、图片格式浏览器是否支持。路径里的中文和空格最好避免，非用不可的话，空格要编码成%20或推荐直接改名。
CSS样式没生效：先按F12打开浏览器开发者工具，看Elements面板里有没有对应的CSS规则；如果没有，可能是外链CSS路径错误或服务器缓存；如果有但被划掉了，说明优先级不够，或被其他规则覆盖。调样式时养成“先看控制台、再看元素”的习惯，效率会高很多。
6.2 进阶避坑：清洗HTML文档中无意义数据、HTML语法与网安结合
“清洗html文档中无意义数据”这个热搜其实来自一些数据分析课程，意思是把网页源码里的标签、脚本、样式全部剔除，只保留纯文本。最稳妥的做法是用Python的BeautifulSoup或lxml，写正则去抓文本非常容易出错，因为HTML嵌套和边界情况太多了。
from bs4 import BeautifulSoup html = '<html><head><title>标题</title></head><body><p>正文内容</p></body></html>' soup = BeautifulSoup(html, 'html.parser') print(soup.get_text())get_text()默认会把所有可见文本拼接起来，你可以再用空格或换行分隔。注意处理<script>和<style>里的内容，那些不是用户可见文本，通常在清洗前先用soup.extract()去掉。
“html语法与网安结合”是一个必须提的内容。HTML本身没有安全性问题，但把用户提供的内容直接插进页面时，就可能产生XSS（跨站脚本攻击）风险。核心原则很简单：永远不要信任外部输入。如果要在页面中展示用户提交的昵称、评论、参数，应使用textContent或innerText，而不是innerHTML；如果确实要渲染富文本，必须做严格的过滤和转义。比如：
// 不安全，用户输入<script>alert('xss')</script>时会执行 element.innerHTML = userInput; // 安全，只当作纯文本显示 element.textContent = userInput;另外，<a>标签的href也可能被滥用，比如javascript:协议，所以如果用户能提交链接，要校验协议白名单。把这些基础习惯养成，比事后补救省太多事。
6.3 问题速查表：把这些高频坑记下来
| 现象 | 可能原因 | 解决方式 |
|---|---|---|
| 中文乱码 | 文件编码不是UTF-8，或缺少charset声明 | 另存为UTF-8编码，并在head里加<meta charset="utf-8"> |
| 点击提交按钮页面刷新 | button缺省type是submit | 改成<button type="button"> |
| 图片裂开 | src路径错误或文件名大小写不对 | 检查路径，统一使用相对路径 |
| 返回顶部按钮点击无效 | 滚动容器不是window，或scrollY兼容问题 | 用document.documentElement.scrollTop兼容旧浏览器 |
| CSS修改没反应 | 缓存或选择器优先级不够 | 打开开发者工具确认规则状态，必要时加类名提高优先级 |
| 表单提交后数据收不到 | 控件缺少name属性 | 给input/select/textarea补上name |
| 转MD后列表错乱 | 原HTML结构嵌套太深 | 先用BeautifulSoup清洗再转换 |
| 邮件在客户端里错位 | 用了div弹性布局 | 改用table布局和内联样式 |
这张表不是标准答案，但覆盖了我日常被问的高频问题。遇到问题时别急着乱改，先定位再动手。
做HTML这行越久越觉得，它看起来简单，但细节里全是学问。我自己的体会是，别指望看一遍教程就能记住所有标签，最好的方式是找一个小项目，比如旅游路书、个人主页、留言板，写完一个再写一个，遇到问题查资料解决，比死记硬背高效得多。等你写几个页面后会发现，那些热搜里的“html标签”“html选择框”“一键返回顶部”，其实都是同一个知识体系的不同侧面，真正理解了结构，变化出什么花样都不会慌。