[链接登录后可见]
html部分
以下是我的教程，
有问题请回复
[链接登录后可见]
推荐编辑器:vscode html/css插件
先给一个模板
<!DOCTYPE html>
<!---这是注释--->
<html lang="en"><!---告诉浏览器，主要语言英文--->
<head>
<meta charset="utf-8"><!---设置页面编码为utf-8，防止默认编码不同的浏览器产生乱码--->
<title>页面名称</title>
<link rel="shortcut icon" href="图片链接"><!---这是页面名称旁边的logo--->
</head>
<body>
<!---可显示的东西在这里--->
</body>
</html>
html中的大部分标签有一个共性：成对出现，<标签名>内容</标签名>
<p>是最常见的标签之一，表示正常显示，默认字体大小为14或16像素，例如
...
<body>
<p>
HELLO WORLD<br />
<!---br /表示换行，注意空格--->
<!---不要看到有些人直接用br就学，可能导致不兼容！--->
你好世界
</p>
</body>
...
接下来是一个有用的东西，因为大家可能想做一些小游戏，但是懒得 不屑于写，没关系，可以用<iframe>
...
<!---假如你想白嫖我的代码--->
<iframe src="https://rratic.github.io/game/queen.html" height="960px" width="640px"></iframe>
...
<div>主要用于分组，例如
<div id="sb">
<p>Rratic</p>
</div>
一些其他常见的东西
<!---放图片--->
<img src="https://www.sb-menu.com/top.png"></img>
<!---HTML中不一定需要加/img，XHTML中一定要--->
<!---放链接--->
<a href="https://www.sb-menu.com"></a>
<!---无序列表--->
<ul>
<li>Rratic</li>
<li>raticR</li>
</ul>
<!---有序列表--->
<ol>
<li>I</li><!---前面自动生成1.--->
<li>II</li><!---前面自动生成2.--->
</ol>
<!---表格--->
<table>
<tr>
<th>类型</th><th>例子</th><!---表头--->
</tr>
<tr>
<td>sb</td><td>Rratic</td>
</tr>
<tr>
<td>not sb</td><td>kkksc03</td>
</tr>
</table>
<!---按钮--->
<button type="button" onclick="kill();">按它！</button>
<!------这个东西--------------------之后会讲--->
<!---一个可折叠的东西--->
<details>
<summary>折叠起来显示这个</summary>
<p>展开显示这个</p>
</details>
<!---解决兼容性问题：<noscript>中的代码会在浏览器不支持js/用户关闭了js功能时运行，例如--->
<noscript>
<p>您**打开js啊</p>
</noscript>
有以下常见替换
接下来讲标签的属性
语法
<标签名 属性1="bla" 属性2="bla" ... 属性n="bla">内容</标签名>
事件属性
见[链接登录后可见]
全局属性
- id 名称，可以便于自己明白只是什么和使用css
- class 类名 用于css
- accesskey 规定激活元素的快捷键
- style 样式，艺术效果的来源
style的那些事
<标签名 style="风格1:信息;风格2:信息;...风格n:信息;"></标签名>
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p style="position:fixed;top:0;left:0;background-color:red;font-size:20px">字</p>
</body>
</html>
position参数
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。
left,top,right,bottom,height,width参数：
- n px表示n像素
- n% 表示占包含它的东西大小的百分比
关于路径
假如当前页面是https://www.sb.com/sb/Rratic
那么，你在链接中填入1.html，意思是https://www.sb.com/sb/Rratic/1.html
同理，你在链接中填入www.sb.com，意思是https://www.sb.com/sb/Rratic/www.sb.com
如果你需要链接别的网站，必须加https://或http://（看情况）
如果你需要链接本地的东西，比如https://www.sb.com/notsb/kkksc03，你可以使用../../notsb/kkksc03
其中../是跳到上层文件夹
.
接下来讲一下调试：
点击右键，可以看到查看页面源代码和检查（或类似选项），
点击检查，就可以使用开发者工具
- 第一栏 元素可以查看每个部分对应的html在哪里，
- 第二个 控制台用于输出错误信息和你自己写的调试信息，
- 第三个 源代码可以便于查找这个页面用到的所有资源
js调试：console.log("彩蛋！");
css部分
css定义的是style属性的各个值
/*注释*/
p,li{/*同时定义p和li的样式*/
font-size:14px;
}
h2{
color:silver;
font-size:24px;
}
h3{
color:lightpink;
font-size:18px;
}
th{
background-color:darksalmon;
}
code{
background-color:lightgray;
color:orangered;
font-size:16px;
font-family: 'Courier New', Courier, monospace;
}
header{
position:fixed;
left:0;
top:0;
height:72px;
width:100%;
background-color:darkorange;
font-size:16px;
}
main{
position:absolute;
left:0;
top:72px;
width:100%;
color:white;
background-color:black;
}
.define{/*class选择器*/
color:lawngreen;
}
#source{/*id选择器*/
font-size:12px;
color:yellowgreen;
}
footer{
position:fixed;
left:0;
bottom:0;
width:100%;
background-color:black;
}
如何使用（可以自己试试）：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css链接">
</head>
<body>
<header>
<h1>ZFC集合论</h1>
</header>
<main>
<h2>导入</h2>
<div id="import">
<ul>
<li>空集<code>∅</code></li>
<li>属于<code>∈</code>逆：<code>∋</code></li>
<li>不属于<code>∉</code></li>
<li>真子集<code>⊂</code>逆：<code>⊃</code></li>
<li>非真子集<code>⊄</code></li>
<li>子集<code>⊆</code>逆：<code>⊇</code></li>
<li>等价<code>⇔</code></li>
<li>交集<code>∩</code></li>
<li>并集<code>∪</code></li>
<li>等于<code>=</code></li>
<li>不等于<code>≠</code></li>
</ul>
</div>
<div id="build">
<h3>定义</h3>
<ul class="define">
<li>#<code>∉</code> : <code>¬∈</code></li>
<li>#<code>A∋B</code> : <code>B∈A</code></li>
</ul>
</div>
</main>
<footer>
<a href="https://github.com/Rratic/Rratic.github.io">源代码</a>
</footer>
</body>
</html>
js(javascript)部分
- js的语法与C++相似
- js的变量与python相似
例如
var my = [
'就算梦再怎么耀眼，终究只是梦，迟早要醒。',
'理念是杀得死的，用更好的理念。',
'真理之光照耀无尽之夜。',
'是神又怎么样呢。这个国家最早的传说里并没有神的席位，取而代之的是被山挡住就决定挖山的农夫，被海淹死就去填海的小女孩，被太阳炙烤便搭箭指向太阳的猎人，或者从神那里偷来土壤治水的老人。“王侯将相，宁有种乎”，没错吧？我们的历史，从来不是由神兽或妖，而是由普通人来书写的。',
'纵使日薄西山，即便看不到未来，此时此刻的光辉，盼君勿忘。',
'一个有声音说道“我在这里”的太空要比一个寂静的太空好得多。一个声音很小，但是区别却是零和一，就好比一与无限。当你们的时代过去，请继续送出信息，好让下一个声音响起来对抗黑暗。',
'弱小和无知从来就不是一个文明毁灭的原因，傲慢才是。',
'如无必要，勿增实体。',
'给岁月以文明，而不是给文明以岁月。',
'我们的征途，依旧是星辰大海；所有的故事，不过是人生的隐喻。',
];
function randtext() {
document.getElementById('randtext').innerHTML = my[Math.floor(Math.random() * my.length)];
//把id标记为`randtext`的标签内部代码改成随机句子
}
- 直接放入html：用
<script>标签
- 链接文件：
<head>里加<script src="js链接"></script>
html5:canvas画板
首先，你需要在你的html文件中加上
<canvas id="画板名称"></canvas>
加上亿点参数，就是
<canvas id="drawboard" style="position:fixed;top:0;left:0;" width="512px" height="576px"
onmousemove="showcoord(event)" onmouseout="clearcoord()" onclick="clicked(event);">
<!---style中参数表示位置：固定在左上角，onmousemove等等表示鼠标操作时运行的函数--->
</canvas>
整个画板唯一的操作方式是javascript
这是初始化
var thiscanvas=document.getElementById("queen_game");
var draw=thiscanvas.getContext("2d");
画矩形
draw.fillRect(左上角x坐标,y坐标,长度,宽度);
解释一下这里的坐标系：
o---------------------------->x
|
|
|
|
v
y
draw.fillStyle="#FF0000";
//将（矩形等）的底色设置为红色
//当然还可以用rgb(255,0,0)
draw.moveTo(x,y);
//设置当前绘画默认点
draw.lineTo(x,y);
//从刚才那个点开始画一条线
//放图片
var img=new Image();
img.src="sb.png";
draw.drawImage(img,x,y);
/*
注意：
直接这样可能图片出不来，
图片需要预先加载
详见https://www.cnblogs.com/padding1015/p/9717845.html
*/
