- Web模板测试服务器
- java -m jdk.httpserver
访问 http://localhost:8000/Desktop/
- 模板综述
<h1>唯一标题名</h1>
<blockquote>pre标签内用空格实现左边距会导致字多,故首选blockquote标签</blockquote>
<dialog closedBy="any">框外点击关闭自身</dialog>
<div style="white-space: pre-wrap;">遇到\n会换行</div>
- 最常用模板
html+body 最佳实践范例
根级别区块:
<fieldset><legend>标题</legend>
<h2>子标题</h2>
<section>内容</section>
</fieldset>
根级别区块+列表:
<fieldset><legend>标题</legend>
<dl><h2>子标题</h2></dl>
<dt>内容</dt>
<dl><h2>子标题2</h2></dl>
<dt>内容2</dt>
<ul>
<li>内容</li>
<li>内容2</li>
</ul>
</fieldset>
根级别区块+列表+样式:
<fieldset><legend>标题</legend>
<style>
/* ul li 圆点换为其他字符: */
.phone-device::marker {
content: "📱 ";
color: blue; /* 可选 */
}
.pc-device::marker {
content: "💻 ";
color: red; /* 可选 */
}
</style>
<ul>
<li class="phone-device">内容</li>
<li class="pc-device">内容2</li>
</ul>
</fieldset>
其他:
pre, li { /* 解决右顶溢出问题 */
white-space: break-spaces;
overflow-wrap: break-word;
}
HTML内容最简模板(省略body标签不利于SEO!):
x
唯一h1标签用于Bingbot等SEO最佳实践
Skip to main content
HTML内容分区模板:
x
唯一h1标签用于Bingbot等SEO最佳实践
Skip to main content
| 列名 |
列2 |
列3 |
| a |
b |
c |
| 1.不许换行 |
2 |
3 |
HTML JS 动态载入页眉页脚(避免爬取内容无关的文字标签)
<script src="https://tsc.openle.com/.well-known/static/scripts/core-classic.js" ></script>
<script> // 会将 <script> 替换为实际 fetch 的标签。
let csh = document.currentScript;
document.addEventListener("DOMContentLoaded", (evt) => {
fetchBodyContent("/main/mask/body-contents/nav-header.xhtml", csh);
});
</script>
<script>
let csf = document.currentScript;
document.addEventListener("DOMContentLoaded", (evt) => {
let haveScroll = document.body.scrollHeight > window.innerHeight;
if (haveScroll) {
window.addEventListener("scrollend", () => {
setTimeout(() => { // 底部通常不被用户看到,故只在首次滚动时载入。
fetchBodyContent("/main/mask/body-contents/page-footer.xhtml", csf);
}, 1000);
}, {once: true});
} else {
fetchBodyContent("/main/mask/body-contents/page-footer.xhtml", csf);
}
});
</script>
CSS模板
@charset "UTF-8"; /* 大小写不敏感 */
h1::before {
content: "@charset可解决content汉字乱码问题;加引号可换用open-quote";
}
h2{
quotes:"user: \"" "\"" "'" "'"; /* 指定open-quote后,自定义(或转义)文本两边所添加的符号,后两个为嵌套内符号 */
}
h2::before{
content:open-quote; /* 显示文本两边引号 */
}