HTML 标签总结

发布时间：2011-01-27 22:54:29 来源：文档文库

小中大

字号：

手机查看

1.网页结构主标签:

头标签 网页标题标签 <body bgcolor=” ” background=” ”> </body></html><body>内容主标签 bgcolor 背景颜色 background 背景图片2.插入图片标签:<img src=” ” width=” ” height=” ” alt=” ” align=”top,middle,bottom”>src 图片来源 width 宽度 height 高度 alt 图片说明文字 align 对齐（top 顶部；middle 中间 ；bottom 底部 记住这些是垂直方向上的对齐）3.文字标签: color 颜色 size 大小 face 字体4.段落标签:align 对齐 （left 居左 right 居右 center 中心对齐 记住这些是水平方向上的对齐） 5.链接标签和锚记标签:<a href=” ”> </a > href 链接的目标位置 <a name=” ”> </a > name 标记名称6.分行标签: 7.网页内容标题标签: <h1><h2><h3><h4><h5><h6>8.水平线标签: <hr color=” ” size=” ” width=” ” align=”left,center,right”>9.预定义标签: <pre> </pre>10.加粗、倾斜: 11.无序列表标签和有序列表标签<ol type=” 1,a,A,i,I”> <ul type=”circle,square, disc ”> <li></li> <li></li></ol> </ul> circle 空心圆点 square空心方块 disc实心圆点12.滚动标签<marquee direction=”up,down,left,right” scrollAmount=” ” behavior=”scoll,slide,alternate” scrolldelay=” ” onMouseOver=”this.stop()” onMouseOut=”this.start()” ></marquee>direction 滚动方向（up 向上 down 向下 left向左 right 向右）scrollAmount 滚动速度behavior 滚动方式 (scoll 循环滚动 slide 只滚动一次 alternate来回滚动)scrolldelay 滚动延时 onMouseOver 鼠标已过去 （this 这个 stop 停止）onMouseOut 鼠标移出去 （this 这个 start开始）13.table标签 （可以用来布局） <table> <tr><td></td><th> <tr><td></td><th></table>注意表头单元格（一般是首列或者首行的单元格）可以使用<th>，普通单元格使用<td>在table标签属性：border—边框的粗细； bordercolor—边框颜色 bgcolor—背景颜色； background—背景图片width---表格宽度 height--表格高度 align---设置文字对齐方式cellpadding---文字与单元格边界的距离 cellspacing---单元格与单元格之间的距离在td 标签属性：rowspan----跨列 colspan----跨行14.表单在写表单之前，必须先写好表单容器标签<form></form>,再写里面得控件标签在form标签里有两个属性：action----表单要提交的位置； methed=”get/post”------表单提交的方式,get不安全、post安全 控件标签：文本框：<input type=”text” name=” ” size=” ” maxlength=” ”>密码框：<input type=”password” name=” ” size=” ” maxlength=” ”>单选框：<input type=”radio” name=” ” value=” ” checked=”checked”>复选框：<input type=”checkbox” name=” ” value=” ” checked=”checked”>普通按钮：<input type=”button” value=”确定、取消…. ” >提交按钮：<input type=”submit” value=”提交 ” >重置按钮：<input type=”reset” value=”重置 ” >下拉列表：<select name=””> <option value=” ”><option> <option value=” ”><option> </select>文本区域：<textarea name = “ ” rows=” ” cols=” ”> rows确定有几行，cols有多宽15.框架页面注意：在写框架页面之前必须去掉网页中的<body>标签<frameset rows=” ” cols=” ”> <frame name= “ ” src=” 页面的路径” ></frameset>frameset---框架集标签 rows----将框架集横向分开，cols将框架集纵向分开frame---框架（窗口）标签 name---窗口的名称 src—在这个窗口中放入什么页面<table><tr></tr><tr></tr></table>1. 纵向分隔窗口<frameset cols=”30%,*”> <frame name=”left” src = “ a.html”> <frame name=”right” src = “ b.html”></frameset>2.横向分隔窗口 <table><tr></tr><tr></tr><tr></tr></table> <table><tr></tr><tr></tr><tr></tr></table><obj></obj>3. 横向和纵向分隔窗口注意:在<a href=” ” target=” ”>target用来表示要超链接的页面在哪个窗口打开__blank -----新启一个窗口打开__self--------在同一窗口打开__parent-----在父窗口打开__top---------在整个浏览器打开16.css1.三种样式表 内嵌样式表：直接写在<head></head>标签里面 <style type=”text/css”> </style> 外部样式表：将所有的样式写在一个外部.css文件 使用时必须导入： <style type=”text/css”> @import 样式表文件.css ----注意路径 </style> <link rel=”stylesheet” type=”text/css” href=” 样式表文件.css ” >行内样式表:添加一定的属性 ”>任何html标签都可以向里面加入行内样式表优先级：行内样式表>>>>内嵌样式表>>>>外部样式表2. 三种选择器：Html选择器 ------直接使用html所含有标签作为选择器的名字类选择器-----------必须前面加一个“.”号+类名（自定义）;ID选择器----------必须前面加一个“#”号+id名（自定义）;<style type="text/css">p{background-color:#FFFFCC}.red{ color:red;font-family:"隶书"}#blue{ color:blue;font-family:"宋体"}#orange{color:#FF9900;font-family:"宋体"}</style>使用：Html选择器 ------使用了当前的标签的会自动添加样式类选择器 -------必须在html标签中加入一个class属性，然后写入你要使用的类选择器的名字；ID选择器 ---------必须在html标签中加入一个id属性，然后写入你要使用的id选择器的名字例如：窗前明月光窗前明月光>窗前明月光3. 文本属性font-size ---------文字大小font-family------文字字体类型font-style --------文本的字体样式 normal bold italiccolor -----文字颜色text—align ------文字对齐方式 left center right text-decoration -----设置有无下划线 none underline line-through4. 背景属性background-color----背景颜色background-image: url()----背景图片background-repeat 背景图片显示情况 repeat no-repeat5. 方框属性边界属性： margin-top -------设置上边界的宽度 margin-bottom -------设置下边界的宽度 margin-left -------设置左边界的宽度 margin-right -------设置右边界的宽度填充属性：padding-top -------设置上填充的宽度 padding –bottom -------设置下填充的宽度 padding –left -------设置左填充的宽度 padding –right -------设置右填充的宽度边框属性 border-style ------边框样式 border-width ------边框宽度 border-color ------边框颜色6. 伪类a:link{ } 未被访问的链接样式a:hover{ } 鼠标悬浮访问的链接样式a:visited{ } 已被访问的链接样式a:active{ } 鼠标正点下去访问的链接样式 注意：属性直接必须要用“；”隔开; 大小的设置必须加px; 本文来源：<a href="https://www.2haoxitong.net/k/doc/8a2c248ca0116c175f0e48f2.html">https://www.2haoxitong.net/k/doc/8a2c248ca0116c175f0e48f2.html</a> </div> <a href="/wkdoc/index.html?url=/k/doc/8a2c248ca0116c175f0e48f2.html" target="_blank" class="download_card"> <img class="download_card_pic" src="/wkdoc/img/icon_word.png" alt=""> <div class="download_card_msg"> <div class="download_card_title" style="text-decoration:none;">《HTML 标签总结.doc》</div> <div class="download_card_tip">将本文的Word文档下载到电脑，方便收藏和打印</div> <div class="download_card_tj"> 推荐度： <img src="/wkdoc/img/icon_star.png" alt=""> <img src="/wkdoc/img/icon_star.png" alt=""> <img src="/wkdoc/img/icon_star.png" alt=""> <img src="/wkdoc/img/icon_star.png" alt=""> <img src="/wkdoc/img/icon_star.png" alt=""> </div> </div> <div class="download_card_btn"> <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU2MjU5MTk0MTg2IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY0MDciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTQzMiAwaDE2MGMyNi42IDAgNDggMjEuNCA0OCA0OHYzMzZoMTc1LjRjMzUuNiAwIDUzLjQgNDMgMjguMiA2OC4yTDUzOS40IDc1Ni42Yy0xNSAxNS0zOS42IDE1LTU0LjYgMEwxODAuMiA0NTIuMmMtMjUuMi0yNS4yLTcuNC02OC4yIDI4LjItNjguMkgzODRWNDhjMC0yNi42IDIxLjQtNDggNDgtNDh6IG01OTIgNzUydjIyNGMwIDI2LjYtMjEuNCA0OC00OCA0OEg0OGMtMjYuNiAwLTQ4LTIxLjQtNDgtNDhWNzUyYzAtMjYuNiAyMS40LTQ4IDQ4LTQ4aDI5My40bDk4IDk4YzQwLjIgNDAuMiAxMDUgNDAuMiAxNDUuMiAwbDk4LTk4SDk3NmMyNi42IDAgNDggMjEuNCA0OCA0OHogbS0yNDggMTc2YzAtMjItMTgtNDAtNDAtNDBzLTQwIDE4LTQwIDQwIDE4IDQwIDQwIDQwIDQwLTE4IDQwLTQweiBtMTI4IDBjMC0yMi0xOC00MC00MC00MHMtNDAgMTgtNDAgNDAgMTggNDAgNDAgNDAgNDAtMTggNDAtNDB6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2NDA4Ij48L3BhdGg+PC9zdmc+" alt=""> <div class="downlod_btn_right"> <div>点击下载文档</div> 文档为doc格式 </div> </div> </a>  <div class="ad-box"> <script type="text/javascript"> s1(); </script> </div> <script type="text/javascript"> s2(); </script> <div class="casedetail-bottom clr"> <div class="casedetail-share flr"> 分享到: <div class="casedetail-share-main fl clearfix"> </div> </div> </div> </div> <script src="https://www.2haoxitong.net/statics/js/js_bh/share.js"> </script> <script type="text/javascript"> $(function() { var size = ['14px', '16px', '18px']; var el = $('.arti-content'); var chooseDom = $('.arti-head-sizewrap > span'); chooseDom.on('click', function() { var iNow = $(this).index(); $(this).addClass('arti-hs-list-act').siblings().removeClass('arti-hs-list-act'); el.css('fontSize', size[iNow]); }); $('.arti-hipl-right-title').html($('.arti-head > h2').html()); $('.share-weixin').on('click', function() { $('.arti-wxwrap').show(); }); $('.arti-wxwrap-close').on('click', function() { $('.arti-wxwrap').hide(); }); new Share({ dom: ['.share-qzone', '.share-sinaminiblog', '.share-qqmb'], contentDom: '.arti-head > h2' }); }); </script> <div class="relcase clearfix"> <div class="relcase-title fl"> <div class="relcase-title-word"> 相 </div> <div class="relcase-title-word"> 关 </div> <div class="relcase-title-word"> 案 </div> <div class="relcase-title-word"> 例 </div> </div> <div class="relcase-right fl"> <div class="relcase-right-main clearfix"> <ul class="relcase-part fl"> <li class="relcase-list clr"> <a href="/k/doc/046933d2a4e9856a561252d380eb6294dc88221a.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/9de1f0770422192e453610661ed9ad51f11d5417.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/80018d5c32b765ce0508763231126edb6f1a7664.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/dcfbececaa8271fe910ef12d2af90242a995ab27.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/36a8829d58cfa1c7aa00b52acfc789eb162d9e98.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> </ul> <ul class="relcase-part fl"> <li class="relcase-list clr"> <a href="/k/doc/33955449f32d2af90242a8956bec0975f465a4e2.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/c0e385d817fc700abb68a98271fe910ef02daee5.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/adce0ea56e175f0e7cd184254b35eefdc8d315a6.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/38856a370042a8956bec0975f46527d3250ca626.html" class="fll relcase-list-link">正在进行安全检测...</a> 2024-04-29 </li> <li class="relcase-list clr"> <a href="/k/doc/5da3695d5a0102020740be1e650e52ea5518ceb1.html" class="fll relcase-list-link">安全验证</a> 2024-04-29 </li> </ul> </div> </div> </div> <script type="text/javascript"> s3(); </script> </div> <div class="right fr"> <script type="text/javascript"> s7(); </script> <div class="hot-recom mb-10"> <h3 class="cm-right-title">相关推荐</h3> <ul class="hot-recom-main"> <li class="hot-recom-list clearfix"> <a href="/k/doc/fb36faed00f69e3143323968011ca300a6c3f69c.html" class="hot-recom-ls clearfix"> 1 写信作文：一封家书表孝心作文300字 - 24 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/d08b6b20f78a6529647d539e.html" class="hot-recom-ls clearfix"> 2 [整理]2014年高考英语语法专项训练反意疑问句 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/f40dda74a0116c175e0e48d5.html" class="hot-recom-ls clearfix"> 3 2016济南外国语学校小升初真题及解析 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/efc77fdabf1e650e52ea551810a6f524cdbfcb31.html" class="hot-recom-ls clearfix"> 4 危险品车辆安全行车保证书（精选多篇） </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/91be80300342a8956bec0975f46527d3250ca60c.html" class="hot-recom-ls clearfix"> 5 初中写人叙事作文800字优秀例文 doc </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/3baa705db4daa58da0114afe.html" class="hot-recom-ls clearfix"> 6 班级风采介绍 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/3f05ed6b58fafab069dc0225.html" class="hot-recom-ls clearfix"> 7 十二星座速配表 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/13ad4421b207e87101f69e3143323968011cf4a0.html" class="hot-recom-ls clearfix"> 8 传说吕洞宾三戏白牡丹是怎样的 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/ac80c72cf78a6529647d53a6.html" class="hot-recom-ls clearfix"> 9 读无量寿经的心得 </a> </li> <li class="hot-recom-list clearfix"> <a href="/k/doc/2a33afc942323968011ca300a6c30c225801f0ec.html" class="hot-recom-ls clearfix"> 10 葡萄酒的市场营销策略 </a> </li> </ul> </div> <script type="text/javascript"> s8(); </script> <div class="hot-search"> <h3 class="cm-right-title">推荐内容</h3> <div class="hot-search-main clearfix"> <a href="/k/doc/24c3cfb9294ac850ad02de80d4d8d15abe23004c.html" class="hot-search-word fl">吕洞宾大故事</a> <a href="/k/doc/2677f145370cba1aa8114431b90d6c85ec3a88c6.html" class="hot-search-word fl">自荐信幽默</a> <a href="/k/doc/e00862b6ba4cf7ec4afe04a1b0717fd5360cb2ff.html" class="hot-search-word fl">五年级上册英语作文</a> <a href="/k/doc/f3e70e59effdc8d376eeaeaad1f34693dbef107f.html" class="hot-search-word fl">新人教版小学数学三年级上册第三单元《测量》练习题</a> <a href="/k/doc/e15f71b9c77da26925c5b09b.html" class="hot-search-word fl">让孩子们在国旗下茁壮成长</a> <a href="/k/doc/714890b2ae1ffc4ffe4733687e21af45b207fe1b.html" class="hot-search-word fl">教师培训学习心得体会专题6篇最新</a> <a href="/k/doc/e209a39417fc700abb68a98271fe910ef12dae9b.html" class="hot-search-word fl">交通安全保证书范文3篇（最新篇）</a> <a href="/k/doc/5f2a6443336c1eb91a375d5f.html" class="hot-search-word fl">中国历年城市数量及人口面积情况统计(1978-2007)</a> <a href="/k/doc/e887cdfbc8d376eeaeaa31bd.html" class="hot-search-word fl">膈疝</a> <a href="/k/doc/f4e20a86ce22bcd126fff705cc17552707225e40.html" class="hot-search-word fl">最新初三英语下学期第一次月考质量分析</a> </div> </div> <div class="ad-sty"> <div class=" nav-position"> <script type="text/javascript"> s10(); </script> </div> </div> </div> </div> </div> <style type="text/css"> .footer-friendlink{max-height: 70px;overflow: hidden;} </style> <div class="wrap-b footer-b"> <div class="wrap footer-index"> <div class="footer-copy"> 网站内容来自网络，如有侵权请联系我们，立即删除！ Copyright © 范文写作网京ICP备16605803号 <script type="text/javascript">tj();</script> </div> </div> </div> <script src="https://www.2haoxitong.net/statics/js/js_bh/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"> </script> <script type="text/javascript"> $(function() { jQuery(".slideBox").slide({ mainCell: ".bd ul", effect: "leftLoop", autoPlay: true }); $('.hrt-head .hrt-head-list').on('mouseover', function() { $(this).addClass('hrt-head-list-hover').siblings().removeClass('hrt-head-list-hover'); $('.hrt-main .hrt-main-list').eq($(this).index()).addClass('hrt-main-list-show').siblings().removeClass('hrt-main-list-show'); }); $('.ma-nav .ma-nav-list').on('mouseover', function() { $(this).addClass('ma-nav-list-hover').siblings().removeClass('ma-nav-list-hover'); $('.ls-main .ls-mod').eq($(this).index()).addClass('ls-mod-act').siblings().removeClass('ls-mod-act'); $('.ls-main-addmore .ls-mod').eq($(this).index()).addClass('ls-mod-act').siblings().removeClass('ls-mod-act'); }); }); </script> <script> $(function() { function loadImg() { var cT = document.documentElement.clientHeight; var sT = $('html').scrollTop() || $('body').scrollTop(); $('img').each(function(index, el) { if (!$(this).attr('data-src')) { var curT = $(this).offset().top; if (curT < cT + sT) { $(this).attr('src', $(this).attr('data-src')) } } }); } loadImg(); window.onscroll = function() { loadImg(); }; }); </script> </body> </html>