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 元素定义标注（标记） ```