HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 내장 SVG HTML5 튜토리얼

HTML5 브라우저가 지원합니다

때문에, 일부 오래된 브라우저는 HTML을 지원하지 않습니다5）HTML을 지원합니다5.

HTML5 브라우저가 지원합니다

모던한 브라우저는 모든 HTML을 지원합니다5.

또한, 모든 브라우저, 오래된 것부터 최신 것까지, 인식할 수 없는 요소를 자동으로 인라인 요소로 처리합니다.

따라서, 그런 이유로 "교화" 브라우저가 처리 "unknown" 의 HTML 요소.

다음에 IE에도6 　(Windows XP 2001) unknown HTML 요소를 처리하는 브라우저.

HTML을5 요소가 블록 요소로 정의되었습니다

HTML5 결정되었습니다 8 개 new HTML semantic (semantic) 요소. 모든 이 요소는 블록 요소.

이러한 요소를 오래된 버전의 브라우저에서 올바르게 표시할 수 있도록 CSS의 display 속성 값을 block으로 설정할 수 있습니다:

예제

<html>
<head>　
<meta　charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
header,　section,　footer,　aside,　nav,　main,　article,　figure　{
　　　　display:　block;　
}
</body>
</html>

테스트를 보세요.‹/›

HTML에 커스터마이zed 요소 추가

HTML에 커스터마이zed 요소를 추가할 수 있습니다.

이 예제는 HTML에 추가된 커스터마이zed 요소를 정의하고, 이 요소에 스타일을 적용하며, 요소 이름은 <myLabel>입니다 :

예제

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>HTML에 새로운 요소 추가하기(oldtoolbag.com)</title>
<script>
　　　　document.createElement("myLabel")
</script>
<style>
myLabel{
　　　　display:　block;
　　　　background-color:　#ddd;
　　　　padding:　50px;
　　　　font-size:　30px;
}
</style>　
</head>
　
<body>
　
<h1>제 하나의 첫 번째 HTML5제목</h1>
　
<p>제 하나의 첫 번째 HTML5구절.</p>
　
<myLabel>제 하나의 첫 번째 정의 요소</myLabel>
　
</body>
　　</html>

테스트를 보세요.‹/›

JavaScript 문장 document.createElement("myLabel")는 IE 브라우저에 새로운 요소를 추가하기 위한 것입니다.

ie 브라우저를 html을 지원하는 브라우저로 만듭니다.5브라우저

위 방법을 사용하여 IE 브라우저에 HTML을 추가할 수 있습니다.5 요소를 추가할 수 있습니다. 하지만:

Internet Explorer 8 및 이전 IE 버전의 브라우저는 이 방법을 지원하지 않습니다.

Sjoerd Visscher가 만든 "HTML5 JavaScript 활성화", " shiv"을 사용하여 이 문제를 해결합니다:

<!--[if　lt　IE　9]>
　　<script　src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

위 코드는 IE 브라우저의 버전이 IE보다 작을 때 사용되는 주석입니다.9 때에 html5.js 파일을 읽고 해석합니다.

주의:국내 사용자는 이 사이트의 정적 자원 라이브러리(구글 자원 라이브러리는 국내에서 불안정합니다)를 사용하십시오:

<!--[if　lt　IE　9]>
　　<script　src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

IE 브라우저의 html에 대한5shiv는 좋은 솔루션입니다.html5shiv주로 HTML을 해결합니다.5제안된 새로운 요소는 IE에서6-8이 새로운 요소는 부모 요소로 자식 요소를 감싸거나 CSS 스타일을 적용할 수 없습니다.

완벽한 Shiv 솔루션

예제

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML 렌더링5</title>
　　<!--[if　lt　IE　9]>
　　<script　src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
　　<![endif]-->
</head>
　
<body>
　
<h1>제 하나 번의 기사</h1>
　
<article>
기본 튜토리얼 웹(oldtoolbag.com) —— 기본을 잘 배우면 더 멀리 가실 수 있습니다!!
</article>
　
</body>
</html>

테스트를 보세요.‹/›

html5shiv.js 참조 코드는 <head> 요소에 위치해야 합니다. 왜냐하면 IE 브라우저가 HTML을解析할 때5 새 요소를 추가할 때는 먼저 이 파일을 로드해야 합니다.

HTML5 내장 SVG HTML5 튜토리얼