---
# System prepended metadata

title: 專題網頁新裝上市

---

# 專題網頁新裝上市
# HTML元素

![](https://i.imgur.com/NYihknA.png)
```
<!DOCTYPE html> 宣告：文件類型（doctype）

<html> 文件格式：檔案的開頭與結尾，包含了所有顯示在這個頁面上的內容。

<head> 抬頭區段：描述文件的資訊，裡面放的是你想涵括的重要資訊，如「網頁主題」

<meta> 網頁文件資訊：tag 用來描述 HTML 文件 (document) 的
       元資訊 (metadata)，透過 <meta> 我們可以設定很多不同類型的網頁資訊。

<title> 網頁主題：必須放在抬頭區段，呈現於網頁瀏覽者眼前的網頁標題
```
![](https://i.imgur.com/56gw0Cs.png)
```
<link> 連結外部資源

<script> 能嵌入或引用要執行的程式碼，使用語法 (e.g. JavaScript)
```
![](https://i.imgur.com/c0Gvpgv.png)
```
<body> 內文區段：內容所在，網頁內容的主要部分，網頁大多數的內容如文字、
       圖片、影片、表單、表格 ... 等元素，都是寫在 body 標籤內

<div> 文件內區段：它可以成為樣式化用途（使用 class 或 id 屬性）、
      或是共享如 lang 同一個屬性的元素集合。

<img> 用來在 HTML 文件中加入圖片 (images)

<nav> 定義導覽列鏈結
```
![](https://i.imgur.com/fouC8gA.png)
```
<span> 行內元素

<ul> 無序清單

<li> 條列項目

<a> 超連結：加上連結
```
![](https://i.imgur.com/qwGyAQD.png)
```
<p> 描述文字段落
```
![](https://i.imgur.com/sOr7Knr.png)
```
<h2> 文件標題：讓你呈現這些內容的主題，標題字 1 至 6 級 
```
![](https://i.imgur.com/6m840ra.png)
```
<br> 換行
```

# 修改的風格配色

1.
![](https://i.imgur.com/hHlkGTM.jpg)
![](https://i.imgur.com/yvGuGoV.jpg)


* 把白色背景設定黃綠色。




2.
![](https://i.imgur.com/OZer2ii.png)
![](https://i.imgur.com/VmQSpmz.png)


* 把白色背景設定水色，然後把在中間黑色文字設定藍色。
* 還有把在左上的白色文字設定藍色跟黑色。



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

* 把白色背景設定黃色，還有把黑色文字設定紅色跟紫色。




4.
![](https://i.imgur.com/vaRBXzC.jpg)
![](https://i.imgur.com/C3YaPTb.jpg)



* 把黑色的菜單文字設定橘色。


## 因為這個網站的背景大部分是白色，我個人覺得印象有點還好。所以我為了讓閱覽人覺得漂亮的印象把一部分的背景設定別的顏色。還有，為了強調有些文字把有些文字也設定別的顏色。關於選顏色，我從上課時候介紹的顏色網站引用所有顏色。












