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-image颜色渐变的实现代码
Sep 13 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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图片上传程序
2008/03/27 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
简单使用Python自动生成文章
2014/12/25 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python生成随机图形验证码详解
2017/11/08 Python
Python实现翻转数组功能示例
2018/01/12 Python
python实现批量图片格式转换
2020/06/16 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
用python实现刷点击率的示例代码
2019/02/21 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
养殖项目策划书范文
2014/01/13 职场文书
中学家长会邀请函
2014/01/17 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python