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:yellow19 ????????}20 ????????span{21 ????????????color:red;22 ????????????background-color:#89898923 ????????}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 ????你好啊啊啊 hahah39 ????<大于小于>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:red12 ????????}13 ????????#div2{14 ????????????height:500px;15 ????????????background-color:yellow16 ????????}17 ????????#div3{18 ????????????height:100px;19 ????????????background-color:black20 ????????}21 ????????#div-top{22 ????????????height:100px;23 ????????????background-color:#90903224 ????????}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>
html知识
原文地址：http://www.cnblogs.com/lizeboLB/p/7801067.html