목차
 HTML5 概述
  HTML6 展望
Heading of main article
Sub-heading of main article
The concept of HTML6
Understanding the basics
  HTML6 APIs
  标签类型(Tag types)概述
  语
웹 프론트엔드 HTML 튜토리얼 HTML6 展望_html/css_WEB-ITnose

HTML6 展望_html/css_WEB-ITnose

Jun 24, 2016 am 11:47 AM

 HTML5 概述

  HTML5 是 HTML 语言最受欢迎的版本之一,它支持音频和视频、离线存储、移动端、和标签属性等等。还提供了

,
,
这样的标签来帮助开发者更好地组织页面内容。然而 HTML5 规范仍然没有最后定稿,并且它并不是一个真正意义上的语义标记语言。

  HTML6 展望

  你有没有曾经希望能在 HTML 中使用自定义标签?比如:使用来显示你的网站logo,还有使用来显示工具栏等等。我们经常使用

来组织页面,在 HTML6 里我们希望可以直接使用象这样的自定义标签。

  和 XML 一样,HTML6 应该支持 namespace(命名空间),如:xmlns:xhtml=”http://www.w3.org/1999/xhtml”

  HTML6 代码样例:

<!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> <html:meta type="title" value="Page Title"> <html:meta type="description" value="HTML example with namespaces"> <html:link src="css/mainfile.css" title="Styles" type="text/css"> <html:link src="js/mainfile.js" title="Script" type="text/javascript"> </html:head> <html:body> <header> <logo> <html:media type="image" src="images/xyz.png"> </logo> <nav> <html:a href="/img1">a1</a> <html:a href="/img2">a2</a> </nav> </header> <content> <article> <h1 id="Heading-of-main-article">Heading of main article</h1> <h2 id="Sub-heading-of-main-article">Sub-heading of main article</h2> <p>[...]</p> <p>[...]</p> </article> <article> <h1 id="The-concept-of-HTML">The concept of HTML6</h1> <h2 id="Understanding-the-basics">Understanding the basics</h2> <p>[...]</p> </article> </content> <footer> <copyright>This site is &copy; to Anonymous 2014</copyright> </footer> </html:body> </html:html>
로그인 후 복사

  在上面的代码中,你也许注意到了一些奇怪的标签,它们是 W3C 和 HTML6 规范中在命名空间里定义的标签。例如:负责设定你浏览器的标题栏文字,负责显示图片等等。用户可以自己定义标签以便 JavaScript 和 CSS 识别和处理,这样页面代码会更易读,语义更清晰。

  HTML6 APIs

  HTML6 的标签前带有命名空间,如:, 等等。

  1.

<!DOCTYPE html> <html:html>// this is equivalent to <html> tag written in previous HTML versions <!-- sample of HTML document --> </html:html>
로그인 후 복사

  2. 和 标签一样。

<!DOCTYPE html> <html:html> <html:head> <!-- Main content would come here, like the <html:title> tag --> </html:head> </html:html>
로그인 후 복사

  3. 标签类似。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> </html:html></pre><div class="contentsignin">로그인 후 복사</div></div> <p>  4. <html:meta> 和 <meta> 标签类似,不同之处在于,在 HTML5 中你只能使用标准的元数据类型,如:”keywords”, “description”, “author”等,而在 HTML6 中你可以使用任何元数据类型。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> <html:meta type="description" value="HTML example with namespaces"> </html:head> </html:html></pre><div class="contentsignin">로그인 후 복사</div></div> <p>  5. <html:link> 和 HTML6 之前版本的 <link> 标签类似。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> <html:link src="js/mainfile.js" title="Script" type="text/javascript"> </html:head> </html:html></pre><div class="contentsignin">로그인 후 복사</div></div> <p>  6. <html:body> 和 <body> 标签一样。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> <html:body> <!-- This is where your website content is placed --> </html:body> </html:html></pre><div class="contentsignin">로그인 후 복사</div></div> <p>  7. <html:a> 和 <a> 标签类似,区别是 <html:a> 只有 “href” 一个属性。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> <html:body> <html:a href="http://siteurl">Go to siteurl.com!</html:a> </html:body> </html:html></pre><div class="contentsignin">로그인 후 복사</div></div> <p>  8. <html:button> 和 <button> 及 <input type=”button”> 一样。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> <html:body> <html:button>Click Here</html:button> </html:body> </html:html></pre><div class="contentsignin">로그인 후 복사</div></div> <p>  9. <html:media> 涵盖 <img src="/static/imghw/default1.png" data-src="img1/logo.jpg" class="lazy" alt="HTML6 展望_html/css_WEB-ITnose" >, <video>, <embed> 等标签的所有功能。<html:media> 的好处是你不用根据不同的媒体文件类型使用不同的标签,媒体的类型由浏览器从文件内容(类型属性,扩展名,和MIME type)中来判断。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html:html> <html:head> <html:title>A Look Into HTML6</html:title> </html:head> <html:body> <!-- Image would come here --> <html:media type="image"> <!-- Video doesn't need a type --> <html:media src="videos/slide.mov"> </html:body> </html:html></pre><div class="contentsignin">로그인 후 복사</div></div> <h3 id="标签类型-Tag-types-概述">  标签类型(Tag types)概述</h3> <p>  和 HTML5 一样, HTML6 也有两种标签类型:单标签(single tag) 和双标签(double tag)</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><html:meta type="author" content="single tag"> <html:meta type="author" content="double tag" /></pre><div class="contentsignin">로그인 후 복사</div></div> <p>  单标签不需要结束符’/’</p> <h3 id="语">  语</h3> <p>  HTML6 规范还未发布,本文原作者Oscar Godson 只是为我们提供了一个对 HTML6 规范的展望,或者说他希望 HTML6 能够支持的一些新特性。</p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </wrapper></container> </div> </div></toolbar></logo></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="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796780520.html" title="R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796779766.html" title="WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.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/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="https://www.php.cn/ko/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/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://www.php.cn/ko/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/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://www.php.cn/ko/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/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://www.php.cn/ko/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/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://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" 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/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>AI Hentai를 무료로 생성하십시오.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</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>인기 기사</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796780520.html" title="R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796779766.html" title="WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.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/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="https://www.php.cn/ko/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="https://www.php.cn/ko/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="https://www.php.cn/ko/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="https://www.php.cn/ko/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="https://www.php.cn/ko/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="https://www.php.cn/ko/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="https://www.php.cn/ko/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="https://www.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://www.php.cn/ko/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="https://www.php.cn/ko/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="https://www.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/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="https://www.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 src="/static/imghw/eyess.png" alt="" /> <span>7478</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.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 src="/static/imghw/eyess.png" alt="" /> <span>1377</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/ko/faq/steamdzhmcssmgs" title="Steam의 계정 이름 형식은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">Steam의 계정 이름 형식은 무엇입니까?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>77</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/winactivationkeyper" title="Win11 활성화 키 영구" class="phpgenera_Details_mainR4_bottom_title">Win11 활성화 키 영구</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>50</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/newyorktimesdailybrief" title="NYT 연결 힌트와 답변" class="phpgenera_Details_mainR4_bottom_title">NYT 연결 힌트와 답변</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>19</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>33</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/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="https://www.php.cn/ko/faq/1796782759.html" title="& lt; Progress & Gt의 목적은 무엇입니까? 요소?" 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/202503/21/2025032112342868456.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="& lt; Progress & Gt의 목적은 무엇입니까? 요소?" /> </a> <a href="https://www.php.cn/ko/faq/1796782759.html" title="& lt; Progress & Gt의 목적은 무엇입니까? 요소?" class="phphistorical_Version2_mids_title">& lt; Progress & Gt의 목적은 무엇입니까? 요소?</a> <span class="Articlelist_txts_time">Mar 21, 2025 pm 12:34 PM</span> <p class="Articlelist_txts_p">이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796782758.html" title="& lt; datalist & gt의 목적은 무엇입니까? 요소?" 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/202503/21/2025032112332857446.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="& lt; datalist & gt의 목적은 무엇입니까? 요소?" /> </a> <a href="https://www.php.cn/ko/faq/1796782758.html" title="& lt; datalist & gt의 목적은 무엇입니까? 요소?" class="phphistorical_Version2_mids_title">& lt; datalist & gt의 목적은 무엇입니까? 요소?</a> <span class="Articlelist_txts_time">Mar 21, 2025 pm 12:33 PM</span> <p class="Articlelist_txts_p">이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796782760.html" title="& lt; meter & gt의 목적은 무엇입니까? 요소?" 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/202503/21/2025032112352661331.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="& lt; meter & gt의 목적은 무엇입니까? 요소?" /> </a> <a href="https://www.php.cn/ko/faq/1796782760.html" title="& lt; meter & gt의 목적은 무엇입니까? 요소?" class="phphistorical_Version2_mids_title">& lt; meter & gt의 목적은 무엇입니까? 요소?</a> <span class="Articlelist_txts_time">Mar 21, 2025 pm 12:35 PM</span> <p class="Articlelist_txts_p">이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796780220.html" title="HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?" 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/202503/17/2025031712203454598.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?" /> </a> <a href="https://www.php.cn/ko/faq/1796780220.html" title="HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?" class="phphistorical_Version2_mids_title">HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?</a> <span class="Articlelist_txts_time">Mar 17, 2025 pm 12:20 PM</span> <p class="Articlelist_txts_p">기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796780224.html" title="HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?" 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/202503/17/2025031712273147081.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?" /> </a> <a href="https://www.php.cn/ko/faq/1796780224.html" title="HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?" class="phphistorical_Version2_mids_title">HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?</a> <span class="Articlelist_txts_time">Mar 17, 2025 pm 12:27 PM</span> <p class="Articlelist_txts_p">이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796782305.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/202503/20/2025032017560614263.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?" /> </a> <a href="https://www.php.cn/ko/faq/1796782305.html" title="뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?" class="phphistorical_Version2_mids_title">뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?</a> <span class="Articlelist_txts_time">Mar 20, 2025 pm 05:56 PM</span> <p class="Articlelist_txts_p">이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796782318.html" title="& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?" 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/202503/20/2025032018054766795.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?" /> </a> <a href="https://www.php.cn/ko/faq/1796782318.html" title="& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?" class="phphistorical_Version2_mids_title">& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?</a> <span class="Articlelist_txts_time">Mar 20, 2025 pm 06:05 PM</span> <p class="Articlelist_txts_p">이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796790390.html" title="Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?" 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/246/273/174312372425268.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?" /> </a> <a href="https://www.php.cn/ko/faq/1796790390.html" title="Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?" class="phphistorical_Version2_mids_title">Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?</a> <span class="Articlelist_txts_time">Apr 04, 2025 pm 11:54 PM</span> <p class="Articlelist_txts_p">GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...</p> </div> </div> <a href="https://www.php.cn/ko/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="https://www.php.cn/ko/about/us.html">회사 소개</a> <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="https://www.php.cn/ko/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?1744496609"></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> </body> </html>