HTML标签功能与属性全解析
时间：2026-05-21 13:00:46 460浏览 收藏
本文深入剖析了HTML开发中五个极易被忽视却至关重要的细节：alt属性缺失导致的可访问性、渲染与SEO三重危机；rel="preload"与rel="preconnect"的本质区别及误用风险；charset声明必须置于head最前端以避免中文乱码的硬性规则；button标签type属性默认为submit所引发的意外表单提交陷阱；以及这些“隐性规范”在真实项目中因“不出错时不显眼、一出错难定位”而持续被低估的现实困境——每一条都不是锦上添花的优化，而是保障基础功能、用户体验与技术健壮性的底层防线。
为什么 ![]()
alt 会出问题
浏览器渲染失败、屏幕阅读器无法播报、SEO 权重下降——这三个后果都源于漏写 alt 属性。它不是可选的“备注”，而是语义必需项：当图片加载失败、禁用图片或用户依赖辅助技术时，alt 是唯一能传达内容意图的字段。
alt值应简洁描述图像功能，而非堆砌关键词（比如alt="红色按钮，点击提交表单"比alt="submit button red ui element"更有效）- 纯装饰图应设为
alt=""（空字符串），而非省略；否则屏幕阅读器可能读出文件名或报错 - 若图片是链接的一部分，
alt需说明链接目标（如alt="返回首页"），而非只描述图本身
两者都出现在 ，但作用完全不同：rel="preload" 是“提前下载某个具体资源”，rel="preconnect" 是“提前和某个域名建立连接”。用错就等于白写。
rel="preload"必须带as属性（如as="font"、as="script"），否则浏览器无法判断资源类型，可能降级为普通 fetchrel="preconnect"只对跨域请求有效（如 CDN 字体、第三方分析脚本），同域预连接无意义，还浪费 socket- 不要给未使用的域名加
preconnect；每个预连接会占用一个 HTTP/1.1 连接槽位，过多反而拖慢首屏
这个标签位置错了，中文就会乱码，且无法通过后续 JS 或 CSS 补救。原因在于浏览器解析 HTML 时，一旦遇到非 ASCII 字符，会立即按当前已知编码解析；如果 charset 声明靠后，前面的中文已被错误解码，再改也晚了。
- 它必须是
中第一个子元素（紧随开始标签之后），不能被</code> 或其他 <code><meta></code> 挡住</li> <li>不要写成 <code><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></code>；HTML5 只认 <code>charset</code> 简写形式，旧写法兼容性差且易被忽略</li> <li>服务端响应头中若已声明 <code>Content-Type: text/html; charset=utf-8</code>，HTML 内仍需保留该标签——部分浏览器（尤其移动端）优先信 HTML 内声明</li> </ul><h3><code><button></code> 的 <code>type</code> 属性不写就是坑</h3> <p>默认 <code>type="submit"</code>，这意味着只要它在 <code><form></code> 里，点一下就会触发表单提交——哪怕你本意只是个“取消”或“展开详情”的操作按钮。</p> <ul><li>明确写 <code>type="button"</code> 表示纯行为按钮，与表单无关</li> <li><code>type="reset"</code> 仅用于清空当前 <code><form></code> 内所有控件值，慎用；多数现代交互用 JS 控制更可控</li> <li>不要依赖 CSS 类名或 JS 绑定来“阻止默认行为”，那是补救措施，不是设计逻辑；从源头设对 <code>type</code> 才可靠</li> </ul> 实际项目里最容易被跳过的，其实是 <code><meta charset="UTF-8"></code> 的位置约束和 <code><button></code> 的 <code>type</code> 默认值——它们不出错时不显眼，一出错却很难定位。<p>到这里，我们也就讲完了《HTML标签功能与属性全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！</p> <div id="third-party-overlay" style="position:fixed;left:0;top:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;background:rgba(0,0,0,0.4);z-index:9999;"> <div style="background:#FFF3CD;border:1px solid #FFEEBA;padding:16px;border-radius:6px;box-sizing:border-box;max-width:480px;width:90%;text-align:center;"> <div style="font-size:14px;color:#856404;margin-bottom:12px;">您即将跳转至第三方网站，请注意保护好个人信息和财产安全！</div> <a href="https://comicdow.pdlcomic.top/1273%2F%E5%9B%A7%E6%AC%A1%E5%85%83.apk" target="_blank" rel="nofollow noopener noreferrer" style="color:#2d8cf0;text-decoration:none;" onclick="showThirdParty('none');">继续访问</a> </div> </div> <script> function showThirdParty(mode){ var el = document.getElementById('third-party-overlay'); if (!el) return; el.style.display = (mode === 'none' ? 'none' : 'flex'); } </script> </div> <div class="labsList"> </div> </div> <div class="contBoxNor"> <div class="contTit"> <div class="tit">资料下载</div> </div> <ul class="classRecomList"> <li> <a href="https://pan.quark.cn/s/ba8ef670cabd" rel="nofollow" target="_blank" title="编程学习资料下载" class="img_box"> <img loading="lazy" src="/assets/images/xuexiziliao.jpeg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="编程学习资料下载"> </a> <dl> <dt class="lineOverflow"> <a href="https://pan.quark.cn/s/ba8ef670cabd" rel="nofollow" target="_blank" class="aBlack" title="编程学习资料下载">编程学习资料下载</a> </dt> <dd class="cont1 lineTwoOverflow"> 精选 编程（Golang、Python、Java、C++、JavaScript等） 教程、电子书与示例源码，一键打包本地下载学习。 </dd> <dd class="cont2"> <a href="https://pan.quark.cn/s/ba8ef670cabd" rel="nofollow" target="_blank" class="toStudy">立即下载</a> </dd> </dl> </li> </ul> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | <a href="javascript:;" class="aLightGray" title="提升">提升</a> <a href="javascript:;" class="aLightGray" title="箭头函数">箭头函数</a> <a href="javascript:;" class="aLightGray" title="函数表达式">函数表达式</a> <a href="javascript:;" class="aLightGray" title="函数声明">函数声明</a> <a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2年前 | <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="优化">优化</a> <a href="javascript:;" class="aLightGray" title="体验">体验</a> </div> <div class="tit lineOverflow"><a href="/article/72840.html" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2年前 | <a href="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a> <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a> <a href="javascript:;" class="aLightGray" title="特效">特效</a> </div> <div class="tit lineOverflow"><a href="/article/76259.html" title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2年前 | <a href="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a> <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a> <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a> </div> <div class="tit lineOverflow"><a href="/article/83771.html" title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2年前 | <a href="javascript:;" class="aLightGray" title="团队合作">团队合作</a> <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a> <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a> </div> <div class="tit lineOverflow"><a href="/article/85057.html" title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 8分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606209.html" title="HTML中，<em>标签用于标注具有语气强调的文本内容。当需要突出显示某句话或某个词，以表达说话者的语气、情绪或重要性时，可以使用<em>标签。语法示例：<p>这是一个<em>非常重要的信息</em>，请务必注意。</p>效果：在浏览器中，<em>标签默认会将文本以斜体形式显示，并且会对语义进行强调。语义意义：<em>不仅仅是一个样式标签，它还具有语义意义，表示其中的内容是被强调的，这有助于屏幕阅" class="aBlack">HTML中，<em>标签用于标注具有语气强调的文本内容。当需要突出显示某句话或某个词，以表达说话者的语气、情绪或重要性时，可以使用<em>标签。语法示例：<p>这是一个<em>非常重要的信息</em>，请务必注意。</p>效果：在浏览器中，<em>标签默认会将文本以斜体形式显示，并且会对语义进行强调。语义意义：<em>不仅仅是一个样式标签，它还具有语义意义，表示其中的内容是被强调的，这有助于屏幕阅</a></div> <div class="opt"> <span><i class="view"></i>448</span> <span class="collectBtn user_collection" data-id="606209" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 9分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606208.html" title="正确使用removeEventListener移除事件监听器方法" class="aBlack">正确使用removeEventListener移除事件监听器方法</a></div> <div class="opt"> <span><i class="view"></i>259</span> <span class="collectBtn user_collection" data-id="606208" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 9分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606207.html" title="Promise异步原理详解【从零开始】" class="aBlack">Promise异步原理详解【从零开始】</a></div> <div class="opt"> <span><i class="view"></i>353</span> <span class="collectBtn user_collection" data-id="606207" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 18分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606196.html" title="虚拟 DOM 修复 iframe 重载奇招" class="aBlack">虚拟 DOM 修复 iframe 重载奇招</a></div> <div class="opt"> <span><i class="view"></i>314</span> <span class="collectBtn user_collection" data-id="606196" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 21分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606192.html" title="如何统一CSS颜色渲染差异" class="aBlack">如何统一CSS颜色渲染差异</a></div> <div class="opt"> <span><i class="view"></i>304</span> <span class="collectBtn user_collection" data-id="606192" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 22分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606190.html" title="Tailwind 分页按钮快速样式实现方法" class="aBlack">Tailwind 分页按钮快速样式实现方法</a></div> <div class="opt"> <span><i class="view"></i>191</span> <span class="collectBtn user_collection" data-id="606190" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 24分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606189.html" title="如何识别不可枚举属性，深拷贝处理难题" class="aBlack">如何识别不可枚举属性，深拷贝处理难题</a></div> <div class="opt"> <span><i class="view"></i>473</span> <span class="collectBtn user_collection" data-id="606189" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 29分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606181.html" title="网页按钮制作与功能添加技巧" class="aBlack">网页按钮制作与功能添加技巧</a></div> <div class="opt"> <span><i class="view"></i>199</span> <span class="collectBtn user_collection" data-id="606181" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 36分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606172.html" title="CSS实现列表排序交互效果" class="aBlack">CSS实现列表排序交互效果</a></div> <div class="opt"> <span><i class="view"></i>169</span> <span class="collectBtn user_collection" data-id="606172" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 37分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606171.html" title="JavaScript虚拟滚动技术解析" class="aBlack">JavaScript虚拟滚动技术解析</a></div> <div class="opt"> <span><i class="view"></i>225</span> <span class="collectBtn user_collection" data-id="606171" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 39分钟前 | <a href="javascript:;" class="aLightGray" title="HTML5网页">HTML5网页</a> </div> <div class="tit lineOverflow"><a href="/article/606170.html" title="HTML5滚动监听实现与动画触发方法" class="aBlack">HTML5滚动监听实现与动画触发方法</a></div> <div class="opt"> <span><i class="view"></i>150</span> <span class="collectBtn user_collection" data-id="606170" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 40分钟前 | </div> <div class="tit lineOverflow"><a href="/article/606168.html" title="HTML如何创建对话框｜对话框实现方法" class="aBlack">HTML如何创建对话框｜对话框实现方法</a></div> <div class="opt"> <span><i class="view"></i>104</span> <span class="collectBtn user_collection" data-id="606168" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 课程推荐 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img loading="lazy" src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img loading="lazy" src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img loading="lazy" src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img loading="lazy" src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img loading="lazy" src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div> <!-- footer --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/SyntaxHighlighter/shCore.js?3.1.1"></script> <script> document.addEventListener('DOMContentLoaded', function () { if (document.querySelector('.cont pre')) { SyntaxHighlighter.all(); } }); </script> </body> </html>