详解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旋转动画实例代码
Sep 11 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 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
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
原生JavaScript实现购物车
2021/01/10 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python用threading实现多线程详解
2017/02/03 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
十一个高级MySql面试题
2014/10/06 面试题
大学生四年生活自我鉴定
2013/11/21 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
课外小组活动总结
2014/08/27 职场文书
2014年管理工作总结
2014/11/22 职场文书