正氣男秘書教霸道互聯(lián)網(wǎng)總裁學前端 第一話 女裝才能進公司？ *前端基礎說明 代碼塊
前言
標題是怎么回事？
不知道，改了一下嘛，正如大家知道的，作者目前還是個渣前端，能夠帶大家到的底部頂多就是很基礎的東西，比如實現(xiàn)B站的首頁之類的（*純靜態(tài)）
可能類似下面這些網(wǎng)課的東西吧....
前端入門很簡單的，實際上B站也有很多相關視頻，借著代碼塊的上線，我先小試牛刀一下，純屬拋磚引玉，2333
第一話 女裝才能進公司？（*前端基礎入門介紹 - 和世界說你好）
*今日主要學習代碼如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>和世界說你好</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>“前方路口游戲公司的員工只有男性......”
我完全難以置信你懂我的意思吧，作為一個渣前端，這是我難以想象的工作待遇。
我叫高月月，在校大學生，今天是我第一天上班，準確點說我是第一天實習。實習的公司前方路口游戲公司是我自己找的，個人素質(zhì)應該基本滿足實習要求吧。我是這么想的，因為按照作者的意思，是要按照new game!!!那樣來如實寫出我在前方路口游戲公司三個月的實習經(jīng)歷，所以我不是很擔心會發(fā)生什么奇怪的事情...
“你怎么沒有穿女裝來上班？”
我不會碰到什么奇怪的事情才怪呢！
前方路口游戲公司坐落在在燊（shēn）創(chuàng)業(yè)孵化基地C座23樓，一整層都是屬于公司的，沒有特別的裝修辦公室，用好幾個長桌充當辦公桌，放眼望去都是大家忙碌的禿頭（誤）。
在我身邊一個帶著黑框眼鏡長相斯文高高瘦瘦的男生站了起來，他說：
“你在發(fā)什么呆？我問你啊，你怎么沒有穿女裝來上班？”
這個男生叫周渝平，是和我在同一個小組的前輩，已經(jīng)入職兩年，也才大我兩歲。
我說：”“要穿女裝上班的嗎？前輩...我怎么不知道，而且你也沒穿女裝呀，所以說是新人要穿女裝上班的嗎？”
周渝平眉頭皺了起來，像“周冬雨眉頭一皺，發(fā)現(xiàn)事情并不簡單”的表情包那樣。
他說：“你是不是老實人啊，我只是開個玩笑而已”，他現(xiàn)在一副看傻子的眼神了，”今天第一天上班，你等下羅列下你會的東西，然后交給我，我看看怎么給你安排下學習任務。”
喲呵，筆鋒一轉，這篇小說要化身成為那種，百度上一查就有了前端文字教學了嗎？【*抱歉啊，還真的是】
“嗯其實我會的是蠻少的東西，而且都是很簡單知識，目前掌握的話是HTML4還有CSS2，以及部分的HTML5還有CSS3。我的意思是我沒有系統(tǒng)的學習過一遍HTML5還有CSS3，所以只能說會部分的。正常掌握ES5，然后最近在看ES6。設計模式只會很簡單的工廠。框架只學了Vue.js，而且是很基本的。打包工具webpack......”
本來想要倒出一些很基礎但是我確實也只會那些基礎的東西，但是想著說出來占文字內(nèi)容，讀者又看不懂，馬上用省略號代替了。
周渝平一臉嚴肅臉：“小月月同志，您不會還以為是在學校吧？你來到我們這里是要實際工作的，你現(xiàn)在掌握的都太low了你懂我的意思吧？你現(xiàn)在只能做一些很基礎的工作?！?/p>
小月月馬上撅起嘴，不對不對，我馬上嚴肅了起來：“前輩，我確實知道我基礎方面非常的差，希望以后多多指教，請問我應該從哪邊開始做起？我現(xiàn)在什么都不知道，希望前輩能夠給我一點指點?！保?作者：我沒去公司實習過，這些都是憑我的大腦想象出來的，只是為了劇情的發(fā)展 讀者：你這個作者話太多了吧喂）
周渝平的眉毛真的是太好看了，他可能看到我表情嚴肅，沒有嬉皮笑臉之類的，就舒展了開來：“你不要太緊張，也不用喊我前輩，你喊我渝平就行了， 我喊你小月月就行了（我：?）我們目前工作還不是很多，不過最近我們公司想要做宣傳用的主頁，主要表現(xiàn)形式你可以參考下B站，對，就是最近很火的Bilibili的PC端的官網(wǎng)，你和曉舟參考他們的主頁做一個差不多的就行了”
啥？參考B站做一個PC端的官網(wǎng)？我仔細看看，怎么滴，我們公司的招牌背后也沒有慢視頻三個字呀。
周渝平好像看出了我的疑惑，手一揮說：“我的意思是說做起來布局差不多而已，到時候樣式還是不一樣的。臭設計師們還在趕工，你先和曉舟那孩子練一下手，你能理解我的意思吧？這個主要任務還是主要是帶曉舟一下，他剛剛高中畢業(yè)，暑假來我們公司玩，順便學習下~”
“啥？這個意思是讓我?guī)е粋€孩子（渝平：“不是啊，他成年的了”）學習的嗎？這個合適嗎...他是不會前端的意思嗎....”聽到這樣奇怪的任務安排，我不禁說出了聲音
“你...你好”我的面前突然鉆出一個大高個男子，有點憨憨的樣子，比我高差不多一個頭吧，我169cm，他多高??？我仰望著他的鼻孔呆呆地計算著。
周渝平把那個漢子拉到他的旁邊，然后右手先擺向了我:“曉舟，給你介紹下，這位和你一樣，也是我們公司新入職的實習生，叫小月月”
...我姓小?。?！我姓高啊?。。?br/>
“你叫李曉舟是吧，在教你基本的前端的知識之前，我想問下你啊，就是你用過電腦嗎？”我看著坐在我旁邊的一米八的漢子問道。
現(xiàn)在的人發(fā)育這么好的嗎？我心里犯嘀咕。我們分配到的座位是靠飲水機的位置，剛剛讓我仰望鼻孔的男生就是要和我一起合作的曉舟同志，姓李，名曉舟。確實是高中剛剛畢業(yè)。我真的不知道怎么現(xiàn)在高中畢業(yè)就能夠直接來公司實習。
李曉舟聽到我問他有沒有用過電腦，咧嘴笑著說：“肯定用過啦~我學校就在旁邊，這邊我天天上下學都有過來的，我爸爸說讓我多熟悉下我未來的公司總是不錯的?！?br/>
劇情發(fā)展需要，這也很合理嘛，能忍受，能忍受。現(xiàn)實生活中，能少得了這種正常操作嘛？
我當作沒聽出他最后說的話的意思，然后笑嘻嘻地說：
“哎呀， 哥哥我還不是擔心你高中學業(yè)繁忙沒用過電腦嘛，來來來...
先給你介紹下什么是前端吧。我熟練地打開了我的筆記本上以前的給師弟師妹上課的PPT
曉舟，平常你都有用電腦瀏覽器
或者用手機瀏覽器吧？
你通過電腦瀏覽器瀏覽的PC端網(wǎng)頁
或者手機端瀏覽器瀏覽的網(wǎng)頁
它們這些能在瀏覽器訪問的，都是由人通過打代碼實現(xiàn)出來的。這些實現(xiàn)你能看到的網(wǎng)頁的人，就是從事前端工作的人，前端的工作你也可以認為就是實現(xiàn)這些你看到的網(wǎng)頁。
不信的話，你按一下鍵盤的F12按鍵，或者打開開發(fā)者工具，你可以在Console看到調(diào)皮的主站前端的彩蛋，也可以在Elements看到主站對應的前端代碼。
主站對應的前端代碼
那我們現(xiàn)在就可以上手實現(xiàn)我們第一個網(wǎng)頁了！先從一個“Hello World！”開始吧?。?是的，隨大流，幾乎所有的）
如果你是電腦端用戶——
點擊記事本（曉舟：“嘿！我明明看到你有用sublime還有Visual Studio Code！”，是的是的，這不是讓你入門才用記事本的嗎！你當我很想打開記事本嗎？）
把下面的示例代碼一模一樣地一字不落（曉舟：“每行前面有的空格也要嗎？”），沒錯，空格也要，這樣會讓你的代碼很優(yōu)美易讀。
<!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，而網(wǎng)頁文件對應的是html
如果曉舟你的電腦的文件不能看到文件后綴，那是因為你沒設置顯示，你像下面一樣設置，點擊“查看”，點擊文件拓展名，點勾勾即可
這樣你就可以看到文件的后綴名，也可以進行文件的后綴名的更改了，比如下面，我更改了"新建文本文檔.txt"的后綴，變成"新建文本文檔.html"，那么它就從文檔文件變成了網(wǎng)頁文件。
②你不選所有文件，我擔心你的后綴改了也沒用，保存的時候一不小心你又弄成txt了
③文字編碼保存格式用UTF-8可以避免中文亂碼，包括代碼里的“<meta charset="UTF-8">”的目的也是這樣的。如果你有時候看到自己的網(wǎng)頁內(nèi)容是中文的亂碼，要么是你沒加“<meta charset="UTF-8">”在對應的位置，要么是你的文件的編碼是非UTF-8的?！?文字編碼先這么理解】
現(xiàn)在曉舟你可以看到你保存的位置有你剛剛新建的html文件
直接雙擊，就可以在瀏覽器中打開了。
你以后想編輯你的網(wǎng)頁直接右鍵點擊“記事本打開”即可編輯
很好！這就是你人生中的自己制作的第一張網(wǎng)頁！
內(nèi)容是Hello world，那么從這一張網(wǎng)頁開始，我們將一起進入美妙的前端的大門內(nèi)（*其實連門檻都還沒踏進去呢，哭唧唧）”
--本話END--
下一話預告：
雖然簡單講了前端是啥，只制作了第一張HTML網(wǎng)頁，但是曉舟感覺還是懵懵得，甚至暈了過去....
下一話標題：
《【正氣男秘書教霸道互聯(lián)網(wǎng)總裁學前端】第二話 花吻療傷法？（*前端html標簽元素入門）》
曉舟：“對了，你還沒說手機用戶怎么做第一個hellow world呢”
“用手機打代碼真的是受罪哦....
算了算了，你可以去應用商店查打代碼的軟件，或者安卓用戶下載DroidEdit這個軟件（蘋果手機用戶我好想沒有聽說過有相關軟件，不過可以嘗試新建文件，然后改后綴名的方式）
使用這個的好處是有代碼高亮，有點類似sublime（入門的可以先用記事本~），然后可以保存為html文件后，點擊右下角的類似上傳的按鈕，點擊“在瀏覽器中預覽”，即可在默認瀏覽器中預覽網(wǎng)頁效果。
以上（*用手機打代碼真的很累噠）”
曉舟：“原來如此，還是用電腦端方便一點啊。”
我：“？？？”
一時興起就碼了這么多...
白天還要搬磚...
完蛋了！??！
大家有什么疑問可以在下方評論，前端入門真的是非常簡單易上手噠~
【想聽到催更的聲音，可能有嗎（曉舟：“不可能有的吧？就你？” 我：“我好歹也是個千粉的小月月?。?霧）”）】
--END--
