HTML <input> type 属性_HTML 参考手册_HTML/CSS_教程_教程_JSON在线解析及格式化验证_CPU中文网

Tool.cpu.com.cn

在线开发工具

程序员教程

图形图像工具

文字处理工具

HTML 参考手册

HTML 标签列表(字母排序)
HTML 标签列表（功能排序）
HTML 全局属性
HTML 事件
HTML 画布
HTML 音频/视频
HTML 有效DOCTYPES
HTML 颜色名
HTML 拾色器
HTML 颜色混搭
HTML 字符集
HTML ASCII
HTML ISO-8859-1
HTML 符号
HTML URL 编码
HTML 语言代码
HTTP 消息
HTTP 方法
Px/Em 换算工具
键盘快捷键
HTML 标签
- </a> </li> <li class=""> <a href="/jiaocheng/co-1055.html"> <img></a> </li> <li class=""> <a href="/jiaocheng/co-1056.html"> <input></a> </li> <li class=""> <a href="/jiaocheng/co-1057.html"> <ins></a> </li> <li class=""> <a href="/jiaocheng/co-1058.html"> <kbd></a> </li> <li class=""> <a href="/jiaocheng/co-1059.html"> <keygen></a> </li> <li class=""> <a href="/jiaocheng/co-1060.html"> <label></a> </li> <li class=""> <a href="/jiaocheng/co-1061.html"> <legend></a> </li> <li class=""> <a href="/jiaocheng/co-1062.html"> <li></a> </li> <li class=""> <a href="/jiaocheng/co-1063.html"> <link></a> </li> <li class=""> <a href="/jiaocheng/co-1064.html"><main></a> </li> <li class=""> <a href="/jiaocheng/co-1065.html"> <map></a> </li> <li class=""> <a href="/jiaocheng/co-1066.html"> <mark></a> </li> <li class=""> <a href="/jiaocheng/co-1067.html"> <menu></a> </li> <li class=""> <a href="/jiaocheng/co-1068.html"> <meta></a> </li> <li class=""> <a href="/jiaocheng/co-1069.html"> <meter></a> </li> <li class=""> <a href="/jiaocheng/co-1070.html"> <nav></a> </li> <li class=""> <a href="/jiaocheng/co-1071.html"> <noframes></a> </li> <li class=""> <a href="/jiaocheng/co-1072.html"> <noscript></a> </li> <li class=""> <a href="/jiaocheng/co-1073.html"> <object></a> </li> <li class=""> <a href="/jiaocheng/co-1074.html"> <ol></a> </li> <li class=""> <a href="/jiaocheng/co-1075.html"> <optgroup></a> </li> <li class=""> <a href="/jiaocheng/co-1076.html"> <option></a> </li> <li class=""> <a href="/jiaocheng/co-1077.html"> <output></a> </li> <li class=""> <a href="/jiaocheng/co-1078.html"> <p></a> </li> <li class=""> <a href="/jiaocheng/co-1079.html"> <param></a> </li> <li class=""> <a href="/jiaocheng/co-1080.html"> <pre></a> </li> <li class=""> <a href="/jiaocheng/co-1081.html"> <html></a> </li> <li class=""> <a href="/jiaocheng/co-1082.html"><picture></a> </li> <li class=""> <a href="/jiaocheng/co-1083.html">progress</a> </li> <li class=""> <a href="/jiaocheng/co-1084.html">q </a> </li> <li class=""> <a href="/jiaocheng/co-1085.html"> <rp></a> </li> <li class=""> <a href="/jiaocheng/co-1086.html"> <rt></a> </li> <li class=""> <a href="/jiaocheng/co-1087.html"> <ruby></a> </li> <li class=""> <a href="/jiaocheng/co-1088.html"> <s></a> </li> <li class=""> <a href="/jiaocheng/co-1089.html"> <samp></a> </li> <li class=""> <a href="/jiaocheng/co-1090.html"><script> </a> </li> <li class=""> <a href="/jiaocheng/co-1091.html"> <section></a> </li> <li class=""> <a href="/jiaocheng/co-1092.html"> <select></a> </li> <li class=""> <a href="/jiaocheng/co-1093.html"> <small></a> </li> <li class=""> <a href="/jiaocheng/co-1094.html"> <source></a> </li> <li class=""> <a href="/jiaocheng/co-1095.html"> <span></a> </li> <li class=""> <a href="/jiaocheng/co-1096.html"> <strike></a> </li> <li class=""> <a href="/jiaocheng/co-1097.html"> <strong></a> </li> <li class=""> <a href="/jiaocheng/co-1098.html"> <style></a> </li> <li class=""> <a href="/jiaocheng/co-1099.html"> <sub></a> </li> <li class=""> <a href="/jiaocheng/co-1100.html"> <summary></a> </li> <li class=""> <a href="/jiaocheng/co-1101.html"> <sup></a> </li> <li class=""> <a href="/jiaocheng/co-1102.html"> <table></a> </li> <li class=""> <a href="/jiaocheng/co-1103.html"> <tbody></a> </li> <li class=""> <a href="/jiaocheng/co-1104.html"> <td></a> </li> <li class=""> <a href="/jiaocheng/co-1105.html"> <textarea></a> </li> <li class=""> <a href="/jiaocheng/co-1106.html"> <tfoot></a> </li> <li class=""> <a href="/jiaocheng/co-1107.html"> <th></a> </li> <li class=""> <a href="/jiaocheng/co-1108.html"> <thead></a> </li> <li class=""> <a href="/jiaocheng/co-1109.html"> <time></a> </li> <li class=""> <a href="/jiaocheng/co-1110.html"> <title></a> </li> <li class=""> <a href="/jiaocheng/co-1111.html"> <tr></a> </li> <li class=""> <a href="/jiaocheng/co-1112.html"> <track></a> </li> <li class=""> <a href="/jiaocheng/co-1113.html"> <tt></a> </li> <li class=""> <a href="/jiaocheng/co-1114.html"> <u></a> </li> <li class=""> <a href="/jiaocheng/co-1115.html"> <ul></a> </li> <li class=""> <a href="/jiaocheng/co-1116.html"> <var></a> </li> <li class=""> <a href="/jiaocheng/co-1117.html"> <video></a> </li> <li class=""> <a href="/jiaocheng/co-1118.html"> <wbr></a> </li> </ul> </div>  <div id='write' class='is-node'> <h1 class="border-b-none"><a name="" class="md-header-anchor"></a><span>HTML <input> type 属性</span></h1> <div class="pre-and-next"> <a href="co-4488.html">上一篇：HTML <input> step 属性</a> <a href="co-4490.html" >下一篇：HTML <input> value 属性 </a> </div> <div class="article-intro" id="content"><p><a href="co-1056.html"><img alt="HTML input 标签参考手册" class="navup" src="/uploadfile/up/3e/a9/18/41e5761fb9ace3ecbd611c59b218a93e.jpg"/> HTML <input> 标签</a></p><div class="example"> <h2 class="example">实例</h2> <p>带有两种不同输入类型的 HTML 表单，text 和 submit：</p> <div class="example_code notranslate"> <form action="demo-form.php"><br/> 用户名: <input type="text" name="usrname"><br><br/> <input type="submit" value="提交"> </div> <br/> <br/>(查看本页底部更多实例) </div><hr/><h2>浏览器支持</h2><p> <img alt="Internet Explorer" height="30" src="/uploadfile/up/4e/a4/5d/6de56157646f895dc3df5461415da44e.jpg" title="Internet Explorer" width="31"/><img alt="Firefox" height="30" src="/uploadfile/up/00/0c/91/2b336d55073fa6256944bff0e3910c00.jpg" title="Firefox" width="31"/><img alt="Opera" height="30" src="/uploadfile/up/6f/c9/2f/2fde4bf7adb5ab30bcc93bcca92fc96f.jpg" title="Opera" width="28"/><img alt="Google Chrome" height="30" src="/uploadfile/up/6a/8e/5a/cb756c591b627ba35012a37de65a8e6a.jpg" title="Google Chrome" width="31"/><img alt="Safari" height="30" src="/uploadfile/up/a1/dc/41/cb5ba57a8254753663d18a4a0a41dca1.jpg" title="Safari" width="28"/></p><p>所有主流浏览器都支持 type 属性。但是，并非所有主流浏览器都支持所有不同的 input 类型都能在所有主流浏览器中工作。</p><p>请看下面关于每种输入类型的浏览器支持。</p><hr/><h2>定义和用法</h2><p>type 属性规定要显示的 <input> 元素的类型。</p><p>默认类型是：text。</p><p><strong>提示：</strong>该属性不是必需的，但是我们认为您应该始终使用它。</p><hr/><h2>HTML 4.01 与 HTML5之间的差异</h2><p>以下 input 类型是 HTML5 中的新类型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。</p><hr/><h2>语法</h2><div class="code notranslate"><div> <input type="<i>value</i>"> </div></div><h2>属性值</h2><table class="reference notranslate"> <tbody><tr> <th width="22%">值</th> <th>描述</th> </tr> <tr> <td>button</td> <td>定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。</td> </tr> <tr> <td>checkbox</td> <td>定义复选框。</td> </tr> <tr> <td>color<span class="new">New</span> </td> <td>定义拾色器。</td> </tr> <tr> <td>date<span class="new">New</span> </td> <td>定义 date 控件（包括年、月、日，不包括时间）。</td> </tr> <tr> <td>datetime<span class="new">New</span> </td> <td>定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。</td> </tr> <tr> <td>datetime-local<span class="new">New</span> </td> <td>定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。</td> </tr> <tr> <td>email<span class="new">New</span> </td> <td>定义用于 e-mail 地址的字段。</td> </tr> <tr> <td>file</td> <td>定义文件选择字段和 "浏览..." 按钮，供文件上传。</td> </tr> <tr> <td>hidden</td> <td>定义隐藏输入字段。</td> </tr> <tr> <td>image</td> <td>定义图像作为提交按钮。</td> </tr> <tr> <td>month<span class="new">New</span> </td> <td>定义 month 和 year 控件（不带时区）。</td> </tr> <tr> <td>number<span class="new">New</span> </td> <td>定义用于输入数字的字段。</td> </tr> <tr> <td>password</td> <td>定义密码字段（字段中的字符会被遮蔽）。</td> </tr> <tr> <td>radio</td> <td>定义单选按钮。</td> </tr> <tr> <td>range<span class="new">New</span> </td> <td>定义用于精确值不重要的输入数字的控件（比如 slider 控件）。</td> </tr> <tr> <td>reset</td> <td>定义重置按钮（重置所有的表单值为默认值）。</td> </tr> <tr> <td>search<span class="new">New</span> </td> <td>定义用于输入搜索字符串的文本字段。</td> </tr> <tr> <td>submit</td> <td>定义提交按钮。</td> </tr> <tr> <td>tel<span class="new">New</span> </td> <td>定义用于输入电话号码的字段。</td> </tr> <tr> <td>text</td> <td>默认。定义一个单行的文本字段（默认宽度为 20 个字符）。</td> </tr> <tr> <td>time<span class="new">New</span> </td> <td>定义用于输入时间的控件（不带时区）。</td> </tr> <tr> <td>url<span class="new">New</span> </td> <td>定义用于输入 URL 的字段。</td> </tr> <tr> <td>week<span class="new">New</span> </td> <td>定义 week 和 year 控件（不带时区）。</td> </tr> </tbody></table><hr/><h2>实例</h2><h3>输入类型：button</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义可点击的按钮，在用户单击按钮时启动一段 JavaScript：</p> <div class="example_code notranslate"> <input type="button" value="点我" onclick="msg()"> </div> <br/> </div><hr/><h3>输入类型：checkbox</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>复选框允许用户在一定数量的选择中选取一个或多个选项：</p> <div class="example_code notranslate"> <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br><br/> <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br><br/> <input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br> </div> <br/> </div><hr/><h3>输入类型：color</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/94/d6/4a/461825c041f020f55dde0c34014ad694.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">从拾色器中选取颜色：</p> <div class="example_code notranslate"> 选择你喜欢的颜色: <input type="color" name="favcolor"><br> </div> <br/> </div><hr/><h3>输入类型：date</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义 date 控件：</p> <div class="example_code notranslate"> 生日: <input type="date" name="bday"></div> <br/> </div><hr/><h3>输入类型：datetime</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/ce/bb/9c/dc5a83d7bf7f1c8b8ff35336229cbbce.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义 date 和 time 控件（带有时区）：</p> <div class="example_code notranslate"> 生日 (日期和时间): <input type="datetime" name="bdaytime"></div> <br/> </div><hr/><h3>输入类型：datetime-local</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义 date 和 time 控件（不带时区）：</p> <div class="example_code notranslate"> 生日 (日期和时间):<input type="datetime-local" name="bdaytime"></div> <br/> </div><hr/><h3>输入类型：email</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/94/d6/4a/461825c041f020f55dde0c34014ad694.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）：</p> <div class="example_code notranslate"> E-mail: <input type="email" name="usremail"></div> <br/> </div><p><b>提示：</b>iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它（添加 @ 和 .com 选项）。</p><hr/><h3>输入类型：file</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义文件选择字段和 "浏览..." 按钮，供文件上传：</p> <div class="example_code notranslate"> 选择一个文件: <input type="file" name="img"> </div> <br/> </div><hr/><h3>输入类型：hidden</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值：</p> <div class="example_code notranslate"> <input type="hidden" name="country" value="Norway"> </div> <br/> </div><hr/><h3>输入类型：image</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义图像作为提交按钮：</p> <div class="example_code notranslate"> <input type="image" src="img_submit.gif" alt="Submit"> </div> <br/> </div><hr/><h3>输入类型：month</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义 month 和 year 控件（不带时区）：</p> <div class="example_code notranslate"> 生日 ( 月和年 ): <input type="month" name="bdaymonth"></div> <br/> </div><hr/><h3>输入类型：number</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义用于输入数字的字段（您可以设置可接受数字的限制）：</p> <div class="example_code notranslate"> 数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"></div> <br/> </div><p>请使用下面的属性来规定限制：</p><ul> <li><a href="co-4477.html">max</a> - 规定允许的最大值。</li> <li><a href="co-4479.html">min</a> - 规定允许的最小值。</li> <li><a href="co-4488.html">step</a> - 规定合法数字间隔。</li> <li><a href="co-4490.html">value</a> - 规定默认值。</li> </ul><hr/><h3>输入类型：password</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义密码字段（密码字段中的字符会被遮蔽）：</p> <div class="example_code notranslate"> <input type="password" name="pwd"> </div> <br/> </div><hr/><h3>输入类型：radio</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">允许用户在一定数量的选择中选取一个选项：</p> <div class="example_code notranslate"> <input type="radio" name="gender" value="male"> Male<br><br/> <input type="radio" name="gender" value="女"> 女 </div> <br/> </div><hr/><h3>输入类型：range</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：</p> <div class="example_code notranslate"> <input type="range" name="points" min="1" max="10"></div> <br/> </div><p>请使用下面的属性来规定限制：</p><ul> <li><a href="co-4477.html">max</a> - 规定允许的最大值。</li> <li><a href="co-4479.html">min</a> - 规定允许的最小值。</li> <li><a href="co-4488.html">step</a> - 规定合法数字间隔。</li> <li><a href="co-4490.html">value</a> - 规定默认值。</li> </ul><hr/><h3>输入类型：reset</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义重置按钮（重置所有表单值为默认值）：</p> <div class="example_code notranslate"> <input type="reset"></div> <br/> </div><p><b>提示：</b>请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情。</p><hr/><h3>输入类型：search</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/65/2d/05/b4992c30b6da9311e4f7b92903052d65.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义搜索字段（比如站内搜索或谷歌搜索等）：</p> <div class="example_code notranslate"> Search Google: <input type="search" name="googlesearch"></div> <br/> </div><hr/><h3>输入类型：submit</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义提交按钮：</p> <div class="example_code notranslate"> <input type="submit"></div> <br/> </div><hr/><h3>输入类型：tel</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/65/2d/05/b4992c30b6da9311e4f7b92903052d65.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/94/d6/4a/461825c041f020f55dde0c34014ad694.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/ce/bb/9c/dc5a83d7bf7f1c8b8ff35336229cbbce.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义用于输入电话号码的字段：</p> <div class="example_code notranslate"> 电话号码: <input type="tel" name="usrtel"></div> <br/> </div><hr/><h3>输入类型：text</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义两个用户可向其中输入文本的单行的文本字段：</p> <div class="example_code notranslate"> First name: <input type="text" name="fname"><br><br/> Last name: <input type="text" name="lname"><br> </div> <br/> </div><hr/><h3>输入类型：time</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义用于输入时间的控件（不带时区）：</p> <div class="example_code notranslate"> 选择时间: <input type="time" name="usr_time"></div> <br/> </div><hr/><h3>输入类型：url</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/94/d6/4a/461825c041f020f55dde0c34014ad694.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/a0/c3/f9/0880b4ac1872df78a51b7416f7f9c3a0.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/d5/8f/29/e97571a4017551b6c62669217c298fd5.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p class="example">定义用于输入 URL 的字段：</p> <div class="example_code notranslate"> 添加你的主页: <input type="url" name="homepage"></div> <br/> </div><p><b>提示：</b>iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它（添加 .com 选项）。</p><hr/><h3>输入类型：week</h3><div class="example"> <img alt="Opera" height="20" src="/uploadfile/up/5f/1d/c4/2ec24f1cc63d063f606f9c67b4c41d5f.jpg" style="float:right;" title="Opera" width="20"/> <img alt="Safari" height="20" src="/uploadfile/up/13/37/e7/a2c407db0f76c58e3040bdeae8e73713.jpg" style="float:right;" title="Safari" width="20"/> <img alt="Chrome" height="20" src="/uploadfile/up/7a/54/84/bbb3b8f198524b229bd370e93684547a.jpg" style="float:right;" title="Chrome" width="20"/> <img alt="Firefox" height="20" src="/uploadfile/up/b1/a6/10/7cba29e1595cbc9430d995b1f210a6b1.jpg" style="float:right;" title="Firefox" width="20"/> <img alt="Internet Explorer" height="20" src="/uploadfile/up/db/21/e8/f13ae6f995a32ccd7b2d4a86d3e821db.jpg" style="float:right;" title="Internet Explorer" width="20"/> <h2 class="example">实例</h2> <p>定义 week 和 year 控件（不带时区）：</p> <div class="example_code notranslate"> 选择周: <input type="week" name="week_year"></div> <br/> </div><hr/><a href="co-1056.html"><img alt="HTML input 标签参考手册" class="navup" src="/uploadfile/up/3e/a9/18/41e5761fb9ace3ecbd611c59b218a93e.jpg"/> HTML <input> 标签</a>其他扩展</div> <div class="pre-and-next"> <a href="co-4488.html">上一篇：HTML <input> step 属性</a> <a href="co-4490.html" >下一篇：HTML <input> value 属性 </a> </div> </div> <div class="right-nav-con" id="rightNavCon"> <ul id="rightNavList"> <li><strong>分类导航</strong></li> <li data-type="dropdown"> <a href="javascript:;">HTML/CSS  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/bootstrap/" class="">Bootstrap 教程</a></dd> <dd><a href="/jiaocheng/bootstrap4/" class="">Bootstrap4 教程</a></dd> <dd><a href="/jiaocheng/css/" class="">CSS 教程</a></dd> <dd><a href="/jiaocheng/css3/" class="">CSS3 教程</a></dd> <dd><a href="/jiaocheng/html/" class="">HTML 教程</a></dd> <dd><a href="/jiaocheng/html5jc/" class="">HTML5教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">JavaScript  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/ajax/" class="">Ajax 教程</a></dd> <dd><a href="/jiaocheng/googleapi/" class="">Google 地图 API 教程</a></dd> <dd><a href="/jiaocheng/jsref/" class="">JavaScript 参考手册</a></dd> <dd><a href="/jiaocheng/jeasyui/" class="">jQuery EasyUI 教程</a></dd> <dd><a href="/jiaocheng/jquery/" class="">jQuery 教程</a></dd> <dd><a href="/jiaocheng/json_t/" class="">JSON 教程</a></dd> <dd><a href="/jiaocheng/vue2/" class="">Vue.js 教程</a></dd> <dd><a href="/jiaocheng/js/" class="">Javascript 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">后端语言  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/cprogramming/" class="">C 教程</a></dd> <dd><a href="/jiaocheng/cplusplus/" class="">C++ 教程</a></dd> <dd><a href="/jiaocheng/go/" class="">Go 语言教程</a></dd> <dd><a href="/jiaocheng/java/" class="">Java 教程</a></dd> <dd><a href="/jiaocheng/nodejs/" class="">Node.js 教程</a></dd> <dd><a href="/jiaocheng/php/" class="">PHP 教程</a></dd> <dd><a href="/jiaocheng/python3/" class="">Python 3 教程</a></dd> <dd><a href="/jiaocheng/scala/" class="">Scala 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">数据库  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/memcached/" class="">Memcached 教程</a></dd> <dd><a href="/jiaocheng/mongodb/" class="">MongoDB 教程</a></dd> <dd><a href="/jiaocheng/mysql/" class="">MySQL 教程</a></dd> <dd><a href="/jiaocheng/redis/" class="">Redis 教程</a></dd> <dd><a href="/jiaocheng/sql/" class="">SQL 教程</a></dd> <dd><a href="/jiaocheng/sqlite/" class="">SQLite 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">移动开发  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/android/" class="">Android 教程</a></dd> <dd><a href="/jiaocheng/ionic/" class="">ionic 教程</a></dd> <dd><a href="/jiaocheng/ios/" class="">iOS 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">服务器相关  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/docker/" class="">Docker 教程</a></dd> <dd><a href="/jiaocheng/linux/" class="">Linux 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">开发工具  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/eclipse/" class="">Eclipse 教程</a></dd> <dd><a href="/jiaocheng/svn/" class="">SVN 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">网站建设  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/htpjc/" class="">HTTP 教程</a></dd> <dd><a href="/jiaocheng/w3c/" class="">W3C 教程</a></dd> </dl> </li> <li data-type="dropdown"> <a href="javascript:;">XML教程  <i class="opacity-5 fa fa-angle-down" aria-hidden="true"></i> </a> <dl class="height-0"> <dd><a href="/jiaocheng/xlink/" class="">XLink 教程</a></dd> <dd><a href="/jiaocheng/dom/" class="">XML DOM 教程</a></dd> <dd><a href="/jiaocheng/xml/" class="">XML 教程</a></dd> </dl> </li> </ul> </div> </div>  <footer class="relative b-large-margin"> <div class="container"> <div class="footer-gg-b"> <div class="footer-gg-b-addr">  </div> <div class="footer-gg-b-style"> <div class="footer-gg-b-link"> <a href="" class="footer-gg-b-email">联系我们</a> <a href="" class="footer-gg-b-feedback">问题反馈</a> </div> <p class="footer-gg-b-copy"><a href="https://beian.miit.gov.cn" target="_blank">鄂ICP备2023022218号-2</a> ©2023 CPU.COM.CN ALL RIGHT RESERVED</p></div> </div> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js?id=JtK9htQUws8UhD7i&ck=JtK9htQUws8UhD7i&autoTrack=true"></script><script type="text/javascript" src="https://js.users.51.la/21804545.js"></script><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js?id=K079qR6lFQ4UNH67&ck=K079qR6lFQ4UNH67"></script> </div></footer> <div class="xf-window"> <div class="xf-wxewm" id="showQrcode"> <i class="fa fa-qrcode icon icon-qrcode "></i> <div class="xf-qrcode" id="wxQrcode"> <p>用微信扫一扫</p> <img src="/static/202010/img/gzh_wechat.jpg" width="150"> </div> </div> <a class="fa fa-star xf-collection"> 收藏 </a> <div class="fa fa-qq xf-share " id="showQqlist"> <div class="xf-qrcode xf-qq-link " id="qqWindow" style="display: none"> <p class="xf-qq-link-tit">CPU中文网交流群</p> <p><span>QQ群：</span></p> <a target="_blank" href="">点击加入群</a> <p><span>QQ客服：</span> </p> <p>(工作日: 9:00-18:00)</p> <a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">点击联系客服</a> </div> </div> <a href="/feedback.html" class="fa fa-pencil xf-myfeed" target="_blank" id="feedBack"> </a> <div class="xf-totop" id="goTop"> <i class="fa fa-caret-up icon icon-caret-up"></i> </div> </div> <script src="/static/202010/js/lang.js"></script> <script src="/static/202010/js/login.js"></script> <script src="/static/202010/js/footer.js"></script> <style> .popup-link-info-box { position: absolute; right: 58px; top: 0; background-color: #fff; -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1); padding: 15px; display: none; } .popup-link-info-box li { float: left; margin-right: 10px; border: 1px solid #eee; text-align: center; line-height: 50px; } .popup-link-info-box li p { font-size: 14px; color: #333; } .popup-link-info-box li p span { font-size: 14px; color: #333; } .popup-link-info-box li .popup-wechat-wrapper {} .popup-link-info-box li .popup-wechat-wrapper img { height: 100%; width: 100%; object-fit: cover; } </style> <script type="text/javascript" src="/static/kj/js/jquery.js"></script> <script type="text/javascript" src="/static/kj/js/home-1589270335000-bundle.js"></script> <script type="text/javascript" src="/static/202010/js/jquery.cookie.js"></script> <script type="text/javascript" src="/static/kj/js/pre.js"></script> <script src="/static/202010/js/new-common.js"></script> <script> $(function () { //替换为 pre 标签 // $('.example_code').unwrap().wrap('<pre/>'); $('.example_code').find('br').remove() $('.example_code').replaceWith(function(){ return $("<pre />").append($(this).contents()); }); $("pre").addClass("prettyprint");//如果其他地方也要用到pre，我们可以再加一个父标签的选择器来区分 prettyPrint();//代替body上的onload事件加载该方法 $('a.tryitbtn').text('运行代码') //左导航高度 // var centHeight = $('.is-node').outerHeight() - 2 // $('.left-nav-container').height(centHeight) // $('.left-nav-container ul').height(centHeight - 36) // $('.right-nav-con').height(centHeight) }) $('#write').find('hr').remove() </script> </body> </html>