1. 基本语法

  
表单标题
  
其中：
标签用于为
添加标题。

本身不具有内容，但可以包含多个表单元素（如、、<select>等）。<br/></p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>常见应用场景</strong></p></li></ol><p><fieldset>常用于以下场景：</p><p>将多个相关的输入控件组合在一起，例如注册表单中的“个人信息”、“联系方式”等部分。</p><p>提高表单的结构化程度，使用户更容易理解各个部分的功能。</p><p>与CSS结合，实现更美观的表单布局。</p><h2>二、fieldset标签的主要属性</h2><p>虽然<fieldset>本身没有太多属性，但它的一些默认行为和与之相关的属性值得我们关注。</p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>disabled 属性</strong></p></li></ol><p><fieldset>可以使用disabled属性来禁用其中的所有表单控件。当该属性存在时，表单中的所有子元素（如<input>、<select>等）都会被禁用，无法进行交互。</p><pre><code><fieldset disabled>   <legend>不可编辑区域</legend>   <input type="text" name="name"> </fieldset>2.2 class 和 id 属性 <fieldset>同样支持class和id属性，方便通过CSS或JavaScript进行样式控制和操作。 <fieldset id="userGroup" class="form-group">   <legend>用户信息</legend>   <input type="text" name="username"> </fieldset></code></pre><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>标准属性</strong><br/></p></li></ol><p>除了上述特殊属性外，<fieldset>还支持HTML标准属性，如accesskey、dir、lang等，用于增强可访问性和国际化支持。</p><h2>三、fieldset标签的作用</h2><p><fieldset>在网页设计中扮演着重要的角色，主要体现在以下几个方面：</p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>提升表单结构清晰度</strong></p></li></ol><p>通过将相关控件放入同一个<fieldset>中，可以有效组织表单内容，使其逻辑更加清晰，便于用户理解和填写。</p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>增强可访问性</strong></p></li></ol><p><fieldset>与<legend>的结合使用，能够帮助屏幕阅读器更好地识别表单结构，从而提高网站的无障碍体验。</p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>美化界面效果</strong></p></li></ol><p>通过CSS对<fieldset>进行样式设计，可以为其添加边框、背景色、内边距等，使表单看起来更加整洁美观。</p><h2>四、如何设置fieldset的宽高</h2><p>虽然<fieldset>本身不直接支持width和height属性，但可以通过CSS对其进行样式设置，从而实现对其宽高的控制。</p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>使用CSS设置宽度</strong></p></li></ol><p>要设置<fieldset>的宽度，可以使用CSS的width属性：</p><pre><code>fieldset {   width: 500px; }</code></pre><p>这样，整个<fieldset>容器就会占据500像素的宽度。需要注意的是，如果内部内容超出设定宽度，可能会出现滚动条或布局错乱的情况。<br/></p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>使用CSS设置高度</strong></p></li></ol><p>设置高度则可以使用height属性：</p><pre><code>fieldset {   height: 200px; }</code></pre><p>不过，由于<fieldset>的内容会自动调整高度，除非设置了固定高度，否则高度通常由内部内容决定。因此，在实际开发中，设置高度需谨慎，以免影响布局。<br/></p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>使用flex或grid布局</strong></p></li></ol><p>为了更灵活地控制<fieldset>的大小和内容排列，可以结合Flexbox或Grid布局：</p><pre><code>fieldset {   display: flex;   flex-direction: column;   align-items: center;   width: 600px;   height: 300px; }</code></pre><p>这种方式可以更好地控制表单元素的对齐方式和整体布局。<br/></p><ol class="custom_num list-paddingleft-1" style="list-style-type: num;"><li class="list-num-1-1 list-num-paddingleft-1"><p><strong>设置内边距和边框</strong></p></li></ol><p>除了宽高之外，还可以通过padding和border属性进一步美化<fieldset>：</p><pre><code>fieldset {   padding: 20px;   border: 2px solid #ccc;   width: 400px;   height: 250px; }</code></pre><p>这不仅可以让<fieldset>更美观，也能提升用户的视觉体验。<br/></p><p style="text-align:center"><img src="https://juheimgs.oss-cn-beijing.aliyuncs.com/news/202507/686cd839b1a13.png!thumb" title="fieldset标签的属性、作用和用法 fieldset怎么设置宽高" alt="fieldset标签的属性、作用和用法 fieldset怎么设置宽高" width="128" height="85"/></p><p><fieldset>标签是HTML中用于组织表单元素的重要工具，它不仅能提升表单的可读性和可访问性，还能通过CSS灵活控制其外观。虽然它本身不支持直接设置宽高，但借助CSS技术，我们可以轻松实现对其尺寸的定制。</p> <p class="declaration">声明：所有来源为<a href="">“澳门太阳集团城网址8722”</a>的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com</p> </div> <!-- 点赞分享 开始 --> <div class="details-ls"> <div class="like" dlike="100" ilike="0"> <img class="like-img" src="https://juheimage.oss-cn-hangzhou.aliyuncs.com/www/news/202209/like.svg" /> <img class="is-like-img" src="https://juheimage.oss-cn-hangzhou.aliyuncs.com/www/news/202209/like-click.svg" /> <span class="likes-num"></span> </div> <div class="share-box"> <div class="share" id="show-news-qrcode"> <img src="https://juheimage.oss-cn-hangzhou.aliyuncs.com/www/news/202209/share.svg" /> 分享 <div class="qrcode"><img src="https://juhecn.oss-cn-hangzhou.aliyuncs.com/news/qrcode/qrcode-img-10494-1751963792.png" /><span class="triangle"></span></div> </div> </div> </div> <!-- 点赞分享 结束 --> <!-- 宣传图片 开始 --> <style> .float-wrapper { position: relative } .float-wrapper-pc .float-wrapper-content { position: relative; width: 820px; height: 120px; margin: 60px 0; border-radius: 8px; overflow: hidden } .float-wrapper-link { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } .float-wrapper-img { width: 100%; height: 100% } @media screen and (min-width:751px) { .float-wrapper-pc { display: none } .float-wrapper-m { display: none!important } } @media screen and (max-width:750px) { .float-wrapper-pc { display: none!important } .float-wrapper-m { display: none } .float-wrapper-m { width: 6.9rem; height: 1.6rem; margin: .1rem auto -0.13rem; border-radius: .08rem; overflow: hidden } } </style> <div class="width1200 float-wrapper float-wrapper-pc"> <div class="float-wrapper-content"> <a class="float-wrapper-link" href="" target="_blank" rel="noopener"> </a> <img class="float-wrapper-img" src=""> </div> </div> <div class="float-wrapper float-wrapper-m"> <a class="float-wrapper-link" href="" target="_blank" rel="noopener"> </a> <img class="float-wrapper-img" src=""> </div> <!-- 宣传图片 结束 --> </div> <!-- 标签 开始 --> <div class="details-right"> <div class="industryH tag"> <a href="/wiki" title="API百科"> <strong>API百科</strong> </a> </div> <div class="tips-div"> <a href="/wiki/cid/1">生活服务</a> <a href="/wiki/cid/2">企业工商</a> <a href="/wiki/cid/3">金融科技</a> <a href="/wiki/cid/4">接口大全</a> <a href="/wiki/cid/5">电子商务</a> </div> <div class="api-zixun"> <div class="industryH api-zixun-title">API资讯</div> <div class="industryBorder"></div> <ul class="hot-ul" id="relateList"> <li><a href="/news/index/id/10473" target="_blank" rel="noopener noreferrer">fieldset标签用法详解</a></li> <li><a href="/news/index/id/10981" target="_blank" rel="noopener noreferrer">Java File类createNewFile()方法详解</a></li> <li><a href="/news/index/id/10980" target="_blank" rel="noopener noreferrer">Proxy SwitchySharp插件下载安装、配置、代理</a></li> <li><a href="/news/index/id/10979" target="_blank" rel="noopener noreferrer">Java setrequestproperty参数、使用方法、注意事项</a></li> <li><a href="/news/index/id/10978" target="_blank" rel="noopener noreferrer">Window如何关闭135、139、445端口(关闭端口方法详解)</a></li> </ul> </div> <link rel="stylesheet" href="/css/v11/news/newsnew.css?v=1.3"> <div class="details-tuijian"> <div class="like-title">相关API</div> <ul class="tuijianapi"> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/822"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-661"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/822" rel="noopener">台风路径</a> </p> <div class="apides"> <span>查询台风信息和台风路径</span> <p class="apidescipe">查询台风信息和台风路径</p> </div> </li> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/821"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-661"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/821" rel="noopener">气象预警V2</a> </p> <div class="apides"> <span>查询国家预警信息发布中心发布的气象预警信息，如：台风、暴雨、暴雪、寒潮、大风、沙尘暴、高温、干旱、雷电等预警类型及预警等级、时间等信息。</span> <p class="apidescipe">查询国家预警信息发布中心发布的气象预警信息，如：台风、暴雨、暴雪、寒潮、大风、沙尘暴、高温、干旱、雷电等预警类型及预警等级、时间等信息。</p> </div> </li> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/820"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-334"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/820" rel="noopener">运营商基站信息</a> </p> <div class="apides"> <span>支持全球200多个国家或地区，以及国内三网运营商基站位置信息数据查询。</span> <p class="apidescipe">支持全球200多个国家或地区，以及国内三网运营商基站位置信息数据查询。</p> </div> </li> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/819"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-757"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/819" rel="noopener">ai联网搜索</a> </p> <div class="apides"> <span>强大的数据积累，依托海量的数据，返回内容丰富度高，包含url、网页标题、正文摘要等，在需要时能够实时访问互联网信息，从而突破信息壁垒，实现更精准、更全面的输出。</span> <p class="apidescipe">强大的数据积累，依托海量的数据，返回内容丰富度高，包含url、网页标题、正文摘要等，在需要时能够实时访问互联网信息，从而突破信息壁垒，实现更精准、更全面的输出。</p> </div> </li> <li> <a class="tuijianimg" rel="noopener" href="/docs/api/id/818"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-526"></use> </svg> </a> <p class="apiname"><a href="/docs/api/id/818" rel="noopener">航班订票查询</a> </p> <div class="apides"> <span>通过出发地、目的地、出发日期等信息查询航班信息。</span> <p class="apidescipe">通过出发地、目的地、出发日期等信息查询航班信息。</p> </div> </li> </ul> </div> </div> <!-- 标签 结束 --> </div> <!-- 新闻详情 结束 --> </div> </section> <input type="hidden" name="subForm" id="sub-form" value="news10494" /> <input type="hidden" name="frameRegId" id="frameRegId" value="11" /> <!-- 尾部footer区域 开始 --> <footer class="footer"> <div class="footer-top clearfix"> <div class="footer-top-container clearfix"> <div class="footer-link"> <dl> <dt> <a href="#" rel="">产品服务</a> </dt> <dd><a href="/docs?f=footer" rel="nofollow" >API市场：API数据应用服务专家</a> </dd> <dd><a href="/mcp?f=footer" target="_blank" rel="noopener nofollow" >MCP服务：LLM大模型专用数据仓库</a> </dd> <dd><a href="https://apimaster.juhe.cn/?f=footer" target="_blank" rel="noopener nofollow" >APIMaster：API全生命周期管理专家</a> </dd> <dd><a href="https://dataarts.juhe.cn/?f=footer" target="_blank" rel="noopener nofollow" >DataArts：数据敏捷治理专家</a> </dd> <dd><a href="https://quickBot.juhe.cn?f=footer" target="_blank" rel="noopener nofollow" >QuickBot：高效率数字化员工</a> </dd> <dd><a href="/vip?f=footer" rel="nofollow" >黑钻会员：百种数据无限使用</a> </dd> </dl> <dl> <dt> <a href="#" rel="">开发者</a> </dt> <dd><a href="https://sdk.cn?f=footer" target="_blank" rel="noopener nofollow" >开发者社区</a> </dd> <dd><a href="/bayarea?f=footer" target="_blank" rel="noopener nofollow" >BayArea</a> </dd> <dd><a href="https://chat.juhe.cn" target="_blank" rel="noopener nofollow" >JuheChat</a> </dd> </dl> <dl> <dt> <a href="#" rel="">关于太阳集团城8722</a> </dt> <dd><a href="/about?f=footer" rel="nofollow" >关于太阳集团城8722</a> </dd> <dd><a href="/news/listview?f=footer" rel="nofollow" >太阳集团城8722动态</a> </dd> <dd><a href="/agent?f=footer" rel="nofollow" >合作伙伴</a> </dd> <dd><a href="/qa?f=footer" rel="nofollow" >常见问题</a> </dd> <dd><a href="/complaints?f=footer" rel="nofollow" >投诉与建议</a> </dd> </dl> <dl> <dt> <a href="#" rel="">法律法规</a> </dt> <dd><a href="/legal?f=footer" rel="nofollow" >服务条款</a> </dd> <dd><a href="/privacy?f=footer" rel="nofollow" >隐私政策</a> </dd> <dd><a href="/declaration?f=footer" rel="nofollow" >反商业贿赂声明</a> </dd> </dl> <dl> <dt> <a href="#" rel="">快速入口</a> </dt> <dd><a href="/papi?f=footer" rel="nofollow" >API私有化部署</a> </dd> <dd><a href="/market?f=footer" rel="nofollow" >数据块下载</a> </dd> </dl> </div> <div class="footer-top-right"> <div class="footer-wechat"> <div class="wechat-pic"></div> <div class="wechat-intro"> <p class="wechat-title">关注太阳集团城8722</p> <p class="wechat-text">微信服务号二维码</p> </div> </div> <div class="footer-contact"> <p class="consult-title">售前咨询：<span class="consult-tel">0512-88869195 </span></p> <a class="footer-contact-btn" href="/contact" target="_blank" rel="noopener">联系我们</a> </div> </div> </div> </div> <div class="footer-middle"> <div class="footer-middle__container"> <div class="footer-middle__list clearfix"> <div>热门API：</div> <ul class="footer-middle__list-main clearfix"> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/54" target="_blank" rel="noopener">短信验证码</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/103" target="_blank" rel="noopener">身份证实名认证</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/213" target="_blank" rel="noopener">银行卡四要素验证</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/208" target="_blank" rel="noopener">手机号码实名认证</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/248" target="_blank" rel="noopener">手机号使用时长查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/264" target="_blank" rel="">人脸对比识别接口</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/287" target="_blank" rel="">身份证ocr识别</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/357" target="_blank" rel="">国际短信验证码</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/188" target="_blank" rel="">银行卡二要素验证</a> </li> </ul> </div> <div class="footer-middle__list clearfix"> <div>免费API：</div> <ul class="footer-middle__list-main clearfix"> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/1" target="_blank" rel="">IP地址</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/73" target="_blank" rel="">天气预报查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/235" target="_blank" rel="">新闻API接口</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/38" target="_blank" rel="">身份证号码查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/11" target="_blank" rel="">手机号码归属地查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/58" target="_blank" rel="">星座运势查询</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/29" target="_blank" rel="">股票数据API</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/api/id/573" target="_blank" rel="">黄金行情API接口</a> </li> </ul> </div> <div class="footer-middle__list clearfix"> <div>API相关：</div> <ul class="footer-middle__list-main clearfix"> <li class="footer-middle__list-main-li"> <a href="/docs/c2?f=flink" target="_blank" rel="noopener">数据服务API</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/e12?f=flink" target="_blank" rel="noopener">企业API接口</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/o1?f=flink" target="_blank" rel="noopener">免费接口大全</a> </li> <li class="footer-middle__list-main-li"> <a href="/wiki" target="_blank" rel="noopener">API百科</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/c4?f=flink" target="_blank" rel="noopener">金融科技API</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs" target="_blank" rel="">API接口大全</a> </li> <li class="footer-middle__list-main-li"> <a href="/news/listview/cid/99" target="_blank" rel="noopener">API资讯</a> </li> <li class="footer-middle__list-main-li"> <a href="/docs/e3?f=flink" target="_blank" rel="noopener">短信接口</a> </li> </ul> </div> </div> </div> <div class="footer-bottom-container"> <div class="footer-bottom clearfix"><div class="footer-bottom-left"><a href="http://www.jsdsgsxt.gov.cn/mbm/entweb/elec/certView.shtml?siteId=301146c087f2499ca507bfa91ab143ec" target="_blank" rel="noopener noreferrer nofollow"> <span class="footer-pic1"></span> </a> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32059002001776" target="_blank" rel="noopener noreferrer nofollow"> <span class="footer-pic2"></span> <span>苏公网安备 32059002001776号</span> </a> <a class="footer-icp" href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer nofollow"> <span>苏ICP备14006450号-3</span> </a> <a class="footer-icp" href="https://juhe.oss-cn-hangzhou.aliyuncs.com/Businesslicense.png" target="_blank" rel="noopener noreferrer nofollow"> <span>营业执照</span> </a></div><div class="footer-bottom-right"><span>天聚地合（苏州）科技股份有限公司©版权所有</span></div></div> </div> </footer> <!-- 尾部footer区域 结束 --> <a class="activity-fixed-link" id="activity-fixed-link" href="" target="_blank" rel="noopener"><img src="" class="activity-fixed-img" id="activity-fixed-img" /></a> <div class="contact-fixed" id="contact-fixed"> <div class="contact-phone"> <a class="contact-phone-a" href="/contact" target="_blank" rel="noopener"></a> <span class="contact-phone-span help-contact-phone"> 0512-88869195 </span> </div> <a class="contact-requirement" href="/requirement" target="_blank" rel="noopener"></a> </div> <div class="mobile-get-top"></div> <script> var jhct_theme = "default"; window.addEventListener('load', function() { // // 不是移动端，加载太阳集团城8722Chat // if (!isMobileNotPc()) { // initJuheChat() // } // 判断是否是小程序，小程序的话不显示联系信息，showContact = false isWechatMiniProgram() if (showContact) { if (isMobileNotPc()) { if (showMoblieTelContact) { initQiDianMobile(); // document.write('<script id="qd3009074039017639640d7f9f4b7ae4c8dc57a16f26" src="https://wp.qiye.qq.com/qidian/3009074039/017639640d7f9f4b7ae4c8dc57a16f26" charset="utf-8" async defer ><\/script>') document.getElementById('contact-fixed').style.display = 'block'; } } else { initQiDianPc() // document.write('<script id="qd30090740392abf5cbfda639a151410f4f6efa9f057" src="https://wp.qiye.qq.com/qidian/3009074039/2abf5cbfda639a151410f4f6efa9f057?v=1" charset="utf-8" async defer><\/script>') document.getElementById('contact-fixed').style.display = 'block'; } // 获取活动宣传图 getFixActivityImg() } }); // 初始化太阳集团城8722Chat function initJuheChat() { var jhct = document.createElement("script"); jhct.src = "//statics.juhe.cn/chat/quick/juhechat.quick.js?v=1.2"; jhct.async = true; document.body.appendChild(jhct) } // 初始化起点PC版 function initQiDianPc() { var qidian = document.createElement("script"); qidian.src = "https://wp.qiye.qq.com/qidian/3009074039/2abf5cbfda639a151410f4f6efa9f057?v=1"; qidian.id = 'qd30090740392abf5cbfda639a151410f4f6efa9f057' qidian.async = true; document.body.appendChild(qidian) } // 初始化起点移动端 function initQiDianMobile() { var qidian = document.createElement("script"); qidian.src = "https://wp.qiye.qq.com/qidian/3009074039/017639640d7f9f4b7ae4c8dc57a16f26"; qidian.id = 'qd3009074039017639640d7f9f4b7ae4c8dc57a16f26' qidian.async = true; document.body.appendChild(qidian) } function isMobileNotPc() { var check = false; (function(a) { if (/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i .test(a.substr(0, 4))) check = true })(navigator.userAgent || navigator.vendor || window.opera); return check; }; // 检测微信小程序环境 function isWechatMiniProgram() { let isMiniProgram = false; // 方法 1：检测微信全局变量（忽略类型错误） try { // @ts-ignore isMiniProgram = window.__wxjs_environment === 'miniprogram'; } catch (e) { console.warn('微信环境变量检测失败', e); } // 方法 2：UserAgent 检测（兜底） if (!isMiniProgram) { isMiniProgram = navigator.userAgent.toLowerCase().indexOf('miniprogram') > -1; } showContact = !isMiniProgram; console.log('是否在微信小程序中：', isMiniProgram); } // 获取 右下角固定活动宣传图 function getFixActivityImg() { fetch('/pub/banner/27') .then(response => response.json()) .then(res => { if (res.code == 0 && res.result) { var nowTime = Date.now(); var ban = res.result; if (ban) { ban.forEach(function(value) { if (value.isshow == 1) { if (value.limittime == 0 || (value.limittime == 1 && (new Date(value.starttime.replace(/-/g, '/')).getTime() < nowTime && new Date(value.endtime.replace(/-/g, '/')).getTime() > nowTime))) { document.getElementById('activity-fixed-img').src = value.img; var activityFixedLink = document.getElementById('activity-fixed-link'); activityFixedLink.href = value.href; activityFixedLink.rel = value.link_rel; activityFixedLink.target = value.target; activityFixedLink.style.display = 'block'; } } }); } } }) .catch(error => console.error('Error:', error)); } </script> <!--[if lt IE 9]> <div id="ieMsg-div" style="background:rgba(26,138,250,1);text-align:center;color:#fff; padding: 30px; position: fixed; bottom:0; left: 0; right:0; z-index:1111;"> <p style="font-size:20px">为了更好的体验，请使用谷歌，火狐，360或高于IE8的浏览器。</p> <span id="close-IEtest" style="position: absolute; right: 20px; top:8px; color: #f6f6f6; font-size: 20px; font-weight: bold; cursor:pointer;">×</span> </div> <script> var closeIE = document.getElementById('close-IEtest'); var IEmsgDiv = document.getElementById('ieMsg-div'); closeIE.onclick = function() { IEmsgDiv.style.display = 'none' } </script><![endif]--> <script src="https://main-statics.juhe.cn/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://main-statics.juhe.cn/jquery/jquery.form.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://main-statics.juhe.cn/layer/layer.js?1.4" type="text/javascript" charset="utf-8"></script> <script src="https://main-statics.juhe.cn/jquery/jquery.cookie.js" type="text/javascript"></script> <script> var regStart = '2021-06-21 00:00:00'; var sTime = Math.ceil(new Date().getTime() / 10); var dashboardUrl = "https://dashboard.juhe.cn"; var dashboardHome = "https://dashboard.juhe.cn/home"; var denyQue; if (!denyQue) { denyQue = window.setInterval(function() { var msg = ''; var salt = $.cookie('jh-dtaf4a8u96q0iiqsba9g8a'); if (salt == 4) { msg = '账户已被禁用，如有疑问请联系客服'; } else if (salt == 99) { msg = '账户已被注销，如有疑问请联系客服'; } if (msg != '') { window.clearInterval(denyQue); layer.msg(msg, { icon: 0, time: 5000, shade: 0.3, shadeClose: true }, function() { location.href = '/logout'; }); $.cookie('jh-dtaf4a8u96q0iiqsba9g8a', 0, { path: '/', domain: '.juhe.cn' }); } }, 1000); } </script><script src="/js/v11/headerFooter/header.min.js?v=12.1.394"></script> <script src="https://main-statics.juhe.cn/t/2644843/5e80d506e92b725c/iconfont.js" type="text/javascript"></script> <script src="/js/common/common.min.js?v=12.1.39"></script> <script src="https://main-statics.juhe.cn/jquery/jquery.jh.js?v=12.1.39" type="text/javascript"></script> <script src="/js/v10/headerFooter/setCss.min.js?v=12.1.39"></script> <script src="/js/common/registerPop.min.js?v=12.1.393" type="text/javascript"></script> <script type="text/javascript"> var siteHost = ""; var _token = "3YqRtE28jbBLnuqsZxasoEGF5NFNUJckrgTDec0v"; if (typeof jsQueryRef === 'function') { setTimeout(jsQueryRef, 300) } </script> <!-- m端footer 注册and登录模块 开始 --> <link rel="stylesheet" href="/css/v7/headerFooter/mobileFooterRegLog.css?v=12.1.39"> <div class="m-rigister register"> <div class="register-main"> <div class="register-name">数 据 驱 动 未 来</div> <div class="register-tip clearfix"> <span>Data</span> <span class="line"></span> <span>Drives</span> <span class="line"></span> <span>The</span> <span class="line"></span> <span>Future</span> </div> <div class="register-link"> <a href="/register" rel="noopener">立即注册</a> </div> </div> </div> <!-- m端footer 注册and登录模块 结束 --> <!-- 移动端footer 开始 --> <div class="mobile-footer"> <div class="mobile-footer__phone"> <a href="tel:0512-88869195 "> 售前咨询：0512-88869195 </a> </div> <div class="mobile-footer__copyright">天聚地合（苏州）科技股份有限公司©版权所有</div> <div class="mobile-footer__permit">增值电信业务经营许可证：苏B2-20140496   苏ICP备14006450号-3</div> <div class="mobile-footer__record"> <img src="https://img.juhe.cn/www/v10/footer/mobile-footer__record01.png" alt="" loading="lazy"> <img src="https://img.juhe.cn/www/v10/footer/mobile-footer__record02.png" alt="" loading="lazy"> <span>苏公网安备 32059002001776号</span> </div> </div> <!-- 移动端footer 结束 --> <script src="/js/v6/news/highlightjs.js?v=12.1.39" type="text/javascript" charset="utf-8"></script> <script src="/js/v11/headerFooter/mobileHeader.min.js?v=12.1.39"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad(); </script> <script src="/js/common/banner.min.js?v=12.1.39"></script> <script src="/js/v10/news/details.min.js?v=12.1.392"></script> <script type="application/ld+json"> { "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld", "@id": "/news/index/id/10494", "appid": "1688676197304614", "title": "fieldset标签的属性、作用和用法 fieldset怎么设置宽高_澳门太阳集团城网址8722 - 天聚地合", "images": ["https://juheimgs.oss-cn-beijing.aliyuncs.com/news/202507/686cd839b1a13.png!thumb"], "description": "在HTML表单设计中，<fieldset>标签是一个非常实用的元素，它主要用于将表单中的相关控件分组，并为这些控件添加一个可视化的边框和标题。通过合理使用<fieldset>，不仅可以提升表单的可读性，还能增强用户体验。 然而，对于许多初学者来说，<fieldset>的属性、作用以及如何设置其宽高可能并不清楚。本文将围绕“<fieldset>标签的属性、作用和用法”展开详细讲解，并重点介绍如何设置其宽度和高度，帮助读者更好地掌握这一HTML元素的使用技巧。", "pubDate": "2025-07-08T16:35:17", "upDate": "2025-07-08T16:35:17" } </script> <script> var params = {}; (function () { params.pageType = getMetaAttributes('view-path-attr', 'pageType', ''); params.did = getMetaAttributes('dataId', 'did', 0); params.cid = getMetaAttributes('dataId', 'cid', ''); params.username = getCookie('_f91834e654f46d9ed5afc3c0d') || ''; var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true; ma.src = 'https://analytics.juhe.cn/in.js?v=12.1.39'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s); })(); </script> <!-- 百度统计 start--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?5d12e2b4eed3b554ae941c0ac43c330a"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- 百度统计 end--> <!-- juhe pv start--> <script type="text/javascript"> var jhLogs = { agent: 'PC', sign: Math.ceil(new Date().getTime() / 10) }; var svs = "12.1.39"; (function() { var jhpv = document.createElement("script"); jhpv.src = "https://main-statics.juhe.cn/jquery/jquery.pv.js?v=" + svs; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(jhpv, s); })(); </script> <!-- juhe pv end--> <script> window.addEventListener('load', function() { // 初始化谷歌统计 initGoogle(); initClarity(window, document, "clarity", "script", "bnge4v9t4y"); }) // 谷歌统计 function initGoogle() { var google = document.createElement("script"); google.src = "https://www.googletagmanager.com/gtag/js?id=G-V6SP4PZ234"; google.async = true; document.body.appendChild(google) window.dataLayer = window.dataLayer || []; gtag('js', new Date()); gtag('config', 'G-V6SP4PZ234'); } // 微软统计 // (window, document, "clarity", "script", "bnge4v9t4y") function initClarity(c, l, a, r, i) { c[a] = c[a] || function() { (c[a].q = c[a].q || []).push(arguments) }; var clarity = document.createElement("script"); clarity.async = true; clarity.src = "https://www.clarity.ms/tag/" + i; document.body.appendChild(clarity); } function gtag() { dataLayer.push(arguments); } </script> </body><div style="clear:both;padding:10px;text-align:center;margin:5"><a href="/sitemap.xml" target="_blank">XML 地图</a> </html>