Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "the method of defining HTML5 elements as block elements". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Define a HTML5 element as a block element

HTML5 defines eight new HTML semantic (semantic) elements. All these elements are block-level elements.

To enable older browsers to display these elements correctly, you can set the value of the display property of CSS to block:

Example

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

Add a new element to HTML

You can add new elements to HTML.

This instance adds a new element to HTML and defines a style for the element, which is named:

Example

Add a new element to HTML document.createElement ("myHero") myHero {display: block; background-color: # ddd; padding: 50px; font-size: 30px;} my first title

My first paragraph.

My first new element

The JavaScript statement document.createElement ("myHero") adds a new element to the IE browser.

Internet Explorer browser issu

You can use the above methods to add HTML5 elements to IE browsers, but:

Browsers of Note Internet Explorer 8 and earlier IE versions do not support the above methods.

We can use "HTML5 Enabling JavaScript", "shiv" created by Sjoerd Visscher to solve this problem:

The above code is a comment that reads the html5.js file and parses it when the version of the IE browser is less than IE9.

Note: domestic users please use the static resource library of this site (Google resource library is unstable in China):

Html5shiv is a better solution for IE browsers. Html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by IE6-8, these new elements cannot be used as parent nodes to wrap child elements, and the CSS style can not be applied.

Perfect Shiv solution

Example

Rendering HTML5 my first article, the rookie tutorial, is not only a technology, but also a dream! that's all for "how to define a HTML5 element as a block element." Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.