網頁設計 - HackMD

# html/css 靜態網頁設計 ## html 介紹 html全名叫超文本標記語言，他是一種標記式語言**而不是一種程式語言**，其中超文本的概念是他能夠連結到其他網頁，而標記式語言則是他使用**標記**來顯示文字、圖片等內容 :::info 檔案的副檔名為.html ::: ## css 介紹 css是用來裝飾html所呈現的網站，透過CSS，我們可以設定頁面的佈局，調整元素的外觀和樣式，以及定義適用於整個網站的全域樣式。 CSS的應用方式多種多樣。我們可以直接將樣式添加到單個頁面元素上，這種方式適用於需要針對特定元素進行樣式調整的情況。另外，我們也可以將樣式集中化地嵌入到網頁的頭部部分，或者通過鏈接或導入方式引入外部樣式表文件。 :::info 檔案的副檔名為.css ::: ## HTML元素首先，先利用html 輸出一行hello world ```html <p>Hello World!</p> ``` 一個html標籤包含起始標籤、結束標籤、內容 1. 起始標籤：```<p>```利用一對<>大小括號來聲明所指定的元素從這裡開始 2. 結束標籤：```</p>```利用一對</>大小括號夾著一個斜線來聲明所指定的元素從這裡結束 3. 內容：```Hello World!```由起始標籤和結束標籤所包含的部分就是內容 4. 標籤內還可以有屬性```<img src="圖片來源" alt="文字" />```。屬性透過空格分隔 5. 內容也可以是一個標籤```<p><strong>大寫</strong></p>``` 6. 有些元素沒有內容可以直接在起始標籤內關閉```<br/>``` ## 巢狀結構 ```html <p><strong>大寫</strong></p> ``` 這就是一個巢狀結構的範例，父元素```<p>```子元素包裹著```<strong>```，而父元素能夠引響子元素 ## html 基本程式碼架構 ```htmlmixed! <!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 1. ```<!DOCTYPE html>``` — 他是在告訴瀏覽器檔案的類型 2. ```<html>``` 元素：他是html的根元素，內部包含了所有html標籤。```lang="zh-Hant-TW"```則是他所包含的屬性用來宣告這個網頁是用html寫的 3. ```<head>``` 元素：裡面放的是不會顯示於網頁瀏覽者眼前的網頁設定。 4. ```<body>``` 元素：會包括所有要展示的html標籤 5. ```<meta charset="utf-8">``` 宣告文件使用 utf-8 這種字元編碼， 6. ```<title></title>```設置網頁標題。 7. ```<h1>Hello World!</h1>``` 網站上所要展示的文字 ## 註釋 `````` --- ~~沒錯，你已經學完了所有的html知識，你現在只要想要用到什麼功能，打開google搜索一下你就會寫html了~~ --- ## 常用標籤 ### 標題 ```html <h1>, <h2>, <h3>, <h4>, <h5>, <h6> ``` <h1>Hello World!</h1> ### 超連結 ```html <a href="網址">超連結文字</a> ``` <a href="https://tcirc.tw/index.html">超連結文字</a> ### 圖片 ```html <img src="圖片地址" alt="沒有辦法顯示圖片的替代文字"> ``` <img src="https://tcirc.tw/images/banner1.png" alt="沒有辦法顯示圖片的替代文字"> <img src="圖片地址" alt="沒有辦法顯示圖片的替代文字"> ### 影片 ```<video src="影片地址"</video>``` ### 無序清單 ```html <ul> <li>one</li> <li>two</li> </ul> ``` 效果: <ul> <li>one</li> <li>two</li> </ul> ### 有序清單 ```html <ol> <li>one</li> <li>two</li> </ol> ``` 效果: <ol> <li>one</li> <li>two</li> </ol> ### 表格 ```<tr>```橫列 ```<td>```直行 ```<th>```標題 ```html <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr> </table> ``` <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr> </table> ### 段落 ```<p>``` ### 行內容器 ```<span>``` ### 區塊容器 ```<div>``` ### 換行 ```<br/>``` ### 文字樣式 ```html <strong> - 加粗標籤，表示強調文本 <em> - 強調標籤，表示斜體文本 <b> - 粗體標籤 <i> - 斜體標籤 <u> - 底線標籤 <sub> - 下標標籤 <sup> - 上標標籤 <del> - 刪除線標籤，表示刪除的文本 <ins> - 插入線標籤，表示插入的文本 <mark> - 標記標籤，用於突出顯示文本 <small> - 小字體標籤 <code> - 程式碼內容元素 ``` <strong> - 加粗標籤，表示強調文本</strong> <em> - 強調標籤，表示斜體文本</em> <b> - 粗體標籤</b> <i> - 斜體標籤</i> <u> - 底線標籤</u> <sub> - 下標標籤</sub> <sup> - 上標標籤</sup> <del> - 刪除線標籤，表示刪除的文本</del> <ins> - 插入線標籤，表示插入的文本</ins> <mark> - 標記標籤，用於突出顯示文本</mark> <small> - 小字體標籤</small> <code> - 程式碼內容元素</code> ### 表單 ```<form>``` ### 語意結構元素 ```html <header> - 頁眉標籤，通常用於介紹內容的開頭或者導航部分 <footer> - 頁腳標籤，通常包含內容的版權信息、聯絡方式等 <nav> - 導航標籤，用於定義導航連結的部分 <article> - 文章標籤，用於包裹獨立的、完整的、可獨立分配的內容 <section> - 區域標籤，用於將文檔分成獨立的部分，通常具有相關性 <aside> - 側欄標籤，用於包含與主內容無直接關聯但可提供輔助信息的內容 <main> - 主要內容標籤，用於標記文檔的主要內容部分 <figure> - 圖片與說明標籤，通常用於包裹圖片及其相關的說明內容 ``` :::info :information_source: 他們的效果都是一樣的只差在搜尋引擎在閱讀你的網頁時，能否看懂你的網頁內容 ::: ## 選擇器 ### 元素樣式 ```html p { color: white; } ``` ### class ```htmlmixed .class1 { color: black; } .class2 { color: black; } ``` ### id ```htmlmixed #identity { color: gray; } ``` :::warning :warning: 只能套用在一個元素上 ::: 使用: ```html <p id="identity" class="class1 class2"> ``` :::warning :warning: id的優先級大於class大於元素樣式後面的class優先級大於前面的class ::: ## 延伸學習 ### SEO 搜索引擎優化，是一系列的策略和技術，旨在提高網站在搜索引擎結果頁面上的排名。這包括優化網站內容、改進網站結構、建立高質量的鏈接等。 ### javascript 一種高級的、解釋性的程式設計語言，常用於網頁開發中。它可以使網頁動態化，實現諸如交互式地圖、動畫效果、表單驗證等功能。 ### 後端開發與前端開發相對應，後端開發涉及建立和維護網站的伺服器端邏輯、數據庫管理和應用程式接口等工作。 ### node.js 一個基於Chrome V8引擎的JavaScript運行時，用於構建快速和可擴展的網絡應用。Node.js允許開發者使用JavaScript在伺服器端編寫應用程式。 ### rwd 響應式網頁設計，是一種設計方法，使網站能夠適應不同設備和螢幕尺寸，提供最佳的瀏覽體驗。通過使用彈性佈局、彈性圖片和媒體查詢等技術來實現。 ### 前端框架前端框架是一套預先撰寫好的程式碼，提供了一個結構和工具，幫助開發人員更迅速地建立交互式的網頁應用。它們通常包含了UI元件、路由管理、狀態管理等功能。 #### Vue Vue.js是一個流行的前端JavaScript框架，用於建立使用者介面和單頁應用。它的核心是一個易於理解和學習的視圖模型，以及一個靈活的生態系統，使得開發者可以快速構建動態的、高效的網頁應用。 #### React React是由Facebook開發的JavaScript函式庫，用於構建用戶界面。它以組件化的方式工作，允許開發者將用戶界面拆分為獨立的可重用組件，並通過虛擬DOM實現高效的更新。 ### Sass/SCSS ## 推薦學習資源 https://developer.mozilla.org/zh-TW/ https://www.w3schools.com/ :::info :information_source: 網站設計可以說是網路上免費資源最多的程式類別可以多加善用，並培養翻閱文檔的習慣 :::