1.head里面的一些标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"/> 5 <meta name="keywords" content="假京东"/> 6 <meta name="description" content="这是我的头信息"/> 7 <!--<meta http-equiv="Refresh" content="5; URL=https://www.baidu.com" />--> 8 <title>li</title> 9 <link rel="icon" rel="icon" href="//www.jd.com/favicon.ico" /> 10 <link /> 11 <script> 12 </script> 13 14 <!--块级标签--> 15 <style> 16 div{ 17 color:red; 18 background-color:yellow 19 } 20 span{ 21 color:red; 22 background-color:#898989 23 } 24 </style> 25 </head> 26 <body> 27 <!--所有的标签都可以换成块级标签和内联标签--> 28 <!-- 块级别标签（block）--> 29 <div style="color:yellow;background-color:#aA2333;">hello word</div> 30 <!--内联标签(in-line)--> 31 <span>hellow word!!</span> 32 <span style="color:yellow;background-color:black">你好</span> 33 <!--这些标签只需要了解，因为css可以代替这些标签--> 34 <b>给字体加出</b> 35 <em>变成斜体</em> 36 <del>删除</del> 37 <!--默认情况下是内联标签是空一个格子，可以使用 代表空格，用的特殊字符时候可以百度--> 38 你好啊啊啊 hahah 39 <大于小于> 40 <!--img标签是内联标签--> 41 42 <img src="1.jpg" width="200px" height="200px" alt="加载失败！！！" title="悬浮字体" border="1"/> 43 <!--a标签的抛锚--> 44 <a href="https://www.baidu.com" target="_blank">百度</a> 45 </body> 46 47 </html>
2.form表单以及一些重要的标签***
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>form表单，向服务器传输数据</title> 6 <link rel="icon" href="jd.ico" /> 7 </head> 8 <body> 9 <form action="https://www.baidu.com" method="get" enctype="multipart/form-data"> 10 <p>姓名：<input type="text" value="lizebo"/></p> 11 <p>性别：<input type="password" value="nan"/></p> 12 <p>提交：<input type="submit" value="提交"/></p> 13 <p>按钮：<input type="button" value="press" /></p> 14 篮球：<input type="checkbox" />篮球<input type="checkbox" />足球 15 <!--radio这个标签name必须是相同的--> 16 <p>男 <input type="radio" name="sex" /></p> 17 <p>女 <input type="radio" name="sex" /></p> 18 <!--name属性是给服务器看的！，而id主要是前端操作--> 19 <p>上传文件 <input type="file" name="lizebo"/></p> 20 <p>输入框重置清空 <input type="reset" value="reset" /></p> 21 22 </form> 23 出生地 24 <select name="city" multiple="multiple"> 25 <option value="beijing">北京</option> 26 <option value="tianjin">天津</option> 27 <option value="chengdu">成都</option> 28 <option value="meishan">眉山</option> 29 <option value="leshan">乐山</option> 30 </select> 31 <select name="city2" multiple size="1"> 32 <option value="beijing">北京</option> 33 <option value="tianjin">天津</option> 34 <option value="chengdu">成都</option> 35 <option value="nanjing">南京</option> 36 <option value="jiangxi">江西</option> 37 </select> 38 <select name="city3" > 39 <option value="beijing">北京</option> 40 <option value="nanjing">南京</option> 41 <option value="jingxi">江西</option> 42 </select> 43 <select name="city4"> 44 <optgroup label="北京"> 45 <option value="chaoyang">朝阳</option> 46 <option value="haidian">海淀</option> 47 </optgroup> 48 </select> 49 <textarea name="textarea" rows="10" cols="5">自我简介：</textarea> 50 </body> 51 </html>
3.抛锚
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"/> 5 <meta http-equiv="Refresh" content="10,URL=https://www.baidu.com" /> 6 <link rel="icon" href="jd.ico" /> 7 <title>抛锚</title> 8 <style> 9 #div1{ 10 height:300px; 11 background-color:red 12 } 13 #div2{ 14 height:500px; 15 background-color:yellow 16 } 17 #div3{ 18 height:100px; 19 background-color:black 20 } 21 #div-top{ 22 height:100px; 23 background-color:#909032 24 } 25 </style> 26 </head> 27 <body> 28 29 <div id="div-top">首页</div> 30 <a href="#div1">第一章</a> 31 <a href="#div2">第二章</a> 32 <a href="#div3">第三章</a> 33 34 <div id="div1">第一章</div> 35 <div id="div2">第二章</div> 36 <div id="div3"><pre style="color:red">第三章</pre></div> 37 <a href="#div-top">首页</a> 38 39 </body> 40 </html>
4.列表
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表标签</title> 6 <link rel="icon" href="jd.ico" /> 7 </head> 8 <body> 9 <!--unordered list--> 10 <h3>无序列表</h3> 11 <ul> 12 <li>111</li> 13 <li>222</li> 14 <li>333</li> 15 <li>444</li> 16 </ul> 17 <h3>有序列表</h3> 18 <ol> 19 <li>aaa</li> 20 <li>bbbb</li> 21 <li>cccc</li> 22 </ol> 23 <h3>有标题</h3> 24 <dl> 25 <dt>第一章</dt> 26 <dd>1234</dd> 27 <dd>254safljas</dd> 28 <dt>第二章</dt> 29 <dd>234</dd> 30 <dd>sfasf</dd> 31 </dl> 32 </body> 33 <!--table便签，忘了吧，以前使用它进行布局，不过现在使用div+css进行--> 34 <table border="1" style="color:red;background-color:yellow"> 35 <tr> 36 <td style="color:black">萝莉副书记覅</td> 37 <td>撒发生</td> 38 </tr> 39 <tr> 40 <td>啊师傅阿三</td> 41 <td>是速度发</td> 42 </tr> 43 </table> 44 </html>