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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
JS 统计时间
2021/03/09 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
python实现内存监控系统
2021/03/07 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Django之腾讯云短信的实现
2020/06/12 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
入党转预备思想汇报
2014/01/07 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
责任担保书范文
2014/05/21 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
SQL基础的查询语句
2021/11/11 MySQL
Spring Boot 实现 WebSocket
2022/04/30 Java/Android