# 專題網頁新裝上市 # 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) * 把黑色的菜單文字設定橘色。 ## 因為這個網站的背景大部分是白色，我個人覺得印象有點還好。所以我為了讓閱覽人覺得漂亮的印象把一部分的背景設定別的顏色。還有，為了強調有些文字把有些文字也設定別的顏色。關於選顏色，我從上課時候介紹的顏色網站引用所有顏色。