<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--head头部要定义的东西--> ???<!--1、定义html的编码类型：下面的方式指定html的编码方式为“utf-8”--> ???????????????<!--<meta charset="UTF-8">--> ???<!--2、刷新：下面的方式的指定，5秒钟后，自动刷新该页面--> ???????????????<!--<!meta http-equiv="REFRESH" CONTENT="5";>--> ???<!--3、跳转：下面的方式的指定，5秒钟后，自动跳转到http://www.baidu.com这个网站--> ???????????????<!--<!meta http-equiv="REFRESH" CONTENT="5;URL=http://www.baidu.com">--> ???<!--4、关键词：比如网站的自我介绍，爬虫去爬网站的时候搜索关键字，下面的例子就是实现如果爬虫去体育、足球，篮球就会爬到我们定义的这个网站--> ???????????????<!--<meta name="keywords" content="体育,足球,篮球">--> ???<!--5、介绍，描述：介绍我这个网站是干什么的；--> ???????????????<!--<meta name="description" content="我们致力于提高python的水平">--> ???<!--6、X-UA-Compatible：主要为了解决ie6不兼容的问题--> ???<!--7、标题：打开这个网页的标题是什么，比如在鼠标放打开的栏上就会浮现title定义的名称--> ???????????????<!--<title>Title</title>--> ???<!--8、网页的图片，就是浏览器打开那一栏的图片--> ???????????????<!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> --> ???<!--上面都不是很重要，下面这些才重要--> ???<!--1、css文件--> ???<!--2、css代码块--> ???<!--3、js文件--> ???<!--4、js代码块--></head> ???<body> ???????<hr/> ???????<!--标签的类型--> ???????<!--<!–标签一般分为块级标签和行内标签，块级标签会占一行，行内标签仅仅占了自己需要的大小–>--> ???????<!--常用的块级标签--> ???????????<!--h标签--> ???????????<!--div标签，这个是最常用的块级标签--> ???????????<!--p标签--> ???????<!--常用的行内标签--> ???????????<!--span标签--> ???????<hr/> ???????<!--符号：符号一般用特殊的标志来代替，这个可以网上搜索--> ???????<!-->大于号--> ???????<!--<小于号--> ???????<!-- 空格--> ???????<hr/> ???????<h2>下面开始正式进入学习标签</h2> ???????<hr/> ???????<h3>p标签</h3> ???????<!--作用：就和我们写作文一样，把属于一行的文件用p标签括起来--> ???????<p>经典款辣椒粉可垃圾法拉克福建阿拉就发了家拉法基奥拉夫建安路附近啊结案率放假爱了飞</p> ???????<!--#p标签括起来的就是一段--> ???????<p>的结案率放假爱了激发了会计法律进发了疯静安老分局阿里风景阿拉基<br>fadsfkasjf</p> ???????<!--br标签的意思就是换行--> ???????<div style="width: 200px;border:10px solid red;word-break:break-all;"> ???????????<p>xxxxxxxxxxxxxxxxxxxxxxddd<br/>dddaaaaaaaaa</p> ???????????<p>xxxxxxxxxxxxxxxx<br/>xxxxxxddddfffffffffffffffddaaaaaaaaa</p> ????????????<p>xxxxxxxxxxxxxxxxxxxxxxddd<br/>dddaaaaaaaaa</p> ???????????<p>xxxxxxxxxxxxxxxx<br/>xxxxxxddddfffffffffffffffddaaaaaaaaa</p> ???????</div> ???????<!--上面这个实现的效果就是hi，把div标签包括的数据放在一个宽度为200像素的框中，框的颜色是红色，框的宽度为10个像素--> ???????<hr/> ???????<h3>a标签</h3> ???????<!--a标签的意思就是一个超链接--> ???????<p><a href="http://www.baidu.com">百度</a></p> ???????<!--点击百度这个超链接，会跳转到http://www.baidu.com这个地址,且在当前的页面打开一个http://www.baidu.com这个地址--> ???????<p><a href="http://www.163.com" target="_blank">网易</a></p> ???????<!--点击网易这个超链接，会跳转到http://www.163.com这个地址，但是会重新打开一个页面，这个就是target="_blank"的作用--> ???????<p><a href="test.html" target="_blank">文件</a></p> ???????<!--这个意思点击文件会执行test.html这个文件--> ???????<a href="#t1">第二章</a> ???????<div id="t1" style="height:200px;background-color: red;">第一张</div> ???????<div id="t2" style="height:300px;background-color: green;">第二张</div> ???????<div id="t3" style="height:400px;background-color: yellow;">第三张</div> ???????<!--这个意思就his点击第二章，就会跳转到id为t1的这个页面，且id不能重复--> ???????<hr/> ???????<h3>img标签</h3> ???????<img src="1.JPG" height="200px" width="150px" title="xxxxxxxxxxx"> ???????<!--显示图片，图片为1.JPG。高度为200像素，宽度为150像素,鼠标放在图片上面，鼠标的浮动框会显示的名称为xxxxxxx--> ???????<hr/> ???????<h3>h标签</h3> ???????h标签是标题标签，从1到6字体依次变小 ???????<h1>aaaa</h1> ???????<h2>aaaa</h2> ???????<h3>aaaa</h3> ???????<h4>aaaa</h4> ???????<h5>aaaa</h5> ???????<h6>aaaa</h6> ???????<hr/> ???????<h3>select标签</h3> ???????<!--是一个下拉框标签--> ???????<select> ???????????<option>北京</option> ???????????<option>内蒙古</option> ???????????<option>乌海</option> ???????????<option>黑龙江</option> ???????</select> ???????<!--上面是最简单的下拉框--> ???????<select size="5"> ???????????<option>北京</option> ???????????<option>内蒙古</option> ???????????<option>乌海</option> ???????????<option>黑龙江</option> ???????</select> ???????<!--用滚动条的方式显示，每次滴血那是2个--> ???????<select multiple="multiple"> ???????????<option>北京</option> ???????????<option>内蒙古</option> ???????????<option>乌海</option> ???????????<option>黑龙江</option> ???????</select> ???????<!--这个可以支持多选，按住ctrl就可以支持多选--> ???????<select> ???????????<optgroup label="第一集团军"> ???????????????<option>北伐军1</option> ???????????????<option>北伐军2</option> ???????????</optgroup> ???????????<optgroup label="第二集团军"> ???????????????<option>北伐军3</option> ???????????????<option>北伐军4</option> ???????????</optgroup> ???????</select> ???????<select> ???????????<option>北伐军5</option> ???????????<option>北伐军6</option> ???????????<option selected="selected">北伐军7</option> ???????????<option>北伐军8</option> ???</select> ???<!--selected的意思就是默认选中selected指定的选项--> ???<hr/> ???????<h4>input系列标签</h4> ???????<hr/> ???????<input type="checkbox"> ???????<!--正方形的选中框,为复选框，可以选择多个--> ???????<hr/> ???????<input type="radio"> ???????<!--圆形的选中框，是单选框，只能选择一个--> ???????<hr/> ???????<input type="text"> ???????<!--输入框--> ???????<hr/> ???????<input type="password"> ???????<!--密码输入框--> ???????<hr/> ???????<input type="button" value="提交"> ???????<!--提交按钮--> ???????<hr/> ???????<input type="submit" value="提交"> ???????<!--提交按钮--> ???????<hr/> ???????<input type="file"> ???????<!--上传文件--> ???????<hr/> ???????<form action="http://www.baidu.com"> ???????????<div> ???????????????主机名：<input name="host" type="text"> ???????????</div> ???????????<div> ???????????????密码：<input name="passwd" type="password"> ???????????</div> ???????????<div> ???????????????端口：<input name="port" type="text"> ???????????</div> ???????????<input type="button" value="button提交"> ???????????<input type="submit" value="submit提交"> ???????</form> ???????<!--form标签主要是用来提交数据给后台的，如果需要往后台提交数据，那么只有submit可以提交成功，button是不会提交数据到后台的，form标签内的数据都会提交给后台， ???????上面的例子就会text输入框的内容提交给后台，提交的类型是一个dict，k的值为host，v的值为输入的值，--> ???????<hr/> ???????<h4>textarea标签</h4> ???????<textarea>默认值</textarea> ???????<textarea></textarea> ???????<!--多行的输入框--> ???????<input type="text" value="xxxxxx"> ???????<!--单行输入框，有默认值--> ???????<hr/> ???????<h4>label标签</h4> ???????<!--没有多大的用处，仅仅为了用户使用的变量，让一个文本和标签做一个对应的关系--> ???????<label for="ttt">婚否</label> ???????<input id="ttt" type="checkbox"> ???????<!--实现的效果就是，点击婚否这2个字，那么就会选中checkbox指定的框--> ???????<label for="aaa">生否</label> ???????<input id="aaa" type="radio"> ???????<!--实现的效果就是，点击生否这2个字，那么就会选中radio指定的框--> ???????<label for="bbb">输入否</label> ???????<input id="bbb" type="text"> ???????<!--实现的效果就是点击输入否，光标就会移动到text的输入框中--> ???????<hr/> ???????<h4>ul标签</h4> ???????<!--生成一个列表，无序号--> ???????<ul> ???????????<li>第一题</li> ???????????<li>第二题</li> ???????????<li>第三题</li> ???????????<li>第四题</li> ???????</ul> ???????<!--生成一个列表，但是没有序号--> ???????<hr/> ???????<h4>ol标签</h4> ???????<!--生成一个列表,有序号--> ???????<ol> ???????????<li>第一题</li> ???????????<li>第二题</li> ???????????<li>第三题</li> ???????????<li>第四题</li> ???????</ol> ???????<hr/> ???????<h4>dl、dt、dd标签</h4> ???????<!--生成一个标题+内容的结构--> ???????<dl> ???????????<dt>标题1</dt> ???????????<dd>内容1</dd> ???????????<dd>内容2</dd> ???????????<dd>内容3</dd> ???????????<dd>内容4</dd> ???????????<dt>标题2</dt> ???????????<dd>内容1</dd> ???????????<dd>内容2</dd> ???????????<dd>内容3</dd> ???????????<dd>内容4</dd> ???????</dl> ???????<hr/> ???????<h4>table标签</h4> ???????<!--生成一个表格,一个表格包括一个表头thead和一个表身体tbody--> ???????<table border="1"> ???????????<thead> ???????????<!--这里创建表头，先创建一行，在创建多列即可，默认情况下这个表格是没有边框的,但是加一个border="1"就会给这个列表加一个边框--> ???????????????<tr> ???????????????????<th>表头第一列</th> ???????????????????<th>表头第二列</th> ???????????????????<th>表头第三列</th> ???????????????</tr> ???????????</thead> ???????????<tbody> ???????????????<tr> ???????????????????<td>第一行第一列</td> ???????????????????<td>第一行第二列</td> ???????????????????<td>第一行第三列</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>第二行第一列</td> ???????????????????<td>第二行第二列</td> ???????????????????<td>第二行第三列</td> ???????????????</tr> ???????????</tbody> ???????</table> ???????<table border="1"> ???????????<thead> ???????????<!--这里创建表头，先创建一行，在创建多列即可，默认情况下这个表格是没有边框的,但是加一个border="1"就会给这个列表加一个边框--> ???????????????<tr> ???????????????????<th>表头第一列</th> ???????????????????<th>表头第二列</th> ???????????????????<th>表头第三列</th> ???????????????</tr> ???????????</thead> ???????????<tbody> ???????????????<tr> ???????????????????<td colspan="2">第一行第一列</td> ???????????????????<!--这个意思是这一行，会把第一列和二列全部占，也就是一列占原来两列的位置--> ???????????????????<!--<td>第一行第二列</td>--> ???????????????????<td>第一行第三列</td> ???????????????</tr> ???????????????<tr> ???????????????????<td>第二行第一列</td> ???????????????????<td>第二行第二列</td> ???????????????????<td>第二行第三列</td> ???????????????</tr> ???????????</tbody> ???????</table> ???????<table border="1"> ???????????<thead> ???????????<!--这里创建表头，先创建一行，在创建多列即可，默认情况下这个表格是没有边框的,但是加一个border="1"就会给这个列表加一个边框--> ???????????????<tr> ???????????????????<th>表头第一列</th> ???????????????????<th>表头第二列</th> ???????????????????<th>表头第三列</th> ???????????????</tr> ???????????</thead> ???????????<tbody> ???????????????<tr> ???????????????????<td rowspan="2">第一行第一列</td> ???????????????????<!--这个实现的效果就是一列中的一行占据了2行的空间--> ???????????????????<td>第一行第二列</td> ???????????????????<td>第一行第三列</td> ???????????????</tr> ???????????????<tr> ???????????????????<!--<td>第二行第一列</td>--> ???????????????????<td>第二行第二列</td> ???????????????????<td>第二行第三列</td> ???????????????</tr> ???????????</tbody> ???????</table> ???????<hr/> ???????<h1>fieldset</h1> ???????<fieldset> ???????????<legend>登陆</legend> ???????????<!--实现在框上显示登陆这2个字--> ???????????<p>用户名:</p> ???????????<p>密码:</p> ???????</fieldset> ???</body></html>
html标签小结
原文地址：http://www.cnblogs.com/bainianminguo/p/7611116.html