3.1 html基礎知識 · 前端學習筆記

## 1.開始結束標簽 ``` //start tag <body> //end tag </body> ``` >[danger]`<br/>`沒有開始標簽 ## 2.HTML標簽結構 ``` <html> <head> <meta></meta> <title></title> <link></link> <script></script> </head> <body> //僅body標簽內容可見 ... </body> </html> ``` ## 3.網頁調試 ![](https://box.kancloud.cn/0060e5621f8a9c9216995b6600854c3e_859x721.png) >f12 調出控制臺 >shift+↓/↑，↑/↓，快速調大小 ## 4.盒子模型 ![](https://box.kancloud.cn/e884a52adb8b59acc66c3f0f20922e3a_213x180.png) `box-sizing`設置為`border-box`給元素`padding,border`不會改變它的`width,height` ``` div{ box-sizing:border-box; } ``` ![](https://box.kancloud.cn/c7bcc2f9dc3c270a8e57fa02f45fc407_711x486.png) ## 5.HTML常用標簽 #### **塊標簽特點** * 獨占一行 * 可以設置width，height * 可以設置margin-top，margin-bottom ``` <h1>~<h6> //title <p></p> //paragrahp <div></div> //divide <ul> //unordered link <li></li> //list item </ul> <dl> //define list <dt></dt> //define term <dd></dd> //define description </dl> ``` ***** #### **內聯塊特點** * 并排顯示 * 能設置width，height * 能設置margin-top，margin-right ``` <img></img> //images <input></input> //input輸入框 <button></button> //button按鈕 ``` ***** #### **內聯標簽特點** * 并排顯示 * 不能設置width，height * 不能設置margin-top，margin-botom ``` <a></a> //link <span></span> //定義文檔中的節 <strong></strong> //定義強調文本 <em></em> //定義強調文本 <i></i> //顯示斜體文本效果 <label><label> //為 input 元素定義標注（標記） ```