Prise en charge du navigateur HTML5

Prise en charge du navigateur HTML5

Vous pouvez faire en sorte que certains navigateurs plus anciens (qui ne prennent pas en charge HTML5) prennent en charge HTML5.

Prise en charge du navigateur HTML5Support

Les navigateurs modernes prennent en charge HTML5.

De plus, tous les navigateurs, anciens et nouveaux, traiteront automatiquement les éléments non reconnus comme des éléments en ligne.

De ce fait, vous pouvez « apprendre » au navigateur à gérer les éléments HTML « inconnus ».

Vous pouvez même apprendre au navigateur IE6 (Windows XP 2001) à gérer les éléments HTML inconnus.

Définit les éléments HTML5 comme éléments de bloc

HTML5 définit 8 nouveaux éléments sémantiques HTML. Tous ces éléments sont des éléments de niveau bloc.

Afin de permettre aux anciens navigateurs d'afficher correctement ces éléments, vous pouvez définir la valeur de l'attribut d'affichage CSS sur block :

Instance

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

Ajouter nouveaux éléments au HTML

Vous pouvez ajouter de nouveaux éléments au HTML.

Cette instance ajoute un nouvel élément au HTML et définit un style pour l'élément. L'élément est nommé <myHero> :

Instance

<!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>

<🎜. >Problèmes du navigateur Internet Explorer

Vous pouvez utiliser la méthode ci-dessus pour ajouter des éléments HTML5 au navigateur IE, mais :

Internet Explorer 8 et versions antérieures d'IE Le navigateur ne le fait pas prend en charge la méthode ci-dessus.

Nous pouvons utiliser le "HTML5 Enabling JavaScript", " shiv" créé par Sjoerd Visscher pour résoudre ce problème :

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

Le code ci-dessus est un commentaire, qui est utilisé lorsque la version du navigateur IE est plus petit que IE9, lira le fichier html5.js et l'analysera.

Remarque : les utilisateurs nationaux doivent utiliser la bibliothèque de ressources statiques Baidu (la bibliothèque de ressources Google est instable en Chine) :

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

html5shiv est une meilleure solution pour le navigateur IE. html5shiv résout principalement le problème selon lequel les nouveaux éléments proposés par HTML5 ne sont pas reconnus par IE6-8. Ces nouveaux éléments ne peuvent pas être utilisés comme nœuds parents pour envelopper des éléments enfants et les styles CSS ne peuvent pas être appliqués.

Solution Shiv parfaite

Exemple

<!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>

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

Prise en charge du navigateur HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]