HTML5의 기술을 계속 설명하십시오.
16. 비디오 지원
오디오 요소 <Audio>는 매우 유사하며 새로운 브라우저에서 HTML5 비디오를 지원합니다. 실제로 최근 YouTube는 새로운 HTML5 비디오 임베드를 발표했습니다. 불행히도, HTML5 문서는 비디오의 특정 인코더를 나타내지 않기 때문에 주로 브라우저에 따라 다릅니다. Safari와 IE9는 H.264 형식의 비디오를 지원할 수 있지만 Firefox와 Opera는 여전히 Theora 및 Vorbis 형식을 고수합니다. 따라서 HTML5 비디오를 표시 할 때는 두 가지 형식을 제공해야합니다.
17. 비디오 사전로드
먼저 비디오를 사전로드하기 위해 브라우저가 필요한지 여부를 결정해야합니다. 필요가 있습니까? 방문자가 비디오 표시 전용 페이지를 입력한다고 가정하면 대기 시간을 절약하기 위해 페이지를 사전로드해야합니다. Preload = preload를 설정하여 비디오를 사전로드하거나 그 사이에 예압을 추가 할 수 있습니다.
<비디오 예압>
…
</video>
18. 디스플레이 컨트롤
위의 코드에서는 비디오가 제어 가능한 구성 요소가없는 그림으로 만 표시되는 것을 알 수 있습니다. 이러한 재생 컨트롤을 얻으려면 비디오 요소에 이러한 제어 속성을 지정해야합니다.
<비디오 예압 컨트롤>
…
</video>
19. 정규 표현
새로운 패턴의 속성 덕분에 정규식을 코드에 직접 삽입 할 수 있습니다.
<양식 메소드 = 사후 액션 =>
<label for = username> 사용자 이름을 만듭니다 : </label>
<입력 ID = 사용자 이름 유형 = 텍스트 이름 = 사용자 이름 자리 표시기 = 4 <> 10 ″ 필수 AUTOFOCUS = AUTOFOCUS 패턴 = [A-ZA-Z] {4,10}>
<버튼 유형 = 제출> go </button>
</form>
정규 표현식에 더 익숙하다면,이 새로운 패턴 인 [a-za-z] {4,10}은 상단과 소문자 만 허용합니다. 이 문자열에는 최소 4 자, 최대 10 자 이상이 있어야합니다.
20. 속성에 대한 브라우저 지원을 감지합니다
앞에서 언급했듯이 모든 브라우저가 이러한 속성을 지원하는 것은 아니므로 브라우저가이를 인식 할 수 있는지 여부를 알 수있는 방법이 있습니까? 이 질문은 아주 좋습니다. 다음은 여러분을 소개하는 두 가지 방법이 있습니다. 첫 번째 옵션은 ModernIZR을 사용하여 탐지하거나 이러한 요소를 만들고 분석하여 브라우저의 내용을 확인하는 것입니다. 예를 들어, 이전 예에서는 브라우저가 패턴 속성을 실행할 수 있는지 여부를 결정하려면 페이지에 JavaScript를 추가 할 수 있습니다.
alert (document.createElement ( 'input'))의 '패턴') // 부울;
실제로 이것은 브라우저 호환성을 결정하는 매우 일반적인 방법입니다. jQuery 라이브러리는이 트릭을 활용합니다. 위의 코드에서는 새 입력 요소를 생성하고 패턴 속성을 인식 할 수 있는지 확인합니다. 인식 할 수 있다면 브라우저는이 기능을 지원합니다. 그렇지 않으면 지원되지 않습니다.
<cript>
if (! 'Pattern'in Document.CreateElement ( 'input')) {
// 클라이언트/서버 측 유효성 검사를 수행합니다
}
</스크립트>
JavaScript에 의존하여 달성해야합니다!
21. 마크 요소
<mark> 요소의 주요 기능은 페이지의 텍스트를 사용자에게 시각적으로 강조 해야하는 텍스트를 강조하는 것입니다. 이 태그에 싸인 문자열은 사용자의 현재 동작과 관련이 있어야합니다. 예를 들어, 일부 블로그에서 Open Your Mind를 검색하면 <mark> 태그에서 JavaScript를 사용하여 각 작업을 마무리 할 수 있습니다.
<H3> 검색 결과 </h3>
<H6> 그들은 Quato가 말한 직후에 방해 받았다. </h6>
22. <div>를 사용할 때
<div> 태그를 사용해야합니까? 물론 필요합니다. 예를 들어, 요소에 코드를 래핑하려면 특히 컨텐츠 포지셔닝을 위해 <div>가 매우 이상적인 선택이됩니다. 그러나 위의 상황이 아니라 블로그 게시물이나 바닥 글 링크 목록을 마무리하는 경우 각각 <article> 및 <av> 요소를 사용하는 것이 좋습니다.