目录
正确使用 </code> 标签</a>
</div>
<div class="Article_Details_main1L2s ">
<a href="#跳到内容" title="跳到内容" >跳到内容</a>
</div>
<div class="Article_Details_main1L2s ">
<a href="#确保网站导航安全" title="确保网站导航安全 (2.3)" >确保网站导航安全 (2.3)</a>
</div>
</div>
</div>
</div>
<div class="Article_Details_main1M">
<div class="phpgenera_Details_mainL1">
<a href="//m.sbmmt.com/zh/" title="首页"
class="phpgenera_Details_mainL1a">首页</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="//m.sbmmt.com/zh/web-designer.html"
class="phpgenera_Details_mainL1a">web前端</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="//m.sbmmt.com/zh/div-tutorial.html"
class="phpgenera_Details_mainL1a">html教程</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>可操作性：无障碍性，第四部分</span>
</div>
<div class="Articlelist_txts">
<div class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">可操作性：无障碍性，第四部分</h1>
<div class="Articlelist_txts_info_head">
<div class="author_info">
<a href="//m.sbmmt.com/zh/member/887227.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/887/227/63bb7851c9547215.jpg" src="/static/imghw/default1.png" alt="WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB">
</a>
<div class="author_detail">
<a href="//m.sbmmt.com/zh/member/887227.html" class="author_name">WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB</a>
</div>
</div>
</div>
<span class="Articlelist_txts_time">Sep 24, 2023 pm 05:49 PM</span>
<div class="Articlelist_txts_infos">
<span class="Articlelist_txts_infoss on">第四部分</span>
<span class="Articlelist_txts_infoss ">无障碍性</span>
<span class="Articlelist_txts_infoss ">可操作性</span>
</div>
</div>
</div>
<hr />
<div class="article_main php-article">
<div class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/887/227/169554894975347.jpg" class="lazy" alt="可操作性：无障碍性，第四部分"></p>
<p>从广义上讲，这是您的网站必须能够<em>安全</em>供<em>所有用户</em>导航的原则。这包括仅使用键盘即可访问整个网站的准则。此外，您的网站响应用户输入（通过键盘或其他方式）的方式应该是可预测的、清晰的和安全的。 </p>
<p>最后一点主要是指确保默认情况下禁用网站上任何可能引起癫痫发作的功能，并在启用之前向用户发出警告。该原则还提供了为用户提供“足够的时间”来完成任务的指导原则，但我们在此不做介绍。</p>
<h2 id="键盘辅助功能">键盘辅助功能 (2.1)</h2>
<p>仅使用键盘即可导航和使用您的网站是可访问性最重要的方面之一。盲人用户几乎完全依赖键盘，而那些有运动障碍的用户可能难以控制鼠标，因此也依赖键盘访问。有些人可能很少或根本不使用双手，而是依赖较大的键盘、口棒、头棒、单开关或 Sip 'n' Puff。 </p>
<p>您可以在 WebAIM 网站上找到这些设备的说明，但它们本质上都是将用户输入转化为键盘敲击。如果您的网站无法通过键盘访问，那么所有依赖这些设备的用户将无法使用您的网站。</p>
<p>幸运的是，使您的主题或插件键盘可访问相对简单。以下是一些要点：</p>
<h3 id="确保可以通过键盘访问整个菜单">确保可以通过键盘访问整个菜单</h3>
<p>许多主题依靠将鼠标悬停在菜单项上来显示任何子菜单。这很好，但通常如果父菜单项获得焦点（而不是悬停），则子菜单将<em>不会</em>出现。如果您复制 <code>:hover</code> 的任何相关规则并将其应用到 <code>:focus</code> ，这将让您成功一半：子菜单项将显示为整个菜单中的用户选项卡。但是，一旦用户向下切换到子菜单，父菜单就会失去焦点，子菜单也会消失。这可以使用 JavaScript 来纠正。本系列的下一篇文章将详细介绍这一点以及如何提供非 JavaScript 后备。</p>
<h3 id="不要-陷阱-用户">不要“陷阱”用户</h3>
<p>您不需要执行任何操作即可使“本机”表单输入（选择、输入、单选等）键盘可访问。但是，如果页面的任何方面（包括表单字段）获得焦点，<em>必须</em>仅使用键盘即可将其移开，否则用户实际上会陷入困境。这通常是默认行为，因此您应该避免覆盖它。</p>
<h2 id="使导航变得简单明了">使导航变得简单明了（2.4）</h2>
<p>该指南有两种类型的建议：明确用户当前所在的位置，以及更轻松地到达他们想去的地方。 </p>
<p>在执行此操作时遵循建议的一部分涉及许多主题已经做的事情：跨页面拥有一致的导航菜单，突出显示当前页面，并允许用户快速确定他们在网站上的位置（例如使用面包屑） .</p>
<p></p>
<h3 id="样式-适当聚焦">样式：适当聚焦</h3>
<p>能够使用键盘浏览网页的一个关键部分是能够准确地看到当前获得焦点的内容。当前获得焦点的元素应该明显不同，并且可以与页面的其余部分区分开来。因此，您应该避免 <code>outline:none;</code> 除非您要提供替代样式：</p>
<pre class='brush:php;toolbar:false;'>a:focus{
outline: none;
background: #ee7b00;
color: #fff;
}
</pre>
<h3 id="焦点顺序和-Tabindex">焦点顺序和 Tabindex</h3>
<p>键盘辅助功能的另一个重要部分是 Tab 键的行为可预测且自然。例如，如果焦点当前是表单字段，我希望下一个选项卡应该将我带到该表单中的下一个字段。如果按 Tab 键导致焦点在页面上不规则地上下跳跃，那么这会让用户感到沮丧和迷失方向。</p>
<p><strong>避免使用 tabindex</strong>：tabindex 属性允许您更改通过 Tab 键访问元素的顺序。但是，如果您遵循本系列第 2 篇文章中有关 DOM 结构的建议，则 Tab 键顺序应反映页面的“自然”顺序。虽然 tabindex 有它的用途，但这些用途很少，而且它用于“修补”不良站点结构可能会产生更多问题。最好的方法是避免使用 tabindex，而是让您的主题生成逻辑 DOM 结构，并使用 CSS 来改变视觉呈现。</p>
<h3 id="避免-阅读更多-或-继续阅读">避免“阅读更多”或“继续阅读”</h3>
<p>屏幕阅读器用户经常会在链接之间跳转，跳过其间的文本，并且在每个链接处屏幕阅读器都会读出“链接 [链接文本]”。因此，如果这些用户反复听到“链接阅读更多”、“链接点击此处”或“链接继续阅读”，这对他们来说是非常没有帮助的。在这种情况下，向链接添加上下文只需提供帖子的标题。因此，我们没有“继续阅读”，而是“继续阅读[帖子标题]”。</p>
<p>要在 WordPress 主题中执行此操作，我们只需连接 <code>excerpt_more</code> 过滤器并附加我们的“继续阅读”链接：</p>
<pre class='brush:php;toolbar:false;'>//Adds "continue reading X" link
function mytheme_continue_reading_link() {
return '<p class="read-more">'
. sprintf(
__( '<a href="%s">Continue reading %s</a>', 'mytheme' ),
esc_url( get_permalink() ),
esc_html( get_the_title() )
)
.'</p>';
}
//Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and mytheme_continue_reading_link().
function mytheme_auto_excerpt_more( $more ) {
return ' …' . mytheme_continue_reading_link();
}
add_filter( 'excerpt_more', 'mytheme_auto_excerpt_more' );
</pre>
<p>这为“阅读更多”链接提供了正确的上下文。不过，还可以进行一些改进。</p>
<p>首先，添加文章标题通常会破坏主题的美感，并且对于有视力的用户来说，这是多余的，因为“阅读更多”链接相对于文章标题和摘录的位置将使上下文显而易见。为了解决这些问题，我们可以“隐藏”文章标题，但屏幕阅读器仍然会阅读它们。</p>
<p>这意味着我们<em>不能使用</em><b> </b><code class="inline">display:none</code> 或<code class="inline">visibility:hidden;</code> 作为屏幕-读者了解这些属性并会忽略内容。相反，我们可以将文本放置在屏幕外或使用 <code class="inline">clip</code> 属性：</p>
<pre class='brush:php;toolbar:false;'>.screen-reader {
position: absolute!important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</pre>
<p>“屏幕阅读器类”有很多不同的示例；这个特定的类取自 Bootstrap 3。接下来，将适当的类添加到文章标题中，具体将上面的第 5 行替换为：</p>
<pre class='brush:php;toolbar:false;'>__( '<a href="%s">Continue reading <span class="screen-reader">%s</span></a>', 'mytheme' ),
</pre>
<p>其次，虽然这将为用户提供链接指向何处的指示，但他们仍然必须在到达帖子标题之前收听“链接继续阅读...”。理想情况下，您应该将冗余信息放在链接文本的末尾，或者从锚标记中完全省略它，以减少识别链接所需的时间。 </p>
<p>对于屏幕阅读器用户来说，不在链接文本前面添加冗余信息的另一个好处是屏幕阅读器通常会在页面上生成链接列表。如果您的许多链接都以相同的文本开头，这可能会使找到所需链接变得更加困难，特别是如果您的联系页面的链接位于“H”下方，因为它显示“如何联系我们”。</p>
<h3 id="正确使用-code-title-code-标签">正确使用 <code><title></code> 标签</h3>
<p>应使用 <code><title></code> 标签来识别用户的当前位置。该信息由屏幕阅读器读出，并显示在搜索结果以及屏幕窗口和浏览器选项卡中。为了让用户轻松识别他们所在的位置（或搜索到的内容），此标题标签应包含页面的标题和网站名称。理想情况下，网站名称应该放在最后，这样使用屏幕阅读器的人就不必在每次页面加载时先听您网站的名称，然后才能听到页面标题。</p>
<p>标题标签可以添加到主题中：</p>
<pre class='brush:php;toolbar:false;'><title><?php wp_title(); ?></title>
</pre>
<p>要添加网站标题：</p>
<pre class='brush:php;toolbar:false;'>/** * Append site title to page title */
function mytheme_wp_title( $title, $sep, $seplocation ){
return $title . ' | ' . get_bloginfo('name');
}
add_filter( 'wp_title', 'mytheme_wp_title', 10, 3 );
</pre>
<h3 id="跳到内容">跳到内容</h3>
<p>通常，网站会有一个通用的标题和导航菜单，除了突出显示用户当前位置之外，它们将保持完全相同。必须通过选项卡浏览所有这些链接，或者在每次页面加载时听屏幕阅读器重复它们，是乏味且令人沮丧的。我们这些拥有良好（足够）视力和运动技能的人可以立即跳转到内容，并且我们可以让那些没有良好视力和运动技能的人也能轻松完成此操作。</p>
<p>如果您在 WordPress 管理员中，并在页面加载后按 <strong>Tab</strong>，您会注意到顶部会出现一个链接，其中显示<strong>跳到主要内容</strong> -left（如果再次按 Tab，将出现<strong>跳到工具栏</strong>链接）。该链接位于页面的最顶部，因此它是选项卡切换时获得焦点的第一个链接，也是屏幕阅读器读出的网站的第一个链接。通过该链接，用户可以直接跳转到主要内容，跳过中间所有不必要的链接和网站徽标。</p>
<p>创建跳转到内容是让您的网站更易于导航的好方法，而且非常简单，只需要少量 HTML 和一些 CSS。 </p>
<p>首先是 HTML。该链接应位于页面的最顶部，紧邻 <code><body></code> 标签下方。在大多数主题中，这将是 <code>header.php</code> 文件：</p>
<pre class='brush:php;toolbar:false;'></head>
<body>
<a class="skip-link" href="#main">
<?php _e( 'Skip to main content', 'mytheme' ); ?>
</a>
//Rest of page content
</pre>
<p>这里唯一需要注意的是：</p>
<ol>
<li>href 值，在本例中为“main”。这必须与包含页面内容的元素的 ID 匹配。</li>
<li>链接的类，我们将使用它来设置样式。</li>
</ol>
<p>关于 (1)，您的循环将类似于：</p>
<pre class='brush:php;toolbar:false;'><div id="main" class="hfeed" role="main">
<?php if ( have_posts() ) : ?>
//The Loop
<?php else: ?>
//No posts found... display search
<?php endif; ?>
</div>
</pre>
<p>您的页面模板可能类似于：</p>
<pre class='brush:php;toolbar:false;'><div id="main" role="main">
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"> <?php the_title(); ?> </h1>
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
</div>
</pre>
<p>现在剩下的就是向链接添加一些样式。 </p>
<p>首先，我们希望链接隐藏，但不对屏幕阅读器隐藏，因此我们会将链接放置在屏幕外，而不是使用 <code>display:none</code>（在这种情况下，屏幕阅读器会忽略它）。 </p>
<p>其次，当它获得焦点时，我们希望使链接变得明显，因此很明显以前隐藏的链接现在可见并具有焦点。</p>
<pre class='brush:php;toolbar:false;'>.skip-link {
position: absolute;
left:6px;
top:-100px; /* position offscreen so it's not visible, but can receive focus*/
z-index: 100000; /* Position above WordPress' toolbar */
font-size: 1em;
font-weight: bold;
display: block;
background: #ee7b00;
color: white; /*Style the link so that's clear*/
height: auto;
width: auto;
line-height: normal;
padding: 15px 25px;
text-decoration: none;
-webkit-transition: top 1s ease-out;
transition: top 1s ease-out;
}
.skip-link:focus {
top: 5px; /* Move onto screen */
-webkit-transition: right 0s;
transition: right 0s; /*Animate, to make its appearance obvious */
}
</pre>
<h2 id="确保网站导航安全">确保网站导航安全 (2.3)</h2>
<p>最后，请注意，有些人容易患光敏性癫痫发作。这可能是由闪烁或闪光效果引起的。去年 12 月，杰夫·钱德勒 (Jeff Chandler) 在一名访客警告杰夫·钱德勒 (Jeff Chandler) 取消了 WP Tavern 的“雪”效果可能引发癫痫发作后。</p>
<p>这不仅限于癫痫发作，它还可能引发某些人的偏头痛或惊恐发作。它也不限于雪花效果 - 视频、轮播或音频文件自动播放也可以触发这些效果。 </p>
<p>虽然这主要是编辑的决定，并且作为开发者，阻止自动播放不是我们的工作，但我们至少可以通过默认禁用它来阻止它。 Jeff 在他的文章中提到，他找不到提供访问者自己可以玩的“雪”效果的插件。</p><p>以上是可操作性：无障碍性，第四部分的详细内容。更多信息请关注PHP中文网其他相关文章！</p>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">本站声明</div>
<div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>热门文章</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796858026.html" title="如何在Instagram上报告模仿帐户" class="phpgenera_Details_mainR4_bottom_title">如何在Instagram上报告模仿帐户</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 周前</span>
<span>By 下次还敢</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796847111.html" title="如何在WhatsApp业务上设置一条远远的消息" class="phpgenera_Details_mainR4_bottom_title">如何在WhatsApp业务上设置一条远远的消息</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 个月前</span>
<span>By 下次还敢</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796862477.html" title="如何在设置（愤世嫉俗，机器人，听众，书呆子）中更改chatgpt个性" class="phpgenera_Details_mainR4_bottom_title">如何在设置（愤世嫉俗，机器人，听众，书呆子）中更改chatgpt个性</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 周前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796849640.html" title="2025年最佳123个替代品（免费和法律流媒体选项）" class="phpgenera_Details_mainR4_bottom_title">2025年最佳123个替代品（免费和法律流媒体选项）</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 周前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796859362.html" title="如何在霓虹深渊中与埃里斯战斗" class="phpgenera_Details_mainR4_bottom_title">如何在霓虹深渊中与埃里斯战斗</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 周前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/zh/article.html">显示更多</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>热AI工具</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>免费脱衣服图片</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>人工智能驱动的应用程序，用于创建逼真的裸体照片</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>用于从照片中去除衣服的在线人工智能工具。</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI脱衣机</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/zh/ai">显示更多</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>热门文章</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796858026.html" title="如何在Instagram上报告模仿帐户" class="phpgenera_Details_mainR4_bottom_title">如何在Instagram上报告模仿帐户</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 周前</span>
<span>By 下次还敢</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796847111.html" title="如何在WhatsApp业务上设置一条远远的消息" class="phpgenera_Details_mainR4_bottom_title">如何在WhatsApp业务上设置一条远远的消息</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 个月前</span>
<span>By 下次还敢</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796862477.html" title="如何在设置（愤世嫉俗，机器人，听众，书呆子）中更改chatgpt个性" class="phpgenera_Details_mainR4_bottom_title">如何在设置（愤世嫉俗，机器人，听众，书呆子）中更改chatgpt个性</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 周前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796849640.html" title="2025年最佳123个替代品（免费和法律流媒体选项）" class="phpgenera_Details_mainR4_bottom_title">2025年最佳123个替代品（免费和法律流媒体选项）</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 周前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/1796859362.html" title="如何在霓虹深渊中与埃里斯战斗" class="phpgenera_Details_mainR4_bottom_title">如何在霓虹深渊中与埃里斯战斗</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 周前</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/zh/article.html">显示更多</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>热工具</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="记事本++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_title">
<h3>记事本++7.3.1</h3>
</a>
<p>好用且免费的代码编辑器</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/toolset/development-tools/93" title="SublimeText3汉化版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3汉化版" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/toolset/development-tools/93" title="SublimeText3汉化版" class="phpmain_tab2_mids_title">
<h3>SublimeText3汉化版</h3>
</a>
<p>中文版，非常好用</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/toolset/development-tools/121" title="禅工作室 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禅工作室 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/toolset/development-tools/121" title="禅工作室 13.0.1" class="phpmain_tab2_mids_title">
<h3>禅工作室 13.0.1</h3>
</a>
<p>功能强大的PHP集成开发环境</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>视觉化网页开发工具</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac版</h3>
</a>
<p>神级代码编辑软件(SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/zh/ai">显示更多</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>热门话题</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1592</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>276</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/zh/faq/zt">显示更多</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/zh/faq/1796848580.html" title="初学者的基本HTML标签" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175355915289670.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="初学者的基本HTML标签" />
</a>
<a href="//m.sbmmt.com/zh/faq/1796848580.html" title="初学者的基本HTML标签" class="phphistorical_Version2_mids_title">初学者的基本HTML标签</a>
<span class="Articlelist_txts_time">Jul 27, 2025 am 03:45 AM</span>
<p class="Articlelist_txts_p">要快速入门HTML，只需掌握几个基础标签即可搭建网页骨架。1.页面结构必备、和，其中是根元素，包含元信息，是内容展示区域。2.标题使用到，级别越高数字越小，正文用标签分段，避免跳级使用。3.链接使用标签并配合href属性，图片使用标签并包含src和alt属性。4.列表分为无序列表和有序列表，每个条目用表示且必须嵌套在列表中。5.初学者不必强记所有标签，边写边查更高效，掌握结构、文本、链接、图片和列表即可制作基础网页。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/zh/faq/1796848661.html" title="输入标签中的名称属性是什么？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175356085114523.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="输入标签中的名称属性是什么？" />
</a>
<a href="//m.sbmmt.com/zh/faq/1796848661.html" title="输入标签中的名称属性是什么？" class="phphistorical_Version2_mids_title">输入标签中的名称属性是什么？</a>
<span class="Articlelist_txts_time">Jul 27, 2025 am 04:14 AM</span>
<p class="Articlelist_txts_p">thenAmeatTributeInAninputTagisusIfe to IndentifyTheInputWhentheFormisSubSted; iservesAsTheKeyInthekey-ValuePairsentTotheserver，wheretheuser'sinputisthevalue.1.whenaformented，</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/zh/faq/1796848665.html" title="您可以在另一个标签中放置一个标签吗？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175356093168643.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="您可以在另一个标签中放置一个标签吗？" />
</a>
<a href="//m.sbmmt.com/zh/faq/1796848665.html" title="您可以在另一个标签中放置一个标签吗？" class="phphistorical_Version2_mids_title">您可以在另一个标签中放置一个标签吗？</a>
<span class="Articlelist_txts_time">Jul 27, 2025 am 04:15 AM</span>
<p class="Articlelist_txts_p">❌Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.✅Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/zh/faq/1796847511.html" title="html'样式”标签：内联与内部CSS" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175348579170092.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="html'样式”标签：内联与内部CSS" />
</a>
<a href="//m.sbmmt.com/zh/faq/1796847511.html" title="html'样式”标签：内联与内部CSS" class="phphistorical_Version2_mids_title">html'样式”标签：内联与内部CSS</a>
<span class="Articlelist_txts_time">Jul 26, 2025 am 07:23 AM</span>
<p class="Articlelist_txts_p">样式放置方式需根据场景选择。1.Inline适合单元素临时修改或JS动态控制，如按钮颜色随操作变化；2.内部CSS适合页面少、结构简单项目，便于集中管理样式，如登录页基础样式设置；3.优先考虑复用性、维护性及性能，大项目拆分外链CSS文件更优。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/zh/faq/1796854080.html" title="如何在HTML中嵌入PDF文档？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175400235215427.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何在HTML中嵌入PDF文档？" />
</a>
<a href="//m.sbmmt.com/zh/faq/1796854080.html" title="如何在HTML中嵌入PDF文档？" class="phphistorical_Version2_mids_title">如何在HTML中嵌入PDF文档？</a>
<span class="Articlelist_txts_time">Aug 01, 2025 am 06:52 AM</span>
<p class="Articlelist_txts_p">使用标签是最简单且推荐的方法，语法为，适用于现代浏览器直接嵌入PDF；2.使用标签可提供更好的控制和备用内容支持，语法为，并在标签内提供下载链接作为不支持时的备用方案；3.可选通过GoogleDocsViewer嵌入，但因隐私和性能问题不建议广泛使用；4.为提升用户体验，应设置合适的高度、使用响应式尺寸（如height:80vh）并提供PDF下载链接，以便用户自行下载查看。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/zh/faq/1796851777.html" title="如何在HTML中创建一个无序的列表？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175382222111469.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何在HTML中创建一个无序的列表？" />
</a>
<a href="//m.sbmmt.com/zh/faq/1796851777.html" title="如何在HTML中创建一个无序的列表？" class="phphistorical_Version2_mids_title">如何在HTML中创建一个无序的列表？</a>
<span class="Articlelist_txts_time">Jul 30, 2025 am 04:50 AM</span>
<p class="Articlelist_txts_p">要创建HTML无序列表，需使用标签定义列表容器，每个列表项用标签包裹，浏览器会自动添加项目符号；1.使用标签创建列表；2.每个列表项用标签定义；3.浏览器自动生成默认圆点符号；4.可通过嵌套实现子列表；5.使用CSS的list-style-type属性可修改符号样式，如disc、circle、square或none；正确使用这些标签即可生成标准无序列表。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/zh/faq/1796849233.html" title="如何使用可满足的属性？" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175364067270391.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何使用可满足的属性？" />
</a>
<a href="//m.sbmmt.com/zh/faq/1796849233.html" title="如何使用可满足的属性？" class="phphistorical_Version2_mids_title">如何使用可满足的属性？</a>
<span class="Articlelist_txts_time">Jul 28, 2025 am 02:24 AM</span>
<p class="Articlelist_txts_p">theconteDitiitableAttributeMakesyHtmLelementEdabledableddingContenteDibledable =“ true”，允许使用contostlymodifectlymodifycontentinthebrowser.2.itiscommonlysonlysedinrysedinrichedinrichtexteditors，note-placeedingingInterInterfaces，andIn-placeeditingInterfaces，supportingingingingingingingingingingingingingingingelementslementslementLikeDikeDivikeDiv</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/zh/faq/1796861764.html" title="如何在html中的网站标题选项卡中添加图标" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175458060390983.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何在html中的网站标题选项卡中添加图标" />
</a>
<a href="//m.sbmmt.com/zh/faq/1796861764.html" title="如何在html中的网站标题选项卡中添加图标" class="phphistorical_Version2_mids_title">如何在html中的网站标题选项卡中添加图标</a>
<span class="Articlelist_txts_time">Aug 07, 2025 pm 11:30 PM</span>
<p class="Articlelist_txts_p">要为网站标题栏添加图标，需在HTML的部分链接一个favicon文件，具体步骤如下：1.准备一个16x16或32x32像素的图标文件，推荐使用favicon.ico命名并放置于网站根目录，或使用PNG、SVG等现代格式；2.在HTML的中添加链接标签，如，若使用PNG或SVG格式则相应调整type属性；3.可选地为移动设备添加高分辨率图标，如AppleTouchIcon，并通过sizes属性指定不同尺寸；4.遵循最佳实践，将图标置于根目录以确保自动检测，更新后清除浏览器缓存，检查文件路径正确性，</p>
</div>
</div>
<a href="//m.sbmmt.com/zh/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>公益在线PHP培训，帮助PHP学习者快速成长！</p>
</div>
<div class="footermid">
<a href="//m.sbmmt.com/zh/about/us.html">关于我们</a>
<a href="//m.sbmmt.com/zh/about/disclaimer.html">免责声明</a>
<a href="//m.sbmmt.com/zh/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1756220493"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mainNav = document.querySelector('.Article_Details_main1Lmain');
const header = document.querySelector('header');
if (mainNav) {
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
if (scrollPosition > 84) {
mainNav.classList.add('fixed');
} else {
mainNav.classList.remove('fixed');
}
});
}
});
</script>
</body>
</html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'97543480ba2ba6e8',t:'MTc1NjIyMDQ5Mw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"8c758bee214b4fe0858e454e5edf6f97","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
