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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 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/09/25 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
js实现拖拽元素选择和删除
2020/08/25 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python生成器generator用法示例
2018/08/10 Python
Python实现搜索算法的实例代码
2020/01/02 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python列表推导式实现代码实例
2020/09/09 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
三星法国官方网站:Samsung法国
2019/10/31 全球购物
高等教育专业自荐信范文
2014/03/26 职场文书
企业精神口号
2014/06/11 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
小学生校园广播稿
2014/09/28 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android