HTML5 browser support

HTML5 browser support

You can make some older browsers (that do not support HTML5) support HTML5.

HTML5 browser supportSupport

Modern browsers support HTML5.

In addition, all browsers, both old and recent, will automatically handle unrecognized elements as inline elements.

Because of this, you can "teach" the browser to handle "unknown" HTML elements.

You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements.

Defining HTML5 elements as block elements

HTML5 defines 8 new HTML semantic elements. All these elements are block-level elements.

In order to allow older versions of browsers to display these elements correctly, you can set the CSS display attribute value to block:

Example

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

Adding new elements to HTML

You can add new elements to HTML.

This example adds a new element to HTML and defines a style for the element. The element is named <myHero>:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>为 HTML 添加新元素</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>标题</h1>
<p>内容</p>
<myHero>元素</myHero>
</body>
</html>

Internet Explorer browser problem

You can use the above method to add HTML5 elements for IE browser, but:

Internet Explorer 8 and earlier IE versions The browser does not support the above method.

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

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

The above code is a comment, which is used when the IE browser version is smaller than IE9 will read the html5.js file and parse it.

Note: Domestic users please use Baidu static resource library (Google resource library is unstable in China):

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

html5shiv is a better solution for IE browser. 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 CSS styles cannot be applied.

Perfect Shiv Solution

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shiv</title>
  <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>
<body>
<h1>文章标题：简单是一种方法</h1>
<article>
橄榄树嘲笑无花果树说：
“你的叶子到冬天时就落光了，光秃秃的树枝可真难看，哪像我终
年翠绿，美丽无比。
”不久，一场大雪降临了，橄榄树身上都是翠绿的叶子，雪堆积在上面，
最后由于重量太大把树枝压断了，
橄榄树的美丽也遭到了破坏。
而无花果树由于叶子已经落
尽了，
全身简单，雪穿过树枝落在地上，
结果无花果树安然无恙。
外表的美丽不一定适应环
境有时是一种负担，
而且往往会因为生存带来麻烦或灾难。
相反，
平平常常倒能活得自由自
在。所以，
不如放下你外表虚荣的美丽，
或者是不实的身份和地位，踏踏实实地去体会真实
简单的生活，相信这样你将获得更多的乐趣。
</article>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>shiv</title>  </head> <body> <h1>文章标题：简单是一种方法</h1> <article> 橄榄树嘲笑无花果树说： “你的叶子到冬天时就落光了，光秃秃的树枝可真难看，哪像我终年翠绿，美丽无比。 ”不久，一场大雪降临了，橄榄树身上都是翠绿的叶子，雪堆积在上面，最后由于重量太大把树枝压断了，橄榄树的美丽也遭到了破坏。而无花果树由于叶子已经落尽了，全身简单，雪穿过树枝落在地上，结果无花果树安然无恙。外表的美丽不一定适应环境有时是一种负担，而且往往会因为生存带来麻烦或灾难。相反，平平常常倒能活得自由自在。所以，不如放下你外表虚荣的美丽，或者是不实的身份和地位，踏踏实实地去体会真实简单的生活，相信这样你将获得更多的乐趣。 </article> </body> </html>

submit Reset Code

Automatic operation

HTML5 browser support

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]