1. 새 문서 유형 (없는 Doctype)
<! DOCTYPE html로의 PUBLIC "- // W3C // DTD XHTML 1.0 과도 // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
이 복잡하고 어려운보다도 당신은 아직 그것을 사용 입력 XHTML 문서를 기억 하는가? 이 경우, 지금 새로운 HTML5 문서 형식으로 전환.
<! DOCTYPE HTML>
지금 바로 그러한의 단순에 15 자. (참고 : 귀하의 문서 타입은 당신의 HTML 파일의 첫 번째 줄에서 발생하는 필요 확인했다.)
2. 그래픽 (도) 소자
당신은 여전히 그림을 표시하려면 다음 코드를 사용하는 것을 고려하고 있습니까?
< 밀리그램 SRC = "경로 / 행 / 영상" ALT = "정보 화상" /> < P > 화성 이미지. </ P >
상기 코드는 간단하고 단지 화소 배치와 단락 기호 및 HTML5 <표> 요소이 향상 도입함으로써 유사하므로, 연관된 전체 패턴으로 연관된 표제 의미 할 수 없다. 결합 <figcaption의> 요소의 사용은, 우리는 그래픽 제목 그래픽와 페어링 할 수 있습니다합니다. 다음과 같이 코드입니다 :
< 그림 > < IMG SRC = "/ 대한 / 경로 이미지" 고도는 = "정보 이미지" /> < figcaption의 > < p는 > 이 뭔가 흥미의 이미지입니다. </ P > </ figcaption의 > </ 도 >
3. 재정 <작은>
자막을 만들 <작은> 요소를 사용할 수 있도록 긴밀히 로고 관련이있다. 그러나 HTML5는 지금 사용을 수정, <작은> 요소는 다시 정의, 또는 좀 더 제대로, 이제 작은 글씨 또는 (예 : 웹 사이트의 하단에 저작권 표시 등) 다른 측면 내기를 나타내는 데 사용됩니다.
4. 스크립트가 더 이상 필요하지, 링크 유형
아마 여전히 당신은 당신의 연결에 아래의 코드와 같은 및 재산의 스크립트 태그 유형을 추가 할 수 있습니다.
< 링크 확인해 = "스타일 시트" HREF = "경로 /로 / stylesheet.css" 유형 = "텍스트 / CSS" /> < 스크립트 유형 = "텍스트 / 자바 스크립트" SRC = "경로 /로 / script.js" > </ 스크립트 >
<링크 REL = "스타일"HREF = "경로 / 행 / stylesheet.css"/>
<스크립트 SRC = "경로 /로 / script.js"> </ script>
사용 또는 미사용 따옴표
당신이 마음에 들지 않으면 당신은 랩 속성을 둘러싸 필요가 없습니다, HTML5와 XHTML의 다른 기억. 당신이 생각하는 경우, 따옴표는 물론, 어떤 문제가되지 않습니다, 더 편안하게 느낄 수 있도록.
<p 클래스 = "myClass가"ID = someId 시작> 반응기.
콘텐츠를 편집 할 수 있는지 확인 (6)
이름이 텍스트 내용에 포함 (자신의 자식 요소를 포함) 편집 요소에 사용자 수에서 알 수 있듯이 HTML5 강력한 기능 중 하나는 "의 contentEditable"입니다. 그것의 사용은 작업이나 간단한 목록으로, 매우 광범위 위키 기반의 사이트뿐만 아니라, 그것은 또 다른 장점은 로컬 스토리지의 사용이다가도 매우 실용적입니다.
<! DOCTYPE HTML > < HTML LANG = "EN" > < 머리 > < 메타 문자 집합 = "UTF-8" > < 제목 > 제목 </ 제목 > </ 머리 > < 몸 > < H2 > 할 일 목록 </ H2 > < UL 의 contentEditable = "진정한" > < 리 > 브레이크 기계 택시 드라이버. </ 리 > <버려진 공장에 드라이브 < 리 > 자기의 시계 비디오 </ 리 > </ UL > </ 몸 > </ HTML >
또한, 제 V 기술에 따라 당신은 (인용 부호없이) 이런 식으로 작성된 코드의 아홉 번째 라인도 있습니다 언급 :
<UL의 contentEditable = TRUE>
전자 메일을 입력하십시오 (7)
우리가 폼 입력의 종류를 지정하는 "전자 메일"을 적용하는 경우, 우리는 브라우저 만 유효한 이메일 주소 줄에 입력 문자열 구조를 허용 명령 할 수있다. 형태로 내장 된 검증이 곧 올 것이다, 그러나 우리는 완전히 이것에 의존 할 수는 없지만. 이전 버전의 브라우저는이 "전자 메일"유형을 이해하지 못하고, 그들은 단순히 일반 텍스트 상자로 돌아갑니다.
<! DOCTYPE HTML > < HTML LANG = "EN" > < 선두 > < 메타 캐릭터 = "UTF-8" > < 타이틀 > 추천 </ 타이틀 > </ 헤드 > < 본문 > < 폼 작업 = "" 방식 = "GET" > < 라벨 에 대한 = "이메일" > 이메일 : </ 라벨 > <입력 "이메일"= /> < 버튼 유형 = "제출" > 양식을 제출 </ 버튼 > </ 양식 > </ 몸 > </ HTML >을
이 지원되는 브라우저 지원되지 않는 요소와 속성에 올 때, 당신은 현재의 모든 브라우저 그래서 신뢰할 수 없습니다 것을 알고 있어야합니다. 예를 들어, 오페라 만이 이름 속성 지원 이메일 검증을 지정합니다. 그러나, 자리 표시 자 속성 (곧 아래에 언급되는)를 지원하지 않습니다. 마지막으로, 당신은 인증이 양식을 사용할 수 있지만, 만에 과도하게 의존하지 않습니다.
8. 자리 표시 자
이전에, 우리는 자리 표시 자 텍스트 상자를 만들 자바 스크립트를 사용해야합니다. 당신은보기의 속성 포인트의 초기 값의 적합성을 설정할 수 있지만 긴 사용자가 텍스트를 삭제 한 입력의 내용을 다시 비우 될 것이다. 자리 표시 자 속성은 효과적으로 만회했다.
<input 이름 = "이메일"TYPE = "이메일"자리 = "[email protected]"/>
9. 로컬 저장소
로컬 스토리지 HTML5 덕분에, 우리는 우리가 브라우저를 닫 이상 새로 고침이 영향을받지 않습니다 경우에도 입력 한 고급 브라우저가 "기억"할 수 있습니다. 모든 브라우저가 지원하지만,하지만 가장 중요한 인터넷 익스플로러 8, 사파리 4, 파이어 폭스 3.5. 지원.
10. 헤더와 풋터 의미
<div의 ID = "헤더">
...
</ DIV>
<DIV 아이디 = "바닥 글">
...
</ DIV>
위의 코드는 사라입니다. div를 근본적 경우에도 ID의 응용 프로그램 또는 이렇게, 어떤 의미 구조를 가지고 있지 않습니다. HTML5의에서, 우리가 사용할 수 있지만 <헤더> 및 <바닥 글> 요소, 위의 코드로 대체 할 수있다 :
<헤더>
...
</ 헤더>
<바닥 글>
...
</ 바닥 글>
그러나 사이트의 머리와 발을이 두 가지 요소를 혼동하지 않도록주의해야합니다. 그들은 단순히 컨테이너를 나타냅니다.
11. IE 및 HTML5
새로운 IE는 HTML5 요소가 새로운 요소가 제대로 HTML5 블록 요소에 표시 될 수 있도록하기 위해, 특정 하나님을 충전해야 이해, 다음과 같은 코드로 스타일을 정의 할 필요가있다 :
머리글, 바닥 글, 기사, 섹션, 탐색, 메뉴, hgroup {
표시 : 블록;
}
그럼에도 불구하고, IE는 아직 정확히 이러한 요소 모르는, 따라서 이러한 형식을 무시하지만,이 문제를 해결하기 위해 다음 코드를 사용합니다 :
document.createElement ( "기사");
document.createElement ( "바닥 글");
document.createElement ( "헤더");
document.createElement ( "hgroup");
document.createElement ( "탐색");
document.createElement ( "메뉴");
12. 타이틀 그룹 (HGroup)
각각 자막 <H1> <H2> 아직 설명되지 않은 메소드 HTML4에 라벨로 표지 시맨틱 관계 사이의 적절한 관계를 가능하게한다, 추가로 경우에 사용하는 사이트 이름을 가정 H2 다른 제목 페이지에 표시 할 때, 문제는 더 계층 구조의 측면에서입니다. 제목 hgroup 족 원소의 사용은, 우리는 문서의 전체 윤곽에 영향을주지 않고, 함께 이러한 제목을 사용할 수 있습니다.
<헤더>
<hgroup>
<H1> 회수 팬 페이지 </ H1>
<H2> 만 평생의 기억을 원하는 사람들을위한. </ H2>
</ hgroup>
</ 헤더>
13. 필요 (필수) 특성
형태는 특정 입력 필요 여부를 지정하는 것이 필요한 새로운 특성을 허용한다. 이 속성을 선언하려면 다음 두 가지 방법으로, 자신의 기본 설정에 따라 코드를 작성할 수 있습니다 :
<input 타입 = "텍스트"NAME = "someInput"가 필요>
또는, 더 엄격한 :
<필요한 입력 TYPE = "텍스트"NAME = "someInput"= "필수">
코드 작업의 위의 두 줄. 필수 속성을 코드 줄을 사용하고 브라우저 지원 후, 빈 양식이 제출되지 않습니다 입력합니다. 다음은 간단한 예제입니다, 우리는 또한 자리 표시 자 속성을 추가 :
< 양식 방법 = "게시물" 행동 = "" > < 라벨 에 대한 = "someInput" > 당신의 이름 : </ 라벨 > < 입력 유형 = "텍스트" ID = "someInput" 이름 = "someInput" 자리 = "더글라스 퀘이드" 필요한 > < 버튼 유형 = "제출" > 이동 </ 버튼 > </ 양식 >
입력이 비어있는 경우, 양식, 제출 텍스트 상자를 강조하지 않습니다.
14 AF (자동 초점) 특성
마찬가지로, HTML5로 우리는 더 이상 자동 초점의 문제를 해결하기 위해 자바 스크립트 프로그램을 필요가 없습니다. 입력 "을 선택"또는 초점을해야하는 경우, 우리는 이제 HTML AF 자동 초점 속성을 사용할 수 있습니다.
<input 타입 = "텍스트"NAME = "someInput"자리 = "더글라스 퀘이드"필요 오토>
15. 오디오 지원
우리는 더 이상 오디오를 제공하기 위해 써드 파티 플러그인에 의존 할 필요가 없습니다. HTML5 오디오 요소 <오디오>를 제공한다. 현재 최신 브라우저는 HTML5 오디오를 지원합니다. 이 경우, 일부 이전 버전과의 호환성을 제공하는 것이 가장 좋습니다.
<오디오 자동 재생 = "자동 재생"컨트롤 = "컨트롤">
<소스 SRC = "file.ogg"/>
<소스 SRC = "file.mp3"/>
<a이 파일을 다운로드 href="file.mp3">. </a>에
</ 오디오>
그는 오디오 포맷, 모질라와 웹킷은 아직 완전히 지원되지 않습니다 말했다. 파이어 폭스는 오그 파일, 웹킷 브라우저 지원은 가장 일반적인 확장 .MP3를보고 싶습니다. 이 수단은 적어도 지금, 당신은 오디오의 두 가지 버전을 만들 것을. 사파리로드 페이지, 그것은 오그 인식하지 않은 경우 파일 형식은 생략하고, MP3 버전으로 이동합니다. 노트, IE는 지원하지 않습니다 제발, 오페라 10 이하 버전은 지원이 .wav 파일을.
<form 조치 = ""METHOD = "GET">
< "이메일"= 레이블> 이메일 : </ 라벨>
<입력 ID = '이메일'이름 = "이메일"TYPE = "이메일"/>
<버튼 타입 = "제출"> 양식을 제출 </ 버튼>
</ FORM>
</ body>
</ HTML>
이 지원되는 브라우저 지원되지 않는 요소와 속성에 올 때, 당신은 현재의 모든 브라우저 그래서 신뢰할 수 없습니다 것을 알고 있어야합니다. 예를 들어, 오페라 만이 이름 속성 지원 이메일 검증을 지정합니다. 그러나, 자리 표시 자 속성 (곧 아래에 언급되는)를 지원하지 않습니다. 마지막으로, 당신은 인증이 양식을 사용할 수 있지만, 만에 과도하게 의존하지 않습니다.
(16) 비디오 지원
오디오 요소 <오디오> 매우 새로운 브라우저처럼도 HTML5 비디오를 지원합니다. 사실, 최근에 우리는 새 YouTube HTML5 비디오 삽입을 발표했다. 모두 결정하는 브라우저에 따라 불행하게도 인해 HTML5 문서는 특정 비디오 인코더를 지정하지 않았습니다. 사파리와 IE9은 H.264 비디오 포맷을 지원할 수 있지만, 파이어 폭스와 오페라는 여전히 테오 라 (Theora)와 보비스 형식을 주장하고있다. 따라서, 디스플레이 HTML5 비디오, 당신은 두 형식을 모두 제공해야합니다.
17. 미리로드 된 동영상
우선 당신은 당신이 미리로드 된 비디오가 될 필요가 있는지를 결정해야합니다. 필요가 있는가? 방문자가 비디오를 보여주기 위해 디자인 된 페이지를 입력하는 가정, 그것은 기다릴 약간의 시간을 절약하기 위해 페이지를 미리로드하는 것이 필요하다. 당신은 프리로드 = "프리로드"올 미리로드 된 비디오를 설정하거나 캔 사이에 프리로드를 추가 할 수 있습니다.
<비디오 예압>
...
</ 비디오>
18. 디스플레이 제어
당신은 어떤 요소가 제어 할 수없는 위의 코드와 함께, 그것은 단지, 비디오 그림으로 표시됩니다 것으로 나타났습니다 수 있습니다. 이러한 재생 컨트롤을 얻기 위해, 우리는 컨트롤에서 비디오 요소에 이러한 특성을 지정해야합니다.
<비디오 프리로드 제어>
...
</ 비디오>
19. 정규 표현식
새로운 모델은 재산의 손실을, 우리는 사용자 코드에서 직접 정규 표현식을 삽입 할 수 있습니다.
<form 방법은 ""= 포스트 액션 =>
<레이블 = "사용자 이름"> 사용자 이름을 만들 : </ 라벨>
<입력 ID = "이름"TYPE = "텍스트"이름 = "이름"자리 = "4 <> 10"필수 = "필수"오토 = "오토"패턴 = "[A-ZA-Z] {4,10} ">
<버튼 타입 = "제출"> 이동 </ 버튼>
</ FORM>
[A-Za-z]와 {4,10}는 대문자 허용하고 소문자 : 당신이 정규 표현식에 익숙하다면,이 새로운 모델을 눈치 챘을 것이다. 이 문자열은 대부분 10 자에서 네 자 이상을 가지고 있어야합니다.
20. 등록 지원하는 브라우저를 검출
앞서 언급 한 바와 같이, 모든 브라우저가 이러한 속성을 지원하고 브라우저를 인식 할 수 있는지 여부를 확인할 방법이없는 경우?하지 이 질문은 두 가지 방법으로 당신에게 여기, 아주 좋았어요, 첫 번째 옵션은 감지 모더 나이저를 사용하는 것입니다, 또는 당신이 만들고 어떤 브라우저 기능을 살펴 가지고 이러한 요소를 분석 할 수 있습니다. 우리는 브라우저가 패턴 속성을 수행 할 수 있는지 여부를 결정하는 경우 예를 들어, 위의 예에서, 당신은 페이지에 자바 스크립트를 추가 할 수 있습니다 :
(document.createElement ( "입력")의 '패턴') // 경고 부울;
사실, 이것은 브라우저 호환성을 결정하는 매우 일반적인 방법입니다. jQuery를 라이브러리 차종이 기술의 사용합니다. 위의 코드는, 우리는 새로운 입력 요소를 만들고, 패턴 특성을 식별 할 수 있는지 여부를 확인합니다. 당신이 그것을 식별 할 수있는 경우, 브라우저는이 기능을 지원하거나 지원하지 않습니다.
<script>
경우 (document.createElement ( "입력") 안에 '패턴') {
// 클라이언트 / 서버 측 유효성 검사를 할
}
</ script>
그것을 달성하기 위해 자바 스크립트에 의존 할 필요가 기억하십시오!
21. 마크 요소
<표> 요소의 주요 기능은 페이지에서 사용자에게 시각적으로 그 단어의 중요성을 강조 할 필요성을 강조한다. 이 소포에서 문자열 태그는 사용자의 현재 동작과 연결되어 있어야합니다. 나는 블로그의 일부를 검색 할 경우 예를 들어, "당신의 마음을 열고,"나는 모든 행동 <표> 태그를 포장하는 데 사용하는 자바 스크립트를 사용할 수 있습니다.
<H3> 검색 결과 </ H3>
<H6> 그들은이 중단되었다 Quato 말했다 직후, <마크> </ 마크> "당신의 마음을 엽니 다." </ H6>
22. <div> 사용할 때
당신은 <div> 태그가 어떻게 사용해야합니까? 물론, 필요에. 당신이 특히 콘텐츠를 현지화의 랩에서 코드 요소의 조각을 원하는 경우 예를 들어, <DIV> 이상적인 선택이 될 것입니다. (가) 위의 경우 만 랩 블로그 게시물 또는 링크의 바닥 글 목록에없는 경우에는, 당신은 사용 <기사>와 <탐색> 요소에 좋습니다.