# 利用Boostrap在Github Pages快速建立個人履歷網站 (1)HTML、CSS、Javascript簡介 *2020/2/19 個人教材使用，純教育用途，如有侵權或缺漏，麻煩告知。* ## :mag: HTML到底是什麼? ### HTML（Hypertext Markup Language） :::info 中文全名為「超文字標示語言」。是一種==標記語言（markup language）==，而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現你的網頁。 ::: > 題外話，HTML是否為一個"程式語言"，這個問題，在軟體圈中可說是一個長久以來一直吵來吵去的無聊話題，軟體工程師多認為Markup Language不等於Programming Language，所以當聽到外行的人提到HTML是程式語言，多會用一種嘲諷(with怒氣)的心態來回應，因此也創造了無數meme ![html meme img1](https://i.redd.it/m41loixjno811.jpg) ![html meme img2](https://pics.conservativememes.com/oh-yeah-baby-tell-me-what-you-want-talk-to-42124598.png) *(回到主題)* ==HTML包含了一系列的**元素（elements）**，而元素包含了**標籤（tags）**與**內容（content）**。== 舉例而言，我們想要將 "My cat is very grumpy" 這個句子透過HTML寫在網頁中，為了讓HTML做到我們想要做的行為，此時就會用到**tags** ``` html <p>My cat is very grumpy</p> ``` 可以看到，為了要讓網頁中顯示這行字，我們在句子前後加上了一個**p tag** ==tag的寫法是一個區塊，有頭、有尾。開頭的\<p>（The opening tag）以及結尾加上了斜線的\</p> （The closing tag）斜線代表一個tag的結束。== ==夾在頭尾tag中間的內容，就稱為**內容（content）**。== ==而**元素（elements）**就是由兩個tag以及content所組成。== ![html example img](https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png) 再來重新整理一下，==我們為了要讓網頁顯示出指定文字，必須利用包含tag與content的elements語法來讓HTML讀懂指令。== 而因為我們要顯示出的是"文字"，這邊使用了**p tag**。 ==p 代表 paragraph，也就是定義了一個文字段落的概念==，如果我們要純粹的表達一段文字在網頁上，最常使用的，就是p tag。 當然，tag就是有非常多種類型，像是顯示圖片的img tag、表格用的table tag等等，p只是其中一種最容易表達文字的tag，而種種不同的tag分別定義不同的意義，也因此，我們能夠將腦海中所想要呈現出來的，透過HTML tag的運用，來讓瀏覽器讀懂我們的想法。 最後，來了解一下，一個完整的HTML文件應該有的架構 ``` html <!DOCTYPE html> <html> <head> <title>this is my page</title> </head> <body> <p>Hello World!</p> </body> </html> ``` * \<!DOCTYPE html> — 文件類型（doctype）。 在 HTML 發展初期（約莫 1991/2 的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。 * \<html> — <html> 元素，又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。 * \<head> — <head> 元素，裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。 * \<body> — <body> 元素，包含了所有會顯示於網頁瀏覽者眼前的內容。 無論是文字、圖片、影面、互動遊戲...等。 ## :mag: CSS到底是什麼?Javascript呢? 當提到html時，CSS與Javascript常常隨之出現，由於本次重點在於概略介紹能處理後面bootstrap部分的知識，這邊很粗略的介紹CSS與Javascript。 ### 階層樣式表 (Cascading Stylesheets；CSS) 跟 HTML 一樣，CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language）：它能讓你在 HTML 文件中的元素（element）上套用不同的頁面樣式（style）。 ==簡而言之，CSS就是負責HTML中各種大小、顏色、位置，從外觀上看起來如何的部分。== ### Javascript JavaScript 是一種程式語言(前面meme一直嘲諷的，HTML並非Programming language就是在講這個)，==它使你能夠創建動態更新內容、控制多媒體，動畫圖片等等幾乎所有事。== 非常粗略的講，Javascript能使網頁做出各式動作的一種程式語言。 #### 這兩者深度都很深，應用也非常廣，有興趣請自己Google。 :::info 以上資料參考自 <a href="https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics">https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics</a> ::: ### 系列文連結 [利用Boostrap在Github Pages快速建立個人履歷網站 (1)HTML、CSS、Javascript簡介](/@qTxKwC5AQiqDJnAMV1oc2w/S1minPtX8) [利用Bootsrap在Github Pages快速建立個人履歷網站 (2)Bootstrap及其相關概念簡介](/hPdsmw48Q0SPODtNI28_vg) [利用Boostrap在Github Pages快速建立個人履歷網站 (3)實作前端](/NN1vUAovQN2YQmHaXdy9TA) [利用Boostrap在Github Pages快速建立個人履歷網站 (4)Github Pages](/SOYZM3qDR1W-ufjei193oA)