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/ 에서 제공됩니다 . 이 리소스는 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 을 악용 하는 데 사용 되기에는 불분명했습니다 .
HTML <del>sucks</del> <ins>rocks</ins>!
버튼 태그는 새로운 input submit태그와 많은 사람들이 아직 익숙하지 않은. 버튼의 텍스트는 예를 들어 버튼 태그를 사용하여 스타일을 지정할 수 있습니다.
<button>
<b>Click</b><br />
Me!
</button>
두 줄로 된 버튼을 렌더링합니다. 첫 번째는 " 클릭 "은 굵게 표시하고 두 번째는 "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브레이크가 삽입 된 것과 동일 하지만 하이픈 ( -)이 추가되어 브레이크를 나타냅니다. 인쇄 방식과 비슷합니다.
예를 들면 :
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
많이 사용되지 않는 기능은 페이지에서 볼 수있는 컨텐츠를 제공하는 거의 모든 요소에 'title'속성이있을 수 있다는 사실입니다.
이러한 속성을 추가하면 요소 위에 마우스를 놓을 때 '툴팁'이 나타나고 페이지가 너무 혼잡하지 않게하는 비 필수적이지만 유용한 정보를 제공하는 데 사용될 수 있습니다. . (또는 이미 혼잡 한 페이지에 정보를 추가하는 방법 일 수도 있습니다)
하나의 태그에 여러 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 에 대해 자세히 알아 보십시오 .
이미지, JavaScript, iframe, 링크의 소스 / href 속성으로 base 64 인코딩 문자열을 할당 할 수 있습니다
예 :
<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 마크 업을 사용하여 이미지를 구성하려면 어떻게해야합니까?
I recently found out about the fieldset and label tags. As above, not hidden but useful for forms.
Example:
<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>
You can use the object tag instead of an iframe to include another document in the page:
<object data="data/test.html" type="text/html" width="300" height="200">
alt : <a href="data/test.html">test.html</a>
</object>
<optgroup> is a great one that people often miss out on when doing segmented <select> lists.
<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>
is what you should be using instead of
<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>
Most are also unaware of the fact that you can distinguish the form button pressed by just giving them a name/value pair. E.g.
<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>
In the server side, the actual button pressed can then be obtained by just checking the presence of the request parameter associated with the button name. If it is not null, then the button was pressed.
I've seen a lot of unnecessary JS hacks/workarounds for that, e.g. changing the form action or changing a hidden input value beforehand depending on the button pressed. It's simply astonishing.
Also, I've seen almost as many JS hacks/workarounds to gather the checked ones of multiple checkboxes like as in table rows. On every select/check of a table row the JS would add the row index to some commaseparated value in a hidden input element which would then be splitted/parsed further in the server side. That's result of unawareness that you can give multiple input elements the same name but a different value and that you can still access them as an array in the server side. E.g.
<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>
...
The unawareness would give each checkbox a different name and omit the whole value attribute. In some JS-hack/workaround-free situations I've also seen some unnecessarily overwhelming magic in the server side code to distinguish the checked items.
<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>
If the for attribute of a <label> tag isn't specified, it is implicitly set as the first child <input>, i.e.
<label>Alias: <input name="alias" id="alias"></label>
is equivalent to
<label for="alias">Alias:</label> <input name="alias" id="alias">
Button as link, no JavaScript:
You can put any kind of file in the form action, and you have a button that acts as a link. No need to use onclick events or such. You can even open-up the file in a new window by sticking a "target" in the form. I didn't see that technique in application much.
Replace this
<a href="myfile.pdf" target="_blank">Download file</a>
with this:
<form method="get" action="myfile.pdf" target="_blank">
<input type="submit" value="Download file">
</form>
Simplest way to refresh the page in X seconds - META Refresh
<meta http-equiv="refresh" content="600">
The value in content signifies the seconds after which you want the page to refresh.
[Edit]
<meta http-equiv="refresh" content="0; url=foobar.com/index.html">
To do a simple redirect!
(Thanks @rlb)
<html>, <head> and <body> tags are optional. If you omit them, they will be silently inserted by the parser in appropriate places. It's perfectly valid to do so in HTML (just like implied <tbody>).
HTML in theory is an SGML application. This is probably the shortest valid HTML 4 document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/
The above doesn't work anywhere except W3C Validator. However shortest valid HTML5 text/html document works everywhere:
<!DOCTYPE html><title></title>
The lang attribute is not very well known but very useful. The attribute is used to identify the language of the content in either the whole document or in a single element. Langage codes are given in ISO 2-letter Language code (i.e. 'en' for English, 'fr' for French).
It's useful for browsers who can adjust their display of quotation marks, etc. Screen readers also benefit from the lang attribute as well as search engines.
Sitepoint has some nice explanation of the lang attribute.
Examples
Specify the language to be English for the whole document, unless overridden by another lang attribute on a lower level in the DOM.
<html lang="en">
Specify the language in the following paragraph to be Swedish.
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
The "!DOCTYPE" declaration. Don't think it's a hidden feature, but it seems it's not well known but very useful.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
참고URL : https://stackoverflow.com/questions/954327/hidden-features-of-html
'program story' 카테고리의 다른 글
| const int vs. int const C ++ 및 C의 함수 매개 변수 (0) | 2020.07.29 |
|---|---|
| edittext의 텍스트를 확인하는 방법은 전자 메일 주소입니까? (0) | 2020.07.29 |
| “유사하게 보이는”유니 코드 문자를 비교하는 방법은 무엇입니까? (0) | 2020.07.29 |
| 피벗 컨트롤이 사라집니다 (0) | 2020.07.29 |
| Emacs에서 knitr Markdown 하이라이트? (0) | 2020.07.29 |