HTML5 브라우저 지원

예전 브라우저에서 HTML5를 처리할 수 있습니다.

HTML5 브라우저 지원

すべての現代ブラウザはHTML5をサポートしています。

また、すべてのブラウザ、新旧に関わらず、自動的に未識別要素をインライン要素として処理します。

そのため、あなたは古いブラウザが「未知の」HTML要素を処理するのを助けることができます。

注釈：あなたは石の時代のIE6に未知のHTML要素を処理する方法を教えることもできます。

HTML5要素をブロックレベル要素として定義します

HTML5は八个新しい意味 HTML要素。すべてがブロックレベル要素

CSSを display 属性が設定されています。 block、古いブラウザでの正しい動作を確保するために：

예제

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

HTMLに新しい要素を追加する方法

ブラウザのトリックを使ってHTMLにどんな新しい要素でも追加できます：

この例では、HTMLに名前が <myHero> の新しい要素にスタイルを定義します：

예제

<!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>

직접 시도해 보세요

追加されたJavaScript文 document.createElement("myHero")、IEにのみ適用されます。

Internet Explorerの問題

上述のソリューションはすべての新しいHTML5要素に適用できますが、：

注意：Internet Explorer 8およびそれ以前のバージョンでは、未知の要素にスタイルを追加することを許可しません。

幸いにも、Sjoerd Visscherが"HTML5 Enabling JavaScript"を創造しました。 "the shiv"：

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上コードは一つのコメントですが、IE9の初期バージョンはそれを読み取ります（そして理解します）。

完成的 Shiv 解決方案

예제

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>제 1 번의 기사</h1>
<article>
런던은 영국의 수도입니다. 
그것은 영국에서 가장 인구가 많은 도시입니다. 
13백만 명 이상의 인구를 가진 도시로서.
</article>
</body>
</html>

직접 시도해 보세요

shiv 코드를 참조하는 링크는 <head> 요소 내에 위치해야 합니다. 왜냐하면 Internet Explorer는 모든 새로운 요소를 읽기 전에 인식해야 하기 때문입니다.

HTML5 Skeleton

예제

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
  <h1>HTML5 Skeleton</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 시맨틱</a></li>
  <li><a href="html5_geolocation.asp">HTML5 지오로케이션</a></li>
  <li><a href="html5_canvas.asp">HTML5 그래픽</a></li>
</ul>
</nav>
<section>
<h1 유명한 도시</h1>
<article>
<h2>런던</h2>
<p>런던은 영국의 수도이자 영국에서 가장 인구가 많은 도시입니다. 그것은 영국에서 가장 인구가 많은 도시입니다,</p>
대도시 인구가 1300만 명 이상입니다.</p>
</article>
<article>
<h2>파리</h2>
<p>파리는 프랑스의 수도이자 인구가 많은 도시입니다.</p>
</article>
<article>
<h2>도쿄</h2>
<p>도쿄는 일본의 수도이자 대도쿄 지역의 중심입니다,</p>
세계에서 가장 인구가 많은 도시 지역입니다.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. 모든 권리 보존.</p>
</footer>
</body>
</html>

직접 시도해 보세요