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-31 11:20:08

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

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

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写<div id="nav"></div> 现在偷懒写:<nav></nav> 1.header头部区域,包含对主页的介绍 <header> 标签定义文档的页眉(介绍信息)   2.nav导航系列 <nav> 标签定义导航链

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

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文件(类似于压缩的zip) 编解码器就是读取特定的容器格式,对其中的音频与视频轨进行解码,然后实现播放 解码器 解码器(decoder),是一种输入模拟视频信号并将它转换为数字信号格式,以进一步压缩和传输的硬件/软件设备 视频格式 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 

07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 定位类型 IP 定位 优点 任何位置都可用 在服务器端处理 缺点 不精确,一般精确到城市 运算代价大,可能出错 代理的时候就可能定位出错了 GPS定位 优点 定位精准 缺点 定位时间长,耗电量大 室内效果不好 需要硬件设备支持 Wi-Fi定位 优点 定位精准 简单快捷定位 可以在室内使用 缺点 适合大城市,WIFI接入点少的地方效果差 手机定位 优点 定

Web大前端时代之:HTML5+CSS3入门系列

联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTDotNet/ 思维导图(不断更新): 图片:http://dnt.dkill.net/DNT/HTML5/index.jpg 源码:http://dnt.dkill.net/DNT/HTML5/h5.zip 在线文档:http://dnt.dkill.net/DNT/HTML5   00.Web大前端时代之:HTML5+CSS3入门系列~B

08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧:   简单版本: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&q

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

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包含电话号码的输入字段   2.url:用于应该包含 URL 地址的输入字段 - 提交表单时对 url 字段的值自动进行验证 <form action="/test.html" method="post"> url:<input type="u

01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是html5的文档类型--> <!DOCTYPE html> 字符编码(UTF-8) <!--字符编码,charset="utf-8"--> <meta charset="utf-8" />   版本兼容 1.省略引号: 当属性值不包

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

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力:     初始画布 canvas默认是宽300px,高150px; 绘制步骤 1.定义一个id <canvas id="canvasOne" width="300" height="300"></canvas> 2.获取canvas对象 var canvasO

00.Web大前端时代之:HTML5+CSS3入门系列~Bug反馈文章

感谢广大网友的热心提醒,现已发现如下错误: 感谢 " "对画布笔记系列的反馈(QQ:350223285) 这个是失误,strokeStyle和stroke对应 待续.... 欢迎提出更多问题,感谢大家~