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>        </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 />     <span><</span> <span>dd</span> <span>></span> <span>自定义列表1.1</span> <span><<span> <span>dd</span> <span>></span><br />     <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>     <span><</span> <span>dd</span> <span>></span> <span>自定义列表2.1</span> <span><<span> <span>dd</span> <span>></span><br />     <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 />     <span><</span> <span>th</span> <span>></span> <span>表格标题1</span> <span><<span> <span>th</span> <span>></span><br />     <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 />     <span><</span> <span>td</span> <span>></span> <span>表格数据1</span> <span><<span> <span>td</span> <span>></span><br />     <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>