详解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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 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
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
PHP错误机制知识汇总
2016/03/24 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
python爬取m3u8连接的视频
2018/02/28 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
Python日志模块logging基本用法分析
2018/08/23 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
写好自荐信的技巧
2013/11/08 职场文书
简历里的自我评价
2014/01/31 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
会计毕业生自荐书
2014/06/12 职场文书
上课迟到检讨书300字
2014/10/15 职场文书