正气男秘书教霸道互联网总裁学前端 第一话 女装才能进公司？ *前端基础说明 代码块
前言
标题是怎么回事？
不知道，改了一下嘛，正如大家知道的，作者目前还是个渣前端，能够带大家到的底部顶多就是很基础的东西，比如实现B站的首页之类的（*纯静态）
可能类似下面这些网课的东西吧....
前端入门很简单的，实际上B站也有很多相关视频，借着代码块的上线，我先小试牛刀一下，纯属抛砖引玉，2333
第一话 女装才能进公司？（*前端基础入门介绍 - 和世界说你好）
*今日主要学习代码如下
<!DOCTYPE html>
<
html
lang="
zh"
>
<
head>
<
meta
charset="
UTF-8"
>
<
title>
和世界说你好</
title>
</
head>
<
body>
<
h1>
Hello world</
h1>
</
body>
</
html>
“前方路口游戏公司的员工只有男性......”
我完全难以置信你懂我的意思吧，作为一个渣前端，这是我难以想象的工作待遇。
我叫高月月，在校大学生，今天是我第一天上班，准确点说我是第一天实习。实习的公司前方路口游戏公司是我自己找的，个人素质应该基本满足实习要求吧。我是这么想的，因为按照作者的意思，是要按照new game!!!那样来如实写出我在前方路口游戏公司三个月的实习经历，所以我不是很担心会发生什么奇怪的事情...
“你怎么没有穿女装来上班？”
我不会碰到什么奇怪的事情才怪呢！
前方路口游戏公司坐落在在燊（shēn
）创业孵化基地C座23楼，一整层都是属于公司的，没有特别的装修办公室，用好几个长桌充当办公桌，放眼望去都是大家忙碌的秃头（误）。
在我身边一个带着黑框眼镜长相斯文高高瘦瘦的男生站了起来，他说：
“你在发什么呆？我问你啊，你怎么没有穿女装来上班？”
这个男生叫周渝平，是和我在同一个小组的前辈，已经入职两年，也才大我两岁。
我说：”“要穿女装上班的吗？前辈...我怎么不知道，而且你也没穿女装呀，所以说是新人要穿女装上班的吗？”
周渝平眉头皱了起来，像“周冬雨眉头一皱，发现事情并不简单”的表情包那样。
他说：“你是不是老实人啊，我只是开个玩笑而已”，他现在一副看傻子的眼神了，”今天第一天上班，你等下罗列下你会的东西，然后交给我，我看看怎么给你安排下学习任务。”
哟呵，笔锋一转，这篇小说要化身成为那种，百度上一查就有了前端文字教学了吗？【*抱歉啊，还真的是】
“嗯其实我会的是蛮少的东西，而且都是很简单知识，目前掌握的话是HTML4还有CSS2，以及部分的HTML5还有CSS3。我的意思是我没有系统的学习过一遍HTML5还有CSS3，所以只能说会部分的。正常掌握ES5，然后最近在看ES6。设计模式只会很简单的工厂。框架只学了Vue.js，而且是很基本的。打包工具webpack......”
本来想要倒出一些很基础但是我确实也只会那些基础的东西，但是想着说出来占文字内容，读者又看不懂，马上用省略号代替了。
周渝平一脸严肃脸：“小月月同志，您不会还以为是在学校吧？你来到我们这里是要实际工作的，你现在掌握的都太low了你懂我的意思吧？你现在只能做一些很基础的工作。”
小月月马上撅起嘴，不对不对，我马上严肃了起来：“前辈，我确实知道我基础方面非常的差，希望以后多多指教，请问我应该从哪边开始做起？我现在什么都不知道，希望前辈能够给我一点指点。”（*作者：我没去公司实习过，这些都是凭我的大脑想象出来的，只是为了剧情的发展 读者：你这个作者话太多了吧喂）
周渝平的眉毛真的是太好看了，他可能看到我表情严肃，没有嬉皮笑脸之类的，就舒展了开来：“你不要太紧张，也不用喊我前辈，你喊我渝平就行了， 我喊你小月月就行了（我：?）我们目前工作还不是很多，不过最近我们公司想要做宣传用的主页，主要表现形式你可以参考下B站，对，就是最近很火的Bilibili的PC端的官网，你和晓舟参考他们的主页做一个差不多的就行了”
啥？参考B站做一个PC端的官网？我仔细看看，怎么滴，我们公司的招牌背后也没有慢视频三个字呀。
周渝平好像看出了我的疑惑，手一挥说：“我的意思是说做起来布局差不多而已，到时候样式还是不一样的。臭设计师们还在赶工，你先和晓舟那孩子练一下手，你能理解我的意思吧？这个主要任务还是主要是带晓舟一下，他刚刚高中毕业，暑假来我们公司玩，顺便学习下~”
“啥？这个意思是让我带着一个孩子（渝平：“不是啊，他成年的了”）学习的吗？这个合适吗...他是不会前端的意思吗....”听到这样奇怪的任务安排，我不禁说出了声音
“你...你好”我的面前突然钻出一个大高个男子，有点憨憨的样子，比我高差不多一个头吧，我169cm，他多高啊？我仰望着他的鼻孔呆呆地计算着。
周渝平把那个汉子拉到他的旁边，然后右手先摆向了我:“晓舟，给你介绍下，这位和你一样，也是我们公司新入职的实习生，叫小月月”
...我姓小啊！！我姓高啊！！！
“你叫李晓舟是吧，在教你基本的前端的知识之前，我想问下你啊，就是你用过电脑吗？”我看着坐在我旁边的一米八的汉子问道。
现在的人发育这么好的吗？我心里犯嘀咕。我们分配到的座位是靠饮水机的位置，刚刚让我仰望鼻孔的男生就是要和我一起合作的晓舟同志，姓李，名晓舟。确实是高中刚刚毕业。我真的不知道怎么现在高中毕业就能够直接来公司实习。
李晓舟听到我问他有没有用过电脑，咧嘴笑着说：“肯定用过啦~我学校就在旁边，这边我天天上下学都有过来的，我爸爸说让我多熟悉下我未来的公司总是不错的。”
剧情发展需要，这也很合理嘛，能忍受，能忍受。现实生活中，能少得了这种正常操作嘛？
我当作没听出他最后说的话的意思，然后笑嘻嘻地说：
“哎呀， 哥哥我还不是担心你高中学业繁忙没用过电脑嘛，来来来...
先给你介绍下什么是前端吧。我熟练地打开了我的笔记本上以前的给师弟师妹上课的PPT
晓舟，平常你都有用电脑浏览器
电脑的谷歌浏览器
或者用手机浏览器吧？
小米6的默认系统浏览器
你通过电脑浏览器浏览的PC端网页
B站的PC端的首页 右下角是俺的...
或者手机端浏览器浏览的网页
B站的移动端的首页
它们这些能在浏览器访问的，都是由人通过打代码实现出来的。这些实现你能看到的网页的人，就是从事前端工作的人，前端的工作你也可以认为就是实现这些你看到的网页。
不信的话，你按一下键盘的F12按键，或者打开开发者工具，你可以在Console看到调皮的主站前端的彩蛋，也可以在Elements看到主站对应的前端代码。
主站的Console页面
主站对应的前端代码
那我们现在就可以上手实现我们第一个网页了！先从一个“Hello World！”开始吧！（*是的，随大流，几乎所有的）
如果你是电脑端用户——
点击记事本（晓舟：“嘿！我明明看到你有用sublime还有Visual Studio Code！”，是的是的，这不是让你入门才用记事本的吗！你当我很想打开记事本吗？）
这是记事本
把下面的示例代码一模一样地一字不落（晓舟：“每行前面有的空格也要吗？”），没错，空格也要，这样会让你的代码很优美易读。
<!DOCTYPE html>
<
html
lang="
zh"
>
<
head>
<
meta
charset="
UTF-8"
>
<
title>
和世界说你好</
title>
</
head>
<
body>
<
h1>
Hello world</
h1>
</
body>
</
html>
*感谢专栏新功能 代码块
打好你的代码后，点击左上角的文件，点击另存为
你可以选择保存在桌面
注意：
①文件名后缀要改成.html②保存类型为所有文件③编码选择UTF-8
然后点击保存。
（晓舟：“为什么要弄这三个东西呀？我不懂啊！”）这里我对应作出粗略解释，如果你还是不懂，请百度。
①所有文件都有自己的文件类型，不同的文件类型对应不同的文件后缀，通过使用点“.”我们可以把文件名和文件后缀名划分开来，比如图片的文件后缀是jpg，记事本默认文件的类型是txt，而网页文件对应的是html
如果晓舟你的电脑的文件不能看到文件后缀，那是因为你没设置显示，你像下面一样设置，点击“查看”，点击文件拓展名，点勾勾即可
这是win10的，win7的可以自行百度，么么哒
这样你就可以看到文件的后缀名，也可以进行文件的后缀名的更改了，比如下面，我更改了"新建文本文档.txt"的后缀，变成"新建文本文档.html"，那么它就从文档文件变成了网页文件。
②你不选所有文件，我担心你的后缀改了也没用，保存的时候一不小心你又弄成txt了
③文字编码保存格式用UTF-8可以避免中文乱码，包括代码里的“<meta charset="UTF-8">”的目的也是这样的。如果你有时候看到自己的网页内容是中文的乱码，要么是你没加“<meta charset="UTF-8">”在对应的位置，要么是你的文件的编码是非UTF-8的。【*文字编码先这么理解】
现在晓舟你可以看到你保存的位置有你刚刚新建的html文件
网页文件的图标和你的默认浏览器有关，我的默认浏览器是谷歌，所以图标长这样
直接双击，就可以在浏览器中打开了。
Hello world
你以后想编辑你的网页直接右键点击“记事本打开”即可编辑
很好！这就是你人生中的自己制作的第一张网页！
内容是Hello world，那么从这一张网页开始，我们将一起进入美妙的前端的大门内（*其实连门槛都还没踏进去呢，哭唧唧）”
--本话END--
下一话预告：
虽然简单讲了前端是啥，只制作了第一张HTML网页，但是晓舟感觉还是懵懵得，甚至晕了过去....
下一话标题：
《【正气男秘书教霸道互联网总裁学前端】第二话 花吻疗伤法？（*前端html标签元素入门）》
晓舟：“对了，你还没说手机用户怎么做第一个hellow world呢”
“用手机打代码真的是受罪哦....
算了算了，你可以去应用商店查打代码的软件，或者安卓用户下载DroidEdit这个软件（苹果手机用户我好想没有听说过有相关软件，不过可以尝试新建文件，然后改后缀名的方式）
使用这个的好处是有代码高亮，有点类似sublime（入门的可以先用记事本~），然后可以保存为html文件后，点击右下角的类似上传的按钮，点击“在浏览器中预览”，即可在默认浏览器中预览网页效果。
以上（*用手机打代码真的很累哒）”
晓舟：“原来如此，还是用电脑端方便一点啊。”
我：“？？？”
一时兴起就码了这么多...
白天还要搬砖...
完蛋了！！！
大家有什么疑问可以在下方评论，前端入门真的是非常简单易上手哒~
【想听到催更的声音，可能有吗（晓舟：“不可能有的吧？就你？” 我：“我好歹也是个千粉的小月月啊（*雾）”）】
--END--
标题是怎么回事？
不知道，改了一下嘛，正如大家知道的，作者目前还是个渣前端，能够带大家到的底部顶多就是很基础的东西，比如实现B站的首页之类的（*纯静态）
可能类似下面这些网课的东西吧....
前端入门很简单的，实际上B站也有很多相关视频，借着代码块的上线，我先小试牛刀一下，纯属抛砖引玉，2333
第一话 女装才能进公司？（*前端基础入门介绍 - 和世界说你好）
*今日主要学习代码如下
<!DOCTYPE html>
<
html
lang="
zh"
>
<
head>
<
meta
charset="
UTF-8"
>
<
title>
和世界说你好</
title>
</
head>
<
body>
<
h1>
Hello world</
h1>
</
body>
</
html>
“前方路口游戏公司的员工只有男性......”
我完全难以置信你懂我的意思吧，作为一个渣前端，这是我难以想象的工作待遇。
我叫高月月，在校大学生，今天是我第一天上班，准确点说我是第一天实习。实习的公司前方路口游戏公司是我自己找的，个人素质应该基本满足实习要求吧。我是这么想的，因为按照作者的意思，是要按照new game!!!那样来如实写出我在前方路口游戏公司三个月的实习经历，所以我不是很担心会发生什么奇怪的事情...
“你怎么没有穿女装来上班？”
我不会碰到什么奇怪的事情才怪呢！
前方路口游戏公司坐落在在燊（shēn
）创业孵化基地C座23楼，一整层都是属于公司的，没有特别的装修办公室，用好几个长桌充当办公桌，放眼望去都是大家忙碌的秃头（误）。
在我身边一个带着黑框眼镜长相斯文高高瘦瘦的男生站了起来，他说：
“你在发什么呆？我问你啊，你怎么没有穿女装来上班？”
这个男生叫周渝平，是和我在同一个小组的前辈，已经入职两年，也才大我两岁。
我说：”“要穿女装上班的吗？前辈...我怎么不知道，而且你也没穿女装呀，所以说是新人要穿女装上班的吗？”
周渝平眉头皱了起来，像“周冬雨眉头一皱，发现事情并不简单”的表情包那样。
他说：“你是不是老实人啊，我只是开个玩笑而已”，他现在一副看傻子的眼神了，”今天第一天上班，你等下罗列下你会的东西，然后交给我，我看看怎么给你安排下学习任务。”
哟呵，笔锋一转，这篇小说要化身成为那种，百度上一查就有了前端文字教学了吗？【*抱歉啊，还真的是】
“嗯其实我会的是蛮少的东西，而且都是很简单知识，目前掌握的话是HTML4还有CSS2，以及部分的HTML5还有CSS3。我的意思是我没有系统的学习过一遍HTML5还有CSS3，所以只能说会部分的。正常掌握ES5，然后最近在看ES6。设计模式只会很简单的工厂。框架只学了Vue.js，而且是很基本的。打包工具webpack......”
本来想要倒出一些很基础但是我确实也只会那些基础的东西，但是想着说出来占文字内容，读者又看不懂，马上用省略号代替了。
周渝平一脸严肃脸：“小月月同志，您不会还以为是在学校吧？你来到我们这里是要实际工作的，你现在掌握的都太low了你懂我的意思吧？你现在只能做一些很基础的工作。”
小月月马上撅起嘴，不对不对，我马上严肃了起来：“前辈，我确实知道我基础方面非常的差，希望以后多多指教，请问我应该从哪边开始做起？我现在什么都不知道，希望前辈能够给我一点指点。”（*作者：我没去公司实习过，这些都是凭我的大脑想象出来的，只是为了剧情的发展 读者：你这个作者话太多了吧喂）
周渝平的眉毛真的是太好看了，他可能看到我表情严肃，没有嬉皮笑脸之类的，就舒展了开来：“你不要太紧张，也不用喊我前辈，你喊我渝平就行了， 我喊你小月月就行了（我：?）我们目前工作还不是很多，不过最近我们公司想要做宣传用的主页，主要表现形式你可以参考下B站，对，就是最近很火的Bilibili的PC端的官网，你和晓舟参考他们的主页做一个差不多的就行了”
啥？参考B站做一个PC端的官网？我仔细看看，怎么滴，我们公司的招牌背后也没有慢视频三个字呀。
周渝平好像看出了我的疑惑，手一挥说：“我的意思是说做起来布局差不多而已，到时候样式还是不一样的。臭设计师们还在赶工，你先和晓舟那孩子练一下手，你能理解我的意思吧？这个主要任务还是主要是带晓舟一下，他刚刚高中毕业，暑假来我们公司玩，顺便学习下~”
“啥？这个意思是让我带着一个孩子（渝平：“不是啊，他成年的了”）学习的吗？这个合适吗...他是不会前端的意思吗....”听到这样奇怪的任务安排，我不禁说出了声音
“你...你好”我的面前突然钻出一个大高个男子，有点憨憨的样子，比我高差不多一个头吧，我169cm，他多高啊？我仰望着他的鼻孔呆呆地计算着。
周渝平把那个汉子拉到他的旁边，然后右手先摆向了我:“晓舟，给你介绍下，这位和你一样，也是我们公司新入职的实习生，叫小月月”
...我姓小啊！！我姓高啊！！！
“你叫李晓舟是吧，在教你基本的前端的知识之前，我想问下你啊，就是你用过电脑吗？”我看着坐在我旁边的一米八的汉子问道。
现在的人发育这么好的吗？我心里犯嘀咕。我们分配到的座位是靠饮水机的位置，刚刚让我仰望鼻孔的男生就是要和我一起合作的晓舟同志，姓李，名晓舟。确实是高中刚刚毕业。我真的不知道怎么现在高中毕业就能够直接来公司实习。
李晓舟听到我问他有没有用过电脑，咧嘴笑着说：“肯定用过啦~我学校就在旁边，这边我天天上下学都有过来的，我爸爸说让我多熟悉下我未来的公司总是不错的。”
剧情发展需要，这也很合理嘛，能忍受，能忍受。现实生活中，能少得了这种正常操作嘛？
我当作没听出他最后说的话的意思，然后笑嘻嘻地说：
“哎呀， 哥哥我还不是担心你高中学业繁忙没用过电脑嘛，来来来...
先给你介绍下什么是前端吧。我熟练地打开了我的笔记本上以前的给师弟师妹上课的PPT
晓舟，平常你都有用电脑浏览器
电脑的谷歌浏览器
或者用手机浏览器吧？
小米6的默认系统浏览器
你通过电脑浏览器浏览的PC端网页
B站的PC端的首页 右下角是俺的...
或者手机端浏览器浏览的网页
B站的移动端的首页
它们这些能在浏览器访问的，都是由人通过打代码实现出来的。这些实现你能看到的网页的人，就是从事前端工作的人，前端的工作你也可以认为就是实现这些你看到的网页。
不信的话，你按一下键盘的F12按键，或者打开开发者工具，你可以在Console看到调皮的主站前端的彩蛋，也可以在Elements看到主站对应的前端代码。
主站的Console页面
主站对应的前端代码
那我们现在就可以上手实现我们第一个网页了！先从一个“Hello World！”开始吧！（*是的，随大流，几乎所有的）
如果你是电脑端用户——
点击记事本（晓舟：“嘿！我明明看到你有用sublime还有Visual Studio Code！”，是的是的，这不是让你入门才用记事本的吗！你当我很想打开记事本吗？）
这是记事本
把下面的示例代码一模一样地一字不落（晓舟：“每行前面有的空格也要吗？”），没错，空格也要，这样会让你的代码很优美易读。
<!DOCTYPE html>
<
html
lang="
zh"
>
<
head>
<
meta
charset="
UTF-8"
>
<
title>
和世界说你好</
title>
</
head>
<
body>
<
h1>
Hello world</
h1>
</
body>
</
html>
*感谢专栏新功能 代码块
打好你的代码后，点击左上角的文件，点击另存为
你可以选择保存在桌面
注意：
①文件名后缀要改成.html②保存类型为所有文件③编码选择UTF-8
然后点击保存。
（晓舟：“为什么要弄这三个东西呀？我不懂啊！”）这里我对应作出粗略解释，如果你还是不懂，请百度。
①所有文件都有自己的文件类型，不同的文件类型对应不同的文件后缀，通过使用点“.”我们可以把文件名和文件后缀名划分开来，比如图片的文件后缀是jpg，记事本默认文件的类型是txt，而网页文件对应的是html
如果晓舟你的电脑的文件不能看到文件后缀，那是因为你没设置显示，你像下面一样设置，点击“查看”，点击文件拓展名，点勾勾即可
这是win10的，win7的可以自行百度，么么哒
这样你就可以看到文件的后缀名，也可以进行文件的后缀名的更改了，比如下面，我更改了"新建文本文档.txt"的后缀，变成"新建文本文档.html"，那么它就从文档文件变成了网页文件。
②你不选所有文件，我担心你的后缀改了也没用，保存的时候一不小心你又弄成txt了
③文字编码保存格式用UTF-8可以避免中文乱码，包括代码里的“<meta charset="UTF-8">”的目的也是这样的。如果你有时候看到自己的网页内容是中文的乱码，要么是你没加“<meta charset="UTF-8">”在对应的位置，要么是你的文件的编码是非UTF-8的。【*文字编码先这么理解】
现在晓舟你可以看到你保存的位置有你刚刚新建的html文件
网页文件的图标和你的默认浏览器有关，我的默认浏览器是谷歌，所以图标长这样
直接双击，就可以在浏览器中打开了。
Hello world
你以后想编辑你的网页直接右键点击“记事本打开”即可编辑
很好！这就是你人生中的自己制作的第一张网页！
内容是Hello world，那么从这一张网页开始，我们将一起进入美妙的前端的大门内（*其实连门槛都还没踏进去呢，哭唧唧）”
--本话END--
下一话预告：
虽然简单讲了前端是啥，只制作了第一张HTML网页，但是晓舟感觉还是懵懵得，甚至晕了过去....
下一话标题：
《【正气男秘书教霸道互联网总裁学前端】第二话 花吻疗伤法？（*前端html标签元素入门）》
晓舟：“对了，你还没说手机用户怎么做第一个hellow world呢”
“用手机打代码真的是受罪哦....
算了算了，你可以去应用商店查打代码的软件，或者安卓用户下载DroidEdit这个软件（苹果手机用户我好想没有听说过有相关软件，不过可以尝试新建文件，然后改后缀名的方式）
使用这个的好处是有代码高亮，有点类似sublime（入门的可以先用记事本~），然后可以保存为html文件后，点击右下角的类似上传的按钮，点击“在浏览器中预览”，即可在默认浏览器中预览网页效果。
以上（*用手机打代码真的很累哒）”
晓舟：“原来如此，还是用电脑端方便一点啊。”
我：“？？？”
一时兴起就码了这么多...
白天还要搬砖...
完蛋了！！！
大家有什么疑问可以在下方评论，前端入门真的是非常简单易上手哒~
【想听到催更的声音，可能有吗（晓舟：“不可能有的吧？就你？” 我：“我好歹也是个千粉的小月月啊（*雾）”）】
--END--
堵住前端小孔哭喊