详解HTML5新增标签


Posted in HTML / CSS onNovember 27, 2017

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。 HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似和 标签,但有一定含义,例如

(网站导航块)和
。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如 标记。

<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>    
<font color="red">这里我发现了两者一个不同之处在于,datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font>
<br/>

而这个select选项框是不管什么内容它都会存在的

<select>
<option>IPhone</option>
<option>华为 </option>
<option>小米 </option>
<option>三星</option>
</select>
------------------------
<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>

总结

以上所述是小编给大家介绍的HTML5新增标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3的新特性介绍
Oct 31 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 #HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 #HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 #HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 #HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 #HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 #HTML / CSS
You might like
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP防盗链代码实例
2014/08/27 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
解析Python中的异常处理
2015/04/28 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
python版简单工厂模式
2017/10/16 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Pytorch之parameters的使用
2019/12/31 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
几个Shell Script面试题
2012/08/31 面试题
中文系学生自荐信范文
2013/11/13 职场文书
军训自我鉴定200字
2014/02/13 职场文书
公司授权委托书范文
2014/09/21 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android