css入门指导

本页面旨在于帮助写手初步了解维基点的前端技术，以便于写手在进行文章创作时更好地布置版式、美化页面。由于前端技术本身较为硬核，本页面仅对实用性较高的css语法作运用层面的讲解，同时涉及到部分html内容。本章节会对前端及css和html的基础知识进行简要介绍，粗略讲解JS的基础知识。教程目前处于初版阶段，存在部分问题，有疑惑或建议请联系作者进行更改。

声明：本教程仅对前端技术进行入门级别的介绍，为了便于读者理解，本教程存在部分不严谨、不准确的用语，因此本教程最终教学效果仅在于让读者基本能看得懂代码，想要具体、透彻、全面地学习前端开发技术请移步别处。

前端基础

前端是指创建和设计用户可以直接交互的网页或应用界面的部分。‌它运行在PC端、移动端等浏览器上，直接面向用户，负责展示内容和提供交互功能。

HTML、CSS和JavaScript(JS)是构建网页的基础代码类别，其中HTML(HyperText Markup Language)是用于创建网页的标记语言，通过不同的标签来定义网页的结构和内容，可以理解为是构造网站具象内容的重要语言(网站上大部分的内容包括文字、图片、媒体都要通过HTML代码来呈现)。CSS(Cascading Style Sheets)是用于设置网页布局和样式的语言，通过选择器来定位HTML元素，并应用各种样式规则，要通过HTML来呈现(网站排版的重要代码)。JavaScript是一种用于实现网页动态功能的编程语言，其通常不会大量运用于文章，在本页面中仅作简单介绍。

HTML和维基点代码

HTML的代码主要由“标签”组成，标签是由尖括号包围的关键词比如 <html>、<p>、<a>，通常标签是成对的(部分标签如划分水平线的<hr>仅有开放标签)，由开始/开放标签和结束/闭合标签，仅有尖括号加上英文字符构成的标签是开放标签如<head>、<title>，而闭合标签会在对应标签的括号中的英文字符前加上一个左斜杠符号如</head>、</title>(<br>是用于换行的空元素在使用时也需要关闭，其闭合方式是直接在开始标签中加斜杠，即直接输入<br />)。一组对应的开放和闭合标签内有着相同的英文字符，与其中所包含的内容构成一组元素，简而言之元素的格式就是：<标签>内容</标签>。另外HTML元素对大小写不敏感，例如<P>等同于<p>。需注意的是元素是由内及外有顺序性的。例如如下实例中标有同样颜色的字符就互为一对元素。

<div>
<div>
这是一个块级元素实例。为了美观我们会在部分标签后换行。
</div>
</div>

此外，很多元素的括号中除了表示元素种类的一串英文字符还有一串或者多串附加信息，这些附加信息被称为属性，用于定义元素的行为、样式、内容或其他特性。属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。比如说<a href="https://cr-universe.wikidot.com/css-guide">中 href="https://cr-universe.wikidot.com/css-guide" 就是属性，部分元素存在多个属性如<img src="image.jpg" alt="An example image">。

HTML从初期的网络诞生后，已经迭代了许多版本，HTML5是目前大部分主流浏览器(Web浏览器，如谷歌、Edge，是用于读取HTML文件，并将其作为网页显示的工具，不直接显示HTML标签，但HTML标签决定了页面的展示内容。)使用的版本，后文中的绝大部分涉及HTML的内容都基于该版本。如下是一个HTML5的代码实例。（#后面是对代码的注释）

<!DOCTYPE html> # 声明此代码为HTML5文档
<html> # HTML页面的根元素
<head> # 此部分包含脚本、CSS样式、meta 信息，此部分内容通常不可见
<meta charset="utf-8"> # 规定文档的字符编码，不必要
<title>这是页面的标题</title> # 文档的标题，页面的名称，是必要的
</head>
<body> # 正文内容，包含了可见的页面内容
<h1>这是一个标题</h1> # 定义一个大标题，是页面中的文字标题而不是文档的标题
<p>这是一个段落。</p> # 定义一个段落，相当于换行
</body>
</html>


（你无需完全理解以上代码的含义，仅需要知道HTML文件由head和body两大板块构成即可）

而维基点的代码，即作者在该站点创作文章时使用的代码相对于如上实例已进行了大幅简化，省略了声明和<html>等元素，将<head>元素中的内容隐藏，其中<title>元素更改为编辑器中的页面标题一栏，meta信息编辑安置于页面底部选项。写手真正编辑的其实是<body>元素中的内容，并且维基点对HTML中的常用元素代码也进行了简化，例如<h1>元素简化为一个"+"符号，而<p>直接省略，或者说在编辑器中换行就相当于增加了一组<p>元素，用于引用超链接的<a>元素被三对方括号代替，用于划分水平线的<hr>被用"----"代替，其他诸多元素例如<div><tab>维基点语法将元素的尖括号换成了方括号表示，即表示为[[div]][[tab]]。具体内容详见"顶栏-指导-语法指南"。

+ 一些常见的维基点简化代码列表

在HTML5中，编辑者可以<!— 内容 —>的形式做注释，而维基点代码中注释的格式为[!-- 内容 --]。注释内容即使在<body>元素中也不会显示在正文。但是查看网页源代码(Ctrl+U)时可以看见注释内容。

在维基点代码中你可以使用[[html]]代码引入纯HTML代码，由于维基点的人性化设计部分html代码在转为维基点代码会存在排版错误、无法正常识别的情况，此时你可以尝试使用HTML代码对内容进行修正。

CSS基础知识及其在维基点的使用

CSS也称层叠样式表，用于定义HTML元素的显示方式，其代码置于样式表中。CSS样式表通常在HTML中被使用<style>元素引入，CSS样式也可以成为独立文件，独立CSS文件可以在<style>元素中使用通过“ @import url(文件地址); ”引用。同一个HTML文件在使用不同CSS样式时可以显示出不同的效果，所以我们只需要编辑一个简单的CSS文档就可以改变整个页面的布局和外观。

CSS代码的语法由两个主要的部分构成即选择器以及一条或多条声明。声明又由属性和值构成。如下是一个CSS代码实例，其中选择器用红色标出，属性标为蓝色，值标为绿色。

p {
color:red;
text-align:center;
}

选择器表示的是这串代码的编辑对象，可以是一类HTML元素或者是定义的一个新块级元素等。属性则是对这一类元素的某一个特性进行的定义。(可以理解为将所有同类项的外观进行某个改动)

此外CSS代码对于换行没有要求，因此如上代码等价于如下代码，但通常情况下编辑者会在每个声明及选择器后选择换行便于后期编辑。但需注意的是CSS代码中声明结尾必须要带有分号，必须要用大括号括起来，否则会导致代码出现问题。

p {color:red;text-align:center;}

另外，CSS代码的注释方式是以 /* 开始, 以 */结束，例如/*这是个注释*/。

维基点对于CSS代码并没有做太多特殊修改，只是如果你要在正文中使用CSS代码，你应当在代码前使用[[module css]]，在代码结束时使用[[/module]]而非<style>元素。

HTML代码下的CSS引用段：

<style>
p {color:red;text-align:center;}
</style>

维基点代码下的CSS引用段： 
[[module css]]
p {color:red;text-align:center;}
[[/module]]

你对CSS文件的改动会影响到HTML文件内容的呈现，例如上文中CSS代码的选择器是p，效果是将文字显示为红色并置中，将该代码引用至页面后再使用<p>元素(在维基点代码中相当于直接换行)效果就是红色置中。

同一段维基点代码：

+++ 这是一串代码!

CSS代码1： 
[[module css]]
h3 {color:red;text-align:center;}
[[/module]]

效果1：


CSS代码2：

[[module css]]
h3 {color:green;text-align:right;}
[[/module]]

效果2：


无CSS效果：

这是一串代码!

JavaScript基础知识

JavaScript简称JS，是互联网上最流行的脚本语言，是一种轻量级的编程语言，相对于其他编程语言非常容易学。使用JS可以增加文章的可交互内容，增强文章的代入感。JS根据特定行为改变HTML文件的内容显示，有着较高的开拓性。尽管JS不是本页面的教学重点，本页面会向读者介绍JS的一定基础知识，便于写手在文章中增加一定的可交互性内容。

这是一串运用在维基点的含有JS代码的代码片段：

[[html]]
<script>
function darkness(a){
    alert("当你在凝视深渊的时候，深渊也在凝视着你。");
}
</script>
<span style="color: red;text-align:center;">
<p onclick="darkness(this)">深渊</p>
</span>
[[/html]]

这是它的输出效果，你可点击如下文字。

JS代码与CSS不同，同时可放置在HTML页面的<body>和<head>部分中。JS脚本位于 <script> 与 </script> 标签(即脚本标签)之间，也可通过外部文件引用至页面，引用方法是输入代码"<script src="文件地址"></script>"。通常JS和CSS文件都会被置于<head>部分(或维基点页面的顶部)以便于查询、更改，同时你可以在HTML文档中放入不限数量的JS脚本。

本教程不涵盖JS的具体语法知识。

教程性
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License