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 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 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
一些星际专用术语解释
2020/03/04 星际争霸
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Highcharts入门之简介
2016/08/02 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
浅谈node的事件机制
2017/10/09 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python双向链表实现实例代码
2013/11/21 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
在centos7中分布式部署pyspider
2017/05/03 Python
pyhton列表转换为数组的实例
2018/04/04 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
python可视化text()函数使用详解
2020/02/11 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
一个SQL面试题
2014/08/21 面试题
简单英文演讲稿
2014/01/01 职场文书
《我的信念》教学反思
2014/02/15 职场文书
职业女性的职业规划
2014/03/04 职场文书
霸王洗发水广告词
2014/03/14 职场文书
个人培训自我鉴定
2014/03/28 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书