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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
CSS中实现动画效果-附案例
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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
js 金额文本框实现代码
2012/02/14 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python中pygame模块用法实例
2014/10/09 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python类属性的延迟计算
2016/10/22 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
打架检讨书100字
2014/01/19 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
MongoDB balancer的使用详解
2021/04/30 MongoDB
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技