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,js)
Dec 12 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 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/04/10 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python实现文件的分割与合并
2019/08/29 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
我们的节日端午节活动方案
2014/03/02 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
会计专业自荐信
2014/06/03 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书