HTML筆記 === ###### tags: `web` `frontend` ## HTML5 1. 是標記（markup）語言，以 tag 組成 Ex: ``` <tagname> ``` 2. 每組 tag 稱之為 element(元素) Ex: ``` <tagname>content</tagname> ``` 3. 每組 tag 描述的內容不同 Ex: ``` <html>、<body>、<h1>、<p>...等 ``` 4. 各組 element 以樹狀結構形成 ### DOCTYPE - 需是第一行代碼 - 讓瀏覽器知道該如何來渲染網頁 - 沒寫、錯置、誤寫，都會被認定為 quirks mode(怪異模式) ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>我是標題</title> </head> <body> </body> </html> ``` ## 標題 h1~h6，瀏覽器在解析時會有權重之分 ```html= <h1>我是標題</h1> ``` ## 段落 ```html= <p>文字段落</p> ``` ## 語意標籤 header、aside、section、article、footer - 可表達資料的意義 - 讓頁面結構化 - 搜尋引擎會依照語意來分析網頁 ## 坑 - Text 中的空白，不管連續幾個 space、tab，都只會被渲染出一個空白，可用 ``&nbsp`` - 設定編碼避免中文亂碼，並使用 UTF-8 編碼儲存檔案 ```html= <meta charset="UTF-8" /> ``` ## 小東西 平方 ```htmlmixed= e = mc<sup>2</sup> ``` 斜體 ```htmlmixed= <i>我是斜體</i> ``` 粗體 ```htmlmixed= <b>我是粗體</b> ``` 空白 ```htmlmixed= <p> &nbsp我前面有一格空白 <!-- 也可以用全形空白 但是其他非中文編碼會出現亂碼 --> </p> ``` 換行 ```htmlmixed= <br /> ``` 水平線 ```htmlmixed= <hr /> ``` ## 連結 target為開啟方式，可指定開啟到的視窗名稱(如搭配iframe)，若是沒有同名視窗，則另開新分頁。 ``_blank``為在新分頁中開啟(不會直接從當前頁面中跳轉) ``_self``為當前頁面開啟 ```htmlmixed= <a href="#" target="_blank">連結</a> ``` 連結可以做成書籤型式 ```htmlmixed= <a href="#s5">第五章</a> <!-- 也可以跳到別的頁面中的某id --> <a href="html/page2.html#s5">第五章</a> <p id="s5"> ... </p> ``` Email連結 ```htmlmixed= <!-- 主旨可不打,即mailto:...就好 --> <a href="mailto:123@abc.com?subject=Hello!">123@abc.com</a> ``` ## 圖片 ```html= <img src="img/logo.png" title="移動到圖片出現的描述" alt="死圖出現的描述"/> ``` 路徑分為**相對路徑**、**絕對路徑** - 相對路徑:``img/logo.png`` - 絕對路徑:``http://xxx/xxx/logo.png`` ## 清單 清單有兩種ul(前面都是點點)、ol(有數字排序) 用法 ```html= <ul> <li>abcd</li> <li>fghj</li> <li>123</li> <!--可使用巢狀--> <ul> <li>456</li> <li>789</li> </ul> ... </ul> ``` ```html= <!--可加可不加開始編號--> <ol start="5"> <li>abcd</li> <li>fghj</li> <li>123</li> ... </ol> ``` ## 表格 ```htmlmixed= <!--th是標題的意思 其他項目用td--> <table> <caption>我是表格標題</caption> <tr> <th>我是第一列第1行</th> <th>我是第一列第2行</th> </tr> <tr> <td>我是第二列第1行</td> <td>我是第二列第2行</td> </tr> </table> ``` 合併 colspan:合併指定欄數 rowspan:合併指定列數 ```htmlmixed= <table> <tr> <th colspan="2">星期1&星期2</th> <!-- <th>星期2</th> --> <th>星期3</th> </tr> <tr> <td>國</td> <td>英</td> <td rowspan="2">數學</td> </tr> <tr> <td>物理</td> <td>化學</td> <!-- <td>數學</td> --> </tr> </table> ``` ## 表單 在form中建立input，有多個input可以用``fieldset``包起來。 ### label ``label``可以在輸入欄位前面加上文字，for以及id的指定可以使點擊label文字時，也點擊了輸入欄位。 ```htmlmixed= <!-- 用法1 --> <label><input type="radio" name="sex" value="m">男性</label> <!-- 用法2 --> <input type="radio" name="sex" value="m" id="man"> <label for="man">男性</label> ``` **Attribute**: - ``type``:輸入類型，``text``,``password``,``file``,``color``,``date``,``reset``,``submit``,``image``,``hidden`` - ``action``:表單送出目的地 - ``placeholder``:未輸入時顯示在表單中的文字 - ``method``分為``post``、``get``:表單訊息出現在網址(預設) - ``name``:傳送到資料庫時的名字,``value``:傳送到資料庫時的值 - ``maxlength="20"``:輸入不能超過20個字元 - ``minlength="20"``:輸入不能小於20個字元 - ``required``:要求此欄必須輸入 - ``pattern``:正則式 ```htmlmixed= <!-- 表單內容若是含有上傳檔案,須加上enctype... --> <form action="..." method="post" enctype="multipart/form-data"> <h2>資料</h2> <input type="hidden" name="isNCNU" value="true"> <label for="mail">電子郵件:</label> <input id="mail" type="text" placeholder="請輸入電子郵件" name="mail"> <label for="photo">Photo:</label> <input type="file" id="photo" name="photo"> <!-- submit、image 皆為提交 --> <input type="submit" value="送出"> <input type="image" src=""> </form> ``` ### fieldset ```htmlmixed= <fieldset> <!-- input前可用可不用li --> <legned>我是說明文字</legned> <li><input type="text">姓名</li> <li><input type="text">身分證</li> <li><input type="image" src=""></li> </fieldset> ``` ### radio、checkbox 可加上``checked``預設勾選 ``radio``為單選 ``checkbox``為複選,可以在name加上``[]``,儲存多個選項 ```htmlmixed= <h2>性別</h2> <input type="radio" name="sex" value="male">男性 <input type="radio" name="sex" value="women">女性 <h2>興趣</h2> <input type="checkbox" name="hobby[]" value="movie">看電影 <input type="checkbox" name="hobby[]" value="music">聽音樂 <input type="checkbox" name="hobby[]" value="commic">看漫畫 <br> <input type="submit" value="送出"> ``` ### select、textarea 可加上``selected``預選選取 ``select``為下拉式選單 ``option``為選單中的選項 若``option``沒有設定``value``則回傳內容 ``textarea``類似留言板的形式 ``cols``表一列可以輸入的字數 ``rows``表總共有幾列 ```html= <h2>生日</h2> <label for="birth">出生年</label> <select name="birth" id="birth"> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> </select> <h2>想說的話</h2> <textarea name="content" cols="30" rows="10"></textarea> <br> <input type="submit" value="送出"> ``` ### pattern 詳細可看W3C: https://www.w3schools.com/tags/att_input_pattern.asp ```htmlmixed= <form> Email: <input name="mail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"> </form> ``` ## iframe 可以在當前頁面中嵌入另外一個網頁 Ex:粉絲團、影片、Blog... ```html= <iframe src="要嵌入的網頁網址" width="寬度" height="高度" frameborder="0、1(設0沒有框線)"></iframe> <p><a href="https://www.w3schools.com/html/" target="iframe_a">W3Schools HTML</a></p> <p><a href="https://www.w3schools.com/css/" target="iframe_a">W3Schools CSS</a></p> <iframe height="300px" width="100%" name="iframe_a"></iframe> ``` ## head常見語法 ```html= <head> <meta charset="UTF-8"> <title>HTML</title> /*網站標題旁的小圖示*/ <link rel="shortcut icon" href="favicon.ico"> <meta name='keywords' content='網站關鍵字' /> <meta name='description' content='網站描述文字' /> <meta property="og:title" content="FB的標題" /> <meta property="og:description" content="FB的描述"> <meta property="og:type" content="website" /> <meta property="og:url" content="FB上的網址" /> <meta property="og:image" content="FB的圖片" /> <link href="圖片路徑" rel="apple-touch-icon" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <link rel="stylesheet" href="CSS檔案路徑"> <script type="text/javascript" src="JS檔案路徑"></script> </head> ``` ## 推薦好物 Yahoo工程師開發的框架，RWD或是button、table、form的寫法值得參考 http://purecss.io/ <style> .ui-infobar { display: none; } </style>