在HTML5中新增了一些具有"語意 (Semantic)"的標籤，
用以取代隨處可見、不具任何意思甚至純粹給排版用的 <div>、<span>。
Semantic elements = elements with a meaning.
就是希望如下圖，從左改到右 (順便讓廣大的信眾們認識更多英文單字)
(並沒有硬性規定哪個區塊一定要擺在哪個位置)
這樣一來會比純粹使用<div>來的更富具體意義，增進SEO。
目前有以下具有語意的標籤：
<header> 首要區塊、標題摘要，可用於某區塊內的標題或整個網頁的標題<nav> 導覽列，放選單連結、連到內部或外部網站<main> 主要內容資訊，在網頁中只會出現一次<article> 放獨立表達、獨立於上下文的文章內容(self-contained content)<section> 與內容相關的獨立區塊，放章節、介紹、訊息
(<article>、<section> 沒有一定要誰包住誰)
<mark> 放被標記或被強調的文字<details> 定義額外的細節、資訊，讓使用者可以觀看或隱藏<summary> 為<detail>定義一個可見的標題、摘要
<figcaption> 定義圖片區塊<figure>的標題<figure> 完整內容的圖片區塊，包含照片標題及說明<aside> 放與內文無直接關聯的側邊欄。如:側邊選單、廣告、推薦文章<time> 時間日期<footer> 結尾、作者版權資訊
接下來要準備進入CSS樣式表的階段了。
CSS(Cascading Style Sheets)中文為階層式樣式表。
樣式表 顧名思義描述了元素長的樣子、元素的風格(Style)。
階層式 或者叫做級聯，是層層階階的關係，表示元素會受上一代、上上一代、表現出來的特性會受到世世代代的影響；當同時有多個樣式生效時，元素會按照級別順序套用各自對應的樣式。也許看到這張圖較能理解階層的意思(類似於族譜、基因遺傳圖)。
CSS一定要搭配HTML、沒辦法單獨使用，
就如同一個人要有骨架，骨架長起來 (股價漲起來?) 皮膚才有地方可以長。
樣式(Style)有4種引入方式，來讓HTML能套用到對應樣式，
分這麼多種，第一次接觸時完完全全搞混了。
但其實嚴格來說，引入方式只分成前三種。
將樣式style="..."屬性寫於HTML檔案，
寫在<tag>內作為該標籤的屬性之一，與標籤同一行，所以叫做行內是行內，不是內行。 行內不一定內行
...
<p style="color:blue; background-color:yellow;">段落文字</p>
...
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color:blue; background-color:yellow;">段落文字</p>
</body>
</html>
優點：針對標籤各別作指定，淺顯易懂、一目瞭然，不容易指定錯誤
缺點：如果同時多處地方要改，不方便吶
將樣式與對應元素用<style>包起來，
通常會將style標籤寫於HTML檔案的<head>之中。
...
<style>
p{
color:blue;
background-color:yellow;
}
</style>
...
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color:blue;
background-color:yellow;
}
</style>
</head>
<body>
<p>段落文字</p>
</body>
</html>
優點：把樣式從Body拉出來到上方，方便統一管理
缺點：拉的不夠徹底，因為下面有更徹底的方式
將樣式與對應元素寫於CSS檔案，
在從HTML內部透過link連結到CSS檔案。
這次不用包<style>標籤、也不用寫style="..."屬性，
但引入時要加上<link>標籤，這一行通常會放在<head>裡面。
...
<link rel="stylesheet" href="style.css">
...
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>段落文字</p>
</body>
</html>
index.css
p{
color:blue;
background-color:yellow;
}
優點：全部都拉出來了(?這句話怪怪的) 樣式全拉到外部成為一個.css檔案。
缺點：嗯... 我暫時想不到。
樣式寫法與 3. 一樣，
但這裡將樣式寫於另一個CSS檔案內，再由別的CSS檔案import他，然後才被HTML套用。
@import "style1.css";
@import url("style2.css");
...
@import寫法可加上url、也可不加。
@import必須寫於CSS檔案中的最前面。
(也合理，不然如果放最後面才import，原本寫好的CSS 被import進來的CSS蓋掉怎麼辦)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<p>段落文字</p>
</body>
</html>
a.css
@import "index.css";
index.css
p{
color:blue;
background-color:yellow;
}
iThome鐵人賽
看影片追技術