03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

2.功能元素

1.hgroup

对网页或区段(section)的标题进行组合

2.figure

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

Figcaption

figure的标题

一般格式:

<figure>

<figcaption>标题</figcaption>

<p>内容</p>

</figure>

3.video

标签定义视频,比如电影片段或其他视频流

案例:

<video src="http://www.w3school.com.cn/i/movie.ogg" controls></video>

4. audio

定义音频,比如音乐或其他音频流

案例: http://www.dkill.net/DNT/HTML5/H5Music/play.html

<audio src="http://www.dkill.net//DNT/music/bs/英雄野望.mp3" autoplay>你的浏览器不支持audio标签。</audio>

5.embed

<embed> 标签定义嵌入的内容,比如插件。

插入各种多媒体,格式多样

xhtml里面也是有的,逆天喜欢用他插入视频(比object那种方法简单)

<embed src="http://www.w3school.com.cn/i/helloworld.swf" />

6.mark

突出显示部分文本,比如搜索里面的关键词高亮

<p>我是<mark>毒逆天</mark></p>

7.time

定义日期或时间,或者两者

8.canvas

表示图片,如图表和其他图像。

<canvas> 标签只是图形容器,仅提供一个画布,您必须使用脚本来绘制图形。

<canvas id="myCanvas">浏览器不支持HTML5的canvas</canvas>

<script type="text/javascript">

var canvas = document.getElementById(‘myCanvas‘);

var ctx = canvas.getContext(‘2d‘);

ctx.fillStyle = ‘#FF0000‘;

ctx.fillRect(0, 0, 80, 100);

</script>

9.output

标签定义不同类型的输出,比如脚本的输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

<input id="a" type="text" value="1" />+<input id="b" type="text" value="2" />=

<output name="x" for="a b"></output>

</form>

10.source

媒介元素(比如 <video> 和 <audio>)定义媒介资源

11.menu

定义菜单列表。当希望列出表单控件时使用该标签。

在 HTML 5 中,重新定义了 menu 元素,且使用用于排列表单控件提示:请使用 CSS 来定义列表的类型。

12. ruby

ruby 注释(中文注音或字符)

13.command

定义命令按钮,比如单选按钮、复选框或按钮

14.details

标签用于描述文档或文档某个部分的细节

<details>

<summary>散客主页</summary>

详细内容

</details>

15.datalist

选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表

请使用 input 元素的 list 属性来绑定 datalist。

<input list="num" />

<datalist id="num">

<option value="1"></option>

<option value="2"></option>

<option value="3"></option>

</datalist>

16.meter

定义度量衡。仅用于已知最大和最小值的度量

<meter min="0" max="20" value="5"></meter>

17.progress

运行中的进度(进程)

可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

<progress value="22" max="100"></progress>

<progress></progress>

时间: 2024-08-02 15:14:09

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素的相关文章

02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

1.结构元素 可以理解为语义话标记,比如:以前这么写<div id="nav"></div> 现在偷懒写:<nav></nav> 1.header 头部区域,包含对主页的介绍 <header> 标签定义文档的页眉(介绍信息) ? 2.nav 导航系列 <nav> 标签定义导航链接的部分. ? 3.section 一块区域 ? <section> 标签定义文档中的节(section.区段).比如章节.页眉

05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html ? ? ? ?

04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html ? 待续.... 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

大前端时代来临,我们何去何从?---前端工程师学习指南

 1.大前端时代是什么? 大前端时代是WEB统一的时代,利用html5或者6甚至7,不但可以开发传统的网站,做炫酷的网页动态效果,更可以采用BS架构应用程序.开发手机端web应用.移动端Native应用程序.智能设备(比如可穿戴智能手表,可穿戴智能衣服)等.别告诉我你不知道 iphone watch,以及各种琳琅满目的手机游戏哦. 大前端时代最大的特点在于一次开发,同时适用所有平台.再也不用为一个APP得做安卓和IOS两种模式而忧心啦,大前端已经能做非常多的开发语言[比如java.PHP等]能做

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

HTML5简单入门系列(五)

前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的做法是网页不断的询问(向服务器发送请求)是否有可用的更新.通过服务器反馈之后,获得更新. 轮训方案 我们使用上篇HTML5简单入门系列(四)web worker的技术简单实现一下该轮训方案,主动向服务器询问是否有更新. 由于web worker不能访问document等对象,是不能和jQuery连用

[转] 大前端年终总结与展望:大前端时代即将来临?

回顾 2016 iOS 和 Android 系统不约而同学习了对方的优点,长得越来越象:3D touch.权限控制.夜间模式.电话防骚扰... 原本属于桥的两侧的开放与封闭,越来越往一个中心靠:由此看来,真正在 OS 里的应用 App 才是系统的灵魂. 像「微信」,不论你用 iOS 还是 Android,很多人平常耗电量最多的 App 就是它.而微信借助大量的用户与使用时长,也在 2016 年末期,推出了「小程序」的内测,继续百度「轻应用」未完成的使命,在微信应用里再打造一个「小程序」生态市场.

前端基础之html5\css3

由于前段时间的颓废所以断更了,学习也搁浅了好长时间,两个月吧,经过两个月的时间考虑,我还是决定学习自己专业的内容,找一份自己专业相关的工作,因为跨行真的太难了,毕竟需要花大量的时间和精力去,我刚毕业,养活自己才是重中之重,其他的以后再说吧.前端学习这次是我的第三次启动学习计划,这次计划跟以往的不一样.本次计划我打算闭关一个月,全身心的去学习,一切都放在脑后.为了这次计划我已经把朋友圈都关闭了,抖音卸载,因为之前我每天都花很多时间去看这些内容,直接导致我的时间白白浪费掉,而且学习效率大大折扣.这次