首页 > 网站 > WEB开发 > 正文

自学HTML5第二节(标签篇---新增标签详解)

2024-04-27 14:32:07
字体:
来源:转载
供稿:网友
自学HTML5第二节(标签篇---新增标签详解)

HTML5新增标签:

<article> 标签

规定独立的自包含内容。一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源:

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论

实例:

<article>  <h1>Internet Explorer 9</h1>  <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p></article>

<aside> 标签

定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。

提示:<aside> 的内容可用作文章的侧栏。

<p>Me and my family visited The Epcot center this summer.</p><aside><h4>Epcot Center</h4>The Epcot Center is a theme park in Disney World, Florida.</aside>

<audio> 标签

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

提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
loop

loop

如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
PReloadpreload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

srcurl要播放的音频的 URL。

<audio src="someaudio.wav"> 您的浏览器不支持 audio 标签。 </audio>

<bdi> 标签

指的是 bidi 隔离。允许您设置一段文本,使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

属性值描述

  • ltr
  • rtl
  • auto

规定 <bdi> 元素内的文本的文本方向。默认值:auto。

<canvas> 标签

定义图形,比如图表和其他图像。只是图形容器,您必须使用脚本来绘制图形。

<canvas id="myCanvas"></canvas><script type="text/javascript">var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);//x轴 Y轴 宽 高</script>

<command> 标签

表示用户能够调用的命令。可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

属性描述
checkedchecked定义是否被选中。仅用于 radio 或 checkbox 类型。
disableddisabled定义 command 是否可用。
iconurl定义作为 command 来显示的图像的 url。
labeltext为 command 定义可见的 label。
radiogroupgroupname定义 command 所属的组名。仅在类型为 radio 时使用。
type
  • checkbox
  • command
  • radio
定义该 command 的类型。默认是 "command"。

<menu><command onclick="alert('Hello World')">Click Me!</command></menu>

<datalist> 标签

定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" /><datalist id="cars">  <option value="BMW">  <option value="Ford">  <option value="Volvo"></datalist>

<details> 标签

用于描述文档或文档某个部分的细节。提示:与<summary> 标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表