本文摘自PHP中文网，作者php中世界最好的语言，侵删。
这次给大家带来html5新增加的标签有哪些，使用html5新增加标签的注意事项有哪些，下面就是实战案例，一起来看一下。今天新学习了9个标签、
<audio> 简单的说就是一个音频标签，他的主要常用属性有src=""音频的路径 controls="controls" 控制参数，他就是可以让其在页面显示一个播放器的效果autoplay="autoplay"自动播放属性 loop="loop"循环次数
<video>同audio标签一样。是一个视频标签。主要常用的属性同上面一样
<datalist>定义选项列表。这个其实是一个比较大的改进，不过也有不足，这个标签其实组合了《input标签中的text》和select标签、生产的一个可以输入和下拉选项的输入组合框》。不足之处在于如果不通过JS控制，只有当输入框中为空，定义的下拉选项中才会生效
<details>定义文档细节。这个标签其实用的地方也比较多，常和summary标签用。summary标签里面写文档的标题。p标签写文档的细节
<mark>一个高亮的显示标签，再也不用标记某一段文字要用font属性了。
<menu>快速创建一个list列表。用法是menu li结合
<address>存放地址的标签
<progress>这个是一个进度条标签。他的主要属性有value和max。value表示当前进度条位置，max表示进度条的总共长度。
<time>标签放时间的标签。
初步接触html5的标签。给人的第一感觉就是望文知义。这个标签能够很容易让人记住。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <%@ 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>
|
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
怎样使用phonegap查找联系人
phonegap播放音频详解
以上就是html5新增加的标签有哪些的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
HTML5手机触屏touch事件的详细介绍
HTML5 canvas画布详解（一）
移动端中touch事件的详解
HTML5中返回timeranges对象的属性buffered
HTML5和css3扁平化风格博客教程的资源分享
HTML5离线存储和cookie储存分析
HTML5 web框架有哪些
利用HTML5 实现3d 网络拓扑树（图文详解）
怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解（二）
前端必看h5 meta小结
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html5新增加的标签有哪些
