Quelles sont les nouvelles balises en html5 ? Nouvelles applications de balises en HTML5-Tutoriel H5-php.cn

Quelles sont les nouvelles balises en html5 ? Nouvelles applications de balises en HTML5

不言

Libérer： 2018-08-08 10:26:50

original

11389 Les gens l'ont consulté

html5 est la cinquième modification du langage Hypertext Markup Language (HTML), donc de nouvelles balises ont été ajoutées à html5. Alors, quelles sont les nouvelles balises en html5 ? Ce que je vais vous présenter ci-dessous, ce sont les nouvelles balises ajoutées en html5 par rapport au html.

1. Nouvelles balises ajoutées dans HTML5

En-tête - peut représenter un conteneur pour le contenu d'introduction ou un ensemble de liens de navigation.

Nav - Le contenu de la balise est principalement utilisé pour la navigation.

Article - identifie le contenu principal de la page. En prenant un blog comme exemple, chaque article est un élément de contenu important et l'article peut être utilisé pour identifier chaque article.

Section - Utilisé pour marquer les sections importantes sur la page. Ce balisage est similaire à la division d'un document en chapitres.

À part - Indique qu'il est lié au contenu principal de la page, mais ne fait pas partie de la page. Il indique souvent un lien connexe.

Pied de page - À l'opposé de l'en-tête, il représente le pied de page d'un document ou d'un chapitre. Par exemple, les informations de copyright sont placées dans cette balise.

Mise en page div traditionnelle

<body>
    <!-- 页头 -->
    <div class=&#39;header&#39;></header> 
    <!-- 导航 -->
    <div class=&#39;nav&#39;></div>
    <!-- 主体内容 -->
    <div class=&#39;main&#39;>
        <!-- 文章 -->
        <div class=&#39;article&#39;>
            <!-- 节 -->
            <div class=&#39;section&#39;></div>
        </div>
        <!-- 边栏 -->
        <div class=&#39;sidebar&#39;></div>
    </div>
    <!-- 页脚 -->
    <div class=&#39;footer&#39;></div></body>

Copier après la connexion

Utilisez les nouvelles balises en HTML5 pour implémenter la mise en page

<body>
    <header></header>
    <nav></nav>
    <div>
        <article>
            <section></section>
        </article>
        <aside></aside>
    </div>
    <footer></footer></body>

Copier après la connexion

2. Applications améliorées des formulaires

Dans HTML 4, quelques éléments de formulaire simples sont fournis pour gérer la saisie de base. Pour certains types de saisie, tels que la saisie de la date et de l'heure, l'expérience interactive ne peut pas répondre aux besoins. Par conséquent, afin d'obtenir de meilleurs résultats, vous ne pouvez utiliser que javascript pour écrire des implémentations de composants. Améliorés dans HTML 5, de nouveaux éléments de formulaire ont été ajoutés pour fournir plus de types d'entrée.

(1) Extension de l'attribut Type d'entrée

recherche - présente un champ de recherche.

tel - Entrez le numéro de téléphone, vous pouvez utiliser le modèle et la longueur maximale pour limiter la saisie appropriée

<input type=&#39;tel&#39; name=&#39;tel&#39; value="" placeholder="请输入手机号码" pattern=&#39;1[3-8][0-9]{9}&#39; title=&#39;请输入11位手机号&#39;>

Copier après la connexion

url - Entrez l'adresse URL.

e-mail - Entrez votre adresse e-mail.

date - Entrez la date.

couleur - Entrez la couleur.

numéro - Entrez un numéro.

plage - entrée du curseur

(2) Validation du formulaire de saisie via les attributs

obligatoire - marque l'élément actuel comme requis.

modèle - Valide la saisie du formulaire à l'aide d'expressions régulières.

(3) Autres attributs utiles de l'élément d'entrée

autofocus - Lorsque la page se charge, se concentre automatiquement sur l'élément d'entrée actuel.

formulaire - associe un élément d'entrée à un formulaire spécifique.

placeholder - Espace réservé de saisie pour demander à l'utilisateur une saisie.

(4) HTML 5 nouveaux éléments et attributs spéciaux contenteditable

progress - l'élément représente une barre de progression.

<progress value=&#39;30&#39; max=&#39;100&#39;></progress>

Copier après la connexion

mètre - élément représentant une règle. La valeur maximale max est par défaut 1.

<meter value="3" min="0" max="10">3/10</meter><meter value="0.6">60%</meter>

Copier après la connexion

Attribut spécial HTML 5 contenteditable, grâce auquel un élément ordinaire peut être rendu modifiable.

<p contenteditable="true">这里的内容式可编辑的</p>

Copier après la connexion

3. Utilisation de l'audio et de la vidéo

(1) audio (balise audio)

<audio controls>
    <source src="vincent.mp3" />
    <source src="vincent.ogg" />
    您的浏览器不支持 audio 标签</audio>

Copier après la connexion

Les attributs de audio qui contrôlent le comportement de l'élément sont les suivants

controls - Cet attribut contrôle s'il faut afficher l'espace audio standard.

lecture automatique - S'il faut jouer automatiquement. Faux par défaut.

loop - S'il faut boucler. Faux par défaut.

preload - Méthode de préchargement. Il existe trois situations : aucun signifie pas de préchargement ; les métadonnées chargent uniquement les métadonnées de l'audio ; Automatique par défaut.

volum - volume, valeur entre 0 - 1

Méthodes pour lire et mettre en pause l'audio

var audio = document.getElementById(&#39;audio&#39;)
audio.play() // 播放audio.pause() // 暂停

Copier après la connexion

(2 ) vidéo (balise vidéo)

currentTime contrôle l'heure de début de la lecture

<video width="400" height="300" controls currentTime=&#39;5&#39;>

    <source src="dizzy.mp4#t=5" type="video/mp4" />  <!-- 从 5s 开始 -->
    <source src="dizzy.ogv#t=5,10" type="video/ogg" /> <!-- 从 5s 到 10s -->
    <source src="dizzy.webm#t=,15" type="video/webm"> <!-- 到 15s 结束 -->
    <p>您的浏览器不支持 HTML 5 视频</p></video>

Copier après la connexion