HTML常用代码有哪些

描述:
HTML常用代码有哪些
精选回答
HTML常用代码有哪些 在网页开发中,HTML(超文本标记语言)是构建网页结构的基础。掌握一些常用的HTML代码能够帮助开发者更高效地完成页面布局和内容展示。以下是一些常见的HTML标签及其用途的总结,并以表格形式进行展示,便于查阅和理解。 一、HTML常用代码总结 1. 基本结构标签 - ``:定义整个HTML文档的开始和结束。 - ``:包含文档的元信息,如标题、样式表、脚本等。 - ``:定义网页的标题,显示在浏览器标签上。 - `<body>`:定义网页的主体内容。 2. 段落与文本格式化 - `` </td><td> </td><td> `<h1>`~`<h6>` </td><td> 定义标题 </td><td> `<h1>主标题</h1>` </td><td> </td><td> `<a href="url">` </td><td> 创建超链接 </td><td> `<a href="https://example.com">链接</a>` </td><td> </td><td> `<img src="url" alt="描述">` </td><td> 插入图片 </td><td> `<img src="image.jpg" alt="图片描述">` </td><td> </td><td> `<ul>`/`<ol>`/`<li>` </td><td> 列表 </td><td> `<ul><li>项1</li></ul>` </td><td> </td><td> `<table>`/`<tr>`/`<th>`/`<td>` </td><td> 表格 </td><td> `<table><tr><th>列1</th><td>数据</td></tr></table>` </td><td> </td><td> `<form>`/`<input>`/`<textarea>` </td><td> 表单 </td><td> `<form><input type="text"><textarea></textarea></form>` </td><td> </td><td> `<div>`/`<span>` </td><td> 容器标签 </td><td> `<div class="container">内容</div>` </td><td> </td><td> `<header>`/`<footer>`/`<nav>` </td><td> 语义化标签 </td><td> `<header>导航栏</header>` </td><td> 三、结语 掌握这些常用的HTML标签,是学习前端开发的第一步。随着经验的积累,开发者可以结合CSS和JavaScript,实现更加丰富的网页效果。建议在实际项目中不断练习和应用这些标签,提升自己的开发能力。<style>table,tr{width: 100%;text-align: center;color: #333;font-size: 16px;line-height: 1.8em;margin-bottom: 32px;border: 1px solid #333;empty-cells:show;}table tr th {border: 1px solid #333;text-align: center;font-weight: 600;background: #eee;}table tr td {border: 1px solid #333;text-align: center}</style> </div><!-- /answer-body --> </div><!-- /selectedAskGuo --> <div class="feedback-section"> <div class="feedback-inner"> <span class="feedback-title">这条信息对你有帮助吗?</span> <div class="feedback-buttons"> <!-- 有帮助按钮 --> <button class="feedback-btn feedback-helpful" data-value="helpful" data-id="helpful"> <i class="icon-thumbs-up"></i> <span class="btn-label">有帮助</span> <span class="badge" id="helpful-count">0</span> </button> <!-- 没帮助按钮 --> <button class="feedback-btn feedback-not-helpful" data-value="not-helpful" data-id="not-helpful"> <i class="icon-thumbs-down"></i> <span class="btn-label">没帮助</span> <span class="badge" id="nothelpful-count">0</span> </button> </div> <span class="feedback-thanks" style="display:none;">感谢您的反馈!</span> <button class="feedback-submit-btn" onclick="window.open('https://www.wanjiquan.com/feedback.html', '_blank');"> <i class="icon-attention-circled"></i> 反馈 </button> </div> </div> <!-- 问答区域 --> </div> <div class="clear"></div> <p class="entry-copyright"><b>免责声明:</b>本文由用户上传,与本网站立场无关,如有侵权请联系删除!财经信息仅供读者参考,并不构成投资建议,投资者据此操作,风险自担。</p> </div><!-- .entry-content --> </article><!-- #post --> <div id="related-img"> <script> if (isMobile()){ document.write('<div class="nr_div_title" style="margin-top:10px;"><span>搜索推荐</span></div><div style="text-align:center;margin-top:10px;margin-left: -10px;"><script>wap_show_sosuo();<\/script><\/div>'); }else{ document.write('<div style="text-align:center;margin:5px 0 15px 0px;"><script>pc_show_so();<\/script><\/div>'); } </script> </div> <div id="related-img" class="related-post"> <div class="related-header"> <h3>相关文章</h3> <div class="related-tags"> <span class="tag-label">标签:</span> <a href="https://www.wanjiquan.com/tag/htmlchangyongdaimayounaxie/" target="_blank">HTML常用代码有哪些</a> </div> </div> <ul> <!-- 猜你喜欢 --> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171800.html" target="_blank"> <span class="related-title-text">汽车均衡器怎么调音质好 低频通透人声自然</span> <span class="related-time">2026-10-24</span> </a> <p>想要汽车均衡器把音质调到更好,核心做法是“先固定听音环境,再按频段小幅度优化”:一般从31Hz至16kHz的...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171784.html" target="_blank"> <span class="related-title-text">江都有哪些镇 主要乡镇一览</span> <span class="related-time">2026-10-24</span> </a> <p>江都有哪些镇,优先可按江苏省扬州市江都区下辖建制镇来回答。当前常用公开区划口径中,江都区可整理为13个...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171771.html" target="_blank"> <span class="related-title-text">湖南省古丈县现在有多少人口 古丈县常住人口规模说明</span> <span class="related-time">2026-10-24</span> </a> <p>核心答案:湖南省古丈县“现在有多少人口”可按常见统计口径理解,若按常住人口口径,参考规模约为12万多人...</p> </li> <script> if (isMobile()){ document.write('<div style="text-align:center;margin-left: -15px;"><script>wap_show_title_under();<\/script><\/div>'); }else{ document.write('<div style="text-align:center;margin:5px 0 15px 0px;"><script>pc_list_line2();<\/script><\/div>'); } </script> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171755.html" target="_blank"> <span class="related-title-text">多长时间做一次动平衡 多久一次合理</span> <span class="related-time">2026-10-24</span> </a> <p>一般可以按1万到2万公里做一次车轮动平衡;如果车辆每年保养,也可以每年检查一次。换过轮胎、补过胎、更换...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171739.html" target="_blank"> <span class="related-title-text">锦鲤卡是真的吗可靠吗 锦鲤卡使用指南</span> <span class="related-time">2026-10-24</span> </a> <p>锦鲤卡是真的,可靠。用户可通过官方页面或正规服务入口开通、查看权益、按规则使用优惠;卡内状态、折扣、...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171723.html" target="_blank"> <span class="related-title-text">珊瑚玉带黑金沙贵不贵 价格参考</span> <span class="related-time">2026-10-23</span> </a> <p>珊瑚玉带黑金沙有日常友好价位,也有收藏级价位。日常佩戴款看颜色、玉化程度、黑金沙分布、尺寸、工艺,常...</p> </li> <script> if (isMobile()){ document.write('<div style="text-align:center;margin-left: -15px;"><script>wap_show_button_under();<\/script><\/div>'); }else{ document.write('<div style="text-align:center;margin:5px 0 15px 0px;"><script>pc_list_line4();<\/script><\/div>'); } </script> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171708.html" target="_blank"> <span class="related-title-text">客舍的意思 什么是客舍 住宿场所含义</span> <span class="related-time">2026-10-23</span> </a> <p>客舍的意思就是供客人、旅人、短住人员休息和住宿的房屋或场所。简单说,它可以理解为旅舍、客栈、民宿、招...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171692.html" target="_blank"> <span class="related-title-text">如何获取airbnb优惠券 领取方法</span> <span class="related-time">2026-10-23</span> </a> <p>想要获取Airbnb优惠券,最直接的方法是从官方活动页、注册登录入口、邮件订阅、App推送、合作伙伴活动以及...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171670.html" target="_blank"> <span class="related-title-text">幼师资格证报考时间 上下半年报名安排</span> <span class="related-time">2026-10-22</span> </a> <p>幼师资格证报考时间一般按上半年和下半年两轮执行。每年具体日期由教育主管部门和各省教育考试院公布,考生...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171654.html" target="_blank"> <span class="related-title-text">和平精英怎么实名认证身份证 快速完成指南</span> <span class="related-time">2026-10-22</span> </a> <p>和平精英实名认证身份证可以在游戏内设置或官方实名页面完成,一般入口在账号与安全中的实名认证,填写真实...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171638.html" target="_blank"> <span class="related-title-text">吉他左手怎么按弦 指尖靠近品丝要点</span> <span class="related-time">2026-10-22</span> </a> <p>吉他左手按弦时,用指尖靠近目标品格里的金属品丝,让指尖站住,拇指托稳琴颈后侧,手腕舒展,手指保持自然...</p> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202610/1171622.html" target="_blank"> <span class="related-title-text">office是什么软件类型 办公套件</span> <span class="related-time">2026-10-22</span> </a> <p>Office属于办公类软件,更准确地说,它是办公软件套件或办公工具包,主要面向文字处理、表格整理、演示制作...</p> </li> </ul> </div> <div id="related-img" class="related-post J_showAllShareBtn" > <h3 class="ext-h3"><svg t="1594773908548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5501" width="20" height="20"><path d="M278.024631 223.909066a39.213474 39.213474 0 0 0 39.213474 39.213473H707.281457a39.213474 39.213474 0 1 0 0-77.511966H316.715259a39.213474 39.213474 0 0 0-38.690628 38.298493zM278.024631 472.6532a39.213474 39.213474 0 0 0 39.213474 39.213474H707.281457a39.213474 39.213474 0 1 0 0-77.511966H316.715259a39.213474 39.213474 0 0 0-38.690628 38.298492z" fill="#141414" p-id="5502"></path><path d="M931.713238 1023.994641a44.834072 44.834072 0 0 1-26.142316-8.365541L511.867646 731.200704 118.295082 1015.367677A44.70336 44.70336 0 0 1 47.187983 978.899146V44.964914A44.964783 44.964783 0 0 1 92.152766 0.000131h839.691184a44.834072 44.834072 0 0 1 44.964783 44.964783V979.029858a44.964783 44.964783 0 0 1-45.095495 44.964783zM511.867646 630.814211a46.141187 46.141187 0 0 1 26.142316 8.365541l348.738493 251.750501V89.929697H136.856126v801.26198l348.738493-251.750502a44.441937 44.441937 0 0 1 26.142316-8.626964z" fill="#141414" p-id="5503"></path></svg>今日大家都在搜的词:</h3> <script> if (!isMobile()){ document.write('<script>pc_show_under_so();<\/script>'); }else{ document.write('<div style="text-align:center;margin-top:5px;margin-left: -15px;"><script>wap_show_artlist1();<\/script><\/div>'); } </script> </div> </main><!-- .site-main --> </div><!-- .content-area --> <div id="sidebar" class="widget-area all-sidebar"> <div class="sidebar-author-module"> <!-- 作者信息区域 --> <div class="author-card"> <div class="author-avatar"> <img src="https://www.wanjiquan.com/statics/images/member/nophoto.gif" alt="Erpay" style="float:none;"> </div> <div class="author-info"> <div class="author-name"> Erpay <span class="auth-badge">优质创作者</span> </div> <div class="author-desc">问答领域知识达人</div> <a href="https://www.wanjiquan.com/user/erpay/" class="btn-follow" style="color: #fff;line-height:normal;">关注</a> </div> </div> <!-- 热门作品列表 --> <div class="hot-works"> <div class="hot-title">🔥 TA的热门作品</div> <ul class="hot-list"> <li> <a href="https://www.wanjiquan.com/jyawd/202606/1154458.html" title="avancier本田是什么车" target="_blank"> <span class="hot-rank top">1</span> <span class="hot-title-text">avancier本田是什么车</span> <span class="hot-meta"> <span class="hot-time">06-27</span> </span> </a> </li> <li> <a href="https://www.wanjiquan.com/yxuwd/202602/1068103.html" title="HTML常用代码有哪些" target="_blank"> <span class="hot-rank top">2</span> <span class="hot-title-text">HTML常用代码有哪些</span> <span class="hot-meta"> <span class="hot-time">02-10</span> </span> </a> </li> <li> <a href="https://www.wanjiquan.com/csiwd/202512/901577.html" title="伟光正是什么" target="_blank"> <span class="hot-rank ">3</span> <span class="hot-title-text">伟光正是什么</span> <span class="hot-meta"> <span class="hot-time">12-27</span> </span> </a> </li> </ul> <!-- 查看更多 --> <div class="hot-more"> <a href="https://www.wanjiquan.com/user/erpay/" class="btn-more" style="line-height:normal;">查看更多 ></a> </div> </div> </div> <div class="clear"></div> </aside> <aside id="related_post-2" class="widget"> <script> if (!isMobile()){ document.write('<div style="text-align:center;margin-top:5px;"><script>pc_show_right300x4_1();<\/script><\/div>'); } </script> </aside> <aside id="related_post-2" class="widget related_post wow fadeInUp" data-wow-delay="0.3s"> <h3 class="widget-title"><span class="title-i"><span class="title-i-t"></span><span class="title-i-b"></span><span class="title-i-b"></span><span class="title-i-t"></span></span>热点文章</h3> <div class="new_cat"> <ul> <li> <span class="thumbnail"> <span class="load"><a href="https://bbs.wanjiquan.com/jxzs/202610/1171808.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="最远的分离打一成语 天各一方" /></a></span> </span> <span class="new-title"><a href="https://bbs.wanjiquan.com/jxzs/202610/1171808.html" rel="bookmark">最远的分离打一成语 天各一方</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://www.wanjiquan.com/bzawd/202610/1171806.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="包子怎么包好看又快 新手快速成型技巧" /></a></span> </span> <span class="new-title"><a href="https://www.wanjiquan.com/bzawd/202610/1171806.html" rel="bookmark">包子怎么包好看又快 新手快速成型技巧</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://www.wanjiquan.com/zxuwd/202610/1171799.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="污水排放标准 执行要点" /></a></span> </span> <span class="new-title"><a href="https://www.wanjiquan.com/zxuwd/202610/1171799.html" rel="bookmark">污水排放标准 执行要点</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://www.wanjiquan.com/zsbk/202610/1171797.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="最贵的话是什么成语 一字千金" /></a></span> </span> <span class="new-title"><a href="https://www.wanjiquan.com/zsbk/202610/1171797.html" rel="bookmark">最贵的话是什么成语 一字千金</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://zixun.wanjiquan.com/kjsd/202610/1171794.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="如何开通微信支付及微信小店 开通指引" /></a></span> </span> <span class="new-title"><a href="https://zixun.wanjiquan.com/kjsd/202610/1171794.html" rel="bookmark">如何开通微信支付及微信小店 开通指引</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://bbs.wanjiquan.com/jxzs/202610/1171792.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="溶洞里的钟乳石是怎样形成的 水滴沉积" /></a></span> </span> <span class="new-title"><a href="https://bbs.wanjiquan.com/jxzs/202610/1171792.html" rel="bookmark">溶洞里的钟乳石是怎样形成的 水滴沉积</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://bbs.wanjiquan.com/jxjy/202610/1171791.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="汽车喷漆工作流程是什么 规范作业与外观确认" /></a></span> </span> <span class="new-title"><a href="https://bbs.wanjiquan.com/jxjy/202610/1171791.html" rel="bookmark">汽车喷漆工作流程是什么 规范作业与外观确认</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://www.wanjiquan.com/ricwd/202610/1171786.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="夜场气氛组是什么意思 轻松看懂娱乐现场角色" /></a></span> </span> <span class="new-title"><a href="https://www.wanjiquan.com/ricwd/202610/1171786.html" rel="bookmark">夜场气氛组是什么意思 轻松看懂娱乐现场角色</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://www.wanjiquan.com/yaxwd/202610/1171782.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="剁辣椒怎么腌制不坏 家庭鲜香长久版" /></a></span> </span> <span class="new-title"><a href="https://www.wanjiquan.com/yaxwd/202610/1171782.html" rel="bookmark">剁辣椒怎么腌制不坏 家庭鲜香长久版</a></span> <span class="date">10/24</span> </li> <li> <span class="thumbnail"> <span class="load"><a href="https://bbs.wanjiquan.com/xsiwd/202610/1171777.html"><img src="https://www.wanjiquan.com/statics/images/nopic.gif" data-original="https://www.wanjiquan.com/statics/images/nopic.gif" alt="夜书所见前两句的意思 秋夜客居" /></a></span> </span> <span class="new-title"><a href="https://bbs.wanjiquan.com/xsiwd/202610/1171777.html" rel="bookmark">夜书所见前两句的意思 秋夜客居</a></span> <span class="date">10/24</span> </li> </ul> </div> <div class="clear"></div> </aside> <aside id="related_post-2" class="widget"> <script> if (!isMobile()){ document.write('<div style="text-align:center;margin-top:5px;"><script>pc_show_right_font();<\/script><\/div>'); } </script> </aside> <aside id="random_post-3" class="widget random_post wow fadeInUp" data-wow-delay="0.3s"><h3 class="widget-title"><span class="title-i"><span class="title-i-t"></span><span class="title-i-b"></span><span class="title-i-b"></span><span class="title-i-t"></span></span>栏目推荐</h3> <div id="random_post_widget"> <ul> <li><i class="be be-arrowright"></i><a href="https://zixun.wanjiquan.com/kjsd/202610/1171810.html" title="常见的适应性反应有哪些 适应性反应常见表现" rel="bookmark">常见的适应性反应有哪些 适应性反应常见表现</a></li> <li><i class="be be-arrowright"></i><a href="https://news.wanjiquan.com/shbk/202610/1171795.html" title="最吝啬的人打一成语 一毛不拔解析" rel="bookmark">最吝啬的人打一成语 一毛不拔解析</a></li> <li><i class="be be-arrowright"></i><a href="https://www.wanjiquan.com/zxuwd/202610/1171783.html" title="常见的文件类型有哪几种 分类速览" rel="bookmark">常见的文件类型有哪几种 分类速览</a></li> <li><i class="be be-arrowright"></i><a href="https://www.wanjiquan.com/bkjx/202610/1171780.html" title="湘西明珠凤凰古城属于哪个省 湖南省湘西土家族苗族自治州凤凰县" rel="bookmark">湘西明珠凤凰古城属于哪个省 湖南省湘西土家族苗族自治州凤凰县</a></li> <li><i class="be be-arrowright"></i><a href="https://bbs.wanjiquan.com/jxjy/202610/1171775.html" title="四大石窟分别在哪 中国四大石窟位置速览" rel="bookmark">四大石窟分别在哪 中国四大石窟位置速览</a></li> <li><i class="be be-arrowright"></i><a href="https://www.wanjiquan.com/csiwd/202610/1171773.html" title="问道机关宠物怎么进阶 机关宠物进阶指南" rel="bookmark">问道机关宠物怎么进阶 机关宠物进阶指南</a></li> <li><i class="be be-arrowright"></i><a href="https://www.wanjiquan.com/zsbk/202610/1171768.html" title="已经打开的榴莲肉没熟怎么办 熟度后熟方案" rel="bookmark">已经打开的榴莲肉没熟怎么办 熟度后熟方案</a></li> <li><i class="be be-arrowright"></i><a href="https://www.wanjiquan.com/bkjx/202610/1171767.html" title="长沙小龙虾口味有哪些 常见口味选择" rel="bookmark">长沙小龙虾口味有哪些 常见口味选择</a></li> <li><i class="be be-arrowright"></i><a href="https://bbs.wanjiquan.com/xsiwd/202610/1171764.html" title="四大污染源是什么 常见分类说明" rel="bookmark">四大污染源是什么 常见分类说明</a></li> <li><i class="be be-arrowright"></i><a href="https://www.wanjiquan.com/zsiwd/202610/1171759.html" title="头发细软能烫头发吗 细软发质烫发建议" rel="bookmark">头发细软能烫头发吗 细软发质烫发建议</a></li> </ul> </div> <div class="clear"></div> </aside></div> <div class="clear"></div> </div><!-- .site-content --> <div class="clear"></div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <p> <a href="https://www.wanjiquan.com/about.html" rel="nofollow" target="_blank">关于我们</a>| <a href="https://www.wanjiquan.com/lxfs.html" rel="nofollow" target="_blank">联系方式</a>| <a href="https://www.wanjiquan.com/bqsm.html" rel="nofollow" target="_blank">版权声明</a>| <a href="https://www.wanjiquan.com/mzsm.html" rel="nofollow" target="_blank">免责声明</a>| </p> © 2008-2026 All Rights Reserved .智能手机网 版权所有 <a href="https://www.wanjiquan.com/ditu.html" target="_blank">网站地图</a> | <a href="https://www.wanjiquan.com/sitemaps.xml" target="_blank">百度地图</a> | <a href="https://www.wanjiquan.com/sitemaps_360_all.xml" style="display:none;" target="_blank">360地图</a> </div><!-- .site-info --> </footer><!-- .site-footer --> <ul id="scroll"> <li><a class="scroll-home" href="https://www.wanjiquan.com" title="首页" rel="home"><i class="be be-home"></i></a></li> <li><a class="scroll-h" title="返回顶部"><i class="be be-arrowup"></i></a></li> <li><a class="scroll-b" title="转到底部"><i class="be be-arrowdown"></i></a></li> </ul> </div><!-- .site --> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id:"JjHPsAonQvGFOaao",ck:"JjHPsAonQvGFOaao"})</script> <script> (function() { 'use strict'; var API_URL = 'https://www.wanjiquan.com/api.php?op=help&modelid=1&id=1068103'; var PAGE_ID = '1068103'; // localStorage 键名 var STORAGE_KEY = 'feedback_voted_' + PAGE_ID; // ================================================================ // DOM 引用 // ================================================================ var section = document.querySelector('.feedback-section'); if (!section) return; var helpfulBtn = section.querySelector('.feedback-helpful'); var notHelpfulBtn = section.querySelector('.feedback-not-helpful'); var helpfulCountEl = document.getElementById('helpful-count'); var notHelpfulCountEl = document.getElementById('nothelpful-count'); var thanksEl = section.querySelector('.feedback-thanks'); function fetchCounts() { // 后端获取计数接口 /* fetch(API_URL + '?page=' + encodeURIComponent(PAGE_ID)) .then(function(res) { return res.json(); }) .then(function(data) { if (data.code === 0) { if (helpfulCountEl) helpfulCountEl.textContent = data.data.helpful || 0; if (notHelpfulCountEl) notHelpfulCountEl.textContent = data.data.notHelpful || 0; } }) .catch(function(err) { console.warn('获取反馈数据失败:', err); }); */ } // 是否已投票 function hasVoted() { try { return localStorage.getItem(STORAGE_KEY) || null; } catch (e) { return null; } } // 标记已投票 function setVoted(value) { try { localStorage.setItem(STORAGE_KEY, value); } catch (e) { /* 忽略 */ } } // 禁用所有按钮 function disableButtons() { [helpfulBtn, notHelpfulBtn].forEach(function(btn) { if (btn) { btn.disabled = true; } }); } // 高亮选中的按钮 function highlightButton(value) { if (value === 'helpful' && helpfulBtn) { helpfulBtn.classList.add('selected'); } else if (value === 'not-helpful' && notHelpfulBtn) { notHelpfulBtn.classList.add('selected'); } } // 显示感谢语 function showThanks(value) { if (!thanksEl) return; thanksEl.style.display = 'inline'; if (value === 'helpful') { thanksEl.textContent = '感谢您的认可!❤️'; } else if (value === 'not-helpful') { thanksEl.textContent = '感谢您的反馈,我们会持续改进!'; } } // 更新按钮上的数量(前端直接+1,乐观更新) function updateCountLocal(value) { if (value === 'helpful' && helpfulCountEl) { var current = parseInt(helpfulCountEl.textContent, 10) || 0; helpfulCountEl.textContent = current + 1; } else if (value === 'not-helpful' && notHelpfulCountEl) { var current = parseInt(notHelpfulCountEl.textContent, 10) || 0; notHelpfulCountEl.textContent = current + 1; } } // 提交后端 function submitFeedback(value) { // 构造请求数据 var postData = { page: PAGE_ID, // 页面标识 type: value, // 'helpful' 或 'not-helpful' timestamp: Date.now() }; // 使用 fetch 发送 POST 请求 fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(postData) }) .then(function(response) { return response.json(); }) .then(function(data) { if (data.code === 0) { // 成功:后端返回的最新计数可用来修正前端显示 if (data.data) { if (helpfulCountEl && typeof data.data.helpful === 'number') { helpfulCountEl.textContent = data.data.helpful; } if (notHelpfulCountEl && typeof data.data.notHelpful === 'number') { notHelpfulCountEl.textContent = data.data.notHelpful; } } console.log('反馈提交成功'); } else { // 后端返回错误,但前端已更新,暂不处理 console.warn('反馈提交失败:', data.message || '未知错误'); } }) .catch(function(err) { // 网络错误等,不影响前端显示 console.warn('反馈提交异常:', err); }); } // ================================================================ // 处理投票点击 // ================================================================ function handleVote(value) { // 1. 禁用所有按钮(防止重复点击) disableButtons(); // 2. 高亮被点击的按钮 highlightButton(value); // 3. 显示感谢语 showThanks(value); // 4. 本地计数 +1(乐观更新) updateCountLocal(value); // 5. 记录到 localStorage(防止刷新重复提交) setVoted(value); // 6. 上报后端 submitFeedback(value); } // ================================================================ // 初始化 // ================================================================ function init() { // 从后端获取初始计数(可选) fetchCounts(); // 检查是否已经投过票 var voted = hasVoted(); if (voted) { // 已投票:禁用按钮 + 高亮 + 显示感谢语 disableButtons(); highlightButton(voted); showThanks(voted); // 注意:计数由后端渲染或 fetchCounts 提供,不再本地+1 return; } // 未投票:绑定点击事件 if (helpfulBtn) { helpfulBtn.addEventListener('click', function(e) { var value = this.getAttribute('data-value'); handleVote(value); }); } if (notHelpfulBtn) { notHelpfulBtn.addEventListener('click', function(e) { var value = this.getAttribute('data-value'); handleVote(value); }); } } // DOM 就绪后执行 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })(); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?b248386c3368c6ae93a0ac5ebd872e7aa8361b73dd522b42d9ef317f134ac41b65e0a2ada1d5e86b11e7de7c1a83287d04743a02fd1ee8dd8558a8cad50e91cb354f8c6f3f78e5fd97613c481f678e6d"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/slides.js' id='slides-js'></script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/wow.js' id='wow-js'></script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/sticky.js' id='sticky-js'></script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/jquery.lazyload.js' id='lazyload-js'></script> <script type='text/javascript' id='script-js-extra'> /* <![CDATA[ */ var wpl_ajax_url = "\/wp-content\/themes\/begin\/inc\/admin-ajax.php"; /* ]]> */ </script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/script.js' id='script-js'></script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/flexisel.js' id='flexisel-js'></script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/fancybox.js' id='fancybox-js'></script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/superfish.js' id='superfish-js'></script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/gb2big5.js' id='gb2big5-js'></script> <script type='text/javascript' src='https://www.wanjiquan.com/statics/zgn/js/carousel.min.js' id='carousel-js'></script> <!--360自动收录--> </body> </html>