Résumé des nouvelles balises en HTML5-Tutoriel H5-php.cn

Résumé des nouvelles balises en HTML5

巴扎黑

Libérer： 2017-08-08 16:35:02

original

1607 Les gens l'ont consulté

Cet article a compilé neuf nouvelles balises pour html5. C'est très bien. Les amis qui en ont besoin peuvent s'y référer

J'ai appris 9 nouvelles balises aujourd'hui,

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 menu li combiné avec

l'étiquette qui stocke l'adresse

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>

Copier après la connexion

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!