我们的网课

发表于 更新于 分类于 阅读次数：

这里是网课的视频合集。我会在这里慢慢更新我们的教程视频合集。

如果有人邀请我讲课，我还会继续在这里放上我视频。这样方便大家学习。

社团介绍和 Markdown 教程

你们有什么要反馈的随时写评论.

因为录视频的时候没弄好，导致屏幕只有左上角的内容，把markdown 预览刚好截没了。

没有关系，你们可以自己在 VSCode 里面试试看。

本来稿子里还有个路线介绍的，没有讲进去。我这里附上来

我们的技术路线并不是固定的，归根结底是靠大家分享。我们网站上面这么多前端的教程是因为我个人选择的是 web 前端开发技术，并且贡献了很多文章，而其他路线没有人写文章，就变成前端占大头了。

各位如果想要写文章，也可以随时投稿我们的网站。yjzxlub 的账号我已经传了一代了，不知道下一代有没有传下去。但是有人投稿可以只管给我发邮箱，我会尽快安排。

你们还可以主动报名讲课，只要准备讲稿和提前确定主题即可，这个具体细节可以给现任社长处理。

视频已过期

作业和评价

吾乃GCVillager，离开永嘉中学已足足五分之一坤年矣。今日且让老夫来评评你们交上来的东西。
先社创社未半而中道毕业，今技术不传，成员摆烂，此诚危急存亡之秋也。
因此，我们决定推行社团改革，初步打算几次活动后有一次任务，不会很难，每个人要上交并评级。都是简单的任务，不必担心。
另外，社长要讲的内容以后要找我们讨论，不要自己搞……
具体内容会在寒假出，到时候大家可以再提建议。

注意：编辑器可以用vscode，并在拓展里面下载Markdown All In One以及Live Preview的拓展插件
这是谁说的，预览md用右上角小按钮不就能预览了，干嘛下这么多插件，快来认罪

名字后面带+的是好的，带-是不好的。希望有则改之无则加勉。
其实好几篇我都觉得不太行，但是最后没有打-号。这些同学都没有完全理解markdown，把东西往标题里塞，而且内容也少。希望端正态度。
以下内容按照上交的IP排序，请自己找自己的名字（

为了节约版面折叠了一下

点击此处展开评价

夏理超 +

非常好数学教程，爱来自大连。感觉用markdown和latex挺熟练的，厉害。
不过建议代码开头的三个点后面加上语言，这样有些网站/编辑器会按照语法渲染代码。
这个typst我还真没了解过，不过……感觉是不是用的没md多？可能暂时不考虑吧，感谢建议（

叶瑞丰

有点少，不过还行。话说为什么想食汉堡（

高一十二班的某某

有点少，下次记得用真名谢谢

吴臻恩

有点少，还有爱好很……嗯

徐润达

有点少。还有要指出，不要全用标题，该用文本的时候没必要打6个#。看来还没有完全理解md的用途

丁一德

有点少,斜体是下划线或者一个星

李添睿 +

不错，擅长使用斜体和粗体（虽然正式用的时候没必要那么多），还有感谢建议

邵友均 -

交个exe上来肯定不行，什么叫不兼容（不能理解啥意思）。而且这程序我输4个1你就退出了，健壮性差。

李新瑜

还不错。我化学也不好，加油（

潘谢纯达 -

写这么几个字上来啥意思嘛真的是

王涵轩

有点少，还行

施钧耀 +

不错。之前会教生活中用得上的知识，但是不可能每次都教这个。之后应该也考虑这样吧。

朱辰硕

不错。不过真的有必要打这么多箭头吗

吴涵

有点少。还有一二三四级标题的含义是大标题、小标题、小小标题，不是第一个第二个第三个标题。

马柏昕

不错。

马柏腾

还行。但是一二三四级标题的含义是大标题、小标题、小小标题，不是第一个第二个第三个标题。

夏文杰

别把太多不是标题的文字写在标题里。

朱贤博

好偷懒啊（
还有后面那段应该不是复制的吧……？

黄潇康

太少。

孙文卓

少。下学期会加强管理（只要社长认真执行的话）

田所浩二 -

下次用自己真名，不要把文字塞标题里，不然我让先社把你服务器DDos了（划掉）先社尼泽：？

先社：下次用“田浩”吧，万一我信了呢？

蒋昊伦

有点少。

彭劭帅

标题井号后面记得打一个空格。

潘步干

少。不要把文本塞到标题里。

潘裕琨

有点少。

郑子谦

少

Web 开发入门 —— 开发基础 和 HTML

上回有人和我反馈，说放视频的时间太长，不方便大家安排时间。而且统一网课的安排，就我们的观察来说，效果也并不理想。考虑到这次的主题比较泛，所以我这次就不再安排统一的网课，而是给出指导，让大家自己阅读教程。内容不难，只是知识可能有些琐碎，相信各位可以做到的。

开发基础

有些同学的计算机基础可能不是特别好，这没有关系，如果你有什么不懂的名词，可以看看我们的 基础教程，我们准备了一份对新手的计算机基础说明。

我们推荐的开发环境是 VSCode。这是适合开发的一款文本编辑器。机房的电脑一般来说都预装好了。这款编辑器因为强大的功能丰富的插件生态深受程序员欢迎。我们写 HTML 可以装一个 Live server 插件，这是一个简单的测试服务器，可以方便调试网页。直接用浏览器打开 HTML 文件是不被推荐的做法，因为如果涉及一些外部 CSS 样式和 JS 脚本，这样很可能会导致功能异常。所以通过一个测试服务器完成。

请给每个项目一个单独的文件夹，然后用 VSCode 打开这个文件。因为 VSCode 假设一个项目占据一个独立的文件夹，如果只是单独打开一个文件，会导致部分功能无法使用（包括我们的 Live Server）。

HTML

我们推荐阅读已有的教程。一节课的时间可能不够，所以请社长这边根据大家实际的完成情况再安排下时间。因为我这边看不到大家的情况。

下面的教程任选一个进行入门就可以。我们的教程是 HTML CSS JS 各部分分开的传统方式，而 MDN 的则是各个元素齐头并进，再进行拓展。各位可以按照自己的风格去学，都是殊途同归的。

英语好的同学可以试试看 freecodecamp, 他们提供了一个动态教程，还是比较生动的。

作业

这次肯定是写不完什么项目了。各位就对着 GCVillager 的教程或者 MDN 的教程上面的实例边读边敲，然后把你们的这份草稿 HTML 的文件夹（可能包含多个草稿文件）打成 zip 包交上来就可以。注意，这个文件夹是你们的项目文件夹，下次可能还要用到。我好看看各位的进度，再做安排。

作业评价和接下来的安排

这次作业轮到老社长改了😂

有几句话想对社长说：应该打 zip 包的，不是所有人都有 rar. 然后，应该审查下大家交上来的文件，不要把 MC 整合包也打进来，害得我下载下半天。

我发现大家对 HTML 的理解还是不够。一方面是浏览器太宽容了，纯 HTML 随便怎么写都能显示出一个不错的效果。一方面还是各位没有理解 HTML 的树形结构，每个元素都有自己的级别，最后形成一个严谨的结构。这点参考 MDN 的描述。

在 VSCode 中，HTML 文件里面打出 ! 就能补全

有些掌握得好的同学，可以继续推进了。掌握的不是很好的同学，可以再去回顾下教程，重新纠正下错误。其实很多时候掌握这种新概念多花点时间是正常的，等到入门之后那理解起来就很简单了。

进度更难统一了，等这节课之后大家都学会了，就可以讨论安排下期末的活动。

点击此处展开评价

潘玉捆

首先，忘了 <html> 标签。其次，忘了 <body> 标签。这是 HTML 的规范，无论哪个教程都有强调，不应该忘记。在 VSCode 中，一个 HTML 文件在打了 ! 之后就应该会出现提示，自动补全整个结构。

然后，

标签不应该大写，同时最好不要嵌套。因为很多 HTML 的标签是具有语义的，最好结合常识使用，方便大家阅读，

是 paragraph 的意思，嵌套自然段是一件很奇怪的事情。如果有样式需要导致的嵌套需求，建议使用

和 这种无语义元素配合 CSS 使用。

原版：

点击此处展开 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<head>
    <title>ZHESHI YIGE BIAOTI</title>
</head>
<h1>WRITER：潘裕捆 grade10 class</h114>
<P>
    <P>建议加强司空震！<hr>司空震在这个赛季！<hr>竟然还被策划<strong>削弱！</strong> </P>
    <p>(打中文太累了我想打拼音)</p>
    <p>yi xia shi dui xue ruo SKZ de ti hui </p>
    <p>shou xian shi fan xia<hr> <strong>傲慢</strong>之罪的加罗</p>
    <p>qi ci shi fanxia<hr> <strong>嫉妒</strong>之罪的李信</p>
<p>weiwandaixu...(qi shi shi xia ke le )</p>
</P>

正确版本

点击此处展开 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZHESHI YIGE BIAOTI</title>
</head>
<body>
    <h1>WRITER：潘裕捆 grade10 class</h1>
    <p>建议加强司空震！<hr>司空震在这个赛季！<hr>竟然还被策划<strong>削弱！</strong> </p>
    <p>(打中文太累了我想打拼音)</p>
    <p>yi xia shi dui xue ruo SKZ de ti hui </p>
    <p>shou xian shi fan xia<hr> <strong>傲慢</strong>之罪的加罗</p>
    <p>qi ci shi fanxia<hr> <strong>嫉妒</strong>之罪的李信</p>
    <p>weiwandaixu...(qi shi shi xia ke le )</p>
</body>
</html>

phr_10.145.85.62

没有名字，自己认领。交个 .minecraft 上来并不会有什么加分，只会让我因为要下载 800M 的文件而感到恼火。当然也有社长的锅。

<body> 应该是在 <head> 之后，而不是在 <title> 之后，因为他们是同级别的，身体不会长在头里面。而且全部显示的内容都应该放进 body 元素里面，就像内脏要放在身体里面一样。在 VSCode 中，一个 HTML 文件在打了 ! 之后就应该会出现提示，自动补全整个结构。

原版

点击此处展开 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdn/learning-area/html/tables/basic/minimal-table.css">
    <title>
        996      
    </title>
    <body><p>我不要996</p></body> 
    <table>
        <tr>
            <th colspan="3"><h2>PHR</h2></td>
        </tr>
        <tr>
            <th><h3>我不会打英文</h3></td>
            <th><h3>我不会玩游戏</h3></td>
            <th><h3>我不爱玩电脑</h3></td>
        </tr>
        <tr>
            <td>假的</td>
            <td>假的</td>
            <td>假的</td>
        </tr>
    </table>   
</head>    
</html>

正确版：

点击此处展开 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdn/learning-area/html/tables/basic/minimal-table.css">
    <title>996</title>
</head>   
<body>
    <p>我不要996</p>
    <table>
        <tr>
            <th colspan="3"><h2>PHR</h2></td>
        </tr>
        <tr>
            <th><h3>我不会打英文</h3></td>
            <th><h3>我不会玩游戏</h3></td>
            <th><h3>我不爱玩电脑</h3></td>
        </tr>
        <tr>
            <td>假的</td>
            <td>假的</td>
            <td>假的</td>
        </tr>
    </table> 
</body> 
</html>

彭劭帅

很好，HTML 的结构是对的，语义嵌套都不错。最好把 <head> 加上，不要让你的 HTML 变成无头骑士。

徐润达

结构挺好，就是 DOCTYPE 和 <html> 根元素没有加，成无根之萍了。

丁一德

标签写错了。多了几个 >> ，不知道是不是写 C++ 写的。<title> 里面不应该有 <strong>, 因为那个是浏览器的标签页上面的标题，不属于页面内容，这里应该是纯文本。

换行是 <br> (Break row)。

田浩

我帮你改名了。以后就叫这个。

lang 设置中文倒是还行.

喜欢弹 alert 是吧？不要用 var ，用 let ，没看 MDN 或者我的教程导致的，Remake 去。

黄潇康

html 结构全乱了。<body> 不应该在 <head> 里面，就像身体不会长在头里。同时，所有文本最好都要放在标签里面。

原版：

点击此处展开 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
       <body>
姓名：黄潇康
<hr>
<p>班级：高一7</p>
<p>爱好：<strong>玩游戏</strong>（包括玩原，星铁，Minecraft等等)及看小说</p>
<p>e不知道要写什么了</p>
<p><strong>1145141919810</strong></p>



       </body>


<title>自我介绍</title>





</head>
</html>

正确版：

点击此处展开 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
       <title>自我介绍</title>
</head>
<body>
       <p>姓名：黄潇康</p>
       <hr>
       <p>班级：高一7</p>
       <p>爱好：<strong>玩游戏</strong>（包括玩原，星铁，Minecraft等等)及看小说</p>
       <p>e不知道要写什么了</p>
       <p><strong>1145141919810</strong></p>
</body>
</html>

施钧耀

HTML 结构正确，嵌套合理整齐，非常好。我稍微修了一下缩进。

点击此处展开 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自我介绍2.0</title>
</head>

<body>
    <h1>自我介绍2.0</h1>
    <h2>1.信息</h2>
    <p>性别:男</p>
    <p>名字:施钧耀</p>
    <p>状态:<strong>aaaaaaaaaaaaa</strong></p>
    <h2>2.爱好</h2>
    <p><em>玩原神</em></p>
    <p>粥（</p>
    <p>看旁边的发电</p>
    <h2>3.建议</h2>
    <p>好诶</p>
    <hr>
    <p><a href="https://yjzxclub.github.io/16030018f428/">来源</a></p>
</body>

</html>

马柏昕

也是 DOCTYPE 和 <html> 忘了加。

课程能看懂就行，术语什么不重要，搜索引擎搜一下的事情。加油！

吴涵

槽点挺多的。应该有个 HTML 的结构。<html> <head> <body> 这些还是要有的。而且标题和段落应该是并列关系而不是嵌套关系。

可以再去看看 MDN，注意自己在写的是一个文档，应该有文档的语义。

潘步干

<html> 根元素没加，然后是 <body> 没加。 <strong> 这些不是块级元素最好不要直接放在 <body> 里面而是放在其他块级元素里面。其他倒是没什么毛病。

吴臻恩

<strong> 不是块级元素最好不要直接放在 <body> 里面而是放在其他块级元素里面。其他都没毛病，结构层次很好。

王涵轩

最好要完整的 HTML 文件，而不是一个 HTML 片段。 <li> 不应该单独出现，应该最为 <ul> 或者 <ol> 的子元素。

马柏腾

<html> 和 <body> 是需要的，文档的层次倒是没问题。

夏文杰

很好，虽然 <html> 忘记了。不需要 <br>，块级元素会自己换行

朱贤博

HTML 结构都没问题，不错，就是内容稍微少点。为什么不打算试试学过的标签呢？

周嘉泰

不懂。你是想教我 DP 么？那我觉得应该不必。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#include<bits/stdc++.h>
using namespace std;
#define re(i,a,b) for(int i=(a);i<=(b);i++)
#define er(i,a,b) for(int i=(a);i>=(b);i--)
int n,u[100005],d[100005],pre_u[100005],pre_d[100005],
maxsum_left_d[100005],maxsum_right_d[100005],
maxans_left[100005],
ans=-0x3fffffff;
inline void upd(int &a,int b){
	a=max(a,b);
}
signed main(){
	memset(maxans_left,~0x3f,sizeof(maxans_left));
	ios::sync_with_stdio(false);
    cin>>n;
    re(i,1,n){
        cin>>u[i];
        pre_u[i]=pre_u[i-1]+u[i];
    }
    re(i,1,n){
        cin>>d[i];
        pre_d[i]=pre_d[i-1]+d[i];
    }
    re(i,1,n){
    	maxsum_left_d[i]=d[i]+max(maxsum_left_d[i-1],0);
	}
	er(i,n,1){
		maxsum_right_d[i]=d[i]+max(maxsum_right_d[i+1],0);
	}
	re(i,2,n-1){
		maxans_left[i]=max(maxans_left[i-1]+u[i]+d[i],
		u[i]+d[i]+maxsum_left_d[i-1]);
	}
	re(i,2,n-1){
		upd(ans,maxans_left[i]+maxsum_right_d[i+1]);
	}
	cout<<ans<<endl;
    return 0;
}

孙文卓

完美的结构，很好，值得表扬。一看就是 VSCode 补全的，连 lang="en" 都没改。

朱辰硕

标签不应该大写，应该是 <p> 。在 <h1> 里面套 <p> 是一件比较困惑的时期，一句话不应该既是标题又是段落。而且段落套段落也不好。如果你很需要，就用 <div> 这种无语义元素，不会出现语义理解问题。

谢奥挺

不应该把全文丢进 <p> 标签，因为不应该把标题放在段落里面，也不应该让段落变成段落中的段落。如果是为了显示效果，可以用 <div> 这种无语义元素。

李添睿

HTML 的片段很好，考虑写成完整的？加油！

感谢推荐！可惜我离得很远已经不了解社团现状，不能插手社团的人事，你们可以自己来。

蒋昊伦

HTML 的结构很不错, 加油！时间没关系，没写完的这节课可以继续写。

Jin Peiyun

虽然 Markdown 可以内嵌 HTML, 但是问什么不直接用 HTML 呢？

还是那句话，要给用户看的内容都得写在 <body> 里面，标签最好也要纯小写。

郑子谦

有个 <hr> 漏到 <body> 外面了。而且 <p> 忘了 </p> 的结束标签。<title> 里面要纯文本。问题还是挺多的，仔细改改。

潘谢纯达

HTML 的结构很不错，就是 <h1> 作为一号标题，一个页面最好只用一次。多次使用的应该是 <h2> 或者 3456 这种小标题。

夏理超

结构很好，嵌套列表的思路很清晰。细节不错，lang="zh-cn" 试试加点 CSS？