HTML의 숨겨진 기능

HTML이 가장 널리 사용되는 언어 (적어도 마크 업 언어로서)는 정당한 평가를받지 못했습니다.
수년 동안 사용되어 왔음을 고려할 때 FORM / INPUT 컨트롤과 같은 것은 새로운 컨트롤이 추가되지 않은 채 여전히 동일하게 유지되었습니다.

따라서 적어도 기존 기능 중에서 잘 알려지지 않았지만 매우 유용한 기능을 알고 있습니까 ?

물론이 질문은 다음과 같습니다.

JavaScript의
숨겨진 기능 CSS의
숨겨진 기능 C #의
숨겨진 기능 VB.NET의
숨겨진 기능 Java의
숨겨진 기능 클래식 ASP의
숨겨진 기능 ASP.NET의
숨겨진 기능 Python의
숨겨진 기능 TextPad의
숨겨진 기능 Eclipse의 숨겨진 기능

HTML 5.0의 기능은 작업 초안 에 있으므로 언급하지 마십시오.

답변 당 하나의 기능을 지정하십시오 .

프로토콜 독립적 절대 경로 사용 :

<img src="//domain.com/img/logo.png"/>

브라우저가 HTTPS를 통해 SSL로 페이지를 보는 경우 https 프로토콜을 사용하여 해당 자산을 요청하고 그렇지 않으면 HTTP를 사용하여 요청합니다.

이렇게하면 IE에서 "이 페이지에 보안 항목과 비보안 항목이 모두 포함되어 있습니다."라는 끔찍한 오류 메시지를 방지하여 모든 자산 요청을 동일한 프로토콜 내에 유지합니다.

주의 사항 : 스타일 시트의 <link> 또는 @import에서 사용하면 IE7 및 IE8 에서 파일을 두 번 다운로드합니다 . 그러나 다른 모든 용도는 괜찮습니다.

레이블 태그는 "for"속성을 사용하여 레이블을 양식 요소와 논리적으로 연결합니다. 대부분의 브라우저는이를 관련 양식 요소를 활성화하는 링크로 바꿉니다.

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>

(IE, Firefox 및 Safari) 의 contentEditable 속성

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

이렇게하면 셀을 편집 할 수 있습니다! 어서 그것을 시도 당신이 저를 믿지 않는 경우.

optgroup 태그 는 사람들이 자주 사용하지 않는 기능 중 하나 라고 생각합니다 . 내가 말하는 대부분의 사람들은 그것이 존재한다는 것을 깨닫지 못하는 경향이 있습니다.

예:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

내가 가장 좋아하는 부분은 라우팅이나 URL 재 작성을 사용하려는 경우 생명의 은인 인 기본 태그입니다.

다음 위치에 있다고 가정 해 보겠습니다.

www.anypage.com/folder/subfolder/

다음은이 페이지의 링크에 대한 코드 및 결과입니다.

일반 앵커 :

<a href="test.html">Click here</a>

으로 이끌다

www.anypage.com/folder/subfolder/test.html

이제 기본 태그를 추가하면

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

앵커는 이제 다음으로 이어집니다.

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror 작은 적십자 (IE에서) 그림이 표시되기 직전에 실행되는 JavaScript 이벤트입니다.

이를 사용하여 깨진 이미지를 유효한 대체 콘텐츠로 대체하는 스크립트를 작성할 수 있으므로 사용자가 적십자 문제를 처리 할 필요가 없습니다.

첫눈에 이것은 완전히 쓸모없는 것으로 보일 수 있습니다. 왜냐하면 이미지가 처음에 사용 가능했는지 이전에 알지 못했습니까? 그러나 고려해 보면 이것에 대한 완벽한 유효한 응용 프로그램이 있습니다. 예를 들어, 제어하지 않는 타사 리소스의 이미지를 제공한다고 가정합니다. 여기에있는 gravatar와 마찬가지로 http://www.gravatar.com/ 에서 제공됩니다. http://www.gravatar.com/ 에서 제공됩니다. http://www.gravatar.com/ 은 신뢰할 수 있지만 stackoverflow 팀이 전혀 제어하지 않는 리소스입니다. 경우 http://www.gravatar.com/가 다운되면, 유래는 사용하여이 문제를 해결 수 있습니다 onerror.

<kbd>키보드 입력을위한 마크 업에 대 한 요소

Ctrl+ Alt+Del

<blink>

사이트에서 중요한 모든 것에 사용되어야합니다. 대부분의 중요한 사이트는 모든 콘텐츠를 깜박입니다.

<marquee>

사실적인 스크롤 효과를 만들어 전자 책 등에 적합합니다.

편집 : 이지업 친구들, 이것은 단지 유머에 대한 시도였습니다.

잘 알려져 있지는 않지만 lowsrc이미지를 lowsrc로드하는 동안 표시 할 이미지를 지정할 수 있습니다 src.

<img lowsrc="monkey_preview.png" src="monkey.png" />

인터레이스 이미지 를 좋아하지 않는 사람들에게 좋은 옵션입니다 .

약간의 퀴즈 : 한때이 속성은 2000 년경 Hotmail 을 악용 하는 데 사용될 정도로 모호했습니다 .

DEL및 INS삭제 및 삽입 내용을 표시합니다 :

HTML <del>sucks</del> <ins>rocks</ins>!

버튼 태그는 새로운 input submit태그와 많은 사람들이 아직 익숙하지 않은. 예를 들어 버튼의 텍스트는 버튼 태그를 사용하여 스타일을 지정할 수 있습니다.

<button>
    <b>Click</b><br />
    Me!
</button>

두 줄로 된 버튼을 렌더링합니다. 첫 번째 줄 은 굵게 " Click "이고 두 번째 줄은 "Me!"입니다. 여기에서 시도해보십시오 .

인쇄용 CSS 지정

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />

<dl> <dt>및 <dd>항목은 종종 잊어 그들은 정의 목록, 정의 용어 및 정의를 위해 서있다.

정렬되지 않은 목록 ( <ul>) 과 유사하게 작동 하지만 단일 항목 대신 키 / 값 목록과 비슷합니다.

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>

정확히 숨겨져 있지는 않지만 (그리고 이것은 IE의 잘못입니다) 내 취향에 맞는 thead, tbody, tfoot 에 대해 아는 사람이 충분하지 않습니다 . 그리고 얼마나 많은 사람들이 tfoot이 마크 업에서 tbody 위에 나타나야한다는 것을 알고 있습니까?

wbr또는 워드 브레이크 태그입니다. Quirksmode에서 :

(단어 나누기)는 "브라우저가 원할 경우 여기에 줄 바꿈을 삽입 할 수 있습니다."를 의미합니다. 브라우저는 줄 바꿈이 필요하다고 생각하지 않습니다.

<div class="name">getElements<wbr>ByTagName()</div>

브라우저에 줄 바꿈을 추가하는 옵션을 제공합니다. 테이블에 충분한 공간이있는 매우 큰 해상도에서는 필요하지 않습니다. 그러나 더 작은 해상도에서는 전략적으로 배치 된 줄 바꿈으로 인해 테이블이 창보다 커지는 것을 막아 수평 스크롤바가 발생합니다.

­동일한 페이지에 언급 된 HTML 엔티티 도 있습니다 . 이것은 wbr나누기가 삽입 될 때 하이픈 (- )이 추가되어 나누기를 나타냅니다. 그것이 인쇄 된 방식과 비슷합니다.

예 :

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

많이 사용되지 않는 기능은 페이지에 보이는 콘텐츠를 제공하는 거의 모든 요소가 '제목'속성을 가질 수 있다는 사실입니다.

이러한 속성을 추가하면 마우스가 요소 위에 '마우스를 올려 놓을'때 '툴팁'이 나타나며, 페이지가 너무 복잡해지지 않는 방식으로 중요하지 않지만 유용한 정보를 제공하는 데 사용할 수 있습니다. . (또는 이미 붐비는 페이지에 정보를 추가하는 방법 일 수 있습니다)

하나의 태그에 여러 html / css 클래스를 적용합니다. 여기에 같은 게시물

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>

우리 모두는 DTD 또는 문서 유형 선언 (W3C 유효성 검사기로 페이지를 실패하게 만드는 요소)에 대해 알고 있습니다. 그러나 DTD 를 확장 할 수 있습니다. 사용자 정의 요소에 대한 속성 목록을 선언 .

예를 들어 W3C 유효성 검사기가 태그 에 추가 되었기 때문에이 페이지에 대해 실패합니다 . 그러나 다음을 수행하여 통과 할 수 있습니다.behavior="mouseover"<p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

QuirksMode의 Custom DTD 에 대해 자세히 알아 보십시오 .

base 64로 인코딩 된 문자열을 image, JavaScript, iframe, link의 source / href 속성으로 할당 할 수 있습니다.

예 :

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

참고 문헌

HTML 마크 업을 사용하여 이미지를 어떻게 구성 할 수 있습니까?

바이너리 파일을 Base64 인코더 / 번역기로

최근에 fieldset 및 label 태그에 대해 알게되었습니다. 위와 같이 숨겨지지는 않지만 양식에 유용합니다.

<fieldset> 설명

예:

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

object대신 태그를 사용 iframe하여 페이지에 다른 문서를 포함 할 수 있습니다 .

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

<optgroup>사람들이 세분화 된 <select>목록 을 작성할 때 종종 놓치는 훌륭한 기능 입니다.

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

대신 사용해야하는 것입니다.

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>

대부분은 이름 / 값 쌍을 제공하여 눌러 진 양식 버튼을 구별 할 수 있다는 사실을 인식하지 못합니다. 예

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

서버 측에서는 버튼 이름과 관련된 요청 매개 변수의 존재 여부 만 확인하면 실제로 눌러 진 버튼을 얻을 수 있습니다. 아닌 경우 null버튼을 눌렀습니다.

나는 본 적이 많은 의 필요를 JS 핵과 / 형태의 동작을 변경하거나 숨겨진 입력 값을 미리 변경 버튼을 누를 예에 따라, 그 대한 대안. 단순히 놀랍습니다.

또한 테이블 행에서와 같이 여러 확인란 중 선택된 항목을 수집하기 위해 거의 많은 JS 해킹 / 해결 방법을 보았습니다. 테이블 행의 모든 ​​선택 / 확인에서 JS는 숨겨진 입력 요소의 일부 쉼표로 구분 된 값에 행 인덱스를 추가 한 다음 서버 측에서 추가로 분할 / 분석됩니다. 그의는 여러 입력 요소에게 줄 수있는 unawareness 결과 같은 이름이지만 다른 값을하고 당신은 여전히 서버 측에 배열로 액세스 할 수 있습니다. 예

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

인식하지 못하면 각 확인란에 다른 이름이 지정되고 전체 값 속성이 생략됩니다. 일부 JS 해킹 / 해결 방법이없는 상황 에서는 확인 된 항목을 구별하기 위해 서버 측 코드에서 불필요하게 압도적 인 마법 을 보았습니다 .

Colgroup 태그 .

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

만약 for (A)의 속성 <label>태그가 지정되지 않은, 그것은 암시 첫 번째 자식으로 설정 <input>즉,

<label>Alias: <input name="alias" id="alias"></label>

다음과 같다

<label for="alias">Alias:</label> <input name="alias" id="alias">

링크로서의 버튼, JavaScript 없음 :

양식 작업 에 모든 종류의 파일을 넣을 수 있으며 링크 역할을하는 버튼이 있습니다. onclick 이벤트 등을 사용할 필요가 없습니다. 양식에 "대상"을 붙이면 새 창에서 파일을 열 수도 있습니다. 나는 그 기술을 응용에서 많이 보지 못했습니다.

이것을 교체

<a href="myfile.pdf" target="_blank">Download file</a>

이것으로 :

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>

X 초 안에 페이지를 새로 고치는 가장 간단한 방법 -META Refresh

<meta http-equiv="refresh" content="600">

콘텐츠의 값은 페이지를 새로 고칠 시간 (초)을 나타냅니다.
[편집하다]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

간단한 리디렉션을 수행하려면!
(@rlb에게 감사드립니다)

<html>, <head>그리고 <body>태그는 선택 사항입니다. 생략하면 구문 분석기가 적절한 위치에 자동으로 삽입합니다. 그것은이다 완벽하게 유효한 암시하는 것처럼 HTML (에 이렇게<tbody> ).

이론상 HTML 은 SGML 애플리케이션입니다. 이것은 아마도 가장 짧은 유효한 HTML 4 문서 일 것입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

위의 내용은 W3C Validator를 제외하고는 작동하지 않습니다. 그러나 가장 짧은 유효한 HTML5 text/html문서는 모든 곳에서 작동합니다.

<!DOCTYPE html><title></title>

그만큼 lang속성은 잘 알려져 있지만, 매우 유용하지 않습니다. 이 속성은 전체 문서 또는 단일 요소에서 컨텐츠의 언어를 식별하는 데 사용됩니다. 언어 코드는 ISO 2 글자 언어 코드로 제공됩니다 (예 : 영어는 'en', 프랑스어는 'fr').

따옴표 등의 표시를 조정할 수있는 브라우저에 유용합니다. 스크린 리더는 lang 속성과 검색 엔진의 이점도 누릴 수 있습니다 .

Sitepoint 몇 가지 좋은 설명이 의를lang 속성에 있습니다.

예

langDOM의 하위 수준에있는 다른 속성으로 재정의되지 않는 한 전체 문서에 대해 언어를 영어로 지정합니다 .

<html lang="en">

다음 단락의 언어를 스웨덴어로 지정하십시오.

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

"! DOCTYPE"선언 . 숨겨진 기능이라고 생각하지 않지만 잘 알려지지는 않았지만 매우 유용한 것 같습니다.

예 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">