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 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
HTML基本元素标签介绍
Feb 28 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 中使用随机数的三个步骤
2006/10/09 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python常用知识点汇总
2016/05/08 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
详解Python模块化编程与装饰器
2021/01/16 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
大学生党课思想汇报
2013/12/29 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL