Table of Contents
正确使用 </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="https://www.php.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="https://www.php.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="https://www.php.cn/div-tutorial.html"
class="phpgenera_Details_mainL1a">HTML Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Operability: Accessibility, Part 4</span>
</div>
<div class="Articlelist_txts">
<div class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Operability: Accessibility, Part 4</h1>
<div class="Articlelist_txts_info_head">
<div class="author_info">
<a href="https://www.php.cn/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="https://www.php.cn/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">fourth part</span>
<span class="Articlelist_txts_infoss ">accessibility</span>
<span class="Articlelist_txts_infoss ">Operability</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="Operability: Accessibility, Part 4"></p>
<p>Broadly speaking, this is the principle that your website must be <em>safely</em>able for <em>all users to</em>navigate. This includes guidelines for accessing the entire website using only your keyboard. Additionally, the way your website responds to user input (via keyboard or other means) should be predictable, clear, and secure. </p>
<p> This last point mainly refers to ensuring that any features on the website that may cause seizures are disabled by default and users are warned before enabling them. The principle also provides guidelines for providing users with "enough time" to complete tasks, but we won't go into that here. </p>
<h2 id="Keyboard-Accessibility">Keyboard Accessibility (2.1)</h2>
<p> Being able to navigate and use your website using only your keyboard is one of the most important aspects of accessibility. Blind users rely almost entirely on the keyboard, while those with motor impairments may have difficulty controlling the mouse and therefore also rely on keyboard access. Some people may use their hands less or not at all, relying instead on a larger keyboard, mouth stick, head stick, single switch, or sip 'n' puff. </p>
<p> You can find instructions for these devices on the WebAIM website, but they essentially convert user input into keyboard strokes. If your website is not accessible from a keyboard, your website will be unavailable to all users who rely on these devices. </p>
<p> Fortunately, making your theme or plugin keyboard accessible is relatively simple. Here are some key points:</p>
<h3 id="Make-sure-the-entire-menu-is-accessible-via-keyboard">Make sure the entire menu is accessible via keyboard</h3>
<p>Many themes rely on hovering the mouse over a menu item to display any submenus. This is fine, but usually if the parent menu item gets focus (as opposed to hovering), the submenu will <em>not</em> appear. If you copy any relevant rules for <code>:hover</code> and apply them to <code>:focus</code> , this will get you half the battle: the submenu items will appear as user tabs within the entire menu. However, once the user switches down to the submenu, the parent menu loses focus and the submenu disappears. This can be corrected using JavaScript. The next article in this series will detail this and how to provide non-JavaScript fallbacks. </p>
<h3 id="Don-t-trap-users">Don’t “trap” users</h3>
<p> You don't need to do anything to make the "native" form input (select, enter, radio, etc.) keyboard accessible. However, if any aspect of the page (including a form field) gets focus, it <em> must </em> be moved away using just the keyboard, otherwise the user is effectively stuck. This is usually the default behavior, so you should avoid overriding it. </p>
<h2 id="Making-navigation-simple-and-clear">Making navigation simple and clear (2.4)</h2>
<p>The guide has two types of suggestions: making it clear where the user is currently, and making it easier to get where they want to go. </p>
<p> Part of following the advice when doing this involves doing what many themes already do: having a consistent navigation menu across pages, highlighting the current page, and allowing users to quickly determine where they are on the site (e.g. using breadcrumbs) .</p>
<p></p>
<h3 id="Style-Proper-focus">Style: Proper focus</h3>
<p>A key part of being able to browse the web using your keyboard is being able to see exactly what content is currently focused. The element currently receiving focus should be clearly distinct and distinguishable from the rest of the page. Therefore, you should avoid <code>outline:none;</code> unless you are providing an alternative style: </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>a:focus{
outline: none;
background: #ee7b00;
color: #fff;
}
</pre><div class="contentsignin">Copy after login</div></div>
<h3 id="Focus-Order-and-Tabindex">Focus Order and Tabindex</h3>
<p>Another important part of keyboard accessibility is that the Tab key behaves predictably and naturally. For example, if the focus is currently on a form field, I want the next tab to take me to the next field in that form. This can be frustrating and disorienting for users if pressing the Tab key causes focus to jump up and down erratically on the page. </p>
<p><strong>Avoid using tabindex</strong>: The tabindex attribute allows you to change the order in which elements are accessed via the Tab key. However, if you follow the advice on DOM structure in article 2 of this series, the tab order should reflect the "natural" order of the page. While tabindex has its uses, they are few and far between, and its use to "fix" poor site structure may create more problems. The best approach is to avoid using tabindex and instead let your theme generate the logical DOM structure and use CSS to change the visual presentation. </p>
<h3 id="Avoid-Read-more-or-Continue-reading">Avoid "Read more" or "Continue reading"</h3>
<p>Screen reader users will often jump between links, skipping the text in between, and at each link the screen reader will pronounce "link [link text]". So it’s very unhelpful for these users if they hear repeatedly “link to read more,” “link to click here,” or “link to continue reading.” In this case, adding context to the link simply provides the title of the post. So instead of “continue reading,” we have “continue reading [post title].” </p>
<p> To do this in a WordPress theme we simply connect the <code>excerpt_more</code> filter and append our "continue reading" link: </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>
<p>This provides the correct context for the "Read More" link. However, some improvements could be made. </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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>
<p>“屏幕阅读器类”有很多不同的示例；这个特定的类取自 Bootstrap 3。接下来，将适当的类添加到文章标题中，具体将上面的第 5 行替换为：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>__( '<a href="%s">Continue reading <span class="screen-reader">%s</span></a>', 'mytheme' ),
</pre><div class="contentsignin">Copy after login</div></div>
<p>其次，虽然这将为用户提供链接指向何处的指示，但他们仍然必须在到达帖子标题之前收听“链接继续阅读...”。理想情况下，您应该将冗余信息放在链接文本的末尾，或者从锚标记中完全省略它，以减少识别链接所需的时间。 </p>
<p>对于屏幕阅读器用户来说，不在链接文本前面添加冗余信息的另一个好处是屏幕阅读器通常会在页面上生成链接列表。如果您的许多链接都以相同的文本开头，这可能会使找到所需链接变得更加困难，特别是如果您的联系页面的链接位于“H”下方，因为它显示“如何联系我们”。</p>
<h3 id="正确使用-code-title-code-标签">正确使用 <code><title></code> 标签</h3>
<p>应使用 <code><title></code> 标签来识别用户的当前位置。该信息由屏幕阅读器读出，并显示在搜索结果以及屏幕窗口和浏览器选项卡中。为了让用户轻松识别他们所在的位置（或搜索到的内容），此标题标签应包含页面的标题和网站名称。理想情况下，网站名称应该放在最后，这样使用屏幕阅读器的人就不必在每次页面加载时先听您网站的名称，然后才能听到页面标题。</p>
<p>标题标签可以添加到主题中：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><title><?php wp_title(); ?></title>
</pre><div class="contentsignin">Copy after login</div></div>
<p>要添加网站标题：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>
<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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>
<p>这里唯一需要注意的是：</p>
<ol>
<li>href 值，在本例中为“main”。这必须与包含页面内容的元素的 ID 匹配。</li>
<li>链接的类，我们将使用它来设置样式。</li>
</ol>
<p>关于 (1)，您的循环将类似于：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>
<p>您的页面模板可能类似于：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>
<p>现在剩下的就是向链接添加一些样式。 </p>
<p>首先，我们希望链接隐藏，但不对屏幕阅读器隐藏，因此我们会将链接放置在屏幕外，而不是使用 <code>display:none</code>（在这种情况下，屏幕阅读器会忽略它）。 </p>
<p>其次，当它获得焦点时，我们希望使链接变得明显，因此很明显以前隐藏的链接现在可见并具有焦点。</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>
<h2 id="确保网站导航安全">确保网站导航安全 (2.3)</h2>
<p>最后，请注意，有些人容易患光敏性癫痫发作。这可能是由闪烁或闪光效果引起的。去年 12 月，杰夫·钱德勒 (Jeff Chandler) 在一名访客警告杰夫·钱德勒 (Jeff Chandler) 取消了 WP Tavern 的“雪”效果可能引发癫痫发作后。</p>
<p>这不仅限于癫痫发作，它还可能引发某些人的偏头痛或惊恐发作。它也不限于雪花效果 - 视频、轮播或音频文件自动播放也可以触发这些效果。 </p>
<p>While this is primarily an editorial decision, and as developers it's not our job to prevent autoplay, we can at least prevent it by disabling it by default. Jeff mentioned in his article that he couldn't find a plugin that provided a "snow" effect that visitors could play with themselves. </p><p>The above is the detailed content of Operability: Accessibility, Part 4. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797907.html" title="Roblox: Grow A Garden - Complete Mutation Guide" class="phpgenera_Details_mainR4_bottom_title">Roblox: Grow A Garden - Complete Mutation Guide</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797130.html" title="Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys" class="phpgenera_Details_mainR4_bottom_title">Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796796771.html" title="How to fix KB5055612 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055612 fails to install in Windows 10?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796796926.html" title="Nordhold: Fusion System, Explained" class="phpgenera_Details_mainR4_bottom_title">Nordhold: Fusion System, Explained</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797896.html" title="Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook" class="phpgenera_Details_mainR4_bottom_title">Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</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>Hot AI Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></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>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797907.html" title="Roblox: Grow A Garden - Complete Mutation Guide" class="phpgenera_Details_mainR4_bottom_title">Roblox: Grow A Garden - Complete Mutation Guide</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797130.html" title="Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys" class="phpgenera_Details_mainR4_bottom_title">Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796796771.html" title="How to fix KB5055612 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055612 fails to install in Windows 10?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796796926.html" title="Nordhold: Fusion System, Explained" class="phpgenera_Details_mainR4_bottom_title">Nordhold: Fusion System, Explained</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796797896.html" title="Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook" class="phpgenera_Details_mainR4_bottom_title">Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</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>Hot Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++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="Notepad++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" 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 Chinese version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 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="Zend Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/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="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" 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 version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</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>Hot Topics</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1666</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>14</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1425</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1323</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>25</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1272</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/c-tutorial" title="C# Tutorial" class="phpgenera_Details_mainR4_bottom_title">C# Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1251</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>24</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/faq/zt">Show More</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="https://www.php.cn/faq/1796794693.html" title="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" 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/174438733162787.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" />
</a>
<a href="https://www.php.cn/faq/1796794693.html" title="Understanding HTML, CSS, and JavaScript: A Beginner's Guide" class="phphistorical_Version2_mids_title">Understanding HTML, CSS, and JavaScript: A Beginner's Guide</a>
<span class="Articlelist_txts_time">Apr 12, 2025 am 12:02 AM</span>
<p class="Articlelist_txts_p">WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796797816.html" title="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" 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/174490615241003.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" />
</a>
<a href="https://www.php.cn/faq/1796797816.html" title="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" class="phphistorical_Version2_mids_title">HTML: The Structure, CSS: The Style, JavaScript: The Behavior</a>
<span class="Articlelist_txts_time">Apr 18, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796798320.html" title="The Future of HTML, CSS, and JavaScript: Web Development Trends" 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/174499214213783.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="The Future of HTML, CSS, and JavaScript: Web Development Trends" />
</a>
<a href="https://www.php.cn/faq/1796798320.html" title="The Future of HTML, CSS, and JavaScript: Web Development Trends" class="phphistorical_Version2_mids_title">The Future of HTML, CSS, and JavaScript: Web Development Trends</a>
<span class="Articlelist_txts_time">Apr 19, 2025 am 12:02 AM</span>
<p class="Articlelist_txts_p">The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796797300.html" title="The Future of HTML: Evolution and Trends in Web Design" 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/174481993285664.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="The Future of HTML: Evolution and Trends in Web Design" />
</a>
<a href="https://www.php.cn/faq/1796797300.html" title="The Future of HTML: Evolution and Trends in Web Design" class="phphistorical_Version2_mids_title">The Future of HTML: Evolution and Trends in Web Design</a>
<span class="Articlelist_txts_time">Apr 17, 2025 am 12:12 AM</span>
<p class="Articlelist_txts_p">The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796796827.html" title="HTML vs. CSS vs. JavaScript: A Comparative Overview" 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/174473305338023.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML vs. CSS vs. JavaScript: A Comparative Overview" />
</a>
<a href="https://www.php.cn/faq/1796796827.html" title="HTML vs. CSS vs. JavaScript: A Comparative Overview" class="phphistorical_Version2_mids_title">HTML vs. CSS vs. JavaScript: A Comparative Overview</a>
<span class="Articlelist_txts_time">Apr 16, 2025 am 12:04 AM</span>
<p class="Articlelist_txts_p">The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796795665.html" title="HTML: Building the Structure of Web Pages" 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/174456085285529.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML: Building the Structure of Web Pages" />
</a>
<a href="https://www.php.cn/faq/1796795665.html" title="HTML: Building the Structure of Web Pages" class="phphistorical_Version2_mids_title">HTML: Building the Structure of Web Pages</a>
<span class="Articlelist_txts_time">Apr 14, 2025 am 12:14 AM</span>
<p class="Articlelist_txts_p">HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796800590.html" title="HTML vs. CSS and JavaScript: Comparing Web Technologies" 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/174533794691849.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML vs. CSS and JavaScript: Comparing Web Technologies" />
</a>
<a href="https://www.php.cn/faq/1796800590.html" title="HTML vs. CSS and JavaScript: Comparing Web Technologies" class="phphistorical_Version2_mids_title">HTML vs. CSS and JavaScript: Comparing Web Technologies</a>
<span class="Articlelist_txts_time">Apr 23, 2025 am 12:05 AM</span>
<p class="Articlelist_txts_p">HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796796249.html" title="HTML: Is It a Programming Language or Something Else?" 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/174464723172609.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML: Is It a Programming Language or Something Else?" />
</a>
<a href="https://www.php.cn/faq/1796796249.html" title="HTML: Is It a Programming Language or Something Else?" class="phphistorical_Version2_mids_title">HTML: Is It a Programming Language or Something Else?</a>
<span class="Articlelist_txts_time">Apr 15, 2025 am 12:13 AM</span>
<p class="Articlelist_txts_p">HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.</p>
</div>
</div>
<a href="https://www.php.cn/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>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/about/us.html">About us</a>
<a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a>
<a href="https://www.php.cn/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?1747035754"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></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> 
