HTML 요소
요소에는 모든 head 태그 요소가 포함됩니다. 요소에는 스크립트, 스타일 파일(CSS) 및 다양한 메타 정보를 삽입할 수 있습니다.
헤드 영역에 추가할 수 있는 요소 태그는
, <style>, <meta>, <link>, <script>, <noscript> 및 <base>입니다. <hr/><h2 style="font-size: 22px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 10px; margin-bottom: 10px; font-weight: bold; background-color: transparent; color: rgb(0, 0, 0);">
HTML <제목> 요소 <p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<title> 태그는 다양한 문서의 제목을 정의합니다. <p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
HTML/XHTML 문서에는 <title>이 필요합니다. <p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<제목> 요소:<ul style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;" class=" list-paddingleft-2"><li><p>
브라우저 도구 모음의 제목을 정의합니다 <li><p><br/><li><p>
웹페이지를 즐겨찾기에 추가하면 즐겨찾기에 표시되는 제목 <li><p><br/><li><p>
검색 엔진 결과 페이지에 표시되는 제목 <li><p><br/><p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
간단한 HTML 문서:<p style="font-size: 13px; font-family: 'courier new';">
<!DOCTYPE html><br/>
<html><br/>
<머리><br/>
<title>문서 제목</style>
</title>
<br>
머리><br><br>
<br>
문서 내용......<br>
본문><br><br>
<hr>
<h2 style="font-size: 22px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 10px; margin-bottom: 10px; font-weight: bold; background-color: transparent; color: rgb(0, 0, 0);">
HTML <base> 요소 </h2>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<base> 태그는 HTML 문서의 모든 링크 태그에 대한 기본 링크 역할을 하는 기본 링크 주소/링크 대상을 설명합니다. </p>
<p style="font-size: 13px; font-family: 'courier new';">
<br>
<base href="http://www.52bcx.com/images/" target="_blank"><br>
</p>
<hr>
<h2 style="font-size: 22px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 10px; margin-bottom: 10px; font-weight: bold; background-color: transparent; color: rgb(0, 0, 0);">
HTML 요소 </h2>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<link> 태그는 문서와 외부 리소스 간의 관계를 정의합니다. </p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<link> 태그는 일반적으로 스타일 시트에 연결하는 데 사용됩니다. </p>
<p style="font-size: 13px; font-family: 'courier new';">
<br>
<link rel="stylesheet" type="text/css" href="mystyle.css"><br>
머리></p>
<hr>
<h2 style="font-size: 22px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 10px; margin-bottom: 10px; font-weight: bold; background-color: transparent; color: rgb(0, 0, 0);">
HTML 요소 </h2>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<style> 태그는 HTML 문서의 스타일 파일 참조 주소를 정의합니다.</style></p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<style> 요소에서는 HTML 문서를 렌더링하기 위한 스타일 파일을 지정해야 합니다. </style></p>
<p style="font-size: 13px; font-family: 'courier new';">
<br>
<style type="text/css"><br/>
본문 {배경색:노란색}<br/>
p {색상:파란색}<br/>
</스타일><br/>
</style></p>
<hr>
<h2 style="font-size: 22px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 10px; margin-bottom: 10px; font-weight: bold; background-color: transparent; color: rgb(0, 0, 0);">
HTML 요소 </h2>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
메타 태그는 몇 가지 기본 메타데이터를 설명합니다. </p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<meta> 태그는 메타데이터도 페이지에 표시되지 않지만 브라우저에 의해 구문 분석됩니다. </p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
META 요소는 일반적으로 웹페이지 설명, 키워드, 파일의 마지막 수정 시간, 작성자 및 기타 메타데이터를 지정하는 데 사용됩니다. </p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
메타데이터는 브라우저(콘텐츠가 표시되거나 페이지가 다시 로드되는 방식), 검색 엔진(키워드) 또는 기타 웹 서비스에서 사용될 수 있습니다. </p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<meta>는 일반적으로 </p> 영역에 배치됩니다. <h2 style="font-size: 22px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 10px; margin-bottom: 10px; font-weight: bold; background-color: transparent; color: rgb(0, 0, 0);">
<meta> 사용예</h2>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
검색 엔진에 대한 키워드 정의: </p>
<p style="font-size: 13px; font-family: 'courier new';">
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"></p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
웹페이지 설명 내용 정의: </p>
<p style="font-size: 13px; font-family: 'courier new';">
<meta name="description" content="HTML 및 CSS에 대한 무료 웹 튜토리얼"></p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
웹 작성자 정의:</p>
<p style="font-size: 13px; font-family: 'courier new';">
<meta name="author" content="Hege Refsnes"></p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
30초마다 현재 페이지 새로 고침: </p>
<p style="font-size: 13px; font-family: 'courier new';">
<meta http-equiv="refresh" content="30"></p>
<hr>
<h2 style="font-size: 22px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 10px; margin-bottom: 10px; font-weight: bold; background-color: transparent; color: rgb(0, 0, 0);">
HTML 요소 </h2>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<script> 태그는 JavaScript와 같은 스크립트 파일을 로드하는 데 사용됩니다. </script></p>
<p style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<script> 요소는 다음 섹션에서 자세히 설명됩니다. </script></p>
<hr>
<h2 style="font-size: 22px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 10px; margin-bottom: 10px; font-weight: bold; background-color: transparent; color: rgb(0, 0, 0);">
HTML 헤드 요소 </h2>
<table class="reference" style="font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border-collapse: collapse; width: 722px;"><tbody>
<tr style="background-color: rgb(246, 244, 240);" class="firstRow">
<th align="left" style="font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: rgb(255, 255, 255); background-color: rgb(85, 85, 85); border: 1px solid rgb(85, 85, 85); padding: 3px; vertical-align: top; text-align: left;" width="20%">
태그 </th>
<th align="left" style="font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: rgb(255, 255, 255); background-color: rgb(85, 85, 85); border: 1px solid rgb(85, 85, 85); padding: 3px; vertical-align: top; text-align: left;" width="80%">
설명</th>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
</td>
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
문서의 정보를 정의합니다</td>
</tr>
<tr style="background-color: rgb(246, 244, 240);">
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
</td>
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
문서 제목을 정의합니다 </td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
</td>
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
페이지 링크 태그의 기본 링크 주소를 정의합니다 </td>
</tr>
<tr style="background-color: rgb(246, 244, 240);">
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
</td>
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
문서와 외부 리소스 간의 관계를 정의합니다</td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
</td>
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
HTML 문서에서 메타데이터를 정의합니다 </td>
</tr>
<tr style="background-color: rgb(246, 244, 240);">
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
</td>
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
클라이언트를 정의하는 스크립트 파일</td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
</td>
<td style="line-height: 16px; font-size: 12px; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; border: 1px solid rgb(212, 212, 212); padding: 7px 5px; vertical-align: top;">
HTML 문서를 정의하는 스타일 파일</td>
</tr>
</tbody></table>
<!--<p>더보기</p>--><p>위 내용은 HTML 헤더에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">성명</div><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">관련 기사<img class="lazy"
data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803630.html" title="HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오." class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174602888058018.jpg?x-oss-process=image/resize,p_40" alt="HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오." src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803630.html" title="HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오." class="phphistorical_Version2_mids_title">HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.</a><span class="Articlelist_txts_time">May 01, 2025 am 12:01 AM</span><p class="Articlelist_txts_p">일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803517.html" title="Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/246/273/174531649964017.jpg?x-oss-process=image/resize,p_40" alt="Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803517.html" title="Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_title">Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:24 PM</span><p class="Articlelist_txts_p">솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803513.html" title="DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/246/273/174531772592895.jpg?x-oss-process=image/resize,p_40" alt="DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803513.html" title="DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?" class="phphistorical_Version2_mids_title">DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:21 PM</span><p class="Articlelist_txts_p">마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803509.html" title="HTML 비디오의 재생 제어 스타일 수정 방법" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/503/042/174537198390896.jpg?x-oss-process=image/resize,p_40" alt="HTML 비디오의 재생 제어 스타일 수정 방법" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803509.html" title="HTML 비디오의 재생 제어 스타일 수정 방법" class="phphistorical_Version2_mids_title">HTML 비디오의 재생 제어 스타일 수정 방법</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:18 PM</span><p class="Articlelist_txts_p">HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803505.html" title="휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/246/273/174539556427851.jpg?x-oss-process=image/resize,p_40" alt="휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803505.html" title="휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?" class="phphistorical_Version2_mids_title">휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:15 PM</span><p class="Articlelist_txts_p">휴대 전화에서 기본 선택을 사용하는 데있어 잠재적 인 문제는 모바일 애플리케이션을 개발할 때 종종 상자를 선택해야 할 필요가 있습니다. 일반적으로 개발자 ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803501.html" title="휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/246/273/174539689375240.jpg?x-oss-process=image/resize,p_40" alt="휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803501.html" title="휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?" class="phphistorical_Version2_mids_title">휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:12 PM</span><p class="Articlelist_txts_p">휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까? 모바일 장치에서 애플리케이션을 개발할 때는 올바른 UI 구성 요소를 선택하는 것이 매우 중요합니다. 많은 개발자 ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803497.html" title="Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/246/273/174540087224288.jpg?x-oss-process=image/resize,p_40" alt="Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803497.html" title="Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_title">Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:09 PM</span><p class="Articlelist_txts_p">Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하십시오. 3.js의 Octree를 사용하여 방에서 3 인칭 로밍을 구현하고 충돌을 추가하십시오 ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803493.html" title="휴대 전화에서 기본 선택을 사용할 때 어떤 문제가 발생합니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/246/273/174540194775302.jpg?x-oss-process=image/resize,p_40" alt="휴대 전화에서 기본 선택을 사용할 때 어떤 문제가 발생합니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803493.html" title="휴대 전화에서 기본 선택을 사용할 때 어떤 문제가 발생합니까?" class="phphistorical_Version2_mids_title">휴대 전화에서 기본 선택을 사용할 때 어떤 문제가 발생합니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:06 PM</span><p class="Articlelist_txts_p">모바일 장치에서 애플리케이션을 개발할 때 휴대폰에 대한 기본 선택 문제는 종종 사용자가 선택 해야하는 시나리오에 직면합니다. 네이티브 셀 ...</p></div></div><a href="https://m.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>핫 AI 도구</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ko/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="https://m.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ko/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="https://m.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ko/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="https://m.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ko/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="https://m.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/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://m.php.cn/ko/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="https://m.php.cn/ko/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/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>인기 기사</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796789525.html" title="Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 몇 주 전</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796793874.html" title="KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?" class="phpgenera_Details_mainR4_bottom_title">KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 몇 주 전</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796787760.html" title="Inzoi : 학교 및 대학에 지원하는 방법" class="phpgenera_Details_mainR4_bottom_title">Inzoi : 학교 및 대학에 지원하는 방법</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 몇 주 전</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796793871.html" title="KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?" class="phpgenera_Details_mainR4_bottom_title">KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 몇 주 전</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796788723.html" title="Atomfall에서 사이트 사무실 키를 찾을 위치" class="phpgenera_Details_mainR4_bottom_title">Atomfall에서 사이트 사무실 키를 찾을 위치</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 몇 주 전</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ko/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/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>뜨거운 도구</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/005/169233952150073.png" src="/static/imghw/default1.png" alt="DVWA" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_title"><h3>DVWA</h3></a><p>DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/1574" title="안전한 시험 브라우저" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/017/169233952169011.png" src="/static/imghw/default1.png" alt="안전한 시험 브라우저" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/1574" title="안전한 시험 브라우저" class="phpmain_tab2_mids_title"><h3>안전한 시험 브라우저</h3></a><p>안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/1471" title="SublimeText3 Linux 새 버전" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/001/5aab420a5fb42187.jpg" src="/static/imghw/default1.png" alt="SublimeText3 Linux 새 버전" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/1471" title="SublimeText3 Linux 새 버전" class="phpmain_tab2_mids_title"><h3>SublimeText3 Linux 새 버전</h3></a><p>SublimeText3 Linux 최신 버전</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg" src="/static/imghw/default1.png" alt="드림위버 CS6" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title"><h3>드림위버 CS6</h3></a><p>시각적 웹 개발 도구</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/510" title="PhpStorm 맥 버전" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/001/58d377b7b49ae828.jpg" src="/static/imghw/default1.png" alt="PhpStorm 맥 버전" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/510" title="PhpStorm 맥 버전" class="phpmain_tab2_mids_title"><h3>PhpStorm 맥 버전</h3></a><p>최신(2018.2.1) 전문 PHP 통합 개발 도구</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ko/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/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>뜨거운 주제</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>7873</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/java-tutorial" title="자바 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">자바 튜토리얼</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>1649</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>14</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>1409</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/laravel-tutori" title="라라벨 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">라라벨 튜토리얼</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>1301</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/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 class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>1245</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>29</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ko/faq/zt">더보기</a></div></div></div></div></main><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></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' 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> 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> jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script><script>// 通用函数，用于显示或隐藏元素
function toggleElementsDisplay(className, show) {
const elements = document.getElementsByClassName(className);
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = show ? "block" : "none";
}
}
// 页面加载完成后执行的主函数
document.addEventListener("DOMContentLoaded", () => {
// 1. 绑定菜单按钮事件
const bindMenuEvents = () => {
const toggleDisplay = (className, show, eventId) => {
const element = document.getElementById(eventId);
if (element) {
element.addEventListener("click", (event) => {
event.preventDefault();
toggleElementsDisplay(className, show);
});
}
};
toggleDisplay("m_editormain12main", true, "fixed_tab_img");
toggleDisplay("m_editormain12main", false, "fixed_tab_topi");
toggleDisplay("m_editormain12main", false, "fixed_tab_close");
toggleDisplay("m_menu", true, "lan1sp");
toggleDisplay("m_menu", false, "m_editormain12main_topi_sp");
toggleDisplay("m_menu_lang", true, "lan1");
toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan");
};
// 2. 绑定滚动链接事件
const bindScrollLinks = () => {
const titleList = document.getElementById("fixed_tab_titlelist");
const menuMain = document.getElementsByClassName("m_editormain12main")[0];
const links = document.querySelectorAll('.fixed_tab_a');
links.forEach(linkElement => {
if (linkElement) {
linkElement.addEventListener("click", async (e) => {
e.preventDefault();
e.stopPropagation();
// 先隐藏菜单
if (menuMain) menuMain.style.display = "none";
if (titleList) titleList.style.display = "none";
// 获取目标元素的 ID
const targetId = linkElement.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
// 等待 DOM 更新
await new Promise(resolve => requestAnimationFrame(resolve));
// 滚动到目标位置
if (targetElement) {
targetElement.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
});
}
});
};
// 3. 绑定关闭按钮事件
const bindCloseButton = () => {
const closeButton = document.querySelector(".phpgenera_Details_mainR1_close");
const container = document.querySelector(".phpgenera_Details_mainR1");
if (closeButton && container) {
closeButton.addEventListener("click", (event) => {
event.preventDefault();
container.style.display = "none";
});
}
};
// 4. 初始化菜单交互功能
const initMenuInteraction = () => {
const menuGroupElements = document.querySelectorAll('.layui-menu-item-group');
menuGroupElements.forEach(menuItem => {
menuItem.addEventListener('click', function(event) {
if (event.target.closest('.m_menusnames')) {
return;
}
this.classList.toggle('layui-menu-item-down');
this.classList.toggle('layui-menu-item-up');
const subMenuContainer = this.querySelector('.m_menusnames');
const icon = this.querySelector('.layui-icon');
if (subMenuContainer && icon) {
if (this.classList.contains('layui-menu-item-down')) {
subMenuContainer.style.display = 'block';
icon.classList.remove('layui-icon-down');
icon.classList.add('layui-icon-up');
} else {
subMenuContainer.style.display = 'none';
icon.classList.remove('layui-icon-up');
icon.classList.add('layui-icon-down');
}
}
});
});
};
// 5. 初始化 layui 功能
const initLayui = () => {
if (typeof layui !== 'undefined') {
layui.use(function () {
var util = layui.util;
if (util && util.fixbar) {
util.fixbar({
on: {
mouseenter: function (type) {
if (layer && layer.tips) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
}
},
mouseleave: function (type) {
if (layer && layer.closeAll) {
layer.closeAll("tips");
}
},
},
});
}
});
}
};
// 执行所有初始化函数
bindMenuEvents();
bindScrollLinks();
bindCloseButton();
initMenuInteraction();
initLayui();
});
</script></body></html>
