###### tags: Html # Fundemental Type - HTML起手式`<!DOCTYPE html>` - Comments `<!-- -->` - `<html></html>`所有語法都要寫在這裡面 - 標籤頁名稱 ``` <head> <title></title> </head> ```` - HTML架構`<body></body>` - Paragraph `<p></p>` - Anchor `<a></a>` 可以在裡面增加超連結 1. 內頁段落`<a href="#aboutme"></a>` 2. 原頁面超連結`<a href="www.google.com"></a>` 3. 新頁面超連結`<a href="www.google.com" target="_blank"></a>` - Image `<img src=""/>` - Media `<video src="" height="" width="" controls></video>` ``` <audio></audio> ``` `<embed/>` - Division `<div></div>` -切割區塊用途 - Unordered List ``` <ul> <li></li> </ul> ``` - Ordered List ``` <ol> <li></li> </ol> ``` - Heading Font`<h1></h1>` - Tag `<div id="introduction"></div>` - 可以讓anchor超連結到網頁的特定地點 - `<header>`, `<nav>` , `<main>` and `<footer>` create the basic structure of the webpage. - `<section>`,`<article>`,`<aside>`方便辨識段落／附加資訊 # Table - Table `<table></table>` -所有表格都要寫在裡面 - Table Head`<thead></thead>` -產生和表格不同格式的效果 - Table Row `<tr></tr>` - Table Head `<th></th>` - Table Body `<tbody></tbody>` -和表頭做區分 辨識用 - Table Data `<td></td>` - Table Foot `<tfoot></tfoot>` -加總時可以使用作區別 - 指定行列語法 ``` <th scope="col">Saturday</th> <th scope="row">Morning</th> <td rowspan="2">Work</td> <td rowspan="3">Relax</td> ``` # Form - <form action="" method=""></form> - `<input>` - type 1. number 填數量 2. range(value="" min="" max="") 有游標可以按+1 -1 3. checkbox 打勾 4. radio(value="yes/no") 同意/不同意 一定要選 5. option 複選 6. list(`<datalist><option></option></datalist>`) 下拉式清單 7. submit 送出鈕 - textarea 特殊需求填寫 ## Form validation 在input裡面設定限制 - <input require> 一定要填寫 - <input minlength="" maxlegth=""> 長度限制 - <input pattern="[a-zA-Z0-9]+"> 只能輸入英文大小寫＆數字