目次
正确使用 </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/ja/" title="ホームページ"
class="phpgenera_Details_mainL1a">ホームページ</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="//m.sbmmt.com/ja/web-designer.html"
class="phpgenera_Details_mainL1a">ウェブフロントエンド</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="//m.sbmmt.com/ja/div-tutorial.html"
class="phpgenera_Details_mainL1a">htmlチュートリアル</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>操作性：アクセシビリティその4</span>
</div>
<div class="Articlelist_txts">
<div class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">操作性：アクセシビリティその4</h1>
<div class="Articlelist_txts_info_head">
<div class="author_info">
<a href="//m.sbmmt.com/ja/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/ja/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="操作性：アクセシビリティその4"></p>
<p>大まかに言えば、これはあなたのウェブサイトが <em>すべてのユーザーが </em>安全に <em>ナビゲートできる必要があるという原則です。これには、キーボードのみを使用して Web サイト全体にアクセスするためのガイドラインが含まれます。さらに、Web サイトがユーザー入力 (キーボードまたはその他の手段による) に応答する方法は、予測可能で明確かつ安全である必要があります。 </em>
</p> この最後の点は主に、Web サイト上の発作を引き起こす可能性のある機能をデフォルトで無効にし、有効にする前にユーザーに警告することを意味します。この原則は、タスクを完了するためにユーザーに「十分な時間」を提供するためのガイドラインも提供しますが、ここではそれについては触れません。 <p>
</p>キーボード アクセシビリティ (2.1)<h2>
</h2> キーボードのみを使用して Web サイトに移動して使用できることは、アクセシビリティの最も重要な側面の 1 つです。視覚障害のあるユーザーはほぼ完全にキーボードに依存していますが、運動障害のあるユーザーはマウスの制御が難しいため、キーボードによるアクセスにも依存している可能性があります。手をあまり使わないか、まったく使わず、代わりに大きなキーボード、マウススティック、ヘッドスティック、単一のスイッチ、または一口吸うことに頼っている人もいます。 <p>
</p> これらのデバイスの説明は WebAIM Web サイトで見つけることができますが、基本的にはユーザー入力をキーボード ストロークに変換します。キーボードから Web サイトにアクセスできない場合、これらのデバイスを使用するすべてのユーザーは Web サイトを利用できなくなります。 <p>
</p> 幸いなことに、テーマまたはプラグインのキーボードにアクセスできるようにするのは比較的簡単です。ここではいくつかの重要なポイントを示します:<p>
</p>メニュー全体がキーボードからアクセスできることを確認してください<h3>
</h3>多くのテーマは、サブメニューを表示するためにメニュー項目の上にマウスを置くことに依存しています。これは問題ありませんが、通常、親メニュー項目が (ホバリングではなく) フォーカスを取得すると、サブメニューが <p>not<em> 表示されます。 </em>:hover<code> に関連するルールをコピーして </code>:focus<code> に適用すると、戦いは半分になります。サブメニュー項目がメニュー全体のユーザー タブとして表示されます。ただし、ユーザーがサブメニューに切り替えると、親メニューはフォーカスを失い、サブメニューは消えます。これは JavaScript を使用して修正できます。このシリーズの次の記事では、これと JavaScript 以外のフォールバックを提供する方法について詳しく説明します。 </code>
</p>ユーザーを「罠」にしないでください<h3>
</h3> 「ネイティブ」フォーム入力 (選択、入力、ラジオなど) キーボードにアクセスできるようにするために何もする必要はありません。ただし、ページのいずれかの側面 (フォーム フィールドを含む) にフォーカスが当たった場合は、<p> キーボードだけを使用してその要素を移動する必要があります。そうしないと、ユーザーは実質的にスタックしてしまいます。通常、これはデフォルトの動作であるため、オーバーライドしないようにする必要があります。 <em>
</em>ナビゲーションをシンプルかつ明確にする (2.4)</p>
<h2 id="ガイドには-種類の提案があります-ユーザーが現在どこにいるのかを明確にすることと-ユーザーが行きたい場所に簡単に到達できるようにすることです">ガイドには 2 種類の提案があります。ユーザーが現在どこにいるのかを明確にすることと、ユーザーが行きたい場所に簡単に到達できるようにすることです。 </h2>
<p> これを行う際のアドバイスに従うことには、多くのテーマが既に行っていること、つまりページ間で一貫したナビゲーション メニューを表示すること、現在のページを強調表示すること、ユーザーがサイト上のどこにいるかをすぐに判断できるようにすること (ブレッドクラムの使用など) を実行することが含まれます。 </p>
<p></p>
<p>スタイル: 適切な焦点</p>
<h3 id="キーボードを使用して-Web-を閲覧できるようにする上で重要なのは-現在どのコンテンツに注目しているかを正確に確認できることです-現在フォーカスを受けている要素は-ページの残りの部分と明確に区-別でき-区別できる必要があります-したがって-代替スタイルを提供する場合を除き">キーボードを使用して Web を閲覧できるようにする上で重要なのは、現在どのコンテンツに注目しているかを正確に確認できることです。現在フォーカスを受けている要素は、ページの残りの部分と明確に区別でき、区別できる必要があります。したがって、代替スタイルを提供する場合を除き、</h3>outline:none;<p> は避けてください: <code>
リーリー
</code>フォーカス順序とタブインデックス</p>
<h3 id="キーボード-アクセシビリティのもう-つの重要な部分は-Tab-キーが予測どおりに自然に動作することです-たとえば-現在フォーカスがフォーム-フィールドにある場合-次のタブでそのフォームの次のフィールドに移動したいとします-Tab-キーを押すとページ上でフォーカスが不規則に上下に移動する場合-これはユーザーにとってイライラしたり方向感覚を失ったりする可能性があります">キーボード アクセシビリティのもう 1 つの重要な部分は、Tab キーが予測どおりに自然に動作することです。たとえば、現在フォーカスがフォーム フィールドにある場合、次のタブでそのフォームの次のフィールドに移動したいとします。 Tab キーを押すとページ上でフォーカスが不規則に上下に移動する場合、これはユーザーにとってイライラしたり方向感覚を失ったりする可能性があります。 </h3>
<p></p>tabindex の使用を避ける<p>: tabindex 属性を使用すると、Tab キーを使用して要素にアクセスする順序を変更できます。ただし、このシリーズの記事 2 の DOM 構造に関するアドバイスに従う場合、タブの順序はページの「自然な」順序を反映する必要があります。 tabindex にも用途はありますが、その用途は限られており、不十分なサイト構造を「修正」するために使用すると、さらなる問題が発生する可能性があります。最善のアプローチは、tabindex の使用を避け、代わりにテーマで論理 DOM 構造を生成し、CSS を使用して視覚的なプレゼンテーションを変更することです。 <strong>
</strong>「続きを読む」または「続きを読む」は避けてください</p>
<h3 id="スクリーン-リーダーのユーザーはリンク間を移動して-その間のテキストをスキップすることが多く-各リンクでスクリーン-リーダーは-リンク-リンク-テキスト-と読み上げます-したがって-続きを読むためのリンク-ここをクリックするためのリンク-または-続きを読むためのリンク-という言葉が繰り返し聞こえるのは-こうしたユーザーにとって非常に役に立ちません-この場合-リンクにコンテキストを追加すると-単に投稿のタイトルが提供されます-したがって-続きを読む-の代わりに-続きを読む-投稿タイトル-となります">スクリーン リーダーのユーザーはリンク間を移動して、その間のテキストをスキップすることが多く、各リンクでスクリーン リーダーは「リンク [リンク テキスト]」と読み上げます。したがって、「続きを読むためのリンク」、「ここをクリックするためのリンク」、または「続きを読むためのリンク」という言葉が繰り返し聞こえるのは、こうしたユーザーにとって非常に役に立ちません。この場合、リンクにコンテキストを追加すると、単に投稿のタイトルが提供されます。したがって、「続きを読む」の代わりに「続きを読む[投稿タイトル]」となります。 </h3>
<p> これを WordPress テーマで行うには、</p>excerpt_more<p> フィルターを接続し、「続きを読む」リンクを追加するだけです: <code>
リーリー
</code>これにより、「続きを読む」リンクの正しいコンテキストが提供されます。ただし、いくつかの改善は可能です。 </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>以上が操作性：アクセシビリティその4の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</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/ja/faq/1796840616.html" title="PHPコメントを書くためのヒント" class="phpgenera_Details_mainR4_bottom_title">PHPコメントを書くためのヒント</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/ja/faq/1796840634.html" title="PHPでコードをコメントします" class="phpgenera_Details_mainR4_bottom_title">PHPでコードをコメントします</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/ja/faq/1796841677.html" title="<🎜>：庭を育てる - 旅行商人の完全なガイド" class="phpgenera_Details_mainR4_bottom_title"><🎜>：庭を育てる - 旅行商人の完全なガイド</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/ja/faq/1796840867.html" title="Destiny2：運命の端 - 修飾因子がどのように機能するか" class="phpgenera_Details_mainR4_bottom_title">Destiny2：運命の端 - 修飾因子がどのように機能するか</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/ja/faq/1796843215.html" title="森の99泊で4人の子供全員を救助する方法" class="phpgenera_Details_mainR4_bottom_title">森の99泊で4人の子供全員を救助する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/ja/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/ja/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/ja/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/ja/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/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>リアルなヌード写真を作成する AI 搭載アプリ</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/ja/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/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>写真から衣服を削除するオンライン AI ツール。</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/ja/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/ja/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/ja/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/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/ja/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/ja/faq/1796840616.html" title="PHPコメントを書くためのヒント" class="phpgenera_Details_mainR4_bottom_title">PHPコメントを書くためのヒント</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/ja/faq/1796840634.html" title="PHPでコードをコメントします" class="phpgenera_Details_mainR4_bottom_title">PHPでコードをコメントします</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/ja/faq/1796841677.html" title="<🎜>：庭を育てる - 旅行商人の完全なガイド" class="phpgenera_Details_mainR4_bottom_title"><🎜>：庭を育てる - 旅行商人の完全なガイド</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4週間前</span>
<span>By Jack chen</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/ja/faq/1796840867.html" title="Destiny2：運命の端 - 修飾因子がどのように機能するか" class="phpgenera_Details_mainR4_bottom_title">Destiny2：運命の端 - 修飾因子がどのように機能するか</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 か月前</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/ja/faq/1796843215.html" title="森の99泊で4人の子供全員を救助する方法" class="phpgenera_Details_mainR4_bottom_title">森の99泊で4人の子供全員を救助する方法</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3週間前</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/ja/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/ja/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/ja/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/ja/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/ja/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/ja/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/ja/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/ja/toolset/development-tools/469" title="ドリームウィーバー 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="ドリームウィーバー CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title">
<h3>ドリームウィーバー CS6</h3>
</a>
<p>ビジュアル Web 開発ツール</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/ja/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/ja/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/ja/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/ja/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>1511</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/ja/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/ja/faq/1796840795.html" title="`` vs.` `in 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/175285688291914.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="`` vs.` `in html" />
</a>
<a href="//m.sbmmt.com/ja/faq/1796840795.html" title="`` vs.` `in html" class="phphistorical_Version2_mids_title">`` vs.` `in html</a>
<span class="Articlelist_txts_time">Jul 19, 2025 am 12:41 AM</span>
<p class="Articlelist_txts_p">これは、大きなブロックコンテンツ領域を分割するために使用されるブロックレベルの要素です。これは、テキストまたはコンテンツの断片の小さなセグメントを包むのに適したインライン要素です。特定の違いは次のとおりです。1。列、幅、高さのみを占有し、内側と外側の縁を設定できます。これは、ヘッダー、サイドバーなどのレイアウト構造でよく使用されます。 2。ラインを包み、コンテンツ幅のみを占有し、変色、太字などのローカルスタイル制御に使用されます。 3.使用シナリオの観点から、それは全体の領域のレイアウトと構造の組織に適しており、全体的なレイアウトに影響を与えない小規模なスタイル調整に使用されます。 4.ネスティングの場合、任意の要素を含めることができ、ブロックレベルの要素を内部にネストしないでください。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/ja/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/ja/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をすばやく開始するには、Webスケルトンを構築するためにいくつかの基本的なタグをマスターするだけです。 1.ページ構造は不可欠であり、ルート要素であり、メタ情報が含まれ、コンテンツディスプレイ領域です。 2。タイトルを使用します。レベルが高いほど、数が小さくなります。タグを使用してテキストをセグメント化して、レベルをスキップしないようにします。 3.リンクはタグを使用してHREF属性を一致させ、画像はタグを使用し、SRCおよびALT属性が含まれます。 4.リストは、順序付けられていないリストと順序付けリストに分割されます。各エントリは表され、リストにネストする必要があります。 5.初心者は、すべてのタグを強制的に記憶する必要はありません。あなたが書いている間にそれらを書いてチェックする方がより効率的です。構造、テキスト、リンク、写真、リストをマスターして、基本的なWebページを作成します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/ja/faq/1796840839.html" title="html `link rel =' preload '`を使用したリソースのプリロード" 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/175285764285706.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="html `link rel =' preload '`を使用したリソースのプリロード" />
</a>
<a href="//m.sbmmt.com/ja/faq/1796840839.html" title="html `link rel =' preload '`を使用したリソースのプリロード" class="phphistorical_Version2_mids_title">html `link rel =' preload '`を使用したリソースのプリロード</a>
<span class="Articlelist_txts_time">Jul 19, 2025 am 12:54 AM</span>
<p class="Articlelist_txts_p">Linkrel = "Preload"は、ページの読み込みパフォーマンスを最適化するテクノロジーであり、重要なリソースを事前にロードするために使用されます。その中心的な目的は、フォント、キーCSS/JS、ホーム画面画像など、ホーム画面のレンダリングに不可欠なリソースの負荷を優先することです。使用する場合に注意してください。1。リソースタイプを指定するには、AS属性を正しく設定します。 2。乱用を避け、過度の帯域幅の使用を防ぐ。 3.リソースが実際に使用されることを確認してください。そうしないと、リクエストの無駄を引き起こします。 4.クロスドメインリソースにCrossorigin属性を追加します。 AS属性の欠如などの誤った執筆方法により、プリロードが無効になります。合理的な使用は、ページの読み込み効率を改善する可能性があります。そうしないと、逆効果になる可能性があります。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/ja/faq/1796845224.html" title="Shadow Domの概念と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/175329234213420.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Shadow Domの概念とHTML統合" />
</a>
<a href="//m.sbmmt.com/ja/faq/1796845224.html" title="Shadow Domの概念とHTML統合" class="phphistorical_Version2_mids_title">Shadow Domの概念とHTML統合</a>
<span class="Articlelist_txts_time">Jul 24, 2025 am 01:39 AM</span>
<p class="Articlelist_txts_p">Shadowdomは、孤立したDOMサブツリーを作成するためにWebコンポーネントテクノロジーで使用されるテクノロジーです。 1.独自のスタイルと行動を備えた通常のHTML要素上の独立したDOM構造のマウントを可能にし、メインドキュメントに影響しません。 2。AttachShadowメソッドの使用やモードの設定など、JavaScriptを介して作成されました。 3。HTMLと組み合わせて使用すると、3つの主要な機能があります。クリア構造、スタイル分離、コンテンツプロジェクション（スロット）。 4。ノートには、複雑なデバッグ、スタイルスコープ制御、パフォーマンスオーバーヘッド、フレームワークの互換性の問題が含まれます。要するに、Shadowdomは、再利用可能で汚染されていないUIコンポーネントを構築するためのネイティブカプセル化機能を提供します。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/ja/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/ja/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">youcannotnesttagsinsisideantagbecuseit’sinvalidhtml; browsersautomatelycloseThefirsteforeopeningthenext、spedinginselementsied、useinlineelements like like like、orforstylingwithinaparagraph、またはblockainerslikegoriveparagragh</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/ja/faq/1796847511.html" title="html `style`タグ：インラインと内部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 `style`タグ：インラインと内部css" />
</a>
<a href="//m.sbmmt.com/ja/faq/1796847511.html" title="html `style`タグ：インラインと内部css" class="phphistorical_Version2_mids_title">html `style`タグ：インラインと内部css</a>
<span class="Articlelist_txts_time">Jul 26, 2025 am 07:23 AM</span>
<p class="Articlelist_txts_p">シーンに従ってスタイル配置方法を選択する必要があります。 1。インラインは、操作によるボタンの色の変更など、単一要素または動的JS制御の一時的な変更に適しています。 2。内部CSSは、ページが少ないプロジェクトと単純な構造に適しています。これは、ログインページの基本スタイル設定など、スタイルの集中管理に便利です。 3。再利用、メンテナンス、パフォーマンスが優先され、大規模なプロジェクトの外部リンクCSSファイルを分割することをお勧めします。</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/ja/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/ja/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">thenAmeattributeTheTogisusedisedifytheTheInputisputisUbsisubmitted; itstheasthekey-key-key-valuepairsenttotheserver、wheretheuser'sinputisthevalue.1.whenaformissubmitted、thenameattributebecomesthe keyanttheinputtheinupthe becomesthevalueintas</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/ja/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/ja/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">thecontentEdentedItedItableattributemakesanyhtmlementedabledaitbyaddingcontenteditable = "true"、avainusErstodirectlymodifyContentinthebrowser.2.ItiscommonlyLichTexteditors、note-takingApps、およびin-place-placeditingintingintingintingintingintingtintingtintingtediv</p>
</div>
</div>
<a href="//m.sbmmt.com/ja/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/ja/about/us.html">私たちについて</a>
<a href="//m.sbmmt.com/ja/about/disclaimer.html">免責事項</a>
<a href="//m.sbmmt.com/ja/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?1755465967"></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 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>
<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:'970c3f764843ed3a',t:'MTc1NTQ2NTk2Nw=='};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>
