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 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
js left,right,mid函数
2008/06/10 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
socket + select 完成伪并发操作的实例
2017/08/15 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python3判断IP地址的方法
2021/03/04 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
2015年企业新年寄语
2014/12/08 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android