당신이 알지 못할 수도있는 5 가지 HTML 기능

들어 언어는 아주 간단하고 배우기 쉽다., HTML은 분명히 예상치 못한 유용한 기능, 대부분 우리 중 대부분은 알지 못합니다. 시간을 따라 잡기가 어렵습니다. “너는 모를거야.” 기사는 최신 태그에 관한 것이어야하며, HTML에는 잠시 동안 이미 유용한 기능을 제공합니다..

철자 검사에서 키보드 단축키 추가에 이르기까지이 기사에서는 5 가지 덜 널리 알려진 HTML 기능.

1. 입력 할 때 맞춤법 검사

그만큼 맞춤법 검사 속성 사용자가 요소를 입력하는 동안 철자를 검사하도록 브라우저에 지시합니다. 이 속성은 전역 적입니다., HTML 태그에 추가 할 수 있습니다..

그러나, 그것은 할 수있는 요소에서만 작동합니다. 텍스트 입력 받기. 글로벌하게하는 것이 유용 할 수 있기 때문에 유용합니다. 자식 요소에 의해 상속 된. 예를 들어,

꼬리표 텍스트 입력을받는 모든 자식 요소는이 속성을 상속받습니다..

맞춤법 검사가 작동합니다. 모든 텍스트 유형: 본문, 수색, url, 과 이메일. 그것은 또한에 작동합니다. </code>, 편집 가능한 요소</strong> ( <code>contenteditable</code> 속성).</p> <p>그 값은 빈 문자열 일 수 있습니다., <code>참된</code>, 또는 <code>그릇된</code>. 빈 문자열 및 <code>참된</code> 의지 <strong>맞춤법 검사기 사용</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> 여기에 뭔가 입력하십시오. </p> </pre> <p>위 코드에서, <strong>둘 다 <code><div></code> 과 <code><p></code> 태그가 맞춤법을 검사합니다.</strong> 사용자가 타이핑 할 때.</p> <p>사용자가 가지고있는 경우 <strong>맞춤법 검사 사용 안 함</strong> 브라우저 설정에서 철자가 검사되지 않습니다., <strong>설사 <code>맞춤법 검사</code> 추가되었습니다.</strong>.</p> <h4>2. 손상된 CDN 자원으로부터 안전합니다.</h4> <p>스크립트 나 스타일 시트 파일과 같은 리소스를 호스팅하는 것은 매우 일반적입니다. <abbr>CDN</abbr>에스. 그러나 <strong>CDN이 손상됨</strong>, 이러한 호스팅 된 파일을 수행하고 가져온 리소스가 웹 사이트에서 손상된 경우 사이트도 손상됩니다!</p> <p>Mozilla Developer Network에서이 문제에 대해 언급 한 내용을 확인하십시오.</p> <blockquote><p><q>... CDN을 사용하면 공격자가 CDN을 제어 할 경우 공격자가 임의의 악의적 인 콘텐츠를 CDN의 파일에 삽입 (또는 파일을 완전히 대체) 할 수 있으므로 파일을 가져 오는 모든 사이트를 공격 할 수도 있습니다 그 CDN에서.</q></p></blockquote> <p>이를 방지하려면, <strong>하위 리소스 무결성 (SRI)</strong> 2014 년 초 W3C에서 소개되었습니다. 이 계획 <strong>해쉬 값을 비교한다.</strong> (입력에 해시 함수를 적용한 결과) <strong>자원</strong> 그것을 확인하는.</p> <p>JavaScript 파일이 있습니다. <code>https://example.com/example.js</code>. 너 먼저 <strong>해시 함수를 적용한다.</strong> 그 파일에 <strong>생성 된 해쉬 값을 더한다.</strong> ~로 <strong><code>청렴</code> 속성</strong> ~의 <strong><code><script></code> tag</strong> that imports <code>example.js</code> to your website.</p> <pre name="code"> <script src="https://example.com/example.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script> </pre> <p>위 코드를 사용하여 사이트의 웹 페이지를로드해야 할 때마다 <code>example.js</code>, 브라우저 <strong>먼저 해시 함수를 적용합니다.</strong>, 로드 및 실행 <code>example.js</code> 오직 그것의 <strong>해시 값이 <code>청렴</code> 값</strong>.</p> <p>만약 <strong><code>example.com</code> 타협했다</strong> 과 <strong><code>example.js</code> 방해 받다</strong> 그때 해시 값은 <code>example.js</code> 일치하지 않습니다. <strong><code>청렴</code> 값</strong>. </p> <p>가장 일반적인 CDN은 이미 제공합니다. <strong>SRI <code>청렴</code> 가치</strong>, 하지만 여기서도 생성 할 수 있습니다..</p> <h4>3. 제출 버튼에서 양식 타겟 재정의</h4> <p>당신은 가장 친숙한 <strong><code>목표</code> 속성</strong>, 결정하는 사람 <strong>하이퍼 링크 된 리소스가 열리는 곳</strong>, 예를 들어 같은 페이지 또는 새 탭에서 당신도 알 수 있습니다. <code>목표</code> 에서 사용 된 속성 <code><form></code> 태그가 결정하다 <strong>양식 제출의 응답이 표시됩니다.</strong>.</p> <p>HTML5 초기 초안 중 하나, <code>formtarget</code> 다른 네 가지 양식 제출 속성과 함께 정의되었습니다. <strong><code>형성 작용</code>, <code>형식</code>, <code>형식 방법</code></strong>, 과 <strong><code>포름 알데히드</code></strong>. </p> <p>이러한 속성은 <strong>제출 버튼과 함께 사용</strong>, 그리고 그것들은 각각의 속성을 <code><form></code> 태그가 속한 태그.</p> <p>따라서 양식이있는 버튼을 사용하여 양식을 제출하면 <code>formtarget</code> 속성, <strong>응답은 <code>formtarget</code> 값</strong>, 대신에 <code>목표</code> 가치 <code><form></code>.</p> <pre name="code"> <form action="/save" target="_self" > <input type="submit" name="save" /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /> </form> </pre> <p>위의 코드에서 두 번째 제출 버튼을 사용하여 양식을 제출하면<code>인쇄</code> ), 응답은 <strong>새로운 브라우징 컨텍스트에 나타난다.</strong>, 새 탭 에서처럼.</p> <h4>4. 의미 상으로 요소 숨기기</h4> <p>때에 온다 <strong>은폐 요소</strong>, 우리 모두는 요소를 숨기는 다양한 단계를 겪었습니다. <strong><code>불투명도 : 0</code>, <code>가시성 : 숨김</code>, <code>높이 : 0; 너비 : 0</code>, <code>표시 : 없음</code>, <code>텍스트 들여 쓰기 : -999px</code></strong> CSS 파일에서.</p> <p>각각의 메소드는 그 목적이 있으며, 이중화 된 메소드는 없습니다. <strong><code>숨겨진</code> HTML 속성</strong>. 요소가있는 경우 <code>숨겨진</code> 그것에 지정된, 그것은 숨겨집니다.</p> <pre name="code"> <div hidden>... </div> </pre> <p>그것은 작동합니다. <strong>같은 방식으로 <code>표시 : 없음;</code> CSS 규칙;</strong> 요소가있는 <code>숨겨진</code> 속성 <strong>렌더링되지 않는다.</strong> 페이지에. 요소 내부의 모든 스크립트가 실행되고 양식 컨트롤 인 경우 함께 제출됩니다. <strong>양식 제출 중 다른 양식 제어</strong>.</p> <p>그러나, <code>숨겨진</code> 그것이 <strong>의미 론적으로 적절한</strong>, 결국 HTML5는 모두 의미론에 관한 것입니다. <code>숨겨진</code> HTML5 측근의 일부입니다.!</p> <p>또한 요소가 숨겨지면 요소가 숨겨집니다. <strong>모든 플랫폼에 숨겨져있다.</strong>, 웹 브라우저뿐만 아니라 스크린 리더, TV, 프로젝터 등.</p> <p>그것은 또한이다. <strong>스타일에 의존하지 않는다.</strong>, 페이지에서 작성자 CSS를 제거하더라도 요소는 숨겨져 있습니다. 반면에 <code>표시 : 없음;</code> 그것은 일어나지 않을 것입니다. 그래서, 생각해보십시오. <code>숨겨진</code> ~로서 <strong>철갑선 버전 <code>표시 : 없음;</code></strong>.</p> <h4>5. 키보드 단축키 추가하기</h4> <p>그만큼 <strong><code>액세스 키</code> 전역 속성</strong> 이미 HTML4에서 정의되었으며 <strong>키보드 단축키를 만든다.</strong> 사용자는 페이지에서 요소를 조작 할 수 있습니다..</p> <p>단축키의 키 조합은 <strong>두 가지에 의존하다</strong>:</p> <ol><li>그만큼 <strong><code>액세스 키</code> 값</strong> 우리가 요소에주는</li> <li>그만큼 <strong>브라우저에서 사용하는 미리 할당 된 키</strong> 같은 원소</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>이미지 : 모질라 개발자 네트워크</figcaption></figure><p>이 예제를 보자.</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> 전망 </button> </pre> <p>Firefox의 경우, <strong>키 조합 Alt + Shift + V (또는 Alt + Control + V</strong> macOS에서) 경고를받습니다. “Clicked보기”.</p> <p>사전 정의 된 브라우저 키는 각 브라우저 및 OS에 따라 다르므로 <strong>사용자에게 키 조합을 알리십시오.</strong> 단축키에 사용됨.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/5-img-css-properties-you-should-know.html"><img src="//savtec.org/img/images/5-img-css-properties-you-should-know.gif" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/5-img-css-properties-you-should-know.html">5 <IMG> 알아 두어야 할 CSS 속성</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html"><img src="//savtec.org/img/images_5/5-iphone-apps-to-keep-track-of-your-investments_7.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html">투자를 추적하는 5 가지 iPhone 앱</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html"><img src="//savtec.org/img/images/5-hard-drive-formatting-and-partitioning-utilities_3.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html">5 하드 드라이브 포맷팅 및 파티션 유틸리티</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">다음 기사</div> <div class="post-img"><a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html"> <img src="//savtec.org/img/images_6/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite_5.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html">5 가지 아이디어 Mac OS X에서 복사해야하는 Windows 10 요세미티</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">이전 기사</div> <div class="post-img"><a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html"> <img src="//savtec.org/img/images_1/5-html-elements-you-might-not-know-how-to-use.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html">사용하지 못할 수도있는 5 가지 HTML 요소 사용 방법</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> 유용한 정보 및 웹 개발 팁. 프로그래밍, 웹 디자인, CSS, HTML, JAVASCRIPT. WINDOWS를 구성하고 다시 설치하십시오. 처음부터 사이트 및 응용 프로그램 만들기 </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>