博客园主题美化 基础知识

如果你想开发一款属于自己的博客园主题, 学习一些前端基础的知识是必不可少的, 包括三件套 HTML, JavaScript, CSS 等. 收录在系列文章 博客园主题美化开发系列.

HTML

HTML 是所有网页的基础。 如果没有 HTML，您将无法组织文本或将图像或视频添加到您的网页。 HTML 是创建引人入胜的网页所需了解的一切的开始！

布局

<header> – 定义文档或节的页眉
<nav> – 定义一组导航链接
<section> – 定义文档中的节
<article> – 定义一个独立的、自包含的内容
<aside> – 定义内容以外的内容（如侧边栏）
<footer> – 定义文档或节的页脚

属性

id 属性是用于指定文档的唯一标识符。
class 属性是用于指定文档的一系列标识符。

CSS 和 JavaScript 可使用 id 属性和 class 属性来选取元素或设置特定元素的样式.

到这里主题开发需要的知识就完成了.

更多 HTML 基础, 建议可以移步w3schools

举个例子: 找到博客园标题元素

<a id="Header1_HeaderTitle" class="headermaintitle HeaderMainTitle" href="https://www.cnblogs.com/mossxzzom/">mossxzzom</a>

JavaScript

JavaScript 是所有 Web 开发人员必须学习的 3 种语言之一。在 HTML 中，JavaScript 代码插入到 <script> 和 </script> 标记之间。

语句

语句是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。

const a = 1 + 1

这条语句先用 const 命令，声明了变量 a，然后将 1 + 1 的运算结果赋值给变量 a。

1 + 1 叫做表达式，指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值；后者则是为了得到返回值，一定会返回一个值。凡是 JavaScript 语言中预期为值的地方，都可以使用表达式。

选择器

JavaScript最常用于获取或修改HTML元素的内容或值以及应用某些效果。选择器可以通过 # 指定 id 元素, 通过 . 指定 class 元素.

const dom = document.querySelector('#Header1_HeaderTitle') // 获取页面的Element

到这里主题开发需要的知识就完成了.

更多 HTML 基础, 建议可以移步w3schools

举个例子: 修改博客园标题元素

之前已经找到博客园标题元素, 现在要修改这个元素.

<script>
const dom = document.querySelector('#Header1_HeaderTitle') // 获取页面的Element
dom.innerHTML = 'Hello World!' // 改变Element的内容
</script>

在博客园页脚 HTML 中写入下面代码, 保存刷新.

就可以改变用户的标题了.

CSS

CSS 是我们用来设置 HTML 文档样式的语言。CSS 描述了应如何显示 HTML 元素。

选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。选择器可以通过 # 指定 id 元素, 通过 . 指定 class 元素.

常见属性

到这里主题开发需要的知识就完成了.

更多 HTML 基础, 建议可以移步w3schools

举个例子: 修改博客园标题元素背景

#Header1_HeaderTitle{
    background: red;
}