tag巢狀結構

tag底下是可以再包tag的、底下可以再包tag...
昨天也看到一些例子如<ul>包含了<li>等等，
接著<li>底下可以再包其他tag如<a>連結或<p>文字段落等等，

tag是不用錢、免費的，所以看到要用的時機就盡量用、不要怕。

但也不要用過頭，看到這樣子的寫法覺得稍微可怕了。

元素Element 結構

上圖這段HTML敘述包含了以下四個物件

1. 標籤(Tag) 就是首尾的<p>、</p>
2. 屬性(Attribute) 這邊的屬性是class，當然也有其他種屬性、或甚至自訂屬性
3. 屬性的數值(Value) 這邊屬性的值是foo，當然也有其他種數值
4. 內文、內容(Content) 這裡的屬性是一段文字This is a paragraph

四種物件都有是常見的形式之一，當然也有可能少其中一兩個，
像是:

• 有屬性沒數值、有文字內容 <p hidden>這是一段被隱藏的字</p>
  (hidden屬性不用加上數值)
• 沒屬性、有文字內容 <p>正常段落文字</p>
• 有屬性、沒文字內容 <p attribute="value"></p>

id、class、name 屬性比較

以下是三種常見又容易搞混的屬性(attribute)

• id
  id掛在任何tag上都行，
  id在網頁上只能出現一次，不能重複。
  使用a標籤指定href到對應id#ID，可用在這種目錄列上

<a href="#ID">點我跳回ID</a>

• class
  掛在任何tag上都行，
  可在一個網頁上套用在多個元素上重複使用。

• name
  name的時使用機是傳送<form>表單時，
  如果沒有name的話，填完表單送出後將不知道什麼參數對應到什麼欄位，傳送的資料不曉得如何接收。
  在radio(單選按鈕)選項、或者checkbox(多選核取方塊)底下的選項中，name可取相同的名稱來對應到多個控制元件。

<form action="index.html" method="get">
    <label>性別</label>
    <input type="radio" name="sex" value="male">男生
    <input type="radio" name="sex" value="female">女生

    <label>興趣</label>
    <input type="checkbox" name="hobby" value="movie">電影
    <input type="checkbox" name="hobby" value="music">音樂
    <input type="checkbox" name="hobby" value="comic">漫畫

    <input type="submit" value="送出">
</form>

指定誰來套用CSS樣式

CSS離不開HTML，沒有HTML怎麼會有CSS?
如果今天要綁定CSS樣式到網頁上，必須指定出他要綁在"誰"身上，就必須存在HTML。

那該如何指定HTML，讓特定的元素吃到我的CSS樣式呢？

在班級上，老師面對要整班的學生，
老師想指定一個或特定一群學生讓他們安靜、不要講話
老師有以下幾種指定的方式：

1. 「坐第二排的第5位學生，不要講話!」 (透過座位指定的方式來指定該學生element tag)
2. 「王大明，不要講話!」 (直接叫名字指定出學生的id)
3. 「B組的學生們，不要講話!」 (指定一群學生的class)
4. 「穿三角褲肌肉壯壯的男生們，不要講話!」 (指定學生的屬性attribute)

那套在HTML以及CSS上分別為:

HTML

<div>
    <p>第二排第五位學生</p>
</div>

<div id="Wang">王大明</div>

<div class="B">B組學生1</div>
<div class="B">B組學生2</div>
<div class="B">B組學生3</div>

<div title="三角肌肉壯壯">三角肌肉壯壯1號</div>
<div title="三角肌肉壯壯">三角肌肉壯壯2號</div>
<div title="三角肌肉瘦瘦">三角肌肉瘦瘦</div>
<div title="三角肌肉胖子">三角肌肉胖子</div>

CSS

div p{
    color: red;
}

.B{
    color: blue;
}

#Wang{
    color: green;
}

[title="三角肌肉壯壯"]{
    color: orange;
}

知道以上幾種指定HTML Tag標籤的方法後
再回來看Emmet自動補完套件

Emmet套件

Emmet套件是能輸入少少的字，能夠能補完接下來HTML語法，
自動完成結構化的代碼格式的外掛套件，有了這套工具讓我們在撰寫HTML變得更加快速，
一種『我寫一行，套件幫我產千百行的概念』

在WebStorm IDE上預設是按tab鍵、在VSCode上預設是按Enter自動補齊。

英文假文 lorem

能夠產出隨機單字的假文，在想看到排版又不想手動打內容時非常實用。

lorem20 產生長度20單字的假文

另外有中文版隨機假文ctlorem套件(但WebStorm IDE目前沒支援)

補齊tag、class、id

div 自動補完標籤tag
.abc 補完class的div標籤
#abc 補完id的div標籤
p.aaa、p#aaa 補完class、id的p標籤

後面加上 +

加號+連續元素

div+span+p

進入下一層 >

指定下一層的元素 >

div>a
ul>li
p>lorem10

多個元素乘法 *

一次產生多個元素的乘法*

ul>li*5

屬性 [ ]

指定屬性[]

a[href="abc"]

內文 { }

用大括號包住內文{}

RRR{天氣真好}

變數編號 $

錢字號$可當變數、編號

ul>li{$$}*5

優先順序 ( )

ul>li{$$}*3
(ul>li{$$})*3

括號()位置不同，產出兩種不同結果

隨機圖片、假圖

有隨機假文，當然也能產生隨機假圖
可以塞進<img>元素內作圖片來源使用

可調整畫素(x、y軸長度)、以及所要的照片類型

<img src="http://lorempixel.com/100/200/food/1">
<img src="https://picsum.photos/100/200">

不過這兩個網站可能流量負載過大，使用上都會有些Lag卡頓。

lorempixel 官網

nature、cats、sports 不同類型的圖

http://lorempixel.com/100/100/nature/1
http://lorempixel.com/200/200/cats/2
http://lorempixel.com/200/300/sports/3

Lorem Picsum 官網

https://picsum.photos/200/300

背景模糊化(1~10)
https://picsum.photos/seed/1/200/300?blur=1
https://picsum.photos/seed/1/200/300?blur=10

每次出現的照片都不同，很惱人？
可用seed來指定固定順序的亂數圖
https://picsum.photos/seed/1/200/300
https://picsum.photos/seed/2/200/300
https://picsum.photos/seed/orString/200/300

透過id指定照片
https://picsum.photos/id/1/200/300
https://picsum.photos/id/2/200/300
https://picsum.photos/id/3/200/300