标签：JavaScript 博客园 元素 基础知识 HTML CSS 选择器 美化
如果你想开发一款属于自己的博客园主题, 学习一些前端基础的知识是必不可少的, 包括三件套 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 元素.
常见属性
| 属性 | 键 | 值 |
|---|---|---|
| 布局 | display,width,height | block,inline,flex,grid,px |
| 字体 | font-weight,font-size,font-family,color | px,px,'none',red |
| 背景 | background | red |
到这里主题开发需要的知识就完成了.
更多 HTML 基础, 建议可以移步w3schools
举个例子: 修改博客园标题元素背景
#Header1_HeaderTitle{
background: red;
}
标签：JavaScript,博客园,元素,基础知识,HTML,CSS,选择器,美化 来源： https://www.cnblogs.com/mossxzzom/p/16635596.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。