Maison > Article > interface Web > Quelles sont les nouvelles balises ajoutées en html5

Quelles sont les nouvelles balises ajoutées en html5

php中世界最好的语言original: 2018-03-26 15:42:293125parcourir

Cette fois, je vais vous expliquer quelles sont les balises html5 nouvellement ajoutées et quelles sont les précautions pour utiliser les balises html5 nouvellement ajoutées. Ce qui suit est un cas pratique, jetons un coup d'œil.

J'ai appris 9 nouvelles balises aujourd'hui.

< ;video> est identique à la balise audio. est une balise vidéo. Les principaux attributs couramment utilisés sont les mêmes que ci-dessus

Il s'agit en fait d'une amélioration relativement importante, mais elle présente également des inconvénients. Cette balise combine en fait le "texte dans la balise d'entrée " et la balise select pour produire une zone de liste déroulante d'entrée pouvant saisir des options et des listes déroulantes. . L'inconvénient est que si cela n'est pas contrôlé via JS, les options déroulantes définies ne prendront effet que lorsque la zone de saisie est vide

Cette balise a en fait de nombreuses utilisations pratiques et est souvent utilisée avec la balise de résumé. Écrivez le titre du document dans la balise récapitulative. Détails de la rédaction de documents avec la balise p

Une balise d'affichage en surbrillance, vous n'avez plus besoin d'utiliser l'attribut font pour marquer un certain paragraphe de texte.

Créez rapidement une liste. L'utilisation est de combiner le menu li avec

l'étiquette qui stocke l'adresse

Il s'agit d'une étiquette barre de progression . Ses principaux attributs sont la valeur et le max. value représente la position actuelle de la barre de progression et max représente la longueur totale de la barre de progression. La balise

contient la balise temporelle.

Exposition initiale aux balises html5. La première impression que vous obtenez est que vous savez ce que signifie le texte. Cette étiquette est facile à retenir.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Html5学习之路</title>
</head>
<body>
<header style="text-align: center; color: blue;">欢迎来到Html5的学习之路，我是header标签。</header>
这是一个定义选项列表的标签datalist 这个的作用就是将text文本框与select标签结合起来
<input type="text" list="phone">
<datalist id="phone">
    <option></option>
    <option>IPhone</option>
    <option>华为    </option>
    <option>小米    </option>
    <option>三星</option>
</datalist>
<br/>
<br/>
<font color="red">这里我发现了两者一个不同之处在于，datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font>
<br/>
而这个select选项框是不管什么内容它都会存在的
<select>
    <option>IPhone</option>
    <option>华为    </option>
    <option>小米    </option>
    <option>三星</option>
</select>
<br>
<br>
<br>
------------------------
<br><br><br>
这是一个定义文档细节的标签。detail标签。它的主要作用很简单。
<details>
    <summary>这是一个detail标签，下面就是他的使用方法</summary>
        <p>detail标签是什么？</p>
        <p>detail标签有什么作用？</p>
        <p>detail标签能干什么？</p>
        <p>detail标签我改怎么用它？</p>
</details>
<br>
detail标签常与sunmmary标签用在一起。比如这个标签是高亮标签<mark>mark</mark>比重不一样。
<br><br>
接下来这个标签是定义列表标签。menu。
<menu>
    <li>西游记</li><li>水浒传</li><li>红楼梦</li><li>三国演义</li>
</menu>
<br><br>
进度条标签我们用的比较多。比如这个。<mark>progress</mark>
<progress value="5" max="10">value=5 max=10</progress>
<br>
<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
<footer>我是底部footer标签</footer>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Phonegap pour rechercher des contacts

Explication détaillée de la lecture audio de Phonegap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php html5 select 循环 JS input li phonegap

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

Article précédent：Comment gérer l'incompatibilité d'IE8 avec rgba()Article suivant：Comment gérer l'incompatibilité d'IE8 avec rgba()

Articles Liés

Voir plus