Web万维网(WWW)、浏览器HTTPS证书、网站程序开发、网页脚本编写、层叠样式表、WordPress、PWA
综合/新
HTML元素标签 、CSS样式表 、SEO 、HTTP & Nginx 、宽带路由器 fetch body: readableStream ，火狐则会将[object ReadableStream]当作字符串发送。
HTTP/3.0 - UDP端口443；Nginx已支持(v1.25.0起/proxy_pass则不支持)；Cronet网络库已支持，自动协商且优先使用HTTP/3.0。
ECH（Encrypted Client Hello） - 加密整个 Client Hello，以取代加密明文 SNI 的 ESNI。
JS脚本文件下载后调首个函数时才初始化（页面载入时避免CPU过载）：defer import noInitModule from './no-init.js'; button.onclick = async () => { await noInitModule.inited(); };
免费HTTPS/TLS证书：
Let’s Encrypt 计划2025年4月：向部分早期用户开放6天短期证书；2025年底：IP地址的短期证书支持全面开放。
Google Public CA 免费90天IP证书 - https://blog.taoshuge.eu.org/p/使用-acme.sh-申请-google-的免费-ssl-证书/
ZeroSSL 免费90天IP证书 - https://www.logdict.com/archives/tong-guo-zerosslgei-ipshen-qing-mian-fei-sslzheng-shu
编程中常用：
HTML标签取值永不为null：document.querySelector("#selectOrInput").value
HTML pre标签只转义小于号“<”为 < 即可，“>”不会识别为Tag。
取消input type="file"标签的文件选择：document.getElementById('file').value = null;
网站上线检查清单：
域名 A/AAAA/HTTPS 解析检测，IPv4和IPv6均应正常访问。
服务器ping延迟控制在200ms，国内则40ms；丢包率应低于3%。
引用的 JavaScript 脚本，部分 CDN 或域名被墙，应改为：单文件无引用的直接本地拷贝，有引用的则用墙内源。
Chrome浏览器手机模式和真机观察下，或长内容不换行看会不会破坏布局。
ICO图标尺寸定为 256x256 像素，浏览器支持favicon.ico图标重定向。
上传大小限制 - Nginx默认1MiB，需显式设置较大值，至少测试下低于1MiB和超出1MiB这两种情况。
检查 CORS 跨域情况，比如 GCS 的 bucket.toBuilder().setCors(ImmutableList.of(cors)).build().update();
前端API网关（Nginx等）是否配置了CORS跨域、WebSocket和SSE长连接超时。
必须转义HTML标签value="含双引号"等属性。
a链接添加rel="noreferrer"来禁止传递document.referrer，也可避免（target="_blank"）新开页控制原页面： window.opener.location.href ="恶意域名.com"
标签的文件后缀限制会被绕过，故应通过JS事件onchange或后端再次检查下：<input type="file" id="file" accept=".wav,.flac,.webm,.ogg,.mp3" onchange="checkAndPreview(this)" />
技术选型：
图片格式首选*.webp 未来用*.avif 老派则用*.png - Windows、Linux主流桌面系统，Safari、Chrome等主流浏览器均已支持WebP图像格式。
数据传输格式：首选较长但直观的HEX、次选Base64、Base64Url、JSON等；Uint8Array.prototype.toBase64 and Uint8Array.prototype.toHex？
国内静态资源镜像：
脚本 - https://tsc.openle.com/.well-known/static/redundant/by-name/scripts/qrcode-generator/qrcode.min.js
主要
HTTP协议 - 首选HTTP/2或HTTP/3，抛弃HTTP/1.x；Nginx反向代理不支持HTTP/2，故新技术场景可换用 HAProxy 或 Google Cloud Run+H2C(Jetty or Golang)。
HTTPS - https://example.com/ 等同 https://example.com:443/,故自定义端口时，https:// 前缀和 :8443 均要写明；SNI值只用于识别主机名，因此不包含服务端口。
解决 Github.com 域名 DNS 污染 SNI 阻断 - https://blog.csdn.net/2301_79499548/article/details/145702257
PowerShell查看HTML： curl http://localhost:8080/tmp/ | Select -ExpandProperty Content
application/xml取代了不识别xml声明encoding编码属性的text/xml；“text/plain; charset=utf-8”不跟charset则也是us-ascii；text/html则默认为UTF-8。
附件头指定文件名编码：
格式 - 单引号分隔编码名、[留空]语言名、URL编码后的文件名；filename*会覆盖filename参数。
Content-Disposition: attachment; filename="EURO rates.txt"; filename*=utf-8''%e2%82%ac%20rates.txt
主流浏览器均已支持rfc5987写法，故废弃不带*符号的filename属性： Content-Disposition: attachment; filename*=utf-8''%e2%82%ac%20rates.txt
判断浏览器： navigator.userAgent.toLowerCase().includes("chrome")
UA通常200个字符内(最长见过400多字符)，故限制在500字符：request.getHeader("User-Agent")
http协议网页报undefined，https则可用： if(crypto.randomUUID){ crypto.randomUUID(); }
anchor属性href值若为跨域或301、302跳转，均会忽略其download属性，且无调整的可能。
File继承自Blob对象，故可直接调.stream()转换为ReadableStream。
修改File对象文件名： var fd = new FormData(); fd.append("file1", file, file.name);
所有符号均不断开换行 - display: inline-block;
只英文不断开 - overflow-wrap: break-word;
避免重复提交：element.addEventListener('click', myFunction, {once: true});
等同回调执行后执行removeEventListener移除myFunction。
监听是否执行过DOMContentLoaded（默认多次添加多处执行）：
function dcl(evt) {
console.log(evt.currentTarget);
}
if (document.readyState === "loading") {
// 此时加载尚未完成
document.addEventListener("DOMContentLoaded", dcl);
} else {
// `DOMContentLoaded` 已经被触发
dcl();
}
安全拼接HTML：
var aTag = document.createElement("a");
aTag.href = document.location.href;
aTag.textContent = document.title;
console.log(aTag.outerHTML);
如果有编程环境可转义下：<input value="<%=com.google.common.html.HtmlEscapers.htmlEscaper().escape(含半角双引号字符串)%>" /> 转换后为 " 用JS获取则为实际文本。
模板
Fetch API:
fetch(url)获取数据模板示例
跨域携带Cookie(避免JSESSIONID次次变)： fetch(url, {method: 'POST', body: fd, credentials: "include"}).then(r => r.text());
同时响应端也应 - Access-Control-Allow-Credentials: true
允许https访问http混合内容(frame-src起效于iframe)
Content-Security-Policy: default-src https:; frame-src https: http:;
其他方式还有nginx的proxy_pass反向代理。
fetch添加select标签options：
fetch("https://abc.passed.app/main/apis/more/ga/auth/global/kv/forever/list-all-without-value").then(r => {
if (r.ok) {
r.json().then(data => {
console.log(data);
if (data.length > 0) {
document.querySelector("#keys").options.length = 0;
}
for (k in data)
{
var opt = document.createElement("OPTION");
opt.text = data[k].id;
opt.value = data[k].id;
document.querySelector("#keys").options.add(opt);
}
//console.log(document.querySelector("#keys").value);
});
}
});
建站资源
博客系统 - WordPress.org （未墙）| 免费博客 - WordPress.com （未墙/1G存储空间）
页面语言(即<html lang="zh-CN">)：设置->常规->站点语言->zh-tw - 繁体中文
注意 - 中国访问在WordPress.com开设的博客未被墙，但后台发文章页面则会被部分脚本卡住。
临时解决（直接失败避免卡住） - Chrome F12 -> ︙或 ⚙ 勾上 Network request blocking: 添加以下域名
www.google.com 用于 https://www.google.com/jsapi 等。
0.gravatar.com、www.gravatar.com 用于 头像。
Hosts:
192.0.78.22 public-api.wordpress.com
192.0.78.13 openle.wordpress.com
[可选]DNS:
1.2.4.8
114.114.114.114
WordPress.com免费版和个人版不支持REST API开发接口。
WordPress.com商务版可集成AdSense插件 - https://wordpress.com/zh-cn/plugins/google-site-kit
自建WordPress.org博客集成AdSense插件 - https://wordpress.org/plugins/google-site-kit/
或 集成WordPress.com官方广告插件 WordAds。
免费版网址默认包含标题，分享时容易乱码，故可在文章编辑里修改别名(slugs)为英文或拼音。
网页收录提交：
说明 - Google、Bing、Baidu均需要登录账号才能进入提交入口，且只有Baidu不需要验证网站就能提交。
注意 - WordPress.com 子域名博客无法通过搜索引擎的网站验证；亲测做了外链的情况下，大约40天左右会收录。
百度提交入口 - https://ziyuan.baidu.com/linksubmit/url
谷歌提交入口 - https://search.google.com/search-console?action=inspect 或 https://search.google.com/u/1/search-console?action=inspect
浏览器
User Agent:
规律 - 根据UA字符判断浏览器时，Firefox和Edg应直接短路返回，而Chrome和Safari则应多条件判定。
Windows Chrome - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Windows Edge - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0
Windows Firefox - Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0
macOS Chrome - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
macOS Safari - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.5.23
上传/下载
传输请求体前让服务端决定是否继续 - 若服务端条件充裕，或长连接场景，可关掉该机制来节省耗时。
HttpClient增加HTTP头“Expect: 100-continue”，等待Server端响应最多3秒，若未被拒绝则会自动发送请求体：
if ("100-continue".equalsIgnoreCase(request.getHeader("Expect"))) {
// 比如检查 Content-Length 头等预期情况。
response.setStatus(HttpServletResponse.SC_CONTINUE); response.flushBuffer(); return;
} else { System.out.println("request body..."); }
长连接
SSE：
非HTTP/2协议下，浏览器会限制为最多6个连接数，HTTP/2则为100且可调整，可通过SharedWorker优化连接数？
Open Liberty 连接时持续挂起，导致 onopen 不被触发，亲测 Quarkus 框架则正常。
WebSocket:
Ping Pong 机制 - 服务端给客户端发送Ping，然后客户端会自动回应Pong，表明自己仍然在线：webSocket.session.getAsyncRemote().sendPing(message);
PWA
普通网页，在Android Chrome浏览器不做任何配置，就能“添加到主屏幕”。
桌面版的 Firefox 和 Safari 不区分 PWA 和普通网页，不会标出“安装至桌面”图标。
应用清单：
浏览器识别后，会在地址栏右侧出现“安装至桌面”图标。
<link rel="manifest" href="manifest.json" />
安全
阻断：
如果自己能控制客户端和服务端，可以在两端防火墙上丢弃 rst 包，强行继续连接。
TLS/SSL:
Let’s Encrypt 证书目录：
首选 fullchain.pem = cert.pem + chain.pem
合并 cat privkey.pem fullchain.pem > haproxy.pem
