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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python中的元组介绍
2019/01/28 Python
python 中如何获取列表的索引
2019/07/02 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Python实现像awk一样分割字符串
2020/09/15 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
经管应届生求职信范文
2014/05/18 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
MySQL创建管理RANGE分区
2022/04/13 MySQL