다음은 10 개의 활용률이 낮거나 오해 된 HTML 태그가 있습니다. 어쩌면 그들은 잘 알려져 있지 않지만 특정 상황에서는 매우 유용합니다.
웹 개발자는 종종 여러 언어를 이해하고 마스터하기를 원하기 때문에 언어로 모든 것을 배우는 것은 까다 롭지 만 더 특별하지만 유용한 태그를 완전히 활용하지는 않는다는 것을 쉽게 찾을 수 있습니다.
번역 : tutsplus
불행히도 우리는 아직 알려지지 않은 HTML 태그의 모든 잠재력을 얻지 못했습니다. 그러나이 영역을 너무 늦게 다시 입력하지 않고이 탐험되지 않은 태그의 에너지를 밝히기 위해 코드를 작성하기 시작합니다.
다음은 10 개의 활용률이 낮거나 오해 된 HTML 태그가 있습니다. 어쩌면 그들은 잘 알려져 있지 않지만 특정 상황에서는 매우 유용합니다.
1. <cite>
모든 사람이 <blockquote> 태그에 익숙하지만 <blockquote>의 동생 <cite>를 알고 있습니까? <cite>를 사용하면 요소 내부의 텍스트를 참조로 정의 할 수 있습니다. 일반적으로 브라우저는 이탤릭체를 사용하여 <cite> 태그로 텍스트를 표시하지만 작은 CSS로 변경할 수 있습니다.
<cite> 태그는 디렉토리 또는 기타 웹 사이트에 대한 참조에 유용합니다. 다음은 단락에서 인용 태그를 사용하는 예입니다.
당신의 작품을 달성하는 David Allen의 획기적인 조직 책은 폭풍을 잊어 버렸습니다. 2. <ptgroup>
<ptgroup> 태그는 선택 태그에서 그룹화 옵션을 정의하는 좋은 방법입니다. 예를 들어, 시간마다 영화 목록을 그룹화 해야하는 경우 다음을 수행 할 수 있습니다.
12
<라벨에 대한 레이블 </label> <select id = showtimes name = showtimes> <optgroup label = 1 : 00 pm> </optgroup> <옵션 값 = 타이타닉> 타이타닉> 옵션 value = nd> slumdog millionaire </옵션> <옵션 value = wab> monster shrek </option> <optgroup label = 2 : ^ value = bkrw> 사자 킹 </옵션> <옵션 값 = stf> 슈퍼맨 </옵션> </select>
데모:
영화 목록을 시각적으로 구별 할 수 있습니다. 3. <아크로임>
<cronym>은 텍스트 세트를 정의하거나 해석하는 방법입니다. 마우스와 함께 <cronym> 태그를 사용하여 텍스트를 넣으면 제목 태그의 내용을 보여주는 상자가 아래에 나타납니다. 예를 들어:
1
Weibo 웹 사이트 <Acronym Title = 2006 년에 설립> Twitter </acronym>은 최근에 가동 중지 시간이었습니다.
예:Weibo 웹 사이트 Twitter는 최근 가동 중지 시간이었습니다. 4. <dudrend>
<dassching> 태그는 매우 눈에 띄지 않는 작은 태그이지만 그것이 쓸모가 없다는 것을 의미하지는 않습니다. 이름에서 알 수 있듯이 <stendress>를 사용하면 HTML에서 태그를 시맨틱 할 수 있습니다. 이 작은 레이블은 기본 이탤릭체의 레이블의 내용을 표시합니다. 물론 스타일을 사용하면 기본 스타일을 쉽게 변경할 수 있습니다.
1234
<duddren> Glen Stansberry1234 Web Dev Laneanywhere, USA </adress> 5. <ins> 및 <lel>
태그를 사용하여 편집 된 버전을 표시하려면 <ins> 및 <del>이 맞습니다. 이름에서 알 수 있듯이 <ins>는 밑줄로 추가 된 내용을 강조 표시하고 <del>은 Strikethrough를 사용하여 제거 된 정보를 표시합니다.
1
John <del> 좋아요 </del> <s> 그의 새로운 iPod을 좋아합니다.
예: 모든 사람 좋다 버려진 Zblog. 6. <라벨>
텍스트를 표시 할시기를 잊어 버릴 가능성이 가장 높은 것으로 보입니다. 양식 요소의 경우, 내가 잊어 버린 가장 일반적인 것은 <라벨> 태그입니다. 텍스트를 태그하는 편리한 방법뿐만 아니라 <라벨> 태그는 속성에 대한 A를 전달하여 어떤 요소를 연결할 것인지 지정할 수 있습니다. <라벨>은 스타일로 제어하기 쉬운 일뿐만 아니라 제목을 클릭 할 수 있습니다.
12
<label for = username> username < /label> <input id = username type = text /> 7. <FieldSet>
FieldSet은 양식 요소에 논리 그룹을 추가하는 데 사용할 수있는 작은 태그입니다. <fieldset> 태그는 그 안의 요소 주위에 상자를 그립니다. 또 다른 요점은 필드셋에 <라벨> 태그를 추가하여 그룹의 제목을 정의 할 수 있다는 것입니다.
1234567
<form> <fieldset> <Legend> 당신은 5 살짜리 학생보다 더 똑똑합니까? </legend> 물론 <입력 이름 = 예 유형 = radio value = yes/> 모르겠습니다 <입력 이름 = 없음 유형 = 무선 값 = 아니오/> </fieldset> </form>
예 : 8. <abbr><abbr> 태그는 <cronym> 태그와 매우 유사합니다. 차이점은 <abbr> 태그가 약어를 정의하는 데만 사용된다는 것입니다. <cronym>과 마찬가지로이 태그의 제목 속성을 정의 할 수 있습니다. 사용자가 약어 텍스트에 마우스를 배치하면 전체 내용이 아래에 표시됩니다. <abbr> 태그는 거의 사용되지 않지만 스크린 리더, 맞춤법 검사기 및 검색 엔진에 매우 유용합니다.
1
<abbr thit
예:그것은 그다지 문명화되지 않은 용어입니다. 그것은 그다지 문명화되지 않은 용어입니다. 9. rel
Rel은 매우 유용한 속성이 될 수 있으며 HTML 요소는 REL 속성을 적용 할 수 있습니다. 추가 지정없이 추가 매개 변수를 전달하는 데 도움이됩니다. 이것은 HTML에서 JavaScript를 사용할 때 매우 유용합니다. 라인 내에서 편집하려는 링크가 있으면 다음을 추가 할 수 있습니다.
1
<a rel = 클릭 가능 href = page.html>이 링크는 편집 가능합니다. </a>
JavaScript는 Rel 속성 클릭 가능 링크를 찾고 일부 Ajax를 적용하여 라인 내에서 편집 할 수 있습니다. 이것은 잠재력이 끝이 없기 때문에 Rel 속성을 사용할 수있는 많은 기술 중 하나 일뿐입니다. 관심있는 친구들은 W3C의 REL 소개 깊이를 공부할 수 있습니다. 10. <WBR>
<WBR> 태그는 믿을 수없고 낯선 태그입니다. 솔직히 말해서, 나는 또한 당신 이이 태그가 거의 사용되지 않았기 때문에이 태그에 노출 될 것이라고 의심합니다. (실제로, 나는이 게시물을 작성하기 전에이 태그를 거의 보지 못했습니다). 실제로이 태그는 소프트 라인 브레이크로 특정 라인에 라인 브레이크 포인트를 지정할 수 있으므로 해당 지점에서 라인 브레이크가 파손될 수 있지만 반드시 파손되지는 않지만 필요할 때만 파손됩니다. 수평 스크롤 막대를 피하려면이 태그를 사용하는 것이 좋습니다.
예:아래는 오버플로가 정의되지 않은 200 픽셀 와이드 박스입니다. Nowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbr
하바 브 하바 브 Havawbrhavawbrawbrawbrawbrawbrawbrawbrawbrawbr 하바 브
<wbr> 태그를 사용하지 않고 동일한 효과를 얻으려면 시도하거나 부끄러워 할 수 있습니다. 이 세 가지 태그 중 어느 것도 모든 브라우저에서 완전히 지원되지 않는다고합니다. 이 기사를 사용하여 3 개의 태그에 대한 각 브라우저의 지원을 볼 수 있습니다.
추신 :이 기사를 어려움으로 번역 한 후 Shenfei는 의미론의 매력과 HTML 태그의 힘을 깊이 느꼈습니다. 나는 우리가 많은 태그를 깨닫지 못했다고 생각합니다. 결과적으로 모든 사람은 일반적인 태그에 익숙하며 모든 사람은 드문 태그를 사용할 수 없습니다. 이전 기사에서 설명했듯이, 의미론의 대부분은 단지 div가 아닌 올바른 장소에서 올바른 레이블을 사용하는 것입니다. 더 많은 HTML 태그를 배울 수 있다면 더 많은 의미 론적 HTML 코드를 작성할 수 있으며, 이는 CSS 작성의 난이도와 작업량을 크게 줄이고 페이지 구조를보다 합리적으로 만들 수 있습니다.