HTML常用标签查询

  JAVA开发避免不了要接触前端,所以我不得不从0开始学习前端内容!下面分享我自己总结的HTML常用标签查询代码;将下面代码复制粘贴到文本文档,然后另存为html格式;通过file:///文档保存路径的方式可以通过网页直接访问,获取HTML常用标签用法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML速查列表,为了方便日常开发使用</title>
		<style type="text/css">
			h2{font-size:16px;font-family:"楷体"}
			span{font-size:14px;font-family:"楷体"}
			
		</style>
	</head>
	<body>
	<div style="background:#F0FFF0; width:1900px; height:1200px;float:left;"> 
	<h1 style="text-align:center;">HTML常用标签查询</h1>
		<div style="background:#FDF5E6; width:600px; height:1200px;float:left;" >
		<div>
			<h2>HTML基本文档模板</h2>			
			<div style="background:#F0FFF0;width:590px;">
				<hr />
				<span><</span>
				<span>!</span>
				<span>DOCTYPE </span>
				<span>html</span>
				<span>></span> <br />
				
				<span><</span>
				<span>html</span>
				<span>></span> <br />
				
				<span><</span>
				<span>head</span>
				<span>></span> <br />
				
				<span><</span>
				<span>meta  charset="utf-8"</span>				
				<span>></span> <br />
					
				<span><</span>
				<span>title</span>
				<span>></span> 
				<span>html模板</span>
				<span><</span>
				<span>/title</span>
				<span>></span> <br />
				
				<span><</span>
				<span>/head</span>
				<span>></span> <br />
				<span><</span>
				
				<span>body</span>
				<span>></span> <br />
				<span>&nbsp &nbsp &nbsp &nbsp  </span>  <br />
				
				<span><</span>
				<span>/body</span>
				<span>></span> <br />

				<span><</span>
				<span>/html</span>
				<span>></span> <br />
				<hr />
			</div>
			</div>
			
		<div>
		<h2>基本标签</h2>		
		<div style="background:#F0FFF0;width:590px;">
			<hr>
			<span><</span>
			<span>h1</span>
			<span>></span>
			<span>最大的标题</span>
			<span><</span>
			<span>/h1</span>
			<span>></span> <br />
			
			<span><</span>
			<span>h2</span>
			<span>></span>
			<span>..........</span>
			<span><</span>
			<span>/h2</span>
			<span>></span> <br />
			
			<span><</span>
			<span>h3</span>
			<span>></span>
			<span>..........</span>
			<span><</span>
			<span>/h3</span>
			<span>></span> <br />
			
			<span><</span>
			<span>h4</span>
			<span>></span>
			<span>..........</span>
			<span><</span>
			<span>/h4</span>
			<span>></span> <br />
			
			<span><</span>
			<span>h5</span>
			<span>></span>
			<span>..........</span>
			<span><</span>
			<span>/h5</span>
			<span>></span> <br />
			
			<span><</span>
			<span>h6</span>
			<span>></span>
			<span>最小的标题</span>
			<span><</span>
			<span>/h6</span>
			<span>></span> <br />
			
			<span><</span>
			<span>p</span>
			<span>></span>
			<span>段落标签</span>
			<span><</span>
			<span>/p</span>
			<span>></span> <br />
			
			<span><</span>
			<span>br /</span>
			<span>></span>
			<span>换行标签</span> <br />
			
			<span><</span>
			<span>hr /</span>
			<span>></span>
			<span>添加水平线标签</span>	
			<hr />			
		</div>					
		</div>
		
		
		
		<div>
			<h2>文本编辑相关标签</h2>
			<div style="background:#F0FFF0;width:590px">
			<hr />
			<span><</span>
			<span>b</span>
			<span>></span>
			<span>加粗标签</span>
			<span><</span>
			<span>/b</span>
			<span>></span> <br />	
			
			<span><</span>
			<span>strong</span>
			<span>></span>
			<span>加粗标签2</span>
			<span><</span>
			<span>/strong</span>
			<span>></span> <br />
			
			<span><</span>
			<span>code</span>
			<span>></span>
			<span>计算机代码</span>
			<span><</span>
			<span>/code</span>
			<span>></span> <br />
			
			<span><</span>
			<span>i</span>
			<span>></span>
			<span>斜体标签</span>
			<span><</span>
			<span>/i</span>
			<span>></span> <br />
			
			<span><</span>
			<span>em</span>
			<span>></span>
			<span>斜体标签2</span>
			<span><</span>
			<span>/em</span>
			<span>></span> <br />
			
			<span><</span>
			<span>kbd</span>
			<span>></span>
			<span>键盘输入</span>
			<span><</span>
			<span>/kbd</span>
			<span>></span> <br />
			
			<span><</span>
			<span>pre</span>
			<span>></span>
			<span>预格式化文本,能根据敲 空格符 显示空格或者 空行 的文本处理标签</span>
			<span><</span>
			<span>/pre</span>
			<span>></span> <br />
			
			<span><</span>
			<span>small</span>
			<span>></span>
			<span>字体变小标签</span>
			<span><</span>
			<span>/small</span>
			<span>></span> <br />
			
			<span><</span>
			<span>tt</span>
			<span>></span>
			<span>打字机文本</span>
			<span><</span>
			<span>/tt</span>
			<span>></span> <br />
			
			<span><</span>
			<span>samp</span>
			<span>></span>
			<span>计算机代码样式</span>
			<span><</span>
			<span>/samp</span>
			<span>></span> <br />
			
			<span><</span>
			<span>var</span>
			<span>></span>
			<span>计算机变量</span>
			<span><</span>
			<span>/var</span>
			<span>></span> <br />
			
			<span><</span>
			<span>abbr /</span>
			<span>></span>
			<span>缩写标签</span> <br />
			
			
			<span><</span>
			<span>address</span>
			<span>></span>
			<span>超链接标签</span>
			<span><</span>
			<span>/adress</span>
			<span>></span> <br />
			
			<span><</span>
			<span>a</span>
			<span>></span>
			<span>超链接标签2</span>
			<span><</span>
			<span>/a</span>
			<span>></span> <br />
			
			<span><</span>
			<span>bdo dir="rtl"</span>
			<span>></span>
			<span>文字方向</span>
			<span><</span>
			<span>/bdo</span>
			<span>></span> <br />
			
			<span><</span>
			<span>blockquote</span>
			<span>></span>
			<span>从一个源引用的部分;还没有用过!</span>
			<span><</span>
			<span>/blockquote</span>
			<span>></span> <br />
			
			<span><</span>
			<span>cite</span>
			<span>></span>
			<span>工作的名称,没用过!</span>
			<span><</span>
			<span>/cite</span>
			<span>></span> <br />
			
			<span><</span>
			<span>del</span>
			<span>></span>
			<span>删除文本的标签</span>
			<span><</span>
			<span>/del</span>
			<span>></span> <br />
			
			<span><</span>
			<span>ins</span>
			<span>></span>
			<span>插入文本的标签</span>
			<span><</span>
			<span>/ins</span>
			<span>></span> <br />
			
			<span><</span>
			<span>sub</span>
			<span>></span>
			<span>文本下标的标签</span>
			<span><</span>
			<span>/sub</span>
			<span>></span> <br />
			
			<span><</span>
			<span>sup</span>
			<span>></span>
			<span>文本上标的标签</span>
			<span><</span>
			<span>/sup</span>
			<span>></span> <br />	
			
			<hr />
			</div>		
		</div>
		
		
		</div>
		
		<div style="background:#FDF5E6; width:700px; height:1200px;float:left;" >
		
			<div>
				<h2>图片</h2>
				<div style="background:#F0FFF0;width:590px;">
				<hr>
				<span><</span>
				<span>img  src="图片路径" alt="描述" height="高度" width="宽度"</span>
				<span>></span>
				<span>图片链接</span>
				<span><</span>
				<span>/img</span>
				<span>></span> <br />
				<hr />
				</div>
				
				<div>
				<h2>无序列表</h2>
				<div style="background:#F0FFF0;width:590px;">
				<hr>
				<span><</span>
				<span>ul</span>
				<span>></span><br />
				<span><<span>
				<span>li</span>
				<span>></span>
				<span>列表1</span>
				<span><</span>
				<span>/li</span>
				<span>></span>	<br />
				<span><<span>
				<span>li</span>
				<span>></span>
				<span>列表2</span>
				<span><</span>
				<span>/li</span>
				<span>></span>	</br>			
				<span><</span>
				<span>/ul</span>
				<span>></span> <br />
				<hr />			
				</div>
				</div>
				
				<div> 
				<h2>有序列表</h2>
				<div style="background:#F0FFF0;width:590px;">
				<hr>
				<span><</span>
				<span>ol</span>
				<span>></span><br />
				<span><<span>
				<span>li</span>
				<span>></span>
				<span>有序列表1</span>
				<span><</span>
				<span>/li</span>
				<span>></span>	<br />
				<span><<span>
				<span>li</span>
				<span>></span>
				<span>有序列表2</span>
				<span><</span>
				<span>/li</span>
				<span>></span>	</br>			
				<span><</span>
				<span>/ol</span>
				<span>></span> <br />
				<hr />
				</div>
				</div>
				
				<div> 
				<h2>自定义列表</h2>
				<div style="background:#F0FFF0;width:590px;">
				<hr>
				<span><</span>
				<span>dl</span>
				<span>></span><br />
				<span><<span>
				<span>dt</span>
				<span>></span>
				<span>自定义列表1</span>
				<span><</span>
				<span>/dt</span>				
				<span>></span>	<br />
				&nbsp &nbsp <span><</span>
				<span>dd</span>
				<span>></span> 
				<span>自定义列表1.1</span>
				<span><<span>
				<span>dd</span>
				<span>></span><br />
				
				&nbsp &nbsp <span><</span>
				<span>dd</span>
				<span>></span> 
				<span>自定义列表1.2</span>
				<span><<span>
				<span>dd</span>
				<span>></span><br />
				
				<span><</span>
				<span>dt</span>
				<span>></span> 
				<span>自定义列表2</span>
				<span><</span>
				<span>/dt</span>
				<span>></span>	</br>
				&nbsp &nbsp <span><</span>
				<span>dd</span>
				<span>></span> 
				<span>自定义列表2.1</span>
				<span><<span>
				<span>dd</span>
				<span>></span><br />
				
				&nbsp &nbsp <span><</span>
				<span>dd</span>
				<span>></span> 
				<span>自定义列表2.2</span>
				<span><<span>
				<span>dd</span>
				<span>></span><br />
				
				<span><</span>
				<span>/dl</span>
				<span>></span> <br />
				<hr />
				</div>
				</div>
			
				<div>
				<h2>表格</h2>							
				<div style="background:#F0FFF0;width:590px;">
				<hr />	
				<span><</span>
				<span>table border="1"</span>
				<span>></span><br />
				
				<span><<span>
				<span>tr</span>
				<span>></span><br />
				
				&nbsp &nbsp <span><</span>
				<span>th</span>
				<span>></span> 
				<span>表格标题1</span>
				<span><<span>
				<span>th</span>
				<span>></span><br />
				
				&nbsp &nbsp <span><</span>
				<span>th</span>
				<span>></span> 
				<span>表格标题2</span>
				<span><<span>
				<span>th</span>
				<span>></span><br />
				
				<span><</span>
				<span>/tr</span>
				<span>><span><br />
				
				<span><<span>
				<span>tr</span>
				<span>></span><br />
				
				&nbsp &nbsp <span><</span>
				<span>td</span>
				<span>></span> 
				<span>表格数据1</span>
				<span><<span>
				<span>td</span>
				<span>></span><br />
				
				&nbsp &nbsp <span><</span>
				<span>td</span>
				<span>></span> 
				<span>表格数据2</span>
				<span><<span>
				<span>td</span>
				<span>></span><br />
				
				<span><</span>
				<span>/tr</span>
				<span>><span><br />

				<span><</span>
				<span>/table</span>
				<span>></span> <br />
				<hr />
				</div>
				</div>
			
				</div>
			
					<div >
					<h2>框架</h2>
					<div style="background:#F0FFF0;width:590px;" >
					<hr />
					<span><</span>
					<span>iframe src="要链接得html文件名"</span>
					<span>></span>
					<span>使用框架,你可以在同一个浏览器窗口中显示不止一个页面。</span>
					<span><</span>
					<span>/iframe</span>
					<span>></span> <br />	
					<hr />
					</div>
					</div>			
			</div>
				<div style="background:#FDF5E6; width:600px; height:1200px;float:left;">
			
				<div>
					<h2>表单</h2>
					
					<div style="background:#F0FFF0;width:590px;">
					<hr />
					<span><</span>
					<span>form action="demo_form.php" method="post/get"></span>
					<span>></span><br />
					
					<span><</span>
					<span>input type="text" name="email" size="40" maxlength="50"></span>
					<span>></span><br />
					
					<span><</span>
					<span>input type="password"></span>
					<span>></span><br />
					
					<span><</span>
					<span>input type="checkbox"  checked="checked"</span>
					<span>></span><br />
					
					<span><</span>
					<span>input type="radioo"  checked="checked"</span>
					<span>></span><br />
					
					<span><</span>
					<span>input type="submit"  value="提交"</span>
					<span>></span><br />
					
					<span><</span>
					<span>input type="reset"  value="重置"</span>
					<span>></span><br />
					
					<span><</span>
					<span>input type="hidden"</span>
					<span>></span><br />
					
					<span><</span>
					<span>select</span>
					<span>></span><br />
					
					<span><</span>
					<span>option</span>
					<span>></span>
					<span>苹果</span>
					<span><</span>
					<span>/option</span>
					<span>></span><br />
					
					<span><</span>
					<span>option  selected="selected"</span>
					<span>></span>
					<span>香蕉</span>
					<span><</span>
					<span>/option</span>
					<span>></span><br />
					
					<span><</span>
					<span>option</span>
					<span>></span>
					<span>樱桃</span>
					<span><</span>
					<span>/option</span>
					<span>></span><br />
					
					<span><</span>
					<span>/select></span>
					<span>></span><br />
					
					<span><</span>
					<span>textarea name="comment" rows="60" cols="20"</span>
					<span>></span>
					<span><</span>
					<span>/textarea</span>
					<span>></span><br />
					
					<span><</span>
					<span>/form></span>
					<span>></span><br />
				<hr />
				</div>
				</div>
				
				<div>
					<h2>实体</h2>
					<div style="background:#F0FFF0;width:590px;">
					<hr />
						<span> & lt: 等同于< </span><br />
						<span> & gt: 等同于> </span><br />
						<span> & copy: 等同于© </span><br />
						<span> & reg: 等同于®</span><br />
						<span> nbsp: 等同于空格 </span><br />
					<hr />
					</div>
				</div>
				<div>
					<h2>链接<h2>
					<div style="background:#F0FFF0;width:590px">
					<hr />
					<span>普通的链接:</span>
					<span><</span>
					<span>a href="http://www.baidu.com/"</span>
					<span>></span>
					<span>链接文本,普通链接</span>
					<span><</span>
					<span>/a</span>
					<span>></span> <br />	
					
					<span>图像的链接:</span>
					<span><</span>
					<span>a href="http://www.baidu.com/"</span>
					<span>></span>
					<span><</span>
					<span>img src="图片路径" alt="图片描述" width="宽度" height="高度" (图片四要素:路径、描述、宽度、高度)</span>
					<span>></span>
					<span>链接文本,图像链接</span>
					<span><</span>
					<span>/a</span>
					<span>></span> <br />	
					
					<span>邮件的链接:</span>
					<span><</span>
					<span>a href="mailto:webmaster@example.com"</span>
					<span>></span>
					<span>链接文本,邮件链接</span>
					<span><</span>
					<span>/a</span>
					<span>></span> <br />	
		
		</div>
		</div>
			
			</div>
		</div>
		
	</div>	
	</body>
</html>

  

posted @ 2017-06-28 17:26  Mr_nie  阅读(928)  评论(0编辑  收藏  举报