Maison >interface Web >Tutoriel H5 >Nouvelles fonctionnalités des compétences du didacticiel HTML5 (1) _html5

Nouvelles fonctionnalités des compétences du didacticiel HTML5 (1) _html5

WBOY
WBOYoriginal
2016-05-16 15:45:391809parcourir

HTML5 est une version standard de HTML [1] (une application sous le Standard Universal Markup Language) qui remplace les standards HTML 4.01 et XHTML 1.0 formulés en 1999, il est encore en phase de développement, mais la plupart des navigateurs le prennent déjà en charge ; Certaines technologies HTML5.

1. Nouvelle déclaration de type de document
Les trois déclarations de type de document spécifiées par HTML4 :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  2. >
  3. >

Les trois déclarations de type de document spécifiées par XHTML 1.0 :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. > 
  2. >
  3. >

Le document XHTML 1.1 définit strictement le type, qui est équivalent au type de définition transitionnel du document XHTML1.0

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >

Déclaration de type de document pour HTML 5

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >

2. Il n'est pas nécessaire d'écrire un script et un lien

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <lien rel=”stylesheet” href="path/to/stylesheet.css" type="text/css" />   == 》  <link rel=”stylesheet” href="chemin/vers/stylesheet.css"/>  
  2. <script src="path/to/script.js" type=”text/javascript”>script> ;    ==》  <script src="path/to/ script.js”>script>  

3. 语义化header和footer标签
在HTML4或XHTML里,我们定义网页的页眉或页脚时会这样:

Code XML/HTML复制内容到剪贴板
  1. <div id="header">  
  2. …   
  3. div>  
  4. 或   
  5. <div id="footer" >  
  6. …   
  7. div>  

而在HTML5里有直接定义上面元素块的标签,可以使代码更加的简洁和语义化

Code XML/HTML复制内容到剪贴板
  1. <en-tête>  
  2. …   
  3. en-tête>  
  4. 或   
  5. <pied de page>  
  6. …   
  7. pied de page>  

4. hgroup标签,它主要是表明标题的集合。如果有主标题、副标题,可以用这个来包裹一下。但是La version HTML5.1 de la version HTML5.1 est adaptée aux besoins du client. 。
使用标点符号分割,一般适合于文章标题,不太适合网站标题。

Code XML/HTML复制内容到剪贴板
  1. <h1>Questions de test front-end : nouvelles fonctionnalités de HTML5< /h1>

Utilisez des balises span pour marquer les descriptions de sous-titres

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <h1>Questions du test frontal
  2.  <span>Nouvelles fonctionnalités du HTML5durée>
  3. h1>

Utilisez des balises d'en-tête pour envelopper le titre et la description

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <en-tête>
  2.  <h1>Questions du test frontalh1> 
  3.  <p>Nouvelles fonctionnalités du HTML5p>
  4. en-tête>

5. Marquer l'élément

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. L'élément <mark> représente une séquence de texte dans un document marqué ou mis en évidence à des fins de référence, en raison de sa pertinence dans un autre contexte
  2. .

peut être utilisé comme balise de surbrillance, et les caractères qu'il contient seront mis en surbrillance.
6. Figure d'élément graphique
En HTML4 ou XHTML, les codes suivants sont utilisés pour agrémenter les commentaires de l'image .

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <img src="chemin/vers/image" alt=”À propos de l’image”/>
  2. <p>Image de fleur p>

Le code ci-dessus ne connecte pas la mémoire de texte et d'image, mais la combinaison figure et figcaption ajoutée par HTML5 peut parfaitement connecter les images et le texte.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <figure>
  2. <img src="chemin/vers/image" alt=”À propos de l'image”/>
  3. <figcaption>
  4.  <p>belle fleurp> 
  5. <figcaption>
  6. figure>

7. Redéfinition de la petite balise
La balise en HTML5 rend les marginaux sous forme de petit texte, responsable des déclarations, des précautions, des restrictions légales ou des fonctionnalités déclarées. sont généralement de petits textes.
Small a été défini en HTML4 ou XHTML, mais il n'y a pas d'explication complète de son utilisation. En HTML, il est principalement utilisé pour les petits textes tels que les déclarations de version et les adresses e-mail au bas des pages Web.
8. Placeholder
En HTML4 ou XHTML, si nous voulons afficher un message d'invite lorsque la zone de saisie est vide, le champ de la zone de saisie sera focalisé. l'effet de la disparition de l'invite ne peut être écrit qu'avec js. L'espace réservé ajouté en HTML5 obtient directement cet effet
L'attribut espace réservé est applicable aux types suivants : texte, recherche, URL, téléphone, e-mail et mot de passe.

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <entrée espace réservé=”texte”>
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn