简介：本教程介绍如何利用HTML的contenteditable属性直接在网页中编辑和修改文本及HTML元素，无需标签，提供更灵活的内容编辑方式。 `contenteditable`属性是HTML5提供的一种新特性，它使任何HTML元素都可以变为可编辑状态。这为开发者创建类似textarea的文本输入控件提供了便利。以前，要实现可编辑区域通常使用textarea标签，在一些特定场景下，使用div配合`contenteditable`属性可能会更加灵活和强大。 应用这个属性非常简单：只需在需要设置为可编辑状态的元素上添加`contenteditable=true`即可。例如，将一个div设为可编辑状态，则其代码应修改为<div contenteditable=true>。</div>实际上，除了div之外，p、span乃至body等许多其他元素都可以通过这种方式实现内容编辑功能。 使用此属性的优势在于它具有广泛的浏览器兼容性支持，包括较老版本的IE（尽管IE6之前的版本未进行测试）。开发者可以放心地利用这个特性而无需担心与不同浏览器间的兼容问题。另外，`contenteditable`不仅允许纯文本输入，还能够接受HTML内容。这意味着它可以实现基本的富文本编辑功能，如插入图片等，并且通过JavaScript还能添加更多高级功能。 在适应性方面，使用`contenteditable`属性也提供了便利。传统textarea元素需要借助JavaScript动态调整高度以匹配其内容长度；而利用CSS为可编辑div设置最小尺寸后，则可以实现随内容增长自动增加容器的高度的效果，从而实现了类似textarea的自适应效果。 值得注意的是，在应用此特性时必须处理一些细节问题：例如在Firefox浏览器中，获取焦点的元素可能会出现虚线框，并且某些情况下光标可能不显示或与容器高度一致。解决这些问题的方法是在可编辑区域内部提前放置一个占位符（如<br> 或 ）以确保光标的正常显示。 QQ空间中的发表说说功能就是采用了`contenteditable`属性实现的，它使用div作为输入区域而非传统的textarea。这种方式不仅提供了丰富的交互体验，在提交表单时也能轻松获取到div内的内容数据。 尽管此特性带来了诸多便利性，但在实际应用中仍需考虑其适用范围：当需要复杂富文本编辑功能时，可能还需要借助专门的富文本编辑器库；但对于简单的文本输入而言，`contenteditable`属性无疑是一个非常理想的选择。 </p></div> </div> <div data-v-88f98792="" class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div class="flex justify-center items-center mt-14 mb-7 text-gray-500 relative"><h2>全部评论 (<span>0</span>)</h2></div> <div class="w-full px-5 py-10 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div class="flex items-center mt-10 mb-5 justify-center text-gray-400">还没有任何评论哟~</div> </div> </div> </div> <aside data-v-88f98792="" class="col-span-4 md:col-span-1 animate__animated animate__fadeInUp"> <div data-v-88f98792="" class="sticky top-[5.5rem]"> <div data-v-88f98792="" class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div> <div class="flex flex-col items-center"> <div class="relative mb-4 mt-6"> <button class="px-4 py-2 rounded">点击登录</button> </div> <div class="flex justify-center gap-5 mb-2 dark:text-gray-400"> <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer"> <button class="text-sm" style="width:80px;height:35px;border:1px solid #c9c9c9;background-color:#fff;color:#555"> 下载历史 </button> </div> <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer"> <button class="text-sm" style="width:80px;height:35px;border:1px solid #c9c9c9;background-color:#fff;color:#555"> 积分购买 </button> </div> </div> </div> </div> </div> </div> </aside> </div> </main> </div> <div data-v-88f98792="" class="border z-50 cursor-pointer fixed bottom-2 right-2 md:bottom-10 md:right-10 inline p-3 bg-white hover:bg-gray-100 rounded dark:bg-gray-800 dark:hover:bg-gray-900 dark:border-gray-700" style="display:none"> <svg class="w-4 h-4 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13V1m0 0L1 5m4-4 4 4"></path> </svg> </div> <div class="el-overlay" style="z-index:2001;display:none"> <div role="dialog" aria-modal="true" aria-label="下载码下载" aria-describedby="el-id-9941-0" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2002;display:none"> <div role="dialog" aria-modal="true" aria-label="付费下载" aria-describedby="el-id-9941-1" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2003;display:none"> <div role="dialog" aria-modal="true" aria-label="付费下载" aria-describedby="el-id-9941-2" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2004;display:none"> <div role="dialog" aria-modal="true" aria-label="选择支付方式" aria-describedby="el-id-9941-3" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2005;display:none"> <div role="dialog" aria-modal="true" aria-label="下载次数充值" aria-describedby="el-id-9941-4" class="el-overlay-dialog"></div> </div> <footer data-v-88f98792="" class="bg-white mt-5 dark:bg-gray-800 text-right"> <div class="w-full mx-auto max-w-screen-xl py-1 px-4 flex justify-end"><span class="text-sm text-gray-500 dark:text-gray-400">© 2025 <a href="https://www.itadn.com/" class="hover:underline">技术社区</a> .All Rights Reserved.</span> </div> </footer> </main> <div class="customer-service"> <div class="icons"><img src="http://d.itadn.com/seoassets/customer-cb314396.png" alt="客服"></div> <span style="color:#838b8b;font-size:12px">客服</span></div> </div> </div> <script type="script" src="http://d.itadn.com/src/composables/echarts.min.js"></script> <div data-v-0e1787d0="" class="popup-container"> <div data-v-0e1787d0="" class="popup-content"> <div data-v-0e1787d0="" class="activity-image"><img data-v-0e1787d0="" src="http://d.itadn.com/seoassets/activecustomer-98ac7d5d.png" alt="客服" class="top-image"><img data-v-0e1787d0="" src="http://d.itadn.com/seoassets/close-5242d789.png" alt="关闭" class="top-right-close" style="width:40px"></div> </div> </div> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>使</span><span style=color: #f73131>用</span><span style=color: #f73131>contenteditable</span><span style=color: #f73131>属</span><span style=color: #f73131>性</span><span style=color: #f73131>编</span><span style=color: #f73131>辑</span><span style=color: #f73131>HTML</span><span style=color: #f73131>标</span><span style=color: #f73131>签</span><span style=color: #f73131>内</span><span style=color: #f73131>容</span>（<span style=color: #f73131>可</span><span style=color: #f73131>替</span><span style=color: #f73131>代</span><span style=color: #f73131>textarea</span>）" href="https://d.itadn.com/i0_53264336237/B/1307122" target="_blank"><span style=color: #f73131>使</span><span style=color: #f73131>用</span><span style=color: #f73131>contenteditable</span><span style=color: #f73131>属</span><span style=color: #f73131>性</span><span style=color: #f73131>编</span><span style=color: #f73131>辑</span><span style=color: #f73131>HTML</span><span style=color: #f73131>标</span><span style=color: #f73131>签</span><span style=color: #f73131>内</span><span style=color: #f73131>容</span>（<span style=color: #f73131>可</span><span style=color: #f73131>替</span><span style=color: #f73131>代</span><span style=color: #f73131>textarea</span>）</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本教程介绍如何利用HTML的contenteditable属性直接在网页中编辑和修改文本及HTML元素，无需<textarea>标签，提供更灵活的内容编辑方式。 `contenteditable`属性是HTML5提供的一种新特性，它使任何HTML元素都可以变为可编辑状态。这为开发者创建类似textarea的文本输入控件提供了便利。以前，要实现可编辑区域通常使用textarea标签，在一些特定场景下，使用div配合`contenteditable`属性可能会更加灵活和强大。 应用这个属性非常简单：只需在需要设置为可编辑状态的元素上添加`contenteditable=true`即可。例如，将一个div设为可编辑状态，则其代码应修改为<div contenteditable=true>。</div>实际上，除了div之外，p、span乃至body等许多其他元素都可以通过这种方式实现内容编辑功能。 使用此属性的优势在于它具有广泛的浏览器兼容性支持，包括较老版本的IE（尽管IE6之前的版本未进行测试）。开发者可以放心地利用这个特性而无需担心与不同浏览器间的兼容问题。另外，`contenteditable`不仅允许纯文本输入，还能够接受HTML内容。这意味着它可以实现基本的富文本编辑功能，如插入图片等，并且通过JavaScript还能添加更多高级功能。 在适应性方面，使用`contenteditable`属性也提供了便利。传统textarea元素需要借助JavaScript动态调整高度以匹配其内容长度；而利用CSS为可编辑div设置最小尺寸后，则可以实现随内容增长自动增加容器的高度的效果，从而实现了类似textarea的自适应效果。 值得注意的是，在应用此特性时必须处理一些细节问题：例如在Firefox浏览器中，获取焦点的元素可能会出现虚线框，并且某些情况下光标可能不显示或与容器高度一致。解决这些问题的方法是在可编辑区域内部提前放置一个占位符（如<br> 或 ）以确保光标的正常显示。 QQ空间中的发表说说功能就是采用了`contenteditable`属性实现的，它使用div作为输入区域而非传统的textarea。这种方式不仅提供了丰富的交互体验，在提交表单时也能轻松获取到div内的内容数据。 尽管此特性带来了诸多便利性，但在实际应用中仍需考虑其适用范围：当需要复杂富文本编辑功能时，可能还需要借助专门的富文本编辑器库；但对于简单的文本输入而言，`contenteditable`属性无疑是一个非常理想的选择。 </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>使</span><span style=color: #f73131>用</span>Vue和<span style=color: #f73131>HTML</span>实时截取<span style=color: #f73131>Textarea</span><span style=color: #f73131>内</span><span style=color: #f73131>容</span>" href="https://d.itadn.com/i0_41476260308/B/709916" target="_blank"><span style=color: #f73131>使</span><span style=color: #f73131>用</span>Vue和<span style=color: #f73131>HTML</span>实时截取<span style=color: #f73131>Textarea</span><span style=color: #f73131>内</span><span style=color: #f73131>容</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目介绍如何利用Vue框架与HTML技术实现对Textarea内文本内容的实时捕捉与处理，适用于需要动态监测用户输入场景。 使用Vue结合HTML实时截取textarea中的文本，并获取鼠标位置以截取自定义文本的示例代码非常有用。这样的demo能够帮助开发者更好地理解如何在前端应用中实现动态内容编辑功能。 </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="当div的<span style=color: #f73131>contentEditable</span><span style=color: #f73131>属</span><span style=color: #f73131>性</span>设为true后，重置<span style=color: #f73131>内</span><span style=color: #f73131>容</span>后无法定位光<span style=color: #f73131>标</span>" href="https://d.itadn.com/i0_19452289436/B/374329" target="_blank">当div的<span style=color: #f73131>contentEditable</span><span style=color: #f73131>属</span><span style=color: #f73131>性</span>设为true后，重置<span style=color: #f73131>内</span><span style=color: #f73131>容</span>后无法定位光<span style=color: #f73131>标</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本文介绍了在HTML中使用div元素并设置其contentEditable属性为true时遇到的问题，即内容被重置后无法正确定位插入点（光标），探讨了问题原因及可能的解决方案。 最近我在开发一个评论功能，并且需要支持表情输入。于是决定使用contentEditable属性来实现这一需求。然而，在实际操作过程中遇到了一些问题。 首先，我的评论区布局如下：当用户输入的内容超过限制时，系统会自动清空超出的部分内容。这一步没问题，但是当我尝试清除多余的文字后发现光标回到了文本的开头位置，这让用户体验变得糟糕起来。经过一番搜索和研究之后，我找到了一个解决办法，并且已经用代码实现了。 以下是相关HTML元素获取与范围设置的示例代码： ```javascript var _div = document.querySelector(.discuss_area); var range = document.createRange(); range.selectNodeContents(_div); range.collapse(false); // 这里注意参数值为false，表示光标保持在文本末尾。 ``` 请根据实际需求调整上述代码。希望这能帮助到同样遇到此问题的人们！ </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span> embed<span style=color: #f73131>标</span><span style=color: #f73131>签</span>的<span style=color: #f73131>使</span><span style=color: #f73131>用</span>方法及<span style=color: #f73131>属</span><span style=color: #f73131>性</span>详解" href="https://d.itadn.com/i0_66750203602/B/1298450" target="_blank"><span style=color: #f73131>HTML</span> embed<span style=color: #f73131>标</span><span style=color: #f73131>签</span>的<span style=color: #f73131>使</span><span style=color: #f73131>用</span>方法及<span style=color: #f73131>属</span><span style=color: #f73131>性</span>详解</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本文将详细介绍HTML中的embed标签及其常用属性，帮助读者掌握如何在网页中嵌入音频、视频或其他应用。 一、基本语法 `<embed src=url>` 说明：此标签可以用来插入各种多媒体文件，如Midi、Wav、AIFF、AU、MP3等格式的音频或视频内容。Netscape及新版IE浏览器均支持该功能。其中，url是指向媒体文件的具体路径，既可以是相对路径也可以是绝对路径。 示例： `<embed src=your.mid>` 二、属性设置 1. 自动播放： 语法：autostart=true | false 说明：此属性用于设定音频或视频文件是否在下载完成后立即开始播放。如果设为true，则媒体文件会在加载完毕后自动播放；若设为false，用户需要手动触发播放。 示例： `<embed src=your.mid autostart=false>` </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="MAPGIS中批量<span style=color: #f73131>替</span>换<span style=color: #f73131>属</span><span style=color: #f73131>性</span><span style=color: #f73131>内</span><span style=color: #f73131>容</span>" href="https://d.itadn.com/i0_74897517929/B/673155" target="_blank">MAPGIS中批量<span style=color: #f73131>替</span>换<span style=color: #f73131>属</span><span style=color: #f73131>性</span><span style=color: #f73131>内</span><span style=color: #f73131>容</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本文介绍了在MAPGIS软件中如何高效地进行大规模数据处理，具体讲解了批量替换属性内容的方法和步骤。通过示例操作，帮助用户掌握这一实用技巧，提升工作效率。 有一个小工具可以像记事本一样在MAPGIS里查找和批量替换点、线、面属性内容，非常实用。感谢江西省地质调查研究院开发此工具。 </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span><span style=color: #f73131>标</span><span style=color: #f73131>签</span>及其<span style=color: #f73131>属</span><span style=color: #f73131>性</span>大全" href="https://d.itadn.com/i0_38310806984/B/572257" target="_blank"><span style=color: #f73131>HTML</span><span style=color: #f73131>标</span><span style=color: #f73131>签</span>及其<span style=color: #f73131>属</span><span style=color: #f73131>性</span>大全</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本手册全面涵盖HTML标准标签及常用属性，提供详细说明与示例代码，帮助开发者快速掌握网页结构构建技巧。 HTML技术，包含了所有标签及其属性的完整列表，绝对全面，您可以下载试试看！ </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>常见<span style=color: #f73131>标</span><span style=color: #f73131>签</span><span style=color: #f73131>属</span><span style=color: #f73131>性</span>汇总" href="https://d.itadn.com/i0_11513044867/B/649259" target="_blank"><span style=color: #f73131>HTML</span>常见<span style=color: #f73131>标</span><span style=color: #f73131>签</span><span style=color: #f73131>属</span><span style=color: #f73131>性</span>汇总</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本资料全面总结了HTML中常用的标签及属性，涵盖文本格式化、链接创建、图像插入等基础内容，适合前端开发入门者学习参考。 自己总结的一些常用的HTML标签属性！ </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span>中link<span style=color: #f73131>标</span><span style=color: #f73131>签</span>的rel<span style=color: #f73131>属</span><span style=color: #f73131>性</span>" href="https://d.itadn.com/i0_61054932976/B/1298418" target="_blank"><span style=color: #f73131>HTML</span>中link<span style=color: #f73131>标</span><span style=color: #f73131>签</span>的rel<span style=color: #f73131>属</span><span style=color: #f73131>性</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本文将详细介绍HTML中的<link>标签及其rel属性的作用和用法，帮助读者更好地理解如何在网页中使用这些元素。 `<link>`标签定义了当前文档与其他Web集合中的文档之间的关系。这个元素是一个空元素，仅包含属性，并且只能出现在HTML的头部部分中，可以出现多次。在HTML规范下，该标签无需结束标记；而在XHTML标准里，则需要正确闭合。 除了通用的标准属性外，`<link>` 元素还支持多个可选属性：charset、href、hreflang、media、rel、rev、target和title以及type。其中，只有`target` 属性在Transitional 和 Frameset 两种文档类型定义（DTD）中可用，其余所有属性均可用于Strict, Transitional等多种DTD中。 </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>使</span><span style=color: #f73131>用</span>Python的BeautifulSoup爬虫库获取<span style=color: #f73131>标</span><span style=color: #f73131>签</span>、<span style=color: #f73131>属</span><span style=color: #f73131>性</span>和<span style=color: #f73131>内</span><span style=color: #f73131>容</span>等信息" href="https://d.itadn.com/i0_29995978730/B/744290" target="_blank"><span style=color: #f73131>使</span><span style=color: #f73131>用</span>Python的BeautifulSoup爬虫库获取<span style=color: #f73131>标</span><span style=color: #f73131>签</span>、<span style=color: #f73131>属</span><span style=color: #f73131>性</span>和<span style=color: #f73131>内</span><span style=color: #f73131>容</span>等信息</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本教程介绍如何利用Python的BeautifulSoup库进行网页数据抓取，包括解析HTML文档、提取特定标签及其属性与文本内容的方法。 如何使用Python的BeautifulSoup库来获取对象（标签）名、属性、内容及注释等内容呢？下面为大家介绍一些基本操作。 一、Tag（标签）对象 1. Tag对象与XML或HTML文档中的tag相同。 ```python from bs4 import BeautifulSoup soup = BeautifulSoup(<b>Extremely bold</b>, lxml) tag = soup.b type(tag) # 输出结果为：bs4.element.Tag 2. Tag的Name属性 每个Tag都有自己的名字，可以通过.name来获取。 ```python tag = soup.b print(tag.name) # 输出：b # 可以修改tag的名字： tag.name = blockquote ``` 注意，在对原始文档进行操作时，可能会导致输出结果发生变化。 </div><!----> </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>HTML</span><span style=color: #f73131>标</span><span style=color: #f73131>签</span><span style=color: #f73131>属</span><span style=color: #f73131>性</span>大全（完整版）" href="https://d.itadn.com/i0_71005263067/B/37433" target="_blank"><span style=color: #f73131>HTML</span><span style=color: #f73131>标</span><span style=color: #f73131>签</span><span style=color: #f73131>属</span><span style=color: #f73131>性</span>大全（完整版）</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本资料详尽列举了所有常用的HTML标签及其属性，旨在为网页开发者和设计者提供全面而详细的参考指南。 HTML标签属性大全（完美版） </div><!----> </div> </li> </body> </html>
5星