Maison > interface Web > Tutoriel H5 > Balises nouvelles et abandonnées pour h5

Balises nouvelles et abandonnées pour h5

php中世界最好的语言
Libérer: 2018-03-13 09:55:02
original
3213 Les gens l'ont consulté

Cette fois, je vais vous apporter les nouvelles balises et les balises abandonnées de h5. Quelles sont les précautions lors de l'utilisation des nouvelles balises et des balises abandonnées de h5. Ce qui suit est un cas pratique, jetons un coup d'œil. .

1. Balise vidéo

Qu'est-ce que la balise vidéo ?
Fonction : Lire la vidéo
a. 🎜>

Attributs de la balise vidéo

src : utilisé pour indiquer à la balise vidéo l'adresse de la vidéo à lire

autoplay : utilisée pour indiquer si la balise vidéo doit lire automatiquement la vidéo
contrôles : utilisé pour indiquer à la balise vidéo si elle doit afficher la barre de contrôle
affiche : utilisée pour indiquer à la balise vidéo si la vidéo n'est pas lue avant le l'image d'espace réservé est affichée
boucle : généralement utilisée pour faire une vidéo publicitaire, utilisée pour indiquer à la balise vidéo si elle doit être mise en boucle après la lecture de la vidéo
préchargement : préchargez la vidéo, mais vous devez faire attention au conflit entre le préchargement et la lecture automatique Si l'attribut de lecture automatique est défini, l'attribut de préchargement sera invalide
muet :Mute
largeur/hauteur : exactement le même que dans
balise img
.

b. Le deuxième format
//设置 自动播放 + 控制条<video></video>//控制条 + 占位图<video></video>//广告视频 : 自动播放 + 无限循环 + 静音 + 宽度<video></video>
Copier après la connexion

2.1. Format :

2.2. L'importance de l'existence du deuxième format :
<video>
    <source></source>
    <source></source>
</video>
Copier après la connexion
Parce que les données vidéo sont très, très importantes. , les cinq principaux fabricants de navigateurs ne sont pas disposés à prendre en charge les formats vidéo d'autres personnes, donc aucun format vidéo n'est tous pris en charge. Tous les navigateurs sont pris en charge

À l'heure actuelle, afin de résoudre ce problème, le W3C a introduit le deuxième format de balise vidéo

Le deuxième format de balise vidéo a pour but de résoudre le problème d'adaptation du navigateur. L'élément

video prend en charge trois formats vidéo

à la balise vidéo. balise source, puis lorsque le navigateur lira la vidéo à l'avenir, il choisira parmi ces trois formats. Lire un format pris en charge


2.3 Remarque :

2.3.1 Bien que le deuxième format soit actuellement. via la balise vidéo peut spécifier un format vidéo pris en charge par tous les navigateurs. Il existe une autre condition préalable pour que tous les navigateurs lisent des vidéos via la balise vidéo, à savoir que le navigateur doit prendre en charge la balise HTML5, sinon elle ne sera pas lue

2.3.2 Dans le passé, certains navigateurs ne prenaient pas en charge la balise HTML5, donc afin de permettre à certains navigateurs du passé de lire des vidéos via la balise vidéo, nous pourrons l'implémenter via un framework JS appelé html5media à l'avenir.

2. Balise audio
//示例代码:
<video>
    <source></source>
    <source></source>
    <source></source>
</video>
Copier après la connexion

1. Qu'est-ce que la balise audio ?

Fonction : Lire l'audio


2. Format :

3. Notes :
<audio></audio>
<audio>    <source></source></audio>
Copier après la connexion
L'utilisation de la balise audio est fondamentalement la même que l'utilisation de la balise vidéo. La plupart des attributs pouvant être utilisés dans la vidéo peuvent être utilisés dans. la balise audio, et les fonctions sont les mêmes

sauf que 3 attributs ne peuvent pas être utilisés, hauteur/largeur/affiche

3. 🎜>
//第一种格式<audio></audio>
//第二种格式<audio>    <source></source></audio>
Copier après la connexion
Que sont les balises de détails et de résumé ?

Fonction : utilisez les balises de résumé pour décrire les informations récapitulatives, utilisez la balise de détails pour décrire les informations détaillées

Par défaut, elle est pliée. vous devez cliquer sur


Format :

Exemple de code

<details>
    <summary>概要信息</summary>
    详情信息</details>
Copier après la connexion

Détails du résumé.gif

<details>
    <summary>郑伊健</summary>简介:郑伊健,1967年10月4日出生于中国香港,籍贯广东恩平,香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视,因拍摄“阳光柠檬茶”广告而入行,拜罗文为师。1991年...</details>
Copier après la connexion

4. Balise de chapiteauBalises nouvelles et abandonnées pour h5

1. Qu'est-ce que la balise de chapiteau ([mɑr'ki]) ?

Fonction : Chapiteau

2. >
Content

3. Attribut :

direction : définissez la direction de défilement vers la gauche/droite/haut/bas
scrollamount : définissez le défilement. vitesse, plus la valeur est grande, plus rapide

boucle : définissez le nombre de défilements, la valeur par défaut est -1, ce qui est un défilement infini

comportement : définissez le type de défilement pour qu'il s'arrête lors du défilement jusqu'à la limite, alternez avec rebondir lors du défilement jusqu'à la limite

4. Remarque : la balise
marquee n'est pas une balise recommandée par le W3C, et cette balise ne peut pas être interrogée dans le document officiel du W3C. Cependant, les principaux navigateurs prennent très en charge cette balise. eh bien

Exemple de code :


direction de défilement du chapiteau

<!--滚动方向--><marquee>随便写点内容</marquee><marquee direction="right">随便写点内容</marquee><marquee direction="up">随便写点内容</marquee><marquee direction="down">随便写点内容</marquee><hr><!--设置滚动速度--><marquee scrollamount="1">随便写点内容</marquee><marquee scrollamount="100">随便写点内容</marquee><hr><!--设置滚动次数--><marquee loop="1">随便写点内容</marquee><hr><!--设置滚动类型--><!--滚动到边停止--><marquee behavior="slide">随便写点内容</marquee><!--往返滚动--><marquee behavior="alternate">随便写点内容</marquee><!--滚动图片--><marquee>
    ![](images/NJ.jpg)</marquee>
Copier après la connexion

< 🎜>

1.为什么HTML中有一部分标签会被废弃?
因为当前的HTML中的标签只有一个作用, 就是用来添加语义
而早期的HTML标签中有一部分标签是没有语义的,
有一部分标签是用来修改样式的
所以这部分标签就被淘汰了

<strong>被废弃标签</strong>
<br> <hr> <font>
<b> <u> <i> <s>以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的
Copier après la connexion

注意点:
以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签 如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用

<strong>推出的新标签</strong>
strong == b
ins == u
em == i
del == s
strong语义: 定义重要性强调的文字
ins语义(inseted): 定义插入的文字
em语义(emphasized  音标:[&#39;ɛmfə,saɪz]): 定义强调的文字
del语义(deleted): 定义被删除的文字
Copier après la connexion

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

iOS webView怎样加载HTMLString

关于正则表达式的几个小练习

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal