# HTML ![](https://i.imgur.com/CJwqpsz.png) HTML是標籤語言，標準都由W3C(World Wide Web Consortium)所制定。 HTML5在2014/10/28成為標準，為最新版本的語言。 <h1 style=””></h1> 這內層的style稱為屬性，顯示的內容稱為屬性值。 ## 編碼方式 - UTG-8 (容量較大) - big-5 --- ## Visual Studio Code 這個網頁可以看到VS-code所有可以快速輸入的語法方式。 [https://docs.emmet.io/cheat-sheet/](https://docs.emmet.io/cheat-sheet/) 下載 Live Server 可以在存檔後即時更新網頁。 Alt + Shift + F 可以自動整理縮排。 --- > **可設定自動換行** > ![](https://i.imgur.com/mI2lXle.png) --- ## HTML `<html>`為根元素 - `<body>`為子元素 內容相關語法，CSS用來修改HTML標籤的預設 - `<head>`為子元素 - keyword搭配content使用 charset定義網頁的字元編碼 - http-equiv=Refresh content=”秒數, url=網址” 可新增幾秒刷新網頁 `<meta http-equiv="X-UA-Compatible" content="IE=edge">`當我們執行這一項，他會執行的最高限制IE=edge。 `<meta name="viewport" content="width=device-width, initial-scale=1.0">`網頁的寬度會是視窗的寬度，比例是1:1。 ### HTML標籤 HTML標籤是由<開始，由>結尾，中間放入標籤 --- ### meta 1. description 為此網頁的敘述 1. keywords 為這個網頁搜尋的關鍵字 1. robots 是否加入別人的搜尋 值noindex nofollow 1. author 網頁的作者 1. pragma 將網頁存取在電腦上以免下次又需要重新下載 1. expires 標明頁面何時過期 --- ## block元素(區塊) 佔一整列和元素內容長短無關，前後元素會分割換行。 block元素當容器使用時，是可以放block元素進去。 ``` - <h1> - <p> - <div> - <ul>、<ol>、<li>、<dl>、<dt>、<dd> - <figure> ``` ## Inline元素 元素的位置就是內容本身，前後元素連接著產生。 Inline元素當容器使用時，是不能放block元素進去，否則設定的屬性不會產生。 Inline元素當容器使用時，是可以放Inline元素進去。 ``` - <span> - <a> - <input> - <img> ``` strong 粗體字 em 斜體字 blockquote 縮排 q 引號 abbr 額外說明 ins 下底線 del 刪除線 s刪除線 `<a href="mailto:______> </a>` 寄送email `<a href="_____" target="_blank"> </a>` 屬性開啟新連結 --- 以下都稱為巢狀清單 ### 項目清單Unordered List - 顯示，清單項目為`<li>`，與順序無關。 ### 序號清單Ordered List 1. 顯示，清單項目為`<li>`，有先後順序。 ### 定義清單Definition List 　 顯示，清單項目為`<dt>`，清單項目說明`<dd>`，若需要新增項目或序號清單，要在`<dd>`之下新增。 ### 超連結(Hyperlink) 快速寫法：`a{}`；去除下底線用CSS元素:text-decoration: none。 1. 若為不同伺服器要用`<a href=”www.超連結"></a>`的方式連結。 2. 若為同伺服器，路徑 ` <a href=”資料夾/資料夾/html檔案名"></a>`的方式連結。 - **相對路徑**會使用「/」，網頁不會與當前網頁基準url進行綁定，只要連結在電腦/web server皆可正常運作。 - **絕對路徑**會使用「\」 3. 若為同一個網頁內，稱為書籤超連結，路徑`<a href=”#(ID取得的路徑)"></a>`的方式連結。 4. 電子郵件為固定寫法`<a href=”mailto:(你的信箱)"></a>` ### 圖片(image) `<img **src**=”http://圖片網址 或 資料夾/檔案路徑.png”>` - **alt**=””為不顯示圖片時以文字替代的顯示 - **title**=””當滑鼠移動到圖片時顯示的文字 ## figure元素 內容可以是圖片、視訊、相片或一段引用文字、表格、程式碼… 他會縮排建立一個範圍figcaption為figure元素標題 --- ## Linking `<link rel=”” href=””>` rel=與檔案的連結關係，預設stylesheet href為與外部檔案連結 box-sizing:content padding是物件邊至內文距離 margin是從物件邊往外到top距離 ## float 1. none 預設 2. left 浮動到左邊 3. right 浮動到右邊 如果設定時，後方物件被影響了(夾在中間)，可以使用清除浮動元素{clear:both} ## table th=table heading tr=table row (ROW是->>>>，但每個開頭是從上到下) td=table data - tr 列 - th為存放表格標題的儲存格 - td為存放資料的儲存格 colspan 行合併(左右) rowspan 列合併(上下) thead 用來群組化儲存格th tbody 用來群組化儲存格td nth-child(n) 用來抓數列 ```css tbody tr:nth-child(2n){屬性:屬性值} 偶數列 tbody tr:nth-child(2n){屬性:屬性值} 奇數列 ``` text-transform: capitalize; 首字為大寫 text-align: center; 文字置中 ?:hover{} 移動至選取時所顯示 ## Form 一個控制項的完整過程－使用者輸入→傳入伺服器判斷→判斷結果正確傳入資料庫。 ### form 的重要屬性 1. action 程式路徑URL 2. method 1. get - 預設值，沒有加密(會顯示在網址上) 2. post - 3. enctype 1. application/x-www-form-urlencoded 為預設值 2. multipart/form-data 表單上有”上傳檔案”時使用 3. text/plain 傳送純文字檔 4. dataList 可新增式下拉選單(新增選項至最下方) ### 控制項設定常用(input、buttom、checkbox) - name 控制項每一個元素都要給他一個name - id 讓javascript、label抓取。 - value 使用者輸入項，會顯示的預設值，但需要手動刪除 value改成**placeholder** 可把預設字元虛化為背景，不需手動刪除，點擊即消失。 ＊可使用元素＊ - size - maxlength 限制最多輸入字元 - autocomplete=”off” 可關閉網頁預設的記憶功能 - autofocus 可讓初入網頁時，直接進入選擇的框內 - date、datetime-local、month、time、week、number、range、color ## 表單群組化 fieldset 框住一個範圍內語法呈現出外框 legend 群組標題 ``` <fieldset> <legend> 標題 </legend> <label>Email: <input type="text"></label> </fieldset> ``` 會幫你加外框 ![](https://i.imgur.com/ZGwlmdO.png) --- required 指令執行驗證 maxlength 限制長度 pattern 驗證方式： ``` [a-z,A-Z]{1}/d{8} ``` --- ### label 未定義文字可用`<label for=”指定ID”>`的方式。 範例 ``` html <input id="female" type="radio" name="gender" value="f"> <label for="female">famale</label> ``` for會抓取到ID，這樣點擊這label內的文字時，會幫你自動抓到ID跟他一樣的物件上。 若輸入disabled會取消控制項的功能。 --- ### input name 為另一個伺服器端需要抓取的值 value屬性為要回傳到哪個伺服器的值，可用ID抓取。 checked屬性為預設值設定 placeholder可以在框裡顯示提示文字 ``` <input type="text" name="___"> 顯示文字類文件輸入框 <input type="password" name="___"> 顯示密碼輸入框(不顯示*資料型態) <input type="radio" name="___"> 單選按鈕 <input type="checkbox" name="___"> 多選按鈕 <input type="file" name="___"> 夾帶檔案 <input type="submit" name="___"> 送出表單的按鈕 <input type="hidden" name="___"> 使用隱藏欄位來記錄使用者操作 <input type=”range” min=”0” max=”100” step=”5” /> 會出現一條可以拉的進度條範圍 <input type="date" name="___"> 日期 <input type="email" name="___"> 信箱 <input type="url" name="___"> 圖片 <input type="search" name="___"> 搜尋功能 ``` --- ### button <button> 要變成案件的元素 (img、文字) </button> 兩個是一樣的 <input type="submit" value="Submit review"> <button>Submit review</button> --- ### option 下拉式選單 name 為另一個伺服器端需要抓取的值 id multiple 寫入即改為複選項目 value (由此判斷值) size 可更改顯示的數量 selected 預設一開始被選中項目 ``` <select name="___"><option value="ID屬性"></option></select> ``` --- ### textarea 專門輸入多行文字輸入的框，可用cols和rows定義他的可輸入寬高。 --- ### iframe (inline frame) `<iframe src=”http://外嵌網頁內容”>` - allowfullscreen = 為允許全螢幕 - scrolling為捲軸設定 yes、no、auto - frameborder 可設定為0(隱藏)或1(顯示) - 直接在影片網址上設定靜音+自動撥放”__網址__?mute=1&autoplay=1” --- ### video ``` <video src=""> ``` src 視訊路徑 poster 視訊正在下載時顯示畫面 preload 頁面進入時要做什麼 (none；auto；metadata) controls 播放控制器 autoplay 自動播放功能 loop 從頭播放一次 ### sourse ``` <video preload controls loop> <sourse src=""> </video> ``` 可指定video播放檔案的位置 src 視訊路徑 type 指定檔案格式 codecs ? --- ### audio ``` <audio src=""> ``` src 音檔路徑 preload 頁面進入時要做什麼 (none；auto；metadata) controls 播放控制器 autoplay 自動播放功能 loop 從頭播放一次 ### sourse ``` <audio preload autoplay> <sourse src=""> </audio> ``` 可指定video播放檔案的位置 src 視訊路徑 type 指定檔案格式 --- ### 利用HTML元素直接加入新的class ``` javaScript <body> <div id="h"> </div> </body> <script> const h = document.getElementById('h'); h.className = 'myclass'; </script> ``` ![](https://hackmd.io/_uploads/BJSEnu_U3.png)