HTML5 词义元素

2021-04-24 02:11


HTML5 词义元素


短视頻,自新闻媒体,达人种草1站服务 HTML5 词义元素

词义= 实际意义.

词义元素 = 元素的实际意义.

甚么是词义元素?

1个词义元素可以为访问器和开发设计者清晰的叙述其实际意义。

而像 div 和 元素是属于无词义元素。

词义元素案例: form , t able , and img - 清晰的叙述了元素所意味着的內容。

访问器对词义元素的适用

Inter Explorer 9+, Firefox, Chrome, Safari 和 Opera 适用词义元素。

留意: Inter Explorer 8及更早IE版本号不适用该词义元素,可是文章内容底部出示了适配的处理方式。

HTML5中新的词义元素

很多现有网站都包括下列HTML编码: div id= nav ,

, 来指明导航栏连接, 头顶部, 和尾部. HTML5出示了新的词义元向来确立1个Web网页页面的不一样一部分:

header

nav

section

article

aside

figcaption

figure

footer

HTML5元素

section 标识界定文本文档中的节(section、区间)。例如章节、页眉、页脚或文本文档中的别的一部分。

依据W3C HTML5文本文档: section 包括了1组內容及其题目。

案例

section

h1 WWF

p The World Wide Fund for Nature (WWF) is....

/section

HTML5

article 标识界定单独的內容。.

article 元素应用案例:

Forum post

Blog post

News story

Comment

案例

article

h1 Inter Explorer 9 /h1

p Windows Inter Explorer 9 (abbreviated as IE9) was released to

the public on March 14, 2011 at 21:00 PDT..... /p

/article

HTML5

nav 标识界定导航栏连接的一部分。

nav 元素用于界定网页页面的导航栏连接一部分地区,可是,并不是全部的连接都必须包括在

案例

nav

a href= /html/ HTML / a |

a href= /css/ CSS /a |

a href= /js/ Javascript /a |

a href= /jquery/ jQuery /a

/nav

HTML5

aside 标识界定网页页面主地区內容以外的內容(例如侧面栏)。

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

header 元素叙述了文本文档的头顶部地区

header 元素留意用于界定內容的详细介绍展现地区.

在网页页面中你可使用好几个 header 元素.

下列案例界定了文章内容的头顶部:

案例

article

header

h1 Inter Explorer 9 /h1

p time pubdate datetime= 2011-03⑴5 /time /p

/header

p Windows Inter Explorer 9 (abbreviated as IE9) was released to

the public on March 14, 2011 at 21:00 PDT..... /p

/article

HTML5

footer 元素叙述了文本文档的底部地区.

footer 元素应当包括它的包括元素

1个页脚一般包括文本文档的作者,经典著作权信息内容,连接的应用条款,联络信息内容等

文本文档中你可使用好几个 footer 元素.

案例

footer

p Posted by: Hege Refsnes /p

p time pubdate datetime= /time /p

/footer

HTML5

figure 标识要求单独的流內容(图象、图表、相片、编码这些)。

figure 元素的內容应当与主內容有关,但假如被删掉,则不可对文本文档小产生危害。

figcaption 标识界定 figure 元素的题目.

figcaption 元素应当被置于 figure 元素的第1个或最终1个子元素的部位。

案例

figure

img src= img_pulpit.jpg alt= The Pulpit Rock width= 304 height= 228

figcaption Fig1. - The Pulpit Pock, Norway.

 

/figure

大家能够刚开始应用这些词义元素吗?

以上的元素全是块元素(除

以便让这些块及元素在全部版本号的访问器中起效,你必须在款式表文档中设定1属下性 (下列款式编码可让旧版本号访问器适用本章详细介绍的块级元素):

header, section, footer, aside, nav, article, figure

{

display: block;

}

Inter Explorer 8 及更早IE版本号中的适配难题

IE8 及更早IE版本号没法在这些元素中3D渲染CSS实际效果,以致于你不可以应用 header , section , footer , aside , nav , article , figure , 或别的的HTML5 elements.

处理方法:你可使用HTML5 Shiv Javascript脚本制作来处理IE的适配难题。HTML5 Shiv免费下载详细地址:

免费下载后,将下列编码放入的网页页面中:

!--[if lt IE 9]

script src= html5shiv.js /script

![endif]--

以上编码在访问器小于IE9版本号时会载入html5shiv.js文档. 你务必将其置放于 元素中,由于 IE访问器必须在头顶部载入后3D渲染这些HTML5的新元素

转载请注明:




扫描二维码分享到微信

在线咨询
联系电话

020-66889888