HTML5 의미 요소의 예 소개

의미 요소란 무엇인가요?

의미 요소는 브라우저와 개발자에게 그 의미를 명확하게 설명할 수 있습니다.

의미 요소 예: dc6dce4a544fdca2df29d5ac0ea9906b 및 - 콘텐츠를 고려할 필요가 없습니다.

의미 요소 예: ff9c23ada1bcecdd1a0fb5d5a0f18437 및 67be90dd51bfd719b86d4ad9b5e98931, 924ff17625d603f964501dd897c96cc6 또는 171c8477c82d74a9b2eea84eaab93167 HTML 코드가 포함되어 있습니다. , 그리고 꼬리.

HTML5는 웹 페이지의

HTML5 23c3de37f2f9ebcb477c4a90aac6fffd 요소를 명확하게 하기 위해 새로운 의미 요소를 제공합니다. 콘텐츠. .

23c3de37f2f9ebcb477c4a90aac6fffd 요소 사용 예:

포럼 게시물

블로그 게시물

뉴스 스토리

댓글

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

HTML5 c787b9a589a3ece771e842a6176cf8e9 요소

c787b9a589a3ece771e842a6176cf8e9 태그는 탐색 링크 부분을 정의합니다.

c787b9a589a3ece771e842a6176cf8e9 요소는 페이지의 탐색 링크 섹션을 정의하는 데 사용됩니다. 그러나 모든 링크가 c787b9a589a3ece771e842a6176cf8e9 요소에 포함될 필요는 없습니다.

예

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML5 15221ee8cba27fc1d7a26c47a001eb9b 요소

15221ee8cba27fc1d7a26c47a001eb9b는 페이지의 기본 영역(예: 사이드바) 외부에 있는 콘텐츠를 정의합니다.

aside 태그의 내용은

<p>My family and I visited The Epcot center this summer.</p>
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

HTML5 1aa9e5d373740b65a0cc8f0a02150c53 요소

1aa9e5d373740b65a0cc8f0a02150c53 문서의 영역

1aa9e5d373740b65a0cc8f0a02150c53 요소는 콘텐츠의 소개 표시 영역을 정의하는 데 사용됩니다.

여러 개의 1aa9e5d373740b65a0cc8f0a02150c53 요소를 사용할 수 있습니다.

다음 예에서는 기사의 헤더를 정의합니다.

Instance

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

HTML5 c37f8231a37e88427e62669260f0074d 요소

c37f8231a37e88427e62669260f0074d 문서의 하단 영역을 설명합니다.

< ;footer> 요소에는 포함 요소가 포함되어야 합니다.

바닥글에는 일반적으로 문서의 작성자, 저작권 정보, 링크된 이용 약관, 연락처가 포함됩니다.

문서의 ;footer> 요소를 여러 개 사용할 수 있습니다.

인스턴스

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

HTML5 614eb9dc63b3fb809437a716aa228d24 >

a7e92aa379a95c24a947f9b436d5f4f4 태그는 독립적인 흐름 콘텐츠(이미지, 차트, 사진, 코드 등)를 지정합니다.

a7e92aa379a95c24a947f9b436d5f4f4 요소의 콘텐츠는 주요 콘텐츠와 관련되어야 하지만, 제거해도 문서 흐름에 영향을 주지 않아야 합니다.

614eb9dc63b3fb809437a716aa228d24 태그 정의 a7e92aa379a95c24a947f9b436d5f4f4 요소의 제목입니다.

614eb9dc63b3fb809437a716aa228d24元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

我们可以开始使用这些语义元素吗?

以上的元素都是块元素(除了614eb9dc63b3fb809437a716aa228d24).

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

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

Internet Explorer 8 及更早IE版本中的问题

IE8 及更早IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 1aa9e5d373740b65a0cc8f0a02150c53, 2f8332c8dcfd5c7dec030a070bf652c3, c37f8231a37e88427e62669260f0074d, 15221ee8cba27fc1d7a26c47a001eb9b, c787b9a589a3ece771e842a6176cf8e9, 23c3de37f2f9ebcb477c4a90aac6fffd, 24203f2f45e6606542ba09fd2181843a, 或者其他的HTML5 elements.

解决办法:你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址：code.google.com/p/html5shiv/

下载后，将以下代码放入的网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于93f0f5c25f18dab9d176bd4f6de5d30e 元素中，因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

위 내용은 HTML5 의미 요소의 예 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!