目前大多数用户使用的是较新的谷歌、火狐等浏览器，旧版 IE 用户已经非常少，所以最好使用 HTML5 和 CSS3 标准，以便支持一些新样式并提升渲染速度。首先需在代码第一行添加 HTML5 声明：
<!DOCTYPE html>
头部中，首先添加 charset（页面编码）元信息，避免乱码：
<meta charset="utf-8">
本博客进行了移动端适配，移动端界面结构和电脑端一致，只是进行了缩放，所以需要加 viewport（视口）元信息，这样可以避免移动端出现横向滚动条：
<meta name="viewport" content="initial-scale=1">
description（网站描述）元信息有利于搜索引擎了解网站内容，长度大约70字：
<meta name="description" content="一个旨在研究前端开发、记录日常感受、分享技术经验、讲解网络知识的博客，在这里走进编程与互联网的殿堂，探访一名中学生的内心世界，分享生活中的点滴快乐。">
某些不需要搜索引擎收录的页面（如404页面）可添加 robots（自动程序）元信息，拒绝爬虫索引和跟踪：
<meta name="robots" content="none">
本博客的 CSS 从外部引入，分全局 CSS（所有页面均用到的 CSS）和局部 CSS（针对特定页面使用的 CSS）两类：
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/index.css">
头部的末尾处使用 link 标签从外部加载网站图标。本站不兼容 IE 浏览器，所以 rel 属性值填 icon 即可：
<link rel="icon" href="/favicon.ico">
本博客使用单栏式布局，整体为居中对齐，页面从上到下分别为页头、导航栏、主体三部分，分别使用 HTML5 的 header、nav、main 标签，省去了分配 CSS 类的麻烦。
为电脑端设置最大界面宽度，并通过外边距居中显示：
body {
max-width: 900px;
margin: 0 auto;
}
将 body 标签下属的第一级元素左右外边距都设置为50像素，使移动端页面两侧留有一定空白，更美观：
header {
margin: 10px 50px;
}
main {
margin: 15px 50px;
}
首页的时间线是一个 article 标签，其中存在多组 time 标签（时间标记）和 div 标签（事件标记）：
<article> <time>2021年8月5日</time> <div>启用 HTML 和 CSS 源代码压缩，减小文件体积</div> </article>
结合元素选择器、子元素选择器和后代选择器设置时间线样式，使用 list-item 在时间标记左侧添加圆点：
article>div {
margin: 5px 0 10px;
}
article a {
color: #a08;
}
time {
display: list-item;
}
友情链接页中，每个网站使用一个 section 标签，其中包含网站名、链接三级标题和小字体网站介绍：
<section> <a href="https://www.puresys.net/" target="_blank" rel="noopener"><h3>Puresys</h3></a> <p>纯净系统 软件下载</p> </section>
友情链接页的主体部分为弹性盒子布局，应居中显示弹性盒子并允许换行：
article {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
文章内容页的发布时间与作者标记在整个页面中是唯一的，应使用 ID 选择器而非效率较低的类选择器：
<div id="intro">2021年1月28日 由 Citrino</div>
为此 ID 定义样式，使用相对大小值代替绝对大小值设置其字体大小：
#intro {
font-size: small;
}
自定义文章里 strong（粗体）标签的颜色，突出强调相应文本并使页面效果更加多彩：
strong {
color: #d10;
}
文章中的链接通过 a 标签实现，需添加 target 属性以在新页面打开，外部链接均应使用 noopener 以保证安全：
<a href="https://wpa.qq.com/msgrd?uin=2195794117" target="_blank" rel="noopener">
代码块通过 pre 标签实现，可以保留代码的制表符。需要设置制表符宽度、行高、强制换行等：
pre {
line-height: 150%;
white-space: pre-wrap;
tab-size: 4;
}