Home  >  Article  >  Web Front-end  >  HTML5—Usage and compatibility of new semantic elements

HTML5—Usage and compatibility of new semantic elements

黄舟
黄舟Original
2017-02-27 15:55:331679browse

1. New semantic elements:

HTML5 provides new semantic elements to clarify different parts of a Web page.


  • ##1aa9e5d373740b65a0cc8f0a02150c53:

    describes the header area of the document, is used to define the introduction display area of ​​the content

  • c787b9a589a3ece771e842a6176cf8e9:

    The part that defines the navigation link.

  • ##2f8332c8dcfd5c7dec030a070bf652c3:
  • Define the section (section, section) in the document. For example, a section, header, footer, or other section in a document, a

    section usually contains a set of content and its title.

  • 23c3de37f2f9ebcb477c4a90aac6fffd:
  • Define independent content.

  • 15221ee8cba27fc1d7a26c47a001eb9b:
  • Define content outside the main area of ​​the page (such as the sidebar).

  • 24203f2f45e6606542ba09fd2181843a: The
  • tag specifies independent stream content (images, charts, photos, code, etc.).

  • 614eb9dc63b3fb809437a716aa228d24:

    Define the title of the 24203f2f45e6606542ba09fd2181843a element.

    ##c37f8231a37e88427e62669260f0074d:
  • Describes the bottom area of ​​the document
  • ,

    A footer usually contains the author and copyright information of the document , linked terms of use, contact information, etc..

    In a web page, the positions of these new semantic tag elements are as shown below:


2. Browser compatibility issues with new elements:


In order for these blocks and elements to take effect in all versions of browsers, you need to add them to the style Set the following attributes in the table file (the following style code allows older browsers to support the block-level elements introduced in this chapter):

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



IE8 and earlier IE versions cannot render CSS effects in these elements, so you cannot use 1aa9e5d373740b65a0cc8f0a02150c53, 2f8332c8dcfd5c7dec030a070bf652c3, c37f8231a37e88427e62669260f0074d, 15221ee8cba27fc1d7a26c47a001eb9b, c787b9a589a3ece771e842a6176cf8e9 , 23c3de37f2f9ebcb477c4a90aac6fffd, 24203f2f45e6606542ba09fd2181843a, or other HTML5 elements. You can use

HTML5 Shiv

to solve this problem:

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

The above is the use and compatibility of HTML5-new semantic elements. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn