接續昨天的進度，今天要學的是網頁三大組成元素的第一個-HTML，至於為什麼要先學HTML呢?這邊我覺得有三個比較重要的原因。
一.HTML是網頁的骨架，負責建立網頁的內容架構，例如:標題、段落、圖片、表格、按鈕等都是依靠HTML標示出來的
二.沒有HTML的話CSS及JS(JavaScripts)便沒有對象可以作用，因為CSS是負責對HTML的元素進行美化的，而JS則是使HTML元素有互動的功能
三.通常在各個方面都會遇到HTML，例如網頁設計、網站攻防、前端優化及爬蟲(一種自動瀏覽工具)都一定會遇到HTML，因此能看懂HTML的基本語法非常重要
上面講了這麼多，所以到底甚麼是HTML呢? HTML的中文全稱叫做超文本標記語言，英文原文則是HyperText Markup Language，是一種用來建立網頁內容與結構的語言。與C++或Python不同，HTML並不是一種程式語言，而是一種標記語言，透過一組標籤(Tag)來告知瀏覽器標題、圖片、影片等。
以下是一段簡單的HTML範例:
<!DOCTYPE html>
<html>
<head>
<title>My First Web</title>
</head>
<body>
<h1>welcome to my web</h1>
<p>this is a paragraph </p>
<img src="photo.jpg" alt="my photo ">
<a href="https://example.com">click me! </a>
</body>
</html>
我們先從結構來進行解釋好了，接下來在講解標籤的部分，以循序漸進的方式來進行。
<!DOCTYPE html>:告訴瀏覽器這是一份HTML5的文件
<html>:整個HTML文件的根元素，包裹的範圍到</html>為止
<head>:放置網頁資訊的地方，如標題、編碼等
<body>:放置我們實際要顯示的內容，例如文字段落，圖片及影片等內容
這些大概就是HTML最基本的架構，接下來我們來講常見的HTML標籤:
<h1>~<h6>:標題(以h1為最大，h6則為最小)
<p>:英文paragraph的縮寫，裡面放置段落文字
<a href="網址">:功能為超連結
<img src="檔案" alt="說明">: 圖片
<br>:換行
<hr>:水平線
<strong/em>:加粗/斜體
除了以上之外，HTML的標籤也可以擁有「屬性」，我們通常會裡用屬性來設定更多的細節。
範例:
<img src="cat.jpg" alt="一隻貓" width="300">
img src="檔案"是指圖片的檔案來源，alt則是在圖片無法載入的情況下會顯示出來width/height則是用來設定尺寸
今日小結
總而言之，HTML可以說是網站要能夠顯示東西的關鍵，也是網站的骨架，因此熟悉並且讀懂可謂是相當重要，是我們新手必須花時間學習必要項目之一。明天我將會介紹網頁基本架構2-CSS!
iThome鐵人賽
看影片追技術