HTML基础控件介绍_动力节点Java学院整理 游戏攻略

submit：提交当前表单信息到指定页面

button：普通按钮

　　　　value属性：button按钮显示的文本

file：文件选择标签

hide：隐藏区域，可以把一些不展示给用户，而自己使用的信息存放于此

image：图片区域

　　　　src属性：指定图片存放的路径；
　　　　title属性：鼠标移到图上显示的文本；
　　　　alt：图片加载失败或关闭时，显示的文本；
 

示例

标签

可创建单选或多选菜单，类似于winform的combox或listbox。

属性

1) size {int}：设置下拉列表尺寸。默认的为combox样式；大于1时，就是listbox样式。

2) multiple {boolean}：是否多项选择。若为多选，按住Ctrl+左键可进行多选操作。

3) item子项：

①

标签：定义选择项的类别，不能被选中。

　　label {string} 属性：类别展示的名称
　　title {string} 属性：鼠标移到选择项上去，要展示的信息

②

标签：定义可选的项目

　　vlaue {string} 属性：选择项具体的名称
　　title {string} 属性：鼠标移到选择项上去，要展示的信息 
 

示例

select标签

北京 上海 浙江 福建

标签</strong></span></p> <p>多行文本区域，可以通过 cols 和 rows 属性来设定 textarea 的尺寸。</p> <p><strong>属性</strong></p> <p>rows {int}：表示显示的行数。<br /> cols {int}：表示显示的列数。<br /> readonly {boolean}：是否只读。<br />  </p> <p><span style="color: #ff0000"><strong>示例 <br /> </strong></span></p> <p><span style="background-color: #ffff00"><strong><label>标签</strong></span></p> <p>相当于一个展示文本框。</p> <p>属性</p> <p>for {elementID}：关联对应的控件id；当点击此label标签时，绑定id的控件会获取焦点；<br />  </p> <pre class="brush:xhtml;"> <table> <tr> <td><label for='username'>姓名：</label></td> <td><input type="text" id='username'/></td> </tr> <tr> <td><label for='userpwd'>密码：</label></td> <td><input type="password" id='userpwd' /></td> </tr> </table></pre> <p><span style="color: #ff0000"><strong>示例</strong></span></p> <p><span style="background-color: #ffff00"><strong><fieldset>标签</strong></span></p> <p>类似于winform中的groupBox控件。</p> <p><strong>item子项</strong></p> <p><legend></legend>：表示抬头的名称。<br />  </p> <pre class="brush:xhtml;"> <h3>fieldset标签</h3> <fieldset style='width:130px' > <legend>性别</legend> <input type="radio" name='sex' value='boy' />男 <input type="radio" name='sex' value='girl' />女 </fieldset> </pre> <p><span style="color: #ff0000"><strong>示例</strong></span></p> <p>ul、ol、li 列表标签</p> <p>ul ：unordered list （无序列表）</p> <p>ol ：ordered list  （有序列表））</p> <p>li ：list item （列表项目），基于上面2个列表子项目。<br />  </p> <p>代码示例：<br />  </p> <pre class="brush:xhtml;"> <ul type=circle> <li>ul1</li> <li>ul2</li> <li>ul3</li> </ul> <ol type=1> <li>li1</li> <li>li2</li> <li>li3</li> </ol></pre> <p><span style="color: #ff0000"><strong>属性</strong></span></p> <p>type  {string}：定义了<li> 标签前面的符号样式。</p> <p>ul：type 有：circle 空心圆，disc 实心圆，square 实心正方形， none ：前面无符号;</p> <p>ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：罗马数字i,ii,iii；虽然还可以定义为：circle、disc、square、none但现实都为1,2,3等序列；</p> <span id="art_bot" class="jbTestPos"></span> </div> <div class="pagebar"> </div> <div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div> <div class="mbd_ad"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5850285417076520" data-ad-slot="9825815134" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="rights"> <h5>版权声明</h5> <p>本文仅代表作者观点，不代表本站立场。<br> 本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/HTML/70492.html</p> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script> </div> <div class="r-pn-post"> <div class="shang"><a title="HTML中的5种空格各表示的意义 游戏攻略" href="/web/HTML/70491.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> HTML中的5种空格各表示的意义 游戏攻略 </a></div> <div class="xia"><a href="/web/HTML/70494.html" rel="bookmark" class="next_p"><span>下一篇 :</span> HTML图片img标签_动力节点Java学院整理 游戏攻略</a></div> <div class="clear"></div> </div> </div> <div class="related"> <h4>相关文章</h4> <ul> <li> <a href="/jtjc/win10/126360.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201604/20160430120607303.jpg" alt="win2008下网站首页后面的index.html如何去掉?"></div> <p>win2008下网站首页后面的index.html如何去掉?</p> </a> </li><li> <a href="/Hardware/diannaochangshi/160867.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201406/2014060316175794.jpg" alt="文件格式 html版是什么？文件格式 html版解决方法"></div> <p>文件格式 html版是什么？文件格式 html版解决方法</p> </a> </li><li> <a href="/Hardware/diannaochangshi/160860.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201406/201406040928316.jpg" alt="使用百度搜索关键词列表显示文件格式HTML版怎么回事"></div> <p>使用百度搜索关键词列表显示文件格式HTML版怎么回事</p> </a> </li><li> <a href="/PMsheji/PS/157209.html"> <div class="img"><img src="https://img.jbzj.com/do/upimg/080906/1220A92202T401J95.gif" alt="Photoshop做简单的xhtml+css网页"></div> <p>Photoshop做简单的xhtml+css网页</p> </a> </li><li> <a href="/PMsheji/PS/156774.html"> <div class="img"><img src="https://img.jbzj.com/do/uploads/allimg/090916/1704530.jpg" alt="PhotoShop分割图片并通过Html组合显示"></div> <p>PhotoShop分割图片并通过Html组合显示</p> </a> </li><li> <a href="/websafe/yejie/149951.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015925104031825.jpg?2015825104041" alt="HTML5安全风险之CORS攻击详解"></div> <p>HTML5安全风险之CORS攻击详解</p> </a> </li><li> <a href="/websafe/yejie/149948.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/201592694628148.jpg?201582694643" alt="HTML5安全风险之Web Storage攻击详解"></div> <p>HTML5安全风险之Web Storage攻击详解</p> </a> </li><li> <a href="/websafe/yejie/149962.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/201592695532854.jpg?201582695542" alt="HTML5安全风险之WebSQL攻击详解"></div> <p>HTML5安全风险之WebSQL攻击详解</p> </a> </li> </ul> </div> <div class="post_comments"> <div id="comment"> <link href="/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!">    

验证码：