HTML5에 대한 22 기본 팁 (사진 및 텍스트 자습서)

웹 기술이 너무 빠르게 발전하고 있으며 시대와 보조를 맞추지 않으면 제거됩니다. 따라서 다가오는 HTML5를 다루기 위해이 기사는 HTML5의 22 가지 기본 기술을 요약하고 HTML5를 더 배우는 것이 도움이되기를 바랍니다.

XHTML 문은 너무 길며,이 문서를 직접 작성할 수있는 프론트 엔드 개발자가 거의 없다고 생각합니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 전환 // en"

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

HTML5의 DocType 진술은 매우 짧습니다. 나는 당신 이이 진술을 본 직후 그것을 기억할 수 있다고 생각합니다. XHTML의 약간 왜곡 된 DocType 진술을 기억하기 위해 뇌 세포를 낭비 할 필요는 없습니다.

<! doctype html>

HTML5의 간단한 DocType 문은 Firefox 및 Chrome과 같은 최신 브라우저 및 IE6/7/8과 같은 브라우저가 입력 (준) 표준 모드를 ​​입력 할 수 있도록하는 것입니다. IE6/7이 HTML5 DocType를 지원할 수 있다는 것이 궁금 할 것입니다. 실제로 DocType 이이 형식을 준수하는 한 IE는 표준 모드에 들어갑니다.

다음 간단한 코드를 살펴보십시오.

<img src = "path/to/image">

<H6> 화성의 이미지 </h6>

불행히도, 여기서 H6 태그는 IMG 태그와 관련이없는 것으로 보이며 의미론은 충분히 명확하지 않습니다. html5는 이것을 깨달았고 <fide> 태그를 채택했습니다. <figcaption> 태그와 <fide>가 결합되면 H6 태그 및 IMG 태그를 결합 할 수 있으며 코드는 더 의미가됩니다.

<그림>

<img src = "path/to/image">

<피스 캡션>

<H6> 이것은 흥미로운 것의 이미지입니다. </h6>

</figcaption>

</그림>

얼마 전, <small> 태그를 사용하여 로고와 관련된 자막을 만들었습니다. 그러나 <small> 태그는 HTML5에서 재정의되어 의미를보다 시맨틱하게 만들고 <small>의 글꼴 크기가 작아집니다. 그것에 대해 생각하십시오. 여전히 웹 사이트 하단의 저작권 정보 에이 태그를 사용하는 것이 좋습니다.

일반적으로 <link> 및 <cript>에 유형 속성을 추가합니다.

<link rel = "스타일"유형 = 텍스트/CSS href = "경로/to/stylesheet.css">

<script type = "text/javaScript"src = "path/to/script.js"> </script>

html5에서는 유형 속성이 더 이상 필요하지 않으며, 이는 약간 중복되는 것처럼 보이며 코드가 제거 된 후에도 더 간결하게 만들 수 있습니다.

<link href = "path/to/stylesheet.css">

<script src = "path/to/script.js"> </script>

이것은 약간 혼란 스럽습니다. HTML5는 XTHML이 아니므로 태그에 이중 인용문을 저장할 수 있습니다. 나는 저를 포함한 대부분의 동지들이 코드를보다 표준으로 보이게하기 때문에 이중 인용문을 추가하는 데 익숙하다고 생각합니다. 그러나 이것은 개인 선호도에 따라 이중 인용문을 사용할지 여부를 결정할 수 있습니다.

<h6 id = "someid"> 반응기를 시작하십시오. </h6>

입력 상자의 새로운 이메일 속성이 HMTL5에 추가되어 입력 컨텐츠가 이메일의 쓰기 형식을 충족하는지 여부를 감지 할 수 있습니다. 기능이 점점 더 강력 해지고 있습니다. HTML5 이전에는 JS에만 의존하여이를 감지 할 수 있습니다. 내장 양식 검증 기능은 곧 현실이 될 것이지만 많은 브라우저 가이 속성을 지원하지 않으며 일반 텍스트 입력 상자로만 취급됩니다.

<form 메소드 = get>

<label for = "이메일"> 이메일 : </label>

<input id = "email"type = "email"name = "email">

<버튼 유형 = "제출"> 제출 양식 </button>

</form>

지금 까지이 속성은 최신 브라우저를 포함하여 지원되지 않으므로이 속성은 당분간 여전히 신뢰할 수 없습니다.

텍스트 상자의 자리 표시 자 (이 블로그의 검색 상자 효과 참조)는 사용자 경험을 향상시키는 데 도움이됩니다. 전에는 자리 표시 자의 효과를 달성하기 위해 JS에 의존하고 HTML5에 자리 표시 자 속성 자리 표시자를 추가 할 수있었습니다.

<입력 유형 = "이메일"이름 = "이메일"자리 표시 자 = "[email protected]">

마찬가지로 현재 주류 현대식 브라우저는이 속성을 잘 지원하지 않습니다. 당분간 Chrome과 Safari 만이이 숙박 시설을 지원하며 Firefox와 Opera는이 속성을 지원하지 않습니다.

HTML5의 로컬 스토리지 기능을 통해 최신 브라우저는 우리가 입력 한 내용을 기억할 수 있으며 브라우저가 닫히고 새로 고침 되더라도 영향을받지 않습니다. 일부 브라우저는이 기능 (IE8, Safari 4 및 Firefox 3.5가 여전히이 기능을 지원하지 않지만 테스트 할 수 있습니다.

다음 코드는 더 이상 HTML5에 존재하지 않습니다

<div id = 헤더>

...

</div>

<div id = 바닥 값>

...

</div>

일반적으로 헤더 및 바닥 글에 대한 DIV를 정의한 다음 ID를 추가하지만 HTML5에서는 <Header> 및 <FUTER> 태그를 직접 사용할 수 있으므로 위의 코드를 다음과 같이 다시 작성할 수 있습니다.

<Header>

...

</헤더>

<FUTER>

...

</바닥다>

이 두 태그를 웹 사이트의 헤더 및 바닥 글과 혼동하지 않도록주의하십시오.

IE 브라우저는 현재 HTML5를 지원하지 않으며, 이는 HTML5의 더 빠른 대중화를 차단하는 큰 걸림돌입니다. 그러나 IE9의 HTML5 지원은 여전히 ​​매우 좋습니다.

즉, 새로 추가 된 HTML5의 모든 태그를 인라인 요소로 구문 분석하지만 실제로는 블록 레벨 요소이므로 스타일을 정의해야합니다.

헤더, 바닥 글, 기사, 섹션, Nav, 메뉴, hgroup {

디스플레이 : 블록;

}

그럼에도 불구하고, IE는 여전히 새로 추가 된 HTML5 태그를 구문 분석 할 수 없습니다. 현재이 문제를 해결하기 위해 JavaScript를 사용해야합니다.

문서 .CreateElement ( "기사");

문서 .CreateElement ( "바닥기");

문서 .CreateElement ( "헤더");

문서 .CreateElement ( "hgroup");

문서 .CreateElement ( "Nav");

문서 .CreateElement ( "메뉴");

이 JavaScript 코드를 사용하여 더 나은 구문 분석 html5를 수정할 수 있습니다.

<script mce_src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>

이것은 두 번째 트릭과 비슷합니다. H1 및 H2 태그가 웹 사이트의 이름과 자막을 나타내는 데 사용되는 경우 원래 의미와 밀접한 관련이있는 두 제목과 관련이 없습니다. 현재 <hgroup> 태그를 사용하여 코드가 더 의미가되도록 결합 할 수 있습니다.

<Header>

<hgroup>

<H1> 리콜 팬 페이지 </h1>

<H2> 평생의 기억을 원하는 사람들에게만. </h2>

</hgroup>

</헤더>

프론트 엔드 직원은 많은 양식 검증 프로젝트를 수행해야합니다. 중요한 점 중 하나는 일부 입력 상자를 채워야하므로 여기에서 JavaScript를 확인해야한다는 것입니다. HTML5에서는 채워야하는 새로운 속성이 추가됩니다 : 필수. 필요한 속성을 사용하는 두 가지 방법이 있습니다. 두 번째 방법은 더 구조적으로 보이고 첫 번째 방법은 더 간단합니다.

<입력 유형 = "text"name = "someinput"필수>

<입력 유형 = "text"name = "someinput"필수 = "필수">

이 속성을 사용하면 양식 제출 검증을보다 쉽게 ​​만들고 다음과 같은 간단한 예를 살펴보십시오.

<form 메소드 = post>

<label for = someInput> 당신의 이름 : </label>

<입력 ID = somePut 유형 = 텍스트 이름 = somePut 자리 표시기 = "Douglas Quaid"required = "필수">

<버튼 유형 = "제출"> go </button>

</form>

입력 상자가 비어 있으면 양식이 성공적으로 제출되지 않습니다.

마찬가지로 HTML5는 더 이상 입력 상자의 자동 초점 획득을 해결하기 위해 JavaScript가 필요하지 않습니다. 입력 상자를 선택하거나 입력 초점을 얻는 경우 HTML5는 자동 초점 획득 속성 자동 초점을 추가했습니다.

<입력 유형 = "text"name = "somePut"자리 표시 자 = "Douglas Quaid"required = "requirecus ="autofocus ">

AutoFocus는 또한 개인 선호도에 따라 더 표준으로 보이는 AutoFocus = AutoFocus로 작성할 수 있습니다.

HTML5는 <audio> 태그를 제공하여 과거에 오디오 파일을 재생하기 위해 타사 플러그인에 의존 해야하는 문제를 해결합니다. 지금까지 몇 가지 최신 브라우저 만이이 태그를 지원합니다.

<audio controls = "controls"autoplay = "autoplay">

<소스 src = "file.ogg"_fcksavedurl = ""file.ogg " />

<소스 src = "file.mp3" />

<a href = "file.mp3">이 파일을 다운로드하십시오. </a>

</오디오>

두 가지 형식의 오디오 파일이있는 이유는 무엇입니까? Firefox 및 WebKit 브라우저에서 지원하는 형식에는 차이가 있으므로 Firefox는 .ogg 파일 만 지원할 수 있지만 WebKit은 .mp3 파일 만 지원할 수 있습니다. 솔루션은 두 가지 버전의 오디오 파일을 만들어 Firefox 및 WebKit 브라우저와 호환 될 수 있도록하는 것입니다. IE는이 태그를 지원하지 않습니다.

<Audio> 태그와 마찬가지로 HTML5는 <video> 태그로 비디오 파일 재생을 지원합니다. YouTube는 또한 새로운 HTML5 비디오 임베드를 발표했습니다. 그러나 HTML5 사양이 특정 비디오 디코더를 지정하지는 않지만 브라우저가 스스로 결정할 수 있다는 것은 약간 유감입니다. 이로 인해 브라우저 호환성 문제가 발생합니다. Safari와 IE9는 모두 H.264 비디오 (플래시 플레이어가 재생)를 지원하지만 Firefox와 Opera는 오픈 소스 Theora 및 Vorbis 형식을 지원합니다. 따라서 HTML5 비디오를 표시 할 때는 두 가지 형식도 준비해야합니다.

<비디오 컨트롤 예압>

<소스 src = "cohagenphonecall.ogv"type = "video/ogg"; Codecs = 'Vorbis, Theora' " />

<source src = "cohagenphonecall.mp4"type = "video /mp4; 'codecs ='avc1.42e01e, mp4a.40.2 '" />

<div> 브라우저가 오래되었습니다. <a href = "cohagenphonecall.mp4"> 대신이 비디오를 다운로드하십시오. </a> </div>

</video>

유형 속성을 생략 할 수는 있지만 추가하면 브라우저는 비디오 파일을 더 빠르고 정확하게 구문 분석 할 수 있습니다. 모든 브라우저가 HTML5 비디오를 지원하는 것은 아니므로 플래시 버전을 대신 사용해야합니다. 물론, 결정은 당신과 함께 있습니다.

Preload 속성 : Preload, 우선 비디오를 사전로드 해야하는지 확인해야합니다. 방문자가 많은 비디오가있는 페이지를 방문하는 경우 비디오를 사전로드해야하므로 방문자의 대기 시간을 절약하고 사용자 경험을 향상시킬 수 있습니다. 사전로드 함수를 구현하기 위해 <video> 태그에 예압 속성을 추가 할 수 있습니다.

<비디오 예압 = 예압>

...

</video>

[/암호]

디스플레이 제어 속성은 비디오에 재생 일시 정지 컨트롤을 추가 할 수 있습니다. 각 브라우저에 표시된 효과는 다소 다를 수 있습니다.

<video controls = "controls"preload = "preload">

...

</video>

HTML5에서는 정규 표현식을 직접 사용할 수 있습니다.

<양식 메소드 = 사후 액션 =>

<label for = username> 사용자 이름을 만듭니다 : </label>

<입력 ID = 사용자 이름 유형 = 텍스트 이름 = 사용자 이름 자리 표시 자 = 4 <> 필수 = updithofocus = autofocus pattern = [a-za-z] {4,10}>

<버튼 유형 = 제출> go </button>

</form>

각 브라우저에는 HTML5 속성에 대한 지원이 다르기 때문에 일부 호환성 문제가 발생합니다. 그러나 방법을 사용하여 브라우저가 이러한 특성을 지원하는지 여부를 감지 할 수 있습니다. 위의 예제의 코드가 브라우저에서 패턴 속성을 인식하는지 여부를 감지하려는 경우 JavaScript 코드를 사용하여 검출하는 데 사용될 수 있습니다.

alert (document.createElement ( 'input'))의 '패턴') // 부울;

실제로 이것은 브라우저 호환성을 결정하는 데 일반적으로 사용되는 방법이며 jQuery 라이브러리는 종종이 방법을 사용합니다. 입력 태그는 위 코드에서 생성되며 패턴 속성이 브라우저에서 지원되는지 확인합니다. 지원을받을 수있는 경우 브라우저는이 기능을 지원합니다. 그렇지 않으면 지원되지 않습니다.

<cript>

if (! 'Pattern'in Document.CreateElement ( 'input')) {

// 클라이언트/서버 측 유효성 검사를 수행합니다

}

</스크립트>

<mark> 태그는 사용자에 대한 중요성을 시각적으로 강조 해야하는 텍스트를 강조하는 데 사용됩니다. 이 태그에 싸인 문자열은 사용자의 현재 동작과 관련이 있어야합니다. 예를 들어, 일부 블로그에서 Open Your Mind를 검색하면 <mark> 태그로 JavaScript를 사용하여 각 작업을 랩핑 할 수 있습니다.

<H3> 검색 결과 </h3>

<H6> 그들은 Quato가 말한 직후에 중단되었습니다. </h6>

어떤 사람들은 질문이있을 수 있습니다. <Header> 및 <footer>와 같은 태그를 사용하면 <Div> 태그가 여전히 HTML5에서 작동합니까? 대답은 예입니다. 예를 들어, 특별한 컨텐츠를 포장 할 수있는 컨테이너를 만들려면 무료 및 유연한 <div>가 첫 번째 선택입니다. 기사 나 내비게이션 메뉴를 만들려면 더 많은 Semantic <article> 및 <av> 태그를 사용하는 것이 좋습니다.

많은 사람들은 HTML5가 여전히 오랜 시간이 걸릴 수 있다고 생각하므로 직접 무시합니다. 실제로 많은 웹 사이트가 HTML5를 사용하기 시작했습니다. 실제로, HTML5의 새로운 속성과 기능은 코드를보다 간결하게 만드는 것입니다. 이것은 항상 좋은 일이며 우리의 찬양에 합당해야합니다. 마지막으로, HTML5 에서이 엔트리 레벨 기사를 읽어 주셔서 감사합니다.