详解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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
js里的prototype使用示例
2010/11/19 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
Python实现多属性排序的方法
2018/12/05 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python中pass的作用与使用教程
2020/11/13 Python
python 基于opencv实现图像增强
2020/12/23 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
历史系自荐信范文
2013/12/24 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
艾滋病宣传标语
2014/06/25 职场文书
工商局调档介绍信
2015/10/22 职场文书