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