Html5新增标签有哪些


Posted in HTML / CSS onApril 13, 2017

今天新学习了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的标签。给人的第一感觉就是望文知义。这个标签能够很容易让人记住。

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

以上所述是小编给大家介绍的Html5新增标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 #HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 #HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 #HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 #HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 #HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 #HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 #HTML / CSS
You might like
简单谈谈PHP vs Node.js
2015/07/17 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python下载库的步骤方法
2019/10/12 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
python能开发游戏吗
2020/06/11 Python
Python绘制组合图的示例
2020/09/18 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
工作岗位说明书模板
2014/05/09 职场文书
社区娱乐活动方案
2014/08/21 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
争先创优个人总结
2015/03/04 职场文书
运动会加油稿50字
2015/07/21 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS