H5新增元素
标签 | 标记意义及用法分析/示例 | 属性/属性值/描述 | |||||||||||||||||||||
<article> | 定义独立的内容,如论坛帖子、报纸文章、博客条目、用户评论等内容。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<aside> | 定义两栏或多栏页面的侧边栏内容,如联系我们、客服、网站公告等内容。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<audio> | 定义音频内容,如音乐或其他音频流。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<audio src=”audio.wav”>
您的浏览器不支持 audio 标签。(注:可以在开始标签和结束标签之间加上此文本内容,这样若浏览器不支持此元素,就可以显示出这个信息。) </audio> |
|||||||||||||||||||||||
<canvas> | 定义图形,如图表和其他图像。(注:<canvas> 只是图形容器,我们必须使用脚本来绘制图形。) |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<canvas id=”myCanvas”></canvas>
<script type=”text/javascript”> var canvas=document.getElementById(‘myCanvas’); var ctx=canvas.getContext(‘2d’); ctx.fillStyle=’#FFFF00′; ctx.fillRect(0,0,20,30); </script> |
|||||||||||||||||||||||
<command> | 标记定义一个命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<menu>
<command onclick=”alert(‘Hello!’)”>Click here.</command> </menu> |
|||||||||||||||||||||||
<datalist> | 定义选项列表,需与 input 元素配合使用,通过input 元素的 list 属性来绑定,用来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<input id=”fruits” list=”fruits” />
<datalist id=”fruits”> <option value=”Apple”> <option value=”Banana”> </datalist> |
|||||||||||||||||||||||
<details> | 用于描述文档或文档某个部分的细节。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<details>
<summary>Some title.</summary> <p>Some details about the title.</p> </details> |
|||||||||||||||||||||||
<embed> | 定义外部的可交互的内容或插件。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<embed src=”someone.swf” /> | |||||||||||||||||||||||
<figure> | 定义一组媒体内容(图像、图表、照片、代码等)以及它们的标题。如果被删除,则不应对文档流产生影响。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<figure>
<p>The title of the image.</p> <img src=”someimage.jpg” width=”100″ height=”50″ /> </figure> |
|||||||||||||||||||||||
<footer> | 定义一个页面或一个区域的页脚。可包含文档的作者姓名、创作日期或者联系信息。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<header> | 定义一个页面或一个区域的头部。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<hgroup> | 定义文件中一个区块的相关信息,使用 <hgroup> 标签对网页或区段(section)的标题进行组合。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<hgroup>
<h1>Welcome my world!</h1> <h2>This is a title.</h2> </hgroup> |
|||||||||||||||||||||||
<keygen> | 定义表单里一个生成的键值。规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<form action=”demo_keygen.asp” method=”get”>
Username: <input type=”text” name=”usr_name” /> Encryption: <keygen name=”security” /> <input type=”submit” /> </form> |
|||||||||||||||||||||||
<mark> | 定义有标记的文本。请在需要突出显示文本时使用此标签。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<p>I like <mark>apple</mark> most.</p> | |||||||||||||||||||||||
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。(注:必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。) |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<meter min=”0″ max=”10″>2</meter>
<meter>2 out of 5</meter> <meter>10%</meter> |
|||||||||||||||||||||||
<nav> | 定义导航链接。(注:如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。) | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<nav>
<a href=”index.asp”>Home</a> <a href=”Previous.asp”>Previous</a> <a href=”Next.asp”>Next</a> </nav> |
|||||||||||||||||||||||
<output> | 定义不同类型的输出,比如脚本的输出。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<progress> | 定义任务(如下载)的过程,可以使用此标签来显示 JavaScript 中耗费时间的函数的进度。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<progress>
<span id=”progress”>15</span>% </progress> |
|||||||||||||||||||||||
<ruby> | 定义 ruby 注释(中文注音或字符)。在东亚使用,显示的是东亚字符的发音。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。 | 支持HTML5的全局属性和事件属性。 | |||||||||||||||||||||
<section> | 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<source> | 为媒介元素(比如 <video> 和 <audio>)定义媒介资源。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<time> | 定义一个日期/时间,该元素能够以机器可读的方式对日期和时间进行编码,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<p>大家都是早上 <time>9:00</time> 上班。</p>
<p><time datetime=”2012-01-01″>元旦</time>晚会。</p> |
|||||||||||||||||||||||
<video> | 定义视频,比如电影片段或其他视频流。 |
支持HTML5的全局属性和事件属性。 |
|||||||||||||||||||||
<video src=”movie.ogg” controls=”controls”>
您的浏览器不支持 video 标签。(注:可以在开始标签和结束标签之间加上此文本内容,这样若浏览器不支持此元素,就可以显示出这个信息。) </video> |
其中,表单元素有:datalist、keygen、output
H5新增元素的更多相关文章
- h5交互元素details标签
details是h5新增的交互元素,details与 summary 标签配合使用可以为 details 定义标题.默认情况下,不显示 details 标记中的内容.当用户点击标题时,会显示出 det ...
- h5新增html标签语义
H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
- H5新增属性classList
H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...
- H5新增特性
1.pattern:写正则,但是需要和form表单连着用 2.WebSocket "网络套接字", 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在 W ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- H5新增API
H5新增API 选择器 querySelector()和querySelectorAll(),参数都是css选择器,前者返回符合条件的第一个匹配的元素,如果没有则返回Null,后者返回符合筛选条件的所 ...
- 关于新增元素使用jQuery on()方法重复绑定的问题
最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数,找了半天,怀疑是on()的问题,于是测试了一下,果然是因为on()的使用方式造成了有的新增元素 ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
随机推荐
- python数据结构与算法第八天【冒泡排序】
1.排序算法的稳定性 稳定排序算法会让原本有相同键值的记录维持相对次序 例如:对以下元组按照元组的第一个元素升序排列,元组如下: (4,1) (3,1) (3,7) (5,6) 若要满足条件,则可能的 ...
- Mysql Router 的集群
1. c:\mysql-router, c:\mysql-5.7.23, 这两个目录的bin都要加入path 2. c:\mysql-shell,在bin下,有一个 mysqlsh.exe, 双击,打 ...
- QTP 自动化测试--点滴 等待
1 使用wait()语句:wait(10) 等待10秒后继续执行 Window("驷惠WIN系列[汽车4S连锁管理软件] 6.").Window("应付帐款明细查询&qu ...
- Express static 托管静态文件 理解
今天偶尔看了一下服务端渲染,遇到了express.static, 在以前学习webpack配置服务端渲染时,也使用express.static 中间件,两者配置不太一样,由于当时也没有认真学,所以 一 ...
- 训练赛-Building Numbers
题意:首先告诉你,一个数字从1开始有两种变换方式:1.当前数字的值加1 2.当前的数字值乘2: 思路:首先把数组里的数字需要的变换次数算出来,然后用前缀和解决: 代码: #include<ios ...
- vi简短教程
1.模式 命令行模式:光标的移动.内容删除移动复制操作 插入模式:文字输入,即编辑状态 底行模式:文件保存或退出vi,设置编辑环境 2.基本操作 vi myfile,输入vi 文件名,则进入vi. 3 ...
- 红米Note 7 Pro在印度首销迅速售罄
3月13日消息,红米Note 7 Pro在印度率先发售. 小米印度业务负责人Manu Kumar Jain发推特表示,红米Note 7 Pro开售几秒钟就被抢光,我们的工厂正在加班加点工作,全力以赴提 ...
- python数据类型知识整理
python数据类型种类 int数字.bool布尔值.dict字典.tunple元组.set集合.list列表.字符串 int数字 #常用来进制转换 num = 11 #转化成2进制 bin_num ...
- 实现中英文混合string的逆向输出
#include <iostream> using namespace std; // 输入一个字符串(包括英文和中文),将其反序输出, 如: // hello 今天真热 ---> ...
- python查找读写文件
import os ''' 跟据文件名称,后缀查找指定文件 path:传入的路径 filename:要查找的文件名 suffix:要查找的文件后缀 return :返回查找的文件路径 ''' file ...