前端还是蛮有意思的哈，随便改点什么页面就变了，好神奇~~~
html就是页面的最初始化，只是基本的展示，后续需要css跟js对其进行修饰。
html主要为各种标签提供功能，常用的标签都写出来了，每个标签的功能都用注释体现了，就不再多做陈述了
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <!--页面标题--> 6 <title>北方姆Q</title> 7 <!--页面标题前显示的小图标--> 8 <link rel="shortcut icon" href="1.jpg" /> 9 </head> 10 <body> 11 <!--占整行所有位置--> 12 <div style="background: red;">1234</div> 13 <!--只占内容相对应位置--> 14 <span style="background: green;">1234</span> 15 <!--特殊符号--> 16 < > 17 <!--换行符号--> 18 <p>段落段落段落<br />段落段落段落段落</p> 19 <p>段落段落段落段落段落段落段落</p> 20 <p>段落段落段落段落段落段落段落</p> 21 <!--当前页面直接跳转--> 22 <a href="https://www.baidu.com">跳转1</a> 23 <!--打开一个新页面进行跳转--> 24 <a href="https://www.baidu.com" target="_blank">跳转2</a> 25 <!--寻找对应id号的标签置顶显示--> 26 <a href="#i1">第一章</a> 27 <a href="#i2">第二章</a> 28 <!--为标签设置一个id号，任何标签都可以设置，但是不可以id号重复--> 29 <div id="i1" style="height: 500px;">第一章内容</div> 30 <div id="i2" style="height: 500px;">第二章内容</div> 31 <!--默认情况下h1-h6不同字体大小显示--> 32 <h1>aaa</h1> 33 <h2>aaa</h2> 34 <h3>aaa</h3> 35 <h4>aaa</h4> 36 <h5>aaa</h5> 37 <h6>aaa</h6> 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>南方姆Q</title> 6 <link rel="shortcut icon" href="1.jpg" /> 7 </head> 8 <body> 9 <form> 10 <!--外边框颜色--> 11 <div style="border: 1px solid red"> 12 <!--明文输入框--> 13 <p>用户名：<input type="text" /></p> 14 <!--密文输入框--> 15 <p>密码：<input type="password" /></p> 16 <!--邮箱格式输入框，不是xxx@xxx会报错，此报错是浏览器提供的，不同浏览器报错不同--> 17 <p>邮箱：<input type="email" /></p> 18 <!--定义相同的name标识为互斥--> 19 <p>性别（单选框） 20 <br />男<input type="radio" name="sex" /> 21 <br />女<input type="radio" name="sex" /> 22 </p> 23 <!--多选框，你懂得--> 24 <p>爱好（多选框） 25 <br />吃<input type="checkbox" /> 26 <br />吃<input type="checkbox" /> 27 <br />吃<input type="checkbox" /> 28 <br />吃<input type="checkbox" /> 29 <br />吃<input type="checkbox" /> 30 </p> 31 <p>城市 32 <!--下拉式单选框--> 33 <select> 34 <option>北京</option> 35 <option>上海</option> 36 <option>广州</option> 37 </select> 38 <!--展开下拉式单选框，可定义默认显示几条选项--> 39 <select multiple size="10"> 40 <option>北京</option> 41 <option>上海</option> 42 <option>广州</option> 43 <option>北京</option> 44 <option>上海</option> 45 <option>广州</option> 46 <option>北京</option> 47 <option>上海</option> 48 <option>广州</option> 49 <option>北京</option> 50 <option>上海</option> 51 <option>广州</option> 52 <option>北京</option> 53 <option>上海</option> 54 <option>广州</option> 55 </select> 56 <!--分类下拉式单选框--> 57 <select> 58 <optgroup label="a"> 59 <option>北京</option> 60 <option>上海</option> 61 </optgroup> 62 <optgroup label="b"> 63 <option>广州</option> 64 </optgroup> 65 </select> 66 </p> 67 <!--上选文件--> 68 <p>文件：<input type="file" /></p> 69 <!--备注框--> 70 <p>备注：<textarea>我是备注</textarea></p> 71 <!--提交from内内容--> 72 <input type="submit" value="submit" /> 73 <!--没卵用--> 74 <input type="button" value="button" /> 75 <!--重置from内内容--> 76 <input type="reset" value="reset" /> 77 </div> 78 </form> 79 </body> 80 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--表格展示，合并单元格时需要注意到底占用了其他哪些单元格，然后注释掉即可--> 9 <table border="1"> 10 <thead> 11 <tr> 12 <!--th会对字体加粗，体现出是表格头部--> 13 <th colspan="2">标题一</th> 14 <th>标题二</th> 15 <!--<th>标题三</th>--> 16 </tr> 17 </thead> 18 <tbody> 19 <tr> 20 <td rowspan="2" >标题一</td> 21 <td>标题二</td> 22 <td>标题三</td> 23 </tr> 24 <tr> 25 <!--<td>标题一</td>--> 26 <td>标题二</td> 27 <td>标题三</td> 28 </tr> 29 <tr> 30 <td>标题一</td> 31 <td>标题二</td> 32 <td>标题三</td> 33 </tr> 34 </tbody> 35 </table> 36 </body> 37 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--加一个外边框，内部可随意添加内容--> 9 <fieldset> 10 <legend>北度</legend> 11 <!--在框内引用对应页面--> 12 <iframe style=" 100%;height: 1000px" src="https://www.baidu.com"></iframe> 13 </fieldset> 14 </body> 15 </html>