---
# System prepended metadata

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

---

---
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中結構與元素
<h1>咖啡豆</h1>
<hr>
<a href="https://zh.wikipedia.org/wiki/%E5%92%96%E5%95%A1%E8%B1%86#%E7%B5%84%E6%88%90">更多資訊(wiki)</a><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" width=200><hr>
咖啡豆是咖啡屬植物的種子，咖啡屬植物的果實大小類似櫻桃，咖啡豆即為其中的核果。
  
將咖啡豆烘焙加工後再磨碎成<b>咖啡粉</b>，即可烹製咖啡。
</p>
<h2>咖啡兩大主要經濟品種</h2>
<u1>
<li>阿拉比卡種（75-80％)</li>
<li>羅布斯塔種（20％）</li>
  </u1>
<h2>組成</h2>
<u1>
<li>外果皮 (<a href="https://www.satur.com.tw/blog/posts/%E5%92%96%E5%95%A1%E6%9E%9C%E7%9A%AE%E7%9A%84%E9%81%8B%E7%94%A8" target="_blank">介紹</a>)<img
src="https://cdn0-manfashion.techbang.com/system/images/94917/original/fe17b2c45e4485c875c669022243bb94.jpg?1561606860" width=50></li>
<li>內果皮 (介紹)</li>
<li>銀膜</li>
<li>果肉和種子</li>
  </u1>

```


---



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



---

```htmlembedded=


```

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