---
# System prepended metadata

title: 2-2 - html中結構與元素_學生版
tags: [動畫互動網頁特效入門（JS/CANVAS）, 2-2, CodePen，學生版, 互動程式設計]

---

---
tags: 互動程式設計,2-2,CodePen，學生版,動畫互動網頁特效入門（JS/CANVAS）
---

# 2-2 - html中結構與元素_學生版


---


[參考網站w3big](http://www.w3big.com/zh-TW/)


---

## 在HTML，CSS註解

**Ctrl+斜線**就可以了
這樣子就會是註解
```htmlembedded=
<!--  -->
```

### HTML的註解
使用<!--與 -->將要註解的文字包起來。
例如:
<!--我是註解 -->



---




 
### 多行CSS註解的寫法
多行註解是用/* 和 */ 將註解的文字包起來，可以一次將多行的CSS註解掉。
![](https://i.imgur.com/Qcge6D5.jpg)

一樣可以使用**ctrl+斜線**即可產出

---


單行CSS註解的寫法(此方式必須在PostCSS內才可以使用)
使用的是兩條斜線//，在//之後的文字皆為註解，不可換行

 ![](https://i.imgur.com/emzIiUU.jpg)


---

### 多重選擇
ctrl加上游標選定

### 如果想要選相同的字串

使用ctrl+d

在 sublime 裡面常用的快速鍵
在Mac上使用    command d
Windows 是 ctrl d


---
#### 顯反白選定字串，按下ctrl+d，就可以自動選擇想同字串

---

alt+左鍵==>會移到第一個字

alt+右鍵==>會移到最後一個字

---
### 多數選項(ctrl與滑鼠)

![](https://i.imgur.com/V76Sufr.gif)

可以打字同時一起顯示



---

利用wiki的咖啡豆
製作一個簡易網頁

[wiki的咖啡豆](https://zh.wikipedia.org/wiki/%E5%92%96%E5%95%A1%E8%B1%86#%E7%B5%84%E6%88%90)



---

文字內容

```
動態互動網頁特效入門-html中結構與元素
咖啡豆

更多資訊(wiki)
咖啡豆是咖啡屬植物的種子，咖啡屬植物的果實大小類似櫻桃，咖啡豆即為其中的核果。
將咖啡豆烘焙加工後再磨碎成咖啡粉，即可烹製咖啡。

咖啡兩大主要經濟品種
阿拉比卡種（75-80％)
羅布斯塔種（20％）
組成
外果皮 (介紹)

內果皮 (介紹)
銀膜
果肉和種子

```

---

### 項目

操作ol (order list)與ul (unordered list)

內部要有li (list item)

```htmlembedded=
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
```


---

### 顯示圖片
img



---
### 超連結
 a

---

![](https://i.imgur.com/3pZAGc1.png)


## 最後HTML碼

```htmlembedded=
<h5>動態互動網頁特效入門-html中結構與元素</h5>
<h1>咖啡豆</h1> 
<hr>
 <a href="https://zh.wikipedia.org/wiki/%E5%92%96%E5%95%A1%E8%B1%86" target="_blank">更多資訊</a> <br> <br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Coffee_Beans_Photographed_in_Macro.jpg/220px-Coffee_Beans_Photographed_in_Macro.jpg" alt="咖啡">
 <hr>
 <p>咖啡豆是咖啡屬植物的種子，咖啡屬植物的果實大小類似櫻桃，咖啡豆即為其中的核果。</p> 
 <p> 將咖啡豆烘焙加工後再磨碎成咖啡粉，即可烹製咖啡。</p>
<h3>咖啡兩大主要經濟品種</h3>
<ul>
<li> 阿拉比卡種（75-80％)</li> 
 <li> 羅布斯塔種（20％）</li>
</ul>
<hr>
<h3>組成</h3>  
<ol>
 <li>外果皮 (介紹)</li> 
<li>內果皮 (介紹)</li> 
 <li>銀膜</li> 
<li>果肉和種子</li> 
 </ol> 

```


---



![](https://i.imgur.com/jdZlPT8.png)



---

```htmlembedded=


```

2-2 - html中結構與元素_學生版.md
目前顯示的是「2-2 - html中結構與元素_學生版.md」。