---
# System prepended metadata

title: 專題網頁新裝上市

---

# 專題網頁新裝上市
### 此網站使用到的HTML & CSS 元素簡介：
**HTML：**
![](https://i.imgur.com/p10wuJX.png)
**header：**
文件區的頁首
**a：**
超連結元素，建立超連結設定
**ul & ol：**
ui：用來定義一個無排序的項目清單列表
ol：用來定義一個有排序的項目清單列表
**li：**
用來顯示個別項目的標籤為，顯示文字清單或超連結清單等，是網頁文章內容排版常用到的清單顯示技巧。
**i：**
標示斜體文字，在HTML5中代表的是<font color=blue>聲音、感情、思考、船舶名稱、或不同的語言類別</font>。
**menu：**
\<menu> 標籤定義命令列表/菜單。
\<menu> 標籤用於上下文菜單、工具欄以及列出表單控件和命令。
**span：**
\<span> 標籤是用來當作容器 ，用來包裹文字或其他行內的 HTML，用途是方便給 CSS 做樣式排版或方便給 JavaScript 做互動操作，至於 \<span> 本身沒任何特殊意義也不帶任何標籤語意。
![](https://i.imgur.com/opwNXhp.png)
**section：**
通常是使用在<font color=blue>標註文件區域</font>，在此區域內會有一個標題或多個標題。在實用上，通常會將段落資料或是小標題資料放在元素內。
\<section>元素算是HTML的<font color=blue>區塊層級元素</font>，在這種層級元素內的標題會被自動降一級輸出。
**img：**
用來在 HTML 文件中加入圖片
**h(n)：**
n=1,2,3,4,5,6
數字越小字型越大，建立標題時會使用的元素
**p：**
用來描述一段文字段落，瀏覽器預設會在段落間做換行和留邊距
**b：**
將元素內的文字轉為粗體文字
**canvas：**
利用程式腳本在這個元素上繪圖
![](https://i.imgur.com/54iBiwD.png)
**footer：**
footer區又稱<font color=blue>文件頁尾區</font>，指的是<font color=blue>網頁或文件的下方區域</font>。
**CSS**
![](https://i.imgur.com/WYTG9m8.png)
**meta & title：**
標準的 \<meta> 標籤沒有結尾，直接將參數寫在 \<meta> 內即可，一個網頁內可以有很多個不同的 \<meta> 標籤，全部都要寫在 head 標籤內，內文中的 title 標籤是用來標示網頁標題用的，可以寫在 \<meta> 標籤之前，也可以寫在 \<meta> 標籤之後。
HTML meta 標籤的功能有 name 與 http-equiv 以及 charset 的語法。
此網站用到第一種 name 的語法。
![](https://i.imgur.com/brzz8RX.png)
**style：**
\<style> 用來設定 HTML 文件的樣式，在 \<style> 裡面你可以寫 CSS 來排版瀏覽器，更改字體顏色或是背景顏色等。
### 修改分享內容：
因為鋼琴本身顏色比較統一，所以修改的部分只有背景以及一些字體的顏色
鋼琴的黑白本身對比明顯，所以剩下的配色我認為越淡越好，如果太鮮豔可能會太突兀