其實HTML的格式相當單純，主要由<head></head>、<body></body>、<footer></footer>等部分組成，甚至是只要有<h1></h1>、<p></p>就能構成簡單的網頁。前陣子在欣賞高手在玩特效時無意間發現HTML的另類構成Pug，不會寫沒有關係，但至少要能理解Pug的寫法與組成(後續要練習寫也是可以)。
我看到的網頁連結：https://codepen.io/hexagoncircle/details/XWbWKwL
範例中有CSS的部分也很值得討論，圖片很每特效很夢幻，但這本次文章的主題在於HTML的組成，以下是我參考範例中的寫法，透過Pug的寫法撰寫的HTML結構：
main.main
div.title 我是標題
div#content 我是內容
如果將前面的Pug語法還原成一般的html格式則如下所示：
<main class="main">
<div class="title">
我是標題
<div id="content">
我是內容
</div>
</div>
</main>
其實從上述的例子就不難看出，Pug的寫法就是精簡的HTML寫法，不會有前後夾住內容的語法，而是透過「網頁結構」+「class或id」+空一格+「網頁內容」的格式完成。Pug的寫法相當精簡，優點在於熟悉可以快速將網頁構成提升開發效率，看上去也淺顯易懂；缺點就是許多第三方套件難以應用，也有人在討論HTML結構較為複雜時維護的難度較高。
鐵人賽至今都還沒有提到class和id是什麼。簡單的說，就是在網頁中的區塊進行標示，後續使用CSS可以抓到標示的地方，進行外觀調整；JavaScript也能抓取元素，增加網頁互動的部分。例如前述翻譯成HTML的例子中，我想將「我是內容」字體放大，在CSS中就可以透過抓取content這個id，將字體進行調整。
而id和class的差異，在於一個網頁中，一種id只能有一個，一種class可以有好多個。例如：
<div class="title">我是標題一</div>
<div class="title">我是標題二</div>
我在CSS中抓取title這個class，進行字體大小調整，標題一與標題二會同時進行字體大小的調整。
我們再來看id的部分：
<div id="title">我是標題一</div>
<div id="title">我是標題二</div>
我在CSS中抓取title這個id，進行字體大小調整，只有標題一會變動，標題二不會有任何改變，id只會抓取第一個出現的標籤。
以下範例為今天說明內容的實作頁面，透過Pug寫了網頁結構，並用CSS抓取class和id進行上色，請參考：
https://codepen.io/hamagawa76/pen/Yzavggb
iThome鐵人賽
看影片追技術