基本上網頁與HTML、CSS、JavaScript息息相關，
雖然有辦法、但很難去完整地分別拆開來講述。
(每次上W3School想從純HTML tag從頭看學起，卻總是半路殺出一堆JS咬金，令人望之卻步...到了最後，只看前十幾個tag後就放棄學網頁了，畢竟上百個標籤、文件流水式的教材，可能沒有一個目標或動手實踐的項目，很難引起我的興趣來繼續學習)
這次有辦法學得比較完整，是完整的將六角學院的HTML、CSS、JS教學影片看過一次，
收穫頗大，並對自己較有興趣的部分，在網路上蒐集資料後彙整。
將網頁拆分出來，分成三個部分
使用瀏覽器對這篇文章 按右鍵 => 檢查原始碼
所有在版面上看到的內容(所有中文字)都被包在HTML標籤中。
這也是爬蟲會爬取資料的項目之一，因為對他們來說，他們要的是"資料"，
也就是文字、內容，
畢竟樣式、美觀或者行為、動作對他們來說並不重要。
換個方式來說，拿人類來比喻，
HTML 是一個人的骨架
CSS 是一個人身上的所有皮膚
JavaScript 是一個人表現出來的行為
能用HTML、CSS搞定的事，就不要動用JS
如果是長在我身上就能搞定的東西，我可不想額外花力氣去做動作
畢竟這是三種不一樣的語言，動作邏輯上少一些在專案上也比較好管理及維護
但如果不寫JS時，產生出的代價太大，那就另當別論。另外前後端也是，如果前端能處理(渲染或運算)的部分就優先交由前端去做，
除非是需要交由後端伺服器運算或儲存的部分。
而有些則是前後端都做(ex:阻擋錯誤輸入)在使用體驗上及安全性上皆較高。
W3C與WHATWG兩個網頁推手組織之間有很長一段歷史淵源，
為了理念上的問題而爭論不休，好像很精彩，
他們的關係、爭吵的議題多到可以出一本小說厚度的書了，
不過好像只有少數開發者會去了解這段故事。
HTML現在已經到第五版了，
在以前的版本中(第四版)，
在網頁的最前面要先加上落落長的一段
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
用以告訴向瀏覽器 這是HTML4，拿HTML4的格式來解析！
然而第五版就這樣短短一行 <!DOCTYPE html>
簡潔有力、親民多了
<html> 這個東西，就是tag(標籤)
多數tag成對出現 指的就是<html></html>這件事情，
有頭就有尾，但也有少數有頭沒尾巴的例子。
而tag及tag裡面的所有東西則稱之element(元素)。
HTML所有代碼由上到下，一行一行來執行
最典型的範例如下
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
簡單來說，宣告完HTML5格式後，
直接用<html>裡面包<head>、<body>。(就是HTML包頭包身啦)
第一次接觸HTML時，曾好奇這樣設計的意義。阿不用尾巴嗎？
不用。
我也不知道為啥不設計個<tail>尾巴。或者怎麼不用個<start>及<end>。
另外如果要標註網頁語系(自然語言)，則可在<html>上加入lang屬性 (也可在其他區塊的tag中加入)，
如: <html lang="en">、<html lang="zh-TW">
其實繁體中文應該用
zh-Hant(漢語Han傳統Traditional)會比較恰當
繁體中文再加上台灣地區碼則是zh-Hant-TW
...
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網頁標題</title>
<link rel="icon" href="網頁左上角縮圖.ico">
<link rel="stylesheet" href="要引用進來的CSS樣式位置.css">
</head>
...
由上至下分別是：
.ico 畫素大小通常是 32x32meta 到底是什麼意思?
拿去google翻譯也只會得到"元"、"元數據" 十分抽象的名詞解釋。
這邊舉個例子，拿"拍照"這件事情來說，
照片是我們想看的內容，圖片上的風景、樹木、出現的人物，
這些是我們肉眼看的到資訊。而這張照片中有沒有看不到的資訊？
有。照片的格式、解析度、照片攝影者、拍攝日期、照片檔案大小、額外對這張照片作的補充說明等等
對這些不是內容的資訊(但這些資訊某些角度來說很重要)
就對這些資訊取了個曖昧的名字，叫作meta
針對爬蟲及搜索引擎(SEO)優化的方式，有需要用到時再回來看就好。
不過也有聽說某些方法已經過時，google已不用這樣的方式來做排名等等，端看各大搜索引擎有沒有支援。
詳情參閱google文檔或yahoo、Bing、百度等搜尋引擎的文件。
<meta name="description" content="網站的描述">
<meta name="keywords" content="最重要的關鍵字一, 關鍵字二, 關鍵字三">
<meta name="authon" content="網站作者">
<meta name="copyright" content="版權所有">
OG系列(Open Graph)，有關爬蟲、SEO
<meta property="og:title" content="標題">
<meta property="og:description" content="描述">
<meta property="og:type" content="website">
<meta property="og:url" content="xxx">
<meta property="og:image" content="xxx.png">
相對於<head>內的東西，<body>內的東西才是重頭戲阿!!
頭腦內的知識不重要，身體有沒有料才是真的
剩下的tag，就交給明天的我來介紹了。
<!-- --> 註解(comment)<!-- 我是註解，在裡面打什麼都可以 -->
<script> JS語法，JavaScript只會出現在這區塊內<script src="要引用進來的JS檔案位置.js"></script>
<script>alert("HI");</script>
<php> PHP語法，PHP只會出現在這區塊內.php 而非.html<?php
echo "Hi";
?>
因為習慣問題，開發環境我是用需要付費的IDE WebStorm
已內建許多必要的套件(但仍有少數不足)，
選擇用哪個瀏覽預覽時也挺方便的。
一般寫網頁，HTML我都會命名 index.html
副檔名取 .html、.htm 都是可以的，但我個人偏向能全寫就全寫(.html)
可以直接點擊兩下開啟檔案、也可採用架微型Server的方式來做瀏覽。
iThome鐵人賽
看影片追技術