HTML基礎整理
阿新 • • 發佈：2020-08-06
Web概述
1 瀏覽器核心
- JS引擎
- 渲染引擎
- Trident（IE核心）；EdgeHTML（Edge核心）
- Gecko（Firefox核心）
- webkit（Safari核心）
- Blink（Chrome核心）
2 Web標準
- 結構標準：用於對網頁元素進行整理和分類，主要包括XML和XHTML兩部分，即.html。
- 樣式標準：用於設定網頁元素的外觀樣式，主要指CSS，即.css。
- 行為標準：指網頁模型的定義及互動的編寫，主要包括DOM和ECMAScrpit兩部分，即.js。
HTML
1 HTML基本格式
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
2 WebStorm常用快捷鍵
<!-- >：下一個子標籤 *：多少個標籤 $：標籤的名稱序號 {}:標籤的內容 []:標籤的引用屬性 --> <!--輸入：h1,按tab鍵--> <h1></h1> <!--輸入：div#abc,按Tab鍵--> <div id="abc"></div> <!--輸入：div.abc,按Tab鍵--> <div class="abc"></div> <!--輸入 ul>li*5>a[href=#]{我是第$個} 再按tab鍵--> <ul> <li><a href="#">我是第1個</a></li> <li><a href="#">我是第2個</a></li> <li><a href="#">我是第3個</a></li> <li><a href="#">我是第4個</a></li> <li><a href="#">我是第5個</a></li> </ul> <!--輸入 li*3>div.img>img[src='images/$.jpg'] 再按tab鍵--> <li> <div class="img"><img src="images/1.jpg" alt=""></div> </li> <li> <div class="img"><img src="images/2.jpg" alt=""></div> </li> <li> <div class="img"><img src="images/3.jpg" alt=""></div> </li> <!--快速生成for迴圈--> <script> /* for迴圈：輸入itar,再點選tab鍵*/ for (var i = 0; i < array.length; i++) { var obj = array[i]; } </script> <!--div#tab1+div#tab2--> <div id="tab1"></div> <div id="tab2"></div> <!--引入 link 加tab鍵--> <link rel="stylesheet" href=""> <!--引入css link:css 加tab鍵 --> <link rel="stylesheet" href="css/mycss.css"> <!--引入js script:src 加tab鍵--> <script src=""></script> <!--html中插入js script 加tab鍵--> <script></script> <!--input:button 加tab鍵--> <input type="button" value=""> <!--form:get--> <form action="" method="get"></form> <!--form:post--> <form action="" method="post"></form>
3 HTML常用標籤
<hr/>水平分割線標籤 <br/>換行標籤，只顯示一行 <p></p>段落標籤 <strong></strong>加粗標籤 <em></em>斜體標籤 特殊符號標籤 <img src="path" alt="text" title="text" width="x" height="y"> 圖片路徑 圖片丟失提醒資訊 滑鼠懸停顯示資訊 寬度 高度 <a href="path" target="目標視窗位置"></a> target常用屬性：_blank:在新標籤中開啟 _self:在當前頁面開啟 <!--錨鏈接--> <a name="top"></a> ... <a href="#TOP">BACK TO TOP</a> 設定a標籤name屬性，通過href指定跳轉 <!--列表--> <ul><li></li></ul>無序列表 <ol><li></li></ol>有序列表 <dl>自定義列表 <dt></dt>列表名稱 <dd></dd>列表內容 </dl> <!--表格--> <table border="1px"> <tr><!--行--> <td colspan="4">1-1</td><!--列 colspan跨列--> </tr> <tr> <td rowspan="2">2-1</td><!--列 rowspan跨行--> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> <!--音視訊 controls：載入控制元件顯示視訊 autoplay：自動播放 --> <video src="path" controls autoplay></video> <audio src="" controls autoplay></audio> <!--iframe內聯框架--> <iframe src="" name="flag" frameborder="0"></iframe> 引用頁面地址 框架標誌名 邊界屬性 <a href="path" target="flag"></a> <!--表單 action:表單提交的位置，可以是網站，也可以是一個請求處理地址 method:包含get和post兩種方式，前者高效但不安全，後者使用場景更多 --> <form action="path" method="get/post"> <!--文字輸入框 input type:通過type屬性自動適應方式，可取text表示文字輸入，password表示密碼輸入，submit表示提交，reset表示重置 value:表示元素預設顯示的初始值，type為選擇框時(radio/checkbox)必須為其指定初始值 checked:當type為radio或checkbox時，表示是否預設選中 name:表示組，也表示該標籤的屬性，在選擇框時需要將name屬性值置為相同 初級驗證:placeholder-預設填充資訊;required-非空判斷;pattern-正則表示式 --> <input type="text" value="values" checked></input> <input tpye="radio" value="male" name="gender"/>男 <input tpye="radio" value="female" name="gender"/>女 <input type="file" name="files"/> <input type="button" value="上傳檔案" name="upload"> </form> <!--下拉列表框--> <select name=""> <option value=""></option> </select> <!--文字域--> <textarea name="" id="" cols="30" rows="10"></textarea>
4 網頁基本頁面結構分析
| 元素名 | 描述 |
|---|---|
| header | 標記頭部區域的內容 |
| footer | 標記腳步區域的內容 |
| section | Web頁面中的一塊獨立區域 |
| artical | 獨立的文章內容 |
| aside | 相關內容或應用（常用於側邊欄） |
| nav | 導航類輔助內容 |