H5新增标签_h5新增了哪些标签?有没有用到过-优快云博客

HTML5新增了许多功能，包括canvas元素、video和audio元素、离线存储支持等。在结构标签方面，引入了<header>, <section>, <article>, <aside>, <footer>等，用于增强网页的语义化。多媒体标签如<video>和<audio>提供了多媒体播放功能，而<embed>用于插入Flash。此外，还介绍了一些web应用和文本输出的新标签。" 4307423,232098,理解Jabber/XMPP协议：核心概念与流程解析,"['即时通讯', '协议', '安全', 'XML', '认证机制']

H5新增标签

前言

H5的雏形形成于2004年，在2008年发布正式版，并于2014年定稿。目前支持IE9+及绝大多数市场浏览器。同时，它是唯一一个支持PC、Mac、iPhone、Android等主流平台的跨平台语言。用H5开发的移动软件对比于原生APP应用得名“WebAPP”。

一、新增功能

1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、语意化更好的内容元素，比如 article、footer、header、nav、section
5、新的表单控件，比如 calendar、date、time、email、url、search

二、<!DOCTYPE>改变

<!DOCTYPE>必须是在HTML文档的第一行，它不是html标签，而是指示web浏览器对页面使用哪个HTML版本进行指令的编写

// 之前版本
// html4.01 严格版doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">

// 新版本
// HTML 5 版本不需要DTD
<!DOCTYPE html>

三、新增标签

1、结构标签

H5之前有意义的结构标签是div，H5之后扩展了以下的标签。

标签	描述
article	定义文章
aside	定义页面内容以外的内容，如菜单栏
dialog	定义一个对话框（会话框）类似微信
figure	规定自包含内容，比如图示、图表、照片、代码清单等。
figcaption	定义 figure 元素的标题。
footer	定义一个区域的底部
header	规定区域的头部
hgroup	标签用于对网页或区段（section）的标题进行组合
main	规定文档的主内容
mark	定义重要的或强调的文本
nav	定义导航链接
section	定义文档中的节

【注意事项】

不要滥用结构标签
< header > < section > < aside > < article > < footer >这些标签不要嵌套自身
标签使用级别：< header > < section > < footer > 优于 < aside > < article > < figure > < hgroup > < nav > 优于
< div > < figcaption >

2、多媒体标签

标签	说明
video	定义一个视频
audio	定义音频内容
source	替代audio中src属性定义媒体资源
canvas	一个画布API，绘制酷炫的效果
embed	定义外部的可交互的内容或插件如flash

a、视频 video 标签的属性

<video src="./video/demo1.mp4" autoplay="autoplay" controls="control">
  当前浏览器不支持HTML5标签
</video>

标签	说明
autoplay	自动播放
controls	控制台，资源使用< source >标签引入则控制台在视频口外
loop	播放次数。loop或-1表示无限循环
src	资源路径，若使用了，则该属性失效
width	视频播放器宽度
height	视频播放器高度

【说明】

支持格式 MP4，WebM，Ogg
可以使用< sourc >标签解决浏览器格式兼容问题

<video autoplay="autoplay" loop="loop" controls="controls">
  <source src="./audio/demo.mp3" type="audio/mpeg">
  <source src="./audio/demo.ogg" type="audio/ogg">
  <source src="./audio/demo.wav" type="audio/wav">
  建议您更换浏览器
</video>

b、音频 audio 标签的属性

<audio src="./audio/demo.mp3" autoplay="autoplay" loop="-1" contrils="controls='controls'">
  当前浏览器暂不支持，建议您更换浏览器
</audio>

属性	值	说明
autoplay	autoplay	出现即生效，打开自动播放
controls	controls	出现即生效，显示控制控件，如播放暂停
loop	loop/-1	是否循环播放
muted	muted	是否静音播放
preload	preload	页面载入时执行预加载。优先级低于autoplay
src	url	资源位置

【说明】

支持3中音频格式： ogg、MP3、WAV
浏览器不支持audio时显示标签内部文字
可以使用标签解决浏览器格式兼容问题

<audio autoplay="autoplay" loop="loop" controls="controls">
  <source src="./audio/demo.mp3" type="audio/mpeg">
  <source src="./audio/demo.ogg" type="audio/ogg">
  <source src="./audio/demo.wav" type="audio/wav">
  建议您更换浏览器
</audio>

c、embed标签
用于在网页上插入flash

<embed src="./falsh/demo1/swf" width="400" height="300"></embed>

3、web应用标签

a、列表标签

标签	说明
datalist	为input标定义一个下拉列表，配合option使用
details	定义一个元素的详细信息，配合summary使用

(1) datalist 标签
datalist原生的样式已经比较好看，可以替代select使用，且拥有select没有的效果

<input placeholder="请选择您要学习的语言" list="langage"/>
<datalist id="langage">
    <option value="c++">c++</option>
    <option value="c#">c#</option>
    <option value="java">java</option>
    <option value="javascript">javascript</option>
</datalist>

（2） detail 标签

<details open="open">
    <summary>标题描述的区域</summary>
    <p>细节描述区域，可以对内容进行介绍。作为标题的一个可开关内容</p>
</details>

4、文本和输出标签

a、文本标记标签

标签	说明
mark	标记部分内容，显示黄色背景

<p>我是p标签内容<mark>你好</mark></p>

b、输出标签

标签	说明
output	定义一类输出类型，计算表单结果，配合oninput使用

<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> 

<form oninput="totalPrice.value = parseInt(price.value) * parseInt(number.value)">
    <input type="text" id="price" value="5000">*
    <input type="text" id="number" value="1"> = 
    <output name="totalPrice" for="price number"></output>
</form>
<p>【注】转自网络代码</p>

转自网络图片

5、删除的标签

纯表现的元素：Basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：frame、frameset、noframes（真要使用框架的话，请使用iframe）
产生混淆的元素：acronym、applet、isindex、dir

6、重新定义的标签

标签	说明
< b >	内联文本，粗体
< i >	内联文本，斜体
< hr >	表示主题结束，显示一条水平线
< menu >	表示用户界面菜单
< small >	小字体，例如打印注释或者法律条款
< strong >	强调重要性