HTML 是什麼？HTML 語法入門教學｜ALPHA Camp Blog
文章推薦指數： 80 %
HTML 是Hypertext Markup Language 的縮寫，也就是「超文本標記語言」(請注意他是標記語言，不是程式語言)。
HTML5是HTML的最新修訂版本， ...
Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息限時3000元獎金New非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們數位職涯推手計畫馬上報名Web技術HTML是什麼？HTML語法入門教學Posted on 2020-05-22 by byALPHACampHTML是HypertextMarkupLanguage的縮寫，也就是「超文本標記語言」(請注意，他是標記語言，不是程式語言)。
HyperText：一種結構化的文字Markuplanguage：一種用來標記文字的系統語法身為標記語言，HTML有各式各樣的標籤去定義網頁內容要如何呈現。
例如：元件可能是文字、圖片或超連結；標籤則定義元件要放左邊還是放右邊、斜體還是粗體等等。
本文帶你了解HTML是什麼，以及HTML語法入門教學。
如何有系統學習HTML/CSS/JavaScript，下載全端開發學習地圖HTML組織並呈現網頁內容其實，所有的網頁都是HTML文件。
更精確一點說，所有的網頁內容，都要透過HTML文件、標籤來定義。
你應該有過以下經驗。
在任何一個網頁空白處按下右鍵、選擇「檢查」，就會出現下圖的HTML文件；或是你打開任何一個副檔名為.html的檔案、或是用文字編輯器如Sublime打開，就會看到下圖的畫面。
這就是網頁實際的樣子。
HTML的組成請打開你的VSCode，新增一個名為「basic.html」的檔案。
細讀以下的HTML文件，裡面包含HTML的最基本結構。
試著用你的方式觀察與描述它，然後把它寫入你的basic.html。
若你是第一次學習HTML和CSS，我們建議你一個字一個字的輸入你的文字編輯器中，而不是使用複製貼上的方式。
讓我們來解釋一下這段HTML所表達的意義。
宣告第一行是一個「宣告」：告訴瀏覽器這份文件是一個HTML5的網頁，瀏覽器因而知道要怎麼用正確的方式來展示你的網頁。
請注意宣告要寫在第一行，因為瀏覽器是一行一行讀取文件的，想愈早告訴他的資訊，請寫在愈上面。
...包住了整個網頁，表示這是一份HTML文件。
被包圍的內容，我們稱為網頁「元素」(element)。
一份完整的HTML文件，必然會在裡包含
包圍的資訊稱為「標頭」，裡宣告各種網頁資訊，這些資訊不會顯示給使用者看，因為它們的溝通對象是瀏覽器與其他的網路服務，如Google搜索引擎，Facebook等。
宣告的資訊包括網頁標題、外部連結、網頁樣式、JavaScript腳本、metatag⋯⋯等。
我們在以後的章節會有更詳細的介紹。
現在，請你立刻在標頭裡加上以下內容：加入上述
接著用瀏覽器打開basic.html，找找看
包圍的內容是會直接顯示給使用者看的內容，也是這個網頁的核心。
需要CSS來定義樣式的內容，也都會放在body裡面，現在，請你立刻在body裡輸入以下內容： 我要學會HTML!!!接著刷新瀏覽器，看看網頁裡跑出了什麼？註解(Comment)寫在「註解」(Comment)裡的東西會被機器直接跳過，通常是工程師協作時交流的注意事項，或是自己的備忘。
例如：跟著以下影片的操作步驟，我們來實際看看
這裡只說明了最基本的HTML架構，在下個單元會介紹更多HTML的標籤。
HTML的巢狀結構HTML其實是個「標記」(markup)的概念。
HTML的繪寫是"HypertextMarkupLanguage."而"markup"的意思跟用螢光筆劃記的感覺很像，把文字標記起來，賦予某種特性。
你試試在編輯器寫出以下的五段文字，再用瀏覽器去看看：Results
Results
areimpressive!Results
areimpressive!Results
areimpressive!Resultsareimpressive!有發現什麼嗎？你應該注意到了，HTML標籤都是成對的，而且是「巢狀」的結構。、等被<>包圍的符號，是HTML這種markup語言的「標籤」(tag)，標籤普遍需要有明確的開始和結束，才能把一段文字包圍起來：瀏覽器需要正確與完整的標記才指定你想表達的意思，所以結構對HTML非常重要。
只要巢狀的結構有錯，瀏覽器就無法正確呈現你設計的網頁，甚至不會再理會你的網頁內容。
但你也別擔心，像VSCode這樣的瀏覽器都會自動幫你檢查。
更重要的是，你必須根據巢狀結構好好縮排你的程式碼！「格式碼的可讀性」是評估你是否為合格工程師的重要指標，而清楚的縮排是良好的第一印象，撰寫HTML時，請保持不同層級的標籤空2格(如下圖)。
HTML的標籤隨著學習HTML的進展，你會陸續認識新的標籤：標題：h1,h2,h3,h4,h5,h6文字段落：p清單：ul,ol,li強調語氣：em,strong換行：br水平線：hr超連結：a圖片：img區域：div,span表格：table,tr,th,td表單：form,label,input除了img標籤外，header、nav、main和section是語義元素(semanticelement)，也就是「有意義的元素」，能讓搜尋引擎辨識出正確的網頁內容。
語義元素出自於HTML5，你可以前往W3School瞭解更多資訊。
若你偶爾會使用Word等文書處理器，你會對等下介紹的元素非常熟悉，唯一要學的，是用HTML標籤來定義這些元素。
常見HTMLelements其實一張圖就說完了，現在來動手實作，請你打開剛才建立的basic.html，跟著介紹來更新你的文件，並隨時刷新瀏覽器裡，看看網頁的樣子。
上一單元我們已經介紹過title，接下來我們從標題開始，以下介紹的內容，請你一律輸入在裡面。
標題headings我要學會HTML！我要學會HTML！我要學會HTML！我要學會HTML！我要學會HTML！我要學會HTML！可以使用的標題有6層，這些標題組合成你的網頁內容大綱，當搜尋引擎找到你的網頁時，會依照標題來認識你的內容，因而判斷相關性。
段落paragraphs我要學會HTML！動手做是最好的學習方法。
把你的內容標記成段落，這是一個很常用的標籤。
無順序的項目符號清單
- （unorderedlist）
- （orderedlist）
- 或
- 的下一層，這是
清單的巢狀特性，讓他們特別適合被改造成網站的導覽選單(navigation)，學會CSS以後，你將會知道怎麼做。
斜體(emphasis)與粗體(strong)在HTML我們一般會用兩種方法來強調需要強調的內容Emphasis(斜體)：Strong(粗體)：在介紹他們如何使用之前，不知道你有沒有發現，目前為止介紹的元素，都是一次佔滿一行？這種一次佔一行的叫「區塊元素」(blockelements)，接下來我們舉「行內元素」(inlineelements)的例子，在後面的CSS章節你會深入認識兩者的區分。
行內元素校長說：Coding哪裡都可以學，真正重要的是你的Mindset！ 再說一次：Coding哪裡都可以學，真正重要的是你的Mindset！
Youneedtogetitdone！空元素(Emptyelements)上一節我們談到絕大多數的HTML標籤都是成對出現，具有開始與結束，以巢狀結構包圍內容，定義出一個區塊。
但某些元素無法包圍任何內容，因此他們被稱為「空元素」(emptyelement)。
最常見的空元素是斷行以及水平線。
斷行(break)在HTML文件裡，你必須特意定義斷行，例如這樣：空元素祝你在大航道學習愉快！
ALPHACamp如果你把
拿掉，在網頁裡就只會留下一個空白(請注意仍然有一個空白)。
此時你應該有注意到我們寫的是
而不是
。
其實兩種都有效，但寫
比較順應長遠的趨勢，斜線代表了標籤的結束，因此當我們寫
時，表示你對瀏覽器更明確地定義了這個標籤「結束在開始的位置」。
水平線(horizontalrules)讓我們在網頁最下方加上水平線：
恭喜你學完了HTML基本元素，就是這麼簡單！同樣，寫
或
都可以。
水平線預設的長相就是一條橫線，開始使用CSS後，你可以加上更多外觀的改造。
認識HTML、CSS是什麼，快速了解網頁設計入門寫好HTML的好處從本文中，你理解了HTML就是定義你的網頁內容，你也學到怎麼使用基本的HTML元素了。
清楚佈局你的HTML標籤，有2大好處。
一，能大幅提升之後修改網頁內容與用CSS來調整網頁樣式的效率；二，對像Google等搜尋引擎來說，他們更容易弄懂你的網頁內容，因而把你放到比較容易被使用者搜尋到、搜尋結果的前幾頁或是前幾名。
雖然目前已經有不少「所見即所得」的軟體(如Dreamweaver)，能幫你像畫圖一樣打造網頁了。
但一個好的開發者，總是用文字編輯器來撰寫HTML。
三分鐘小測驗，找到你開始自學網頁開發的入口---- 更多技術學習資源 前端 JavaScript|HTML/CSS|Bootstrap|RWD|DOM|API|AJAX|Postman|jQuery 後端 HTTP/HTTPS|Node.js|MongoDB|Git|SQL/NoSQL|Docker 其他 VSCode|WebApp|Leetcode ALPHACampSeeAllPost前端程式設計入門Search熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！Web技術CSS教學：認識語法規則與基本功Web技術演算法(Algorithm)是什麼?演算法應用的例子與場景Web技術助教開講活動回顧：網頁開發必學技巧不藏私公開Web技術LeetCode解題的思考策略，刷題的4個階段Web技術什麼是Scrum？認識Scrum的做法與它的限制Web技術CSS學習與實作經驗分享，如何建立扎實基本功Web技術為什麼要用Docker？如何用Docker構築不同MongoDB架構？Web技術API開發、測試、除錯一次到位！使用MSW快速上手MockAPIALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。
自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。
校友遍及台灣、新加坡、中國、以及全球的科技新創。
JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPGDATA&AI公開課SQL14天入門課LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved
延伸文章資訊
- 1HTML 基礎- 學習該如何開發Web
HTML（Hypertext Markup Language），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了 ...
- 2HTML教學課程(入門篇) 4個章節- 由淺入深學習HTML
在這篇「HTML教學課程(入門篇)」，你會學習到：. HTML基本概念： 開發環境、起始標籤(Opening Tag) 、結束標籤(Closing Tag)、屬性(Attribute); 進階H...
- 3HTML、CSS、Javascript(js)語法入門學習筆記 - 遊戲式學習
網頁設計css、javascript、html語法教學重點，課程隨堂筆記大公開！製作網頁常用語法介紹與範例。(王啟榮老師網頁設計教學課程)
- 4網頁設計資源彙整- Web Design Resources - 夏木樂
W3School 是一個非常完整，且內容遵循最新標準的網頁前端知識庫，所有的HTML / CSS / JavaScript 基本語法都能在這裡找到。 網站內也有語法教學與線上測試工具。
- 5HTML 是什麼？HTML 語法入門教學｜ALPHA Camp Blog
HTML 是Hypertext Markup Language 的縮寫，也就是「超文本標記語言」(請注意他是標記語言，不是程式語言)。HTML5是HTML的最新修訂版本， ...
