HTML - HackMD

# HTML - [Vscode下載參考影片](https://youtu.be/YtBYP7Nry1A) - [展示html和css目標] - [html基本觀念] ## 開發環境Visual Studio Code - 簡稱Vscode，是一個由微軟開發，能夠**支援多平台**的開放原始碼免費程式碼編輯器，能夠裝上對應語言的Extensions支持開發環境。 - 內建許多人性化的功能，小至顏色選擇器，大至泛用的Extensions，甚至也能將開發環境轉換成繁體版。 - 一般開發都是以**資料夾**視為一個專案的管理，所以再coding之前，it's necessary to open the folder，在此，建議先在桌面(或其他位置)新增一個資料夾 - 打開Vscode之後，就到【File】選單下選擇「Open Folder…」來開啟之前建立的資料夾。 ![](https://i.imgur.com/AjOoe7F.png) - 點選資料夾，並建立一個檔案，檔名為**.html** ![](https://i.imgur.com/0pMScBU.png) ### Extensions - Live Server - Go live - 即時更新的本機伺服器，不需存檔後重整頁面 ![](https://i.imgur.com/vTz949a.png) ## W3shool 的樣品 (https://www.w3schools.com/w3css/w3css_templates.asp) - 目標:擁有理解並製作模板的能力 ## What is HTML ![](https://i.imgur.com/okCWDBm.png) - HTML全名: Hypertext Markup Language - 超文字標字語言，用以顯示在電腦或是電子裝置上的文字 - 核心: 一層包一層 - 用途: 製作網頁，包含內容與外觀 - 在Web browser(瀏覽器)上顯示內容 - 最底層的IT語言，像是蓋房子的地基、鋼筋水泥支撐著網頁。 ![](https://i.imgur.com/ZOu67mx.jpg =300x) #### Then, what is web? - 網頁是符合HTML標準的純文字檔案。所謂遨遊網際網路，便是利用瀏覽器載入網頁，並依照HTML的標準對他們解譯。 ![](https://i.imgur.com/fCD9OYs.jpg) #### How to create a HTML file? - html:5 ```htmlmixed=  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> ``` ### What is element(元素)? - 每個元素包含開始標籤、元素內容和結束標籤，格式上大致為: `<元素名稱>元素內容</元素名稱>` - 標籤不等於元素，從HTML規格書來看，即便省略head的開始標籤及結束標籤，head元素依舊存在 - 有些元素沒有內容(像是`<br>`)，它們的結束標籤是禁止使用的 - 組成文件的標籤(tag)和屬性(attribute)，皆能統稱為element - **注意tag和element的差異** ## html架構 #### 基本元素解釋(參考DOM Tree) `<!doctype html>`:文件第一行的Docucment Type Definition，不能忽略不寫 `<html>` :根元素，是樹狀DOM結構的根源 `<head>` :放入文件相關的說明與資料，瀏覽器不會將head元素內容顯示在視窗上 `<body` :文件內容 `<title>` :元素用於顯示在索引標上的名稱，在此的名稱為Document ![](https://i.imgur.com/fJBGKJW.jpg) #### 簡單解釋`<head>`內部的元素 - 提供html檔的原數據，會被瀏覽器讀取，但不會顯示在使用者端 - `<meta>` 指定HTML文件的相關資訊，需放入`<head>`裡面、`<title>`後面 - `<html lang=”en”>` 在英文語系搜尋相關，可以省略 - `<meta charset=”UTF-8”>` 用於顯示中文 - http-equiv 、 name - 指定文件兼容性模式，像是在網頁中使用meta元素放入X-UA-Compatible。簡單來說，就是將content屬性關連到http的頭部或特定的名稱 - title元素用於顯示在索引標上的名稱，在此的名稱為Document #### heading & paragraph - `<h1>`~`<h6>`有六個層次的標題文字大小，以`<h1>`最大，以`<h6>`最小 - `<p>`為段落元素，會自行換行。此外，瀏覽器會忽略HTML中多餘的空白字元或enter鍵 ### HTML Strucrure ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> ``` <br> ![](https://i.imgur.com/QItstXe.png) - 樹狀元素的階層結構—父子關係 - 一個箱子包住其他箱子的結構 ### 群組元素 - 目的:為HTML文件增加結構，做為一個容器，將其他元素包裝在之中 - 用途:能在一群包在其中的元素，以某種**共同的風貌**出現 - 區塊的概念，任何元素都有這種特徵 | 元素 | 顯示模式 | 內容 | |------|-|-------| | `<div>` |block-level|可以包含block-level和Inline元素| | `<span>` | inline|僅包含Inline元素| >block-level特徵:Begin on new lines && 占滿整個parents元素 >inline特徵:Start anywhere in a line ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .highlight_span{ background-color: bisque; } .highlight_division{ background-color:greenyellow; } </style> <body> <p>The following span is an <span class="highlight_span">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</p> <br> <p>The following paragraph is a <div class="highlight_division">block-level element;</div> its background has been colored to display both the beginning and end of the block-level element's influence.</p> </body> </html> ``` #### Compare them ```htmlembedded= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>優木雪菜</div> <div>上原步夢</div> <div>中須霞</div> <br> <span>優木雪菜</span> <span>上原步夢</span> <span>中須霞</span> </body> </html> ``` <hr> - Let's add some stuff - difference between `<p>` and `<pre>` - `<b>` `<u>` `<s>` `<i>` `br` - `<pre>`能預先將程式格式化(preformat)，因此，空白或Enter便有意義 ```htmlmixed= <!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta charset="UTF-8"> <title>Hello HTML</title> </head> <body> <h1>h1</h1> <h2>h2</h2> <p> <b>bold</b> <br> <u>underline</u> <i>italic</i> <s>strike</s> <hr> </p>  <pre> <b>bold</b> <u>underline</u> <i>italic</i> <s>strike</s> <p> 文章 preformat的特徵 </p> </pre> </body> </html> ``` - Let's make it a bit more colorful - Priority ```htmlmixed= <!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta charset="UTF-8"> <title>Hello HTML</title> </head> <body> <h1 style="color: red;">h1</h1> <h2>h2</h2> <p style="color: brown; background-color: yellow;"> <b>bold</b> <u>underline</u> <i>italic</i> <s>strike</s> </p> </body> </html> ``` ### href - 全名為Hypertext Reference，指定超連結目標的URL，算是連結路徑 ```htmlembedded= <body> <img src="謝謝.jpg" alt="謝謝大家!!" width="200px" height="200px"> <br> <a href="https://www.youtube.com">你的水管連結</a> <br> <a href="list.html">連結到之前的html</a> <br> <a href="refer/toggle.html">其他資料夾的檔案</a> <br> <video src="療癒短片.mp4" controls width="600px">無法顯示</video> </body> ``` ### 項目符號與編號(條列式) `<ul>` 為資料加上項目符號 `<ol>` 為資料加上編號 `<li>` 指定個別的項目 ```htmlembedded= <ol> <li>type1</li> <li>type2</li> <li>type3</li> </ol> <ul> <li>type1</li> <li>type2</li> <li>type3</li> </ul> ``` #### 其他常見的設計(`<div>`變種--為了某種功能性) `<header>` `<nav>` `<nav>` `<footer>` ```htmlembedded= <body> <header> 這是header </header> <nav> <ul> <li> list_1</li> <li> list_2</li> <li> list_3</li> </ul> </nav> <article> <p> 文字 </p> </article> <footer> 這是footer </footer> </body> ``` ### 建立表格 - 利用table元素建立表格 - `<tr>`表示表格中的一列(row) - `<td>`表示表格中一列的儲存格 - `<th>`表示一列中，標示標題的儲存格 ```htmlembedded= <body> <table> <tr> <th>Title1</th> <th>Title2</th> <th>Title3</th> </tr> <tr> <td>1-1</td> <td>2-1</td> </tr> <tr> <td>1-2</td> <td>2-2</td> </tr> </table> </body> ``` #### How about column? - `<colgroup>`針對表格的直欄做分組，並指定各組的形式 - 以`<col>`指定一整欄的形式，沒有結束標籤，且必須和`<colgroup>`並用 - span屬性:`span="n"`，將連續n個欄視為一組 ```htmlembedded= <body> <table> <colgroup> <col span="2" style="background-color: red;"> <col span="2" style="background-color: blue;"> </colgroup> <tr> <th>Title1</th> <th>Title2</th> <th>Title3</th> </tr> <tr> <td>1-1</td> <td>2-1</td> </tr> <tr> <td>1-2</td> <td>2-2</td> </tr> </table> </body> ``` ### Form & Input - `<form>`用於在HTML內插入表單 - `<input>`用來定義控制元件。元素內，重要的屬性是type和name(也可以用id)，前者決定出輸入類型，後者則為元素命名。 - `<select>`和`<option>`做搭配，呈現下拉式表單中的選擇項目 - `<label>`指定某input的標籤元素，常搭配for屬性，用以指定標籤文字和表單欄位發生的關聯 <hr> ```htmlembedded= <body> <form> <input type="radio"> <label for="types">type1</label><br> <input type="radio"> <label for="types">type2</label><br> <input type="radio"> <label for="types">type3</label><br> <input type="text" placeholder="輸入名字"> </form> <form> <select name="type" id="type"> <option value="type1">type1</option> <option value="type2">type2</option> <option value="type3">type3</option> </select> <input type="button" value="按鈕"> </form> </body> ```