Essai 2, principes de base de HTML5

1. Introduction

Le prédécesseur du projet HTML5 est Web Applications 1.0. Il a été proposé par WHATWG en 2004 et accepté par le W3C en 2007, et une nouvelle équipe de travail HTML a été créée.
Définition: De
manière générale, il s'agit d'une nouvelle génération de solutions de service client riches
, au sens strict, il s'agit d'une nouvelle génération de produits html4.

2. Principes de base de HTML5

2.1, étiquette de structure sémantique
  1. section: représente une zone de contenu dans la page
  2. article: représente un élément de contenu indépendant qui n'a pas de contexte
  3. à part: le contenu de la zone d'article auxiliaire
  4. en-tête: indique le titre d'un bloc de contenu ou la page entière de la page
  5. pied de page: indique la note de bas de page d'un bloc de contenu ou de la page entière de la page
  6. nav: représente la partie barre de navigation de la page
  7. figure: représente un élément de contenu de flux indépendant, utilisez l'élément figurecaption pour lui ajouter un titre (la position du premier ou du dernier élément enfant)
  8. main: indique le contenu principal de la page (l'id n'est pas compatible)
2.2, contrôle de formulaire
Nouveau contrôle
  • datalist :
    définit la liste d'options du champ d'entrée; l'
    élément datalist spécifie la liste d'options du champ d'entrée, la liste est créée par l'élément option dans la liste de données. Si vous avez besoin de lier la liste de données au champ d'entrée, vous devez référencer l'attribut de liste du champ d'entrée à l'ID de la liste de données. L'élément option doit définir l'attribut value.
    [Remarque: les navigateurs ie et Safar ne prennent pas en charge]
  • keygen:
    définit le générateur de paires de clés, utilisé pour générer des clés;
    keygen spécifie le champ générateur de clés utilisé dans le formulaire, lorsque le formulaire est soumis, la clé privée est stockée localement et la clé publique est envoyée au serveur
  • sortie:
    utilisé pour calculer et afficher les résultats;
    il s'agit d'une étiquette sémantique qui définit différents types de sortie, tels que la sortie de scripts;
    [Remarque: ne prend pas en charge]
    Exemple:<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0<input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
    </form>
  • progress:
    Utilisé pour marquer la progression ou la progression de la tâche (généralement utilisé pour indiquer le processus);
    attributs associés (si les attributs ne sont pas définis, il y aura un effet aller-retour de la barre de progression):
  1. max: spécifie la quantité de travail requise par la tâche
  2. valeur: spécifie la quantité de travail effectuée
    [Remarque: non pris en charge par les navigateurs ie et Safar]
    Exemple:<input id="btn" type="button" value="开始下载">
    下载进度:<progress id="test" value="0" max="100"></progress>
    <script>
    var oTimer;
    btn.onclick = function(){
    if(oTimer){
    return;
    }
    oTimer = setInterval(function(){
    test.value++;
    if(test.value >= test.max){
    clearInterval(oTimer);
    }
    },50);
    }
    </script>
  • compteur:
    utilisé pour afficher la capacité restante ou l'inventaire restant, indiquant généralement l'état
    [Remarque: les navigateurs Safar ne prennent pas en charge]
    les attributs associés
  1. form: spécifie une ou plusieurs formes auxquelles appartient l'élément mètre
  2. high: spécifie la plage de valeurs considérées comme élevées
  3. low: spécifie la plage de valeurs considérées comme faibles
  4. max: la valeur maximale de la plage spécifiée
  5. min: la valeur minimale de la plage spécifiée
  6. optimum: la valeur optimale de la métrique spécifiée
  7. Spécifie la valeur actuelle de la métrique (obligatoire)
    [Remarque]: min est inférieur à faible et inférieur à élevé et inférieur à max

Contrôles traditionnels
contribution <input type="">
  • Type traditionnel
  1. bouton: définit un bouton cliquable, le seul par défaut n'a aucun comportement
  2. case à cocher: définir des cases à cocher.
    Autoriser les utilisateurs à sélectionner une ou plusieurs options dans un nombre donné de choix. Pour les boutons du même groupe, la valeur du nom est toujours
    [Remarque: les éléments d'entrée de type case à cocher ne peuvent pas définir le remplissage et la bordure (sauf ie10-)]
  3. fichier: définissez les champs de saisie et le bouton "parcourir" pour le téléchargement du fichier
  4. hidden: définissez le type d'entrée masqué pour ajouter des données supplémentaires qui ne sont pas visibles pour l'utilisateur mais qui doivent être soumises dans le formulaire
    [Remarque: l'attribut désactivé ne peut pas être utilisé avec l'élément d'entrée dont le type est masqué]
  5. image: définissez la forme de l'image et le bouton, vous
    pouvez définir les attributs largeur, hauteur, src, alt
  6. mot de passe: boîte de saisie du mot de passe, les
    lettres seront masquées après la saisie, généralement une série de points
  7. radio: définir un bouton radio,
    permettant à l'utilisateur de sélectionner une option parmi un nombre donné de choix, le même groupe de boutons, la même valeur de nom
    [Note: l'élément d'entrée du type radio ne peut pas définir de remplissage et de bordure (sauf ie10-browser)]
  8. reset: définissez un bouton de réinitialisation, le bouton de réinitialisation effacera toutes les données du formulaire
  9. soumettre: définissez le bouton d'envoi et envoyez les données du formulaire au serveur
  10. texte: définissez un champ de saisie sur une seule ligne dans lequel l'utilisateur peut saisir du texte

  • Nouveau type
  1. couleur: définissez
    le type d'entrée type de palette = "couleur" pour créer une palette de sélection de couleurs, et les valeurs de couleur sont soumises sous forme de valeurs hexadécimales encodées en URL. Par exemple, le noir sera envoyé en tant que% 23000000, où% 23 est le codage URL de #
    [Remarque: safari et IE ne prennent pas en charge ce type]
  2. date: définissez le champ de saisie pour sélectionner le jour, le mois et l'année
  3. datetime: définissez le champ de saisie de l'heure, du jour, du mois et de l'année sélectionnés (heure UTC)
  4. datetime-local: définissez le champ de saisie de l'heure, du jour, du mois et de l'année sélectionnés (heure locale)
  5. email: définissez le champ de saisie
    type = "email" qui contient l'adresse e-mail. Le type d'entrée est utilisé pour représenter le champ de saisie de l'adresse e-mail sémantique, et la valeur du champ e-mail sera automatiquement vérifiée. L'apparence est la même que l'entrée d'entrée de type = "text" Il n'y a pas de différence entre les
    types, l'élément d'entrée du type d'e-mail du clavier anglais sera appelé sur le téléphone mobile pour prendre en charge plusieurs attributs
    [Remarque: le navigateur IE9 et le navigateur Safari ne prennent pas en charge]
  6. mois: définissez le champ de saisie pour sélectionner le mois et l'année
  7. number: Définissez le champ de saisie
    type = "number" qui contient des valeurs numériques. Le type d'entrée d'entrée est utilisé pour traiter l'entrée numérique et le clavier numérique sera appelé sur le téléphone mobile
    [Remarque: IE ne prend pas en charge ce type]
    Attributs associés
    a, valeur maximale maximale autorisée
    b, min autorise la valeur minimale
    c, l'étape spécifie l'intervalle de nombre légal
    d, la valeur par défaut de valeur
  8. range: définissez le champ d'entrée qui contient une certaine plage de valeurs numériques. Le
    type d' entrée d'entrée avec type = "range" est utilisé pour traiter l'entrée numérique incluse dans une certaine plage, similaire au type d'entrée avec type = "number"
    [Remarque: IE9-non pris en charge Ce type]
    Attributs associés
    a, max spécifie la valeur maximale autorisée
    b, min spécifie la valeur minimale autorisée
    c, étape spécifie l'intervalle de nombre légal
    d, valeur spécifie la valeur par défaut
    Conseil: si min et max ne sont pas définis, les valeurs par défaut sont 0 et 100
  9. search:
     le type d'entrée d'entrée qui définit le domaine de recherche > type = "search" est utilisé pour représenter la zone de recherche sémantique, et il n'y a aucune différence d'apparence avec le type d'entrée d'entrée de type = "text"
  10. tel: définit le champ de saisie
    type = "tel" qui contient le numéro de téléphone pour représenter le champ de saisie sémantique du téléphone, et il n'y a aucune différence d'apparence par rapport au type d'entrée d'entrée type = "text". Le numéro sera appelé sur le téléphone mobile. clavier
  11. heure: définissez le champ de saisie pour sélectionner le mois et l'année
  12. url: définissez le champ d'entrée
    type = "url" qui contient l'adresse URL. Le type d'entrée d'entrée est utilisé pour représenter le champ d'entrée de l'adresse URL dans la sémantique, et la valeur du champ url sera automatiquement vérifiée. L'apparence est la même que le type d'entrée d'entrée de type = "texte" Aucune différence
    [notez que le navigateur IE9 et le navigateur Safari ne prennent pas en charge]
  13. semaine: définissez le champ de saisie pour sélectionner la semaine et l'année

  • Attributs traditionnels
  1. alt: l'attribut alt spécifie un texte alternatif pour l'entrée d'image. Sa fonction est similaire à l'attribut alt de l'élément image. Il fournit des informations alternatives lorsque l'utilisateur ne peut pas afficher l'image pour certaines raisons.
    [Remarque: l'attribut alt ne peut être utilisé qu'avec des éléments d'entrée avec type = "image" Avec l'utilisation de】
  2. size: l'attribut size est le nombre de caractères visibles pour les éléments d'entrée avec type = "text" ou "password"; pour les autres types, il s'agit de la largeur du champ de saisie en pixels
    [Notez que l'attribut size étant un attribut de conception visuelle, il est recommandé Utilisez plutôt CSS]
  3. src: L'URL de l'image affichée par l'attribut src comme bouton d'envoi
    [Notez que l'attribut src ne peut et doit être utilisé qu'en conjonction avec l'élément d'entrée de type = "image"]
  4. vérifié: le
    type d'entrée de balise de support est le type d'
    entrée radio le type est la case à
    cocher l'attribut vérifié spécifie l'élément d'entrée qui doit être présélectionné lorsque la page est chargée, ou il peut être défini via javascript après le chargement de la page
  5. name: l'attribut name est utilisé pour spécifier le nom de l'élément d'entrée, qui est utilisé pour identifier les données de formulaire soumises au serveur, ou pour référencer les données de formulaire via javascript côté client
    [Notez que seuls les éléments de formulaire avec l'attribut name peuvent être transmis lorsque le formulaire est soumis Leur valeur
    Tous les contrôles de formulaire ont un attribut de nom]
  6. type: utilisé pour spécifier le type de l'élément d'entrée
    [notez que si l'élément d'entrée ne définit pas l'attribut type, ou si la valeur définie n'est pas prise en charge dans le navigateur, le type d'entrée deviendra type = "text"]
  7. disabled: l'attribut disabled spécifie que l'élément d'entrée doit être désactivé. Le champ désactivé ne peut pas être modifié, et vous ne pouvez pas utiliser le bouton de tabulation pour basculer vers le champ, mais vous pouvez sélectionner ou copier son texte
    [Note 1: L'attribut désactivé ne peut pas être utilisé avec des éléments d'entrée avec type = "hidden"]
    [Note 2: Pour le navigateur IE7, il doit être défini sur disabled = "disabled", au lieu d'être désactivé directement, sinon il ne sera pas valide lors de l'utilisation du contrôle javascript]
  8. readonly: l'attribut readonly spécifie que le champ d'entrée est en lecture seule. Le champ en lecture seule ne peut pas être modifié, mais l'utilisateur peut toujours utiliser le bouton de tabulation pour basculer vers le champ et peut également sélectionner ou copier son texte. L'
    attribut readonly peut être utilisé avec l'élément d'entrée de type = "text" ou "password"
    [Remarque: IE7- Le navigateur ne prend pas en charge l'utilisation de javascript pour contrôler l'attribut en lecture seule]
  9. maxlength: L'attribut maxlength spécifie la longueur maximale du champ d'entrée, en termes de nombre de caractères
    [Remarque: cet attribut ne peut être utilisé qu'avec des éléments d'entrée avec une valeur type = "text" ou type = "password"
    ] L'
    attribut value définit la valeur de l'élément d'entrée . Pour différents types d'entrées, l'utilisation de l'attribut value est différente:
    type = "button", "reset", "submit" est utilisé pour définir le texte affiché sur le bouton
    type = "text", "password", "hidden" est utilisé Définir la valeur initiale du champ de saisie
    type = "checkbox", "radio", "image" permet de définir la valeur associée à l'entrée
    [Note 1: type = "checkbox" ou "radio" doit définir l'attribut value]
    [Note 2: L'attribut value ne peut pas être utilisé avec l'élément d'entrée de type = "file"]

  • Nouvel attribut
  1. autocomplete: l'attribut autocomplete peut activer ou désactiver la fonction de saisie semi-automatique du navigateur sur des éléments individuels ou sur l'ensemble du formulaire.
    Lorsque l'utilisateur commence à taper dans le champ, le navigateur affiche les options renseignées dans le champ en fonction de la valeur saisie précédemment. L'
    attribut de saisie semi-automatique s'applique à l'élément de formulaire et aux types d'éléments d'entrée suivants: texte, recherche, URL, téléphone, e-mail, mot de passe, date sélecteurs, plage, couleur
    [Remarque: le navigateur IE ne prend pas en charge cet attribut, cet attribut n'est valide que si l'élément a un attribut de nom]
  2. autofocus: l'attribut autofocus spécifie que lorsque la page est chargée, le domaine obtient automatiquement le focus. L'
    attribut autofous s'applique aux éléments button, input, keygen, select et textarea
  3. novalidate: l'attribut novalidate spécifie que le formulaire ou le champ de saisie n'est pas validé lors de l'
    envoi du formulaire. L' attribut novalidate s'applique aux éléments de formulaire et aux types d'éléments d'entrée suivants: texte, recherche, url, téléphone, e-mail, mot de passe, sélecteurs de dates, plage, couleur
    [Remarque: IE9 -Browser ne prend pas en charge]
  4. height L'
    attribut height est utilisé pour spécifier la hauteur d'image de la balise d'entrée de type image. L'
    attribut height sert à spécifier la hauteur d'image de la balise d'entrée de type image.
  5. width L'
    attribut width est utilisé pour spécifier la largeur d'image de la balise d'entrée de type d'image
    [Remarque: cet attribut est uniquement applicable à la balise d'entrée de type d'image]
  6. min: valeur minimale
  7. max: maximum
  8. step: intervalle de nombres
  9. multiple: l'attribut multiple stipule qu'en maintenant la touche Ctrl enfoncée, plusieurs valeurs peuvent être sélectionnées dans le champ de saisie.
    Cet attribut convient aux éléments d'entrée avec type = "email" et "file"
    [Remarque: cet attribut n'est pas pris en charge par le navigateur IE9]
  10. pattern
    spécifie le modèle utilisé pour vérifier le domaine d'entrée. Le
    modèle de modèle est une expression régulière. L'
    attribut pattern s'applique aux types d'éléments d'entrée suivants: texte, recherche, URL, tel, e-mail et mot de passe
    [Remarque: le navigateur IE9 et le navigateur Safari ne prennent pas en charge]
    <form action="#">
    <input pattern="\d{3}">
    <input type="submit">
    </form>
  11. placeholder L'
    attribut d'espace réservé fournit un texte d'espace réservé qui décrit la valeur attendue du champ d'entrée. L'espace réservé apparaîtra lorsque le champ de saisie> est vide et disparaîtra lorsque le champ de saisie est sélectionné. L'
    attribut d'espace réservé s'applique aux types d'éléments d'entrée suivants: texte, recherche, url, tel,> e-mail, mot de passe
    [Remarque: Navigateur IE9 Non pris en charge]
     Pour modifier la couleur de l'espace réservé, vous devez utiliser :: placeholder
    Exemple ::: placeholder {color: green;}
  12. L'
    attribut obligatoire obligatoire stipule que le champ de saisie doit être rempli avant la soumission (ne peut pas être vide) L'
    attribut obligatoire s'applique aux types d'éléments d'entrée suivants: texte, recherche, url, téléphone, e-mail, mot de passe, sélecteurs de date, numéro, case à cocher, radio, fichier
    [Remarque : Le navigateur IE9 et le navigateur Safari ne prennent pas en charge]
  13. L'
    attribut form spécifie un ou plusieurs formulaires auxquels appartient le champ de saisie. L'attribut form et l'attribut id
    form du formulaire doivent être applicables à tous les types de balises d'entrée. Si plusieurs formulaires doivent être cités, séparez-les par un espace
    [Remarque: navigateur Internet Explorer Cet attribut n'est pas pris en charge. Cet attribut n'est valide que si l'élément a un attribut de nom]
    <form id="form" action="#">
    <input type="submit">
    </form>
    <input name="test" form="form">
  14. Attribut de remplacement de formulaire: l'attribut de remplacement de formulaire permet de remplacer certains paramètres d'attribut de l'élément de formulaire. Parmi eux, formnovalidate s'applique au bouton ou aux éléments d'entrée, et d'autres attributs s'appliquent au bouton d'
    envoi ou de réinitialisation ou aux éléments d'entrée a, formaction: réécrire l'attribut action de la forme
    b, formenctype :: réécrire l'attribut enctype du formulaire, dans le cas de grands nombres absolus Il n'est pas nécessaire de définir
    c, formmethod: réécrire l'attribut de méthode de la forme
    d, formnovalidate: réécrire l'attribut novalidate de la forme
    e, formtarget: réécrire l'attribut cible de la forme

sélectionner

L'élément select est utilisé pour définir une liste déroulante, qui contient n'importe quel nombre d'éléments option et optgroup.
 Les attributs qui peuvent être utilisés:
  1. autofocus> spécifie que la zone de texte obtient automatiquement le focus après le chargement de la page
  2. disabled spécifie que la liste déroulante est désactivée
  3. formulaire spécifie Un ou plusieurs formulaires auxquels appartient la zone de texte
  4. multiple spécifie que plusieurs options peuvent être sélectionnées
  5. nom spécifie le nom de la liste déroulante
  6. taille spécifie le nombre d'options visibles dans la liste déroulante
   > [Remarque: la taille ne peut pas être 0, la valeur par défaut est 1]
  7. [Remarque: le navigateur Safari ne peut pas définir la hauteur]

option
  1. L'élément option définit une option dans la liste déroulante
  2. L'élément option a deux scénarios d'application, en plus de la liste déroulante select, il peut également être utilisé dans la liste d'options datalist
  3. Attribut pris en charge
    désactivé: spécifie que cette option doit être désactivée lors du premier chargement de l'
    étiquette: définit l'étiquette utilisée lors de l'utilisation d'optgroup, au lieu du contenu de l'élément d'option
    [Remarque: Firefox ne prend pas en charge l'attribut d'étiquette]
    selected: spécifie que l'option est affichée dans la liste pour la première fois Indiqué comme
    valeur d' état sélectionnée : définissez la valeur d'option envoyée au serveur
    [Remarque: lors de la définition de la valeur de valeur, le serveur soumet la valeur de value; sinon, le contenu de l'élément d'option est soumis au serveur]
  4. [Remarque: l'option ne peut pas définir les styles de modèle de boîte tels que la marge, le remplissage, la bordure, etc.]

optgroup

L'élément optgroup définit un groupe d'options pour combiner des options
[Remarque: optgroup ne peut pas définir les styles de modèle de boîte tels que la marge, le remplissage, la bordure, etc.]
Libellé des attributs associés
: spécifie la description du groupe d'options (obligatoire)
désactivé: spécifie que le groupe d'options est désactivé (facultatif)

bouton

Définir le bouton

  1. Le texte ou les images ou tout autre contenu multimédia peuvent être placés à l'intérieur de l'élément bouton
  2. L'élément interdit est le mappage d'image, car il est sensible aux actions de la souris et du clavier qui interfèrent avec le comportement des boutons de formulaire
  3. Toujours avoir l’attribut type
    IE7 - le type par défaut du navigateur est le bouton ------ IE7 - soumettre le texte entre les éléments du bouton
    et le type par défaut des autres navigateurs est soumettre ------ et les autres navigateurs soumettront Le contenu de l'attribut value
étiquette
  1. L'élément label définit l'étiquette de l'élément d'entrée et établit l'association entre l'étiquette de texte et le contrôle de formulaire. Le fait de cliquer sur le texte dans l'élément d'étiquette déclenchera ce contrôle. Lorsque le texte est sélectionné, le navigateur tournera automatiquement le focus vers le contrôle de formulaire lié à l'étiquette
  2. L'élément label a deux utilisations: l'une consiste à utiliser l'attribut for et l'autre à imbriquer des contrôles de formulaire à l'intérieur de l'étiquette. Mais le navigateur IE6 ne reconnaît que la méthode d'utilisation de l'attribut for. Attributs
    associés
    pour: spécifie à quel élément de formulaire l'étiquette est liée.
    Form: spécifie une ou plusieurs formes auxquelles appartient le champ d'étiquette.
    [Remarque: l'attribut for de l'étiquette doit être lié à l'attribut id de l'élément associé. le même】

textareal

textarea définit un contrôle de saisie de texte multiligne, la zone de texte peut contenir une quantité illimitée de texte
[Remarque: les navigateurs n'autorisent pas l'imbrication de textarea textarea]
[Remarque: les paramètres de largeur et de hauteur du navigateur IE8 n'incluent pas les barres de défilement; les autres paramètres de largeur et de hauteur du navigateur Inclure la barre de défilement]
attributs associés

  1. nom: spécifie le nom de la zone de texte
  2. value: représente la valeur de la zone de texte
  3. disabled: stipule que la zone de texte est désactivée dans
    IE7 - le navigateur ne prend pas en charge l'écriture de setAttribute ('disabled', ''), il doit être défini sur setAttribute ('disabled', 'disabled')
  4. readonly: stipule que la zone de texte est en lecture seule
    [Remarque: le navigateur IE7 ne prend pas en charge la configuration de l'attribut readonly via javascript]
  5. autofous: spécifie que la zone de texte obtient automatiquement le focus après le chargement de la page
    [Remarque: IE9-Browser ne prend pas en charge cet attribut]
  6. requis: la zone de texte requise est requise
    [Remarque: le navigateur IE9 et le navigateur Safari ne prennent pas en charge cet attribut]
  7. espace réservé: spécifie une courte invite décrivant la valeur attendue de la zone de texte
    [Remarque: IE9-Browser ne prend pas en charge cet attribut]
  8. maxlength: spécifie le nombre maximum de caractères dans la zone de texte
    [Remarque: IE9-Browser ne prend pas en charge cet attribut]
  9. cols: spécifie le nombre de colonnes visibles dans la zone de texte
  10. lignes: spécifiez le nombre de lignes visibles dans la zone de texte
    [Remarque: vous pouvez utiliser des colonnes et des lignes pour spécifier la taille de la zone de texte, mais une meilleure façon est d'utiliser les propriétés CSS de hauteur et de largeur]
  11. wrap: spécifie comment gérer
    l'habillage dans la zone de texte lors de la soumission dans le formulaire. Lorsque wrap = "soft", cela signifie que lorsque le formulaire est soumis, bien que le texte soit enveloppé à l'écran, il n'y aura pas de saut de ligne dans les données soumises (valeur par défaut) ); et lorsque wrap = "hard", cela signifie que lorsque le formulaire est soumis, les données soumises contiennent des sauts de ligne de texte% 0D% 0A
fieldsetl

1 L'élément fieldset est utilisé pour regrouper les éléments associés dans le formulaire afin d'améliorer l'accessibilité. La plupart des navigateurs utilisent une simple bordure pour afficher
les attributs associés au fieldset

  1. désactivé: jeu de champs désactivé
  2. form: spécifie un ou plusieurs formulaires auxquels appartient le fieldset
  3. name: spécifie le nom du fieldset
Légende

L'élément de légende est utilisé pour définir le titre de l'élément fieldset
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>

2.3, étiquette multimédia
l'audio
  • Lecteur de musique
  • Attributs associés
    autoplay:
    commandes de lecture automatique: contrôle d'affichage
    boucle:
    précharge de lecture en boucle : l'audio est chargé lorsque la page est chargée et prêt
    à être lu (si la lecture automatique est utilisée, cet attribut est ignoré) src: l'url audio à lire
    [Remarque: l'élément ne prend pas en charge Lire les fichiers au format wma]
vidéo
  • Lecture vidéo
  • Attributs associés
    autoplay:
    commandes de lecture automatique: commandes d'affichage
    hauteur: hauteur du lecteur
    largeur: largeur du lecteur
    boucle: lecture en boucle
    préchargement: la vidéo est chargée lorsque la page est chargée et prête à être lue (si la lecture automatique est utilisée, cet attribut est ignoré)
    src: obligatoire Afficher l'
    affiche de l' URL de la vidéo : spécifiez l'image affichée lorsque la vidéo est téléchargée ou l'image affichée avant que l'utilisateur ne clique sur le bouton de lecture.
    Par exemple
    <video id="test" src="movie.mp4" width="280" height="200" poster="diejia.jpg"></video>
la source
  • Fournir des ressources multimédias pour les
    médias vidéo et audio : spécifiez le type de ressources multimédias (pas de prise en charge du navigateur)
    src: spécifiez l'url du
    type de fichier multimédia : spécifiez le type MIME de la ressource multimédia
  • Types
    audio
    audio/ogg
    audio/mpeg
    vidéo courants
    video/ogg
    video/mp4
    video/webm
    tels que
  1. <audio> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mp3"> audio player not available. </audio>
  2. <video> <source src="video.webm" type="video/webm; codecs='vp8,vorbis'"> <source src="video.ogg" type="video/ogg; codecs='theora,vorbis'"> <source src="video.mp4"> video player not available. </video>
    Astuce: l'utilisation de balises multimédias doit inclure un certain contenu d'invite au milieu de la balise, afin qu'il puisse être affiché lorsque le navigateur de l'utilisateur ne le prend pas en charge

Je suppose que tu aimes

Origine blog.csdn.net/BookstoreSpirit/article/details/100134316
conseillé
Classement