学习笔记之TML5 功能元素

本文介绍了HTML5中的一些核心功能元素,包括hgroup、figure、video、audio、mark、time、canvas、output等,详细阐述了它们的用途和应用场景。例如,hgroup用于页面标题组合,video和audio元素用于多媒体播放,canvas则提供了图形绘制的API。同时,还提到了一些辅助元素如source、ruby、wbr等,以及新的表单输入类型,如email、url、number等,帮助提升网页交互体验。
摘要由CSDN通过智能技术生成

TML5 功能元素

hgroup元素:用于对整个页面或页面中一个内容区块的标题进行组合。

<hgroup>...</hgroup>

figure元素:表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

<figure>
    <figcaption>标题</figcaption>
    <p>内容...</p>
</figure>

video元素:定义视频,比如电影片段或其他视频流。

<video src="movie.ogg" controls="controls">video 元素</video>

audio元素:定义音频,比如:音乐或其他音频流。

<audio src="someaudio.wav">audio 元素</audio>

embed元素:用来插入各种多媒体,格式可以是:Midi、Wav、AIFF、AU、MP3等等。

<embed src="horse.mp3" />

mark元素:主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

<mark> </mark>

time元素:表示日期或时间,也可以同时表示两者。

<time> </time>

canvas元素:表示图形,如:图表和其他图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端javascript,以使脚本能够把想绘制的东西绘制到这块画布上。

<canvas id="canvas" width="200" height="200"></canvas>

output元素:表示不同类型的输出,比如:脚本的输出。

<output> </output>

source元素:为媒介元素,比如:<video>和<audio>,定义媒介资源。

menu元素:表示菜单列表。当希望列出表单控件时,使用该标签。

<menu>
   <li><input type="checkbox" />red</li>
   <li><input type="checkbox" />blue</li>
</menu>

ruby元素:表示ruby注释(中文注音或字符)。

<ruby>汉<rt><rp>(</rp>...<rp></rp></rt></ruby>

rt元素:表示字符(中文注音或字符)的解释或发音。

rp元素:在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容。

wbr元素:表示软换行。

wbr元素与br元素的区别br元素表示此处必须换行,强制换行;wbr元素的意思是:浏览器窗口或父级元素的宽度足够宽时(没必要换行时),不进行换行,而当宽度不够时,主动换行。

command元素:表示命令按钮,如:单选按钮、复选框或按钮。

<command onclick="cut()" label="cut">

details元素:表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的,用户点击标题时,会显示出细节信息。summary元素应该是details元素的第一个子元素。

datalist元素:表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表。

<datalist> </datalist>

keygen元素:表示生成密钥。

progress元素:表示运行中的进程,可以使用progress元素来显示javascript中耗费时间的函数的进程。

email:表示必须输入E-mail地址的文本输入框。

url:表示必须输入URL地址的文本输入框。

number:表示必须输入数值的文本输入框。

range:表示必须输入一定范围内数字值的文本输入框。

Data Pickers:HTML5拥有多个可供选取日期和时间的新型输入文本框。

     Date:选取日、月、年。

     Month:选取月和年。

     Week:选取周和年。

     Time:选取时间(小时和分钟)。

     Datetime:选取时间、日、月、年(UTC时间)。

     datetime-local:选取时间、日、月、年(本地时间)。

 

参考书籍:未来科技,《HTML5 APP开发从入门到精通》

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值