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

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

---

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

---

## 在HTML，CSS註解

**Ctrl+斜線**就可以了
這樣子就會是註解

<!--  -->

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

---

### 多行CSS註解的寫法
多行註解是用/* 和 */ 將註解的文字包起來，可以一次將多行的CSS註解掉。

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

---

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


---

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

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

使用ctrl+d

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

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

---

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

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

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


可以打字同時一起顯示

---

利用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)

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

---

### 顯示圖片
img

---
### 超連結
a

---


## 最後HTML碼

<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> 

---


---

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