html5学习系列之cd标签
一、旧标签：
（1）<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签
作用：以上元素都是短语元素。并不返回使用它们，但是通过使用样式表，可能取得更丰富的效果。
<em>:呈现为被强调的文本；<strong>：定义重要的文本；<dfn>：定义一个定义项目；<code>：定义计算机代码文本；<samp>：定义样本文本；<kbd>：定义键盘文本，它表示文本是从键盘键入的；<var>：定义变量，可以与<pre>及<code>标签配合使用；<cite>：定义引用，可使用标签对参考文献的引用进行定义。
（2）<col>标签
作用：为表格中的一个或多个列定义属性，只能在表格或列组中使用该元素。
注释：col元素是空元素。如果需要创建列，必须在tr元素中规定td元素。
提示：如果需要为一个或多个列定义属性值请使用该元素，如果需要一个列组规定相同的属性请使用<colgroup>元素
（3）<colgroup>标签
作用：定义表格列的组，对列进行组合，以便格式化。
注释：colgroup元素只能包含col元素；colgroup元素是空元素。如果需要创建列，必须在tr元素中规定td元素。
（4）<dl>标签
作用：定义一个定义列表
（5）<dt>标签
<dt> 标签定义一个定义列表中的一个项目，以及 dialog 中的角色。
二、新标签
（1）<canvas>标签
作用：画布，定义图形，比如图标和其他图像
使用：定义通过画布的getContext()方法获得的一个“绘图环境”对象上。路径由一系列方法调用来定义。
属性：width和height。
（2）<command>标签
定义：命令按钮，比如单选按钮、复选框或按钮。目前都不支持
属性：checked: true|false 定义是否被选中，仅用于radio或checkbox类型。
default： true|false 如果为ture则表示被激活。仅用于该command位于菜单中时
disabled true|false 是否可用；hidden： true|false 是否可见；
icon:url定义作为command 来显示的图像的url
label: name 名字 ;radiogroup: 定义command所属的radiogroup的名称。仅在类型为radio时使用。
type：checkbox、command、radio:定义类型；
（3）<datagrid>标签
作用：定义可选数据的列表，作为树列表来显示
属性：disabled: true|false true为禁用
multiple：true|false 如果为true,则可以在datagrid 中选中一个以上的项目
（4）<datalist>标签
作用：定义可选数据的列表，与input元素配合使用，就可以制作输入值的下拉列表
属性：data:value 供自动插入数据。
（5）<datatemplate>标签：不知道怎么用
作用：定义数据模板的一个容器，该元素必须有定义模板的子元素：<rule>元素
（6）<dd>标签
作用：定义列表中对项目的描述
（7）<del>标签：
作用：定义文档中已删除的文本。
提示：与<ins>一起使用，描述文档中的更新和修正
效果：会将文本划掉
（8）<details>标签
作用：定义元素的细节，可查看或隐藏
属性：open true|false 定义details是否可见，默认为false
（9）<dialog>标签：只有chrome支持
作用：定义对话
提示：对话中的每一个句子都必须属于<dt>标签所定义的部分；
三、涉及到的代码：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html学习系列之CD标签</title> </head>
<body onload='drawcanvas()'>
<!--canvas 标签-->
<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas><br>
<!-- 短语元素 -->
<em>短语元素之em</em><br>
<strong>短语元素之strong</strong><br>
<dfn>短语元素之dfn</dfn><br>
<code>短语元素之code</code><br>
<samp>短语元素之samp</samp><br>
<kbd>短语元素之kbd</kbd><br>
<var>短语元素之var</var><br>
<cite>短语元素之cite</cite><br>
<!-- col标签 -->
<table>
<col style="background:#FF0000"/>
<col span="2" style="background:#000000"/>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<!-- colgroup标签 -->
<table>
<colgroup span="3" style="background:#FF0000"></colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<!-- command标签 -->
<command label="checkbox" type="checkbox" checked="true"> fgd</command><br>
<command label="command" type="command" checked="true"> </command><br>
<command label="radio" type="radio" checked="true"> </command><br>
<!-- datagrid标签 -->
<datagrid>
<ol>
<li> (datagrid row 0) </li>
<li> (datagrid row 1)
<ol style="list-style-type:lower-alpha;">
<li> (datagrid row 1,0) </li>
<li> (datagrid row 1,1) </li>
</ol>
</li>
<li> (datagrid row 2) </li>
</ol>
</datagrid>
<!-- datalist标签 -->
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<!-- datatemplate标签 -->
<br><datatemplate>
<rule>sdffsdfsd</rule>
</datatemplate><br>
<!-- dd标签 -->
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<!-- dd标签 -->
<br> a dozen is <del>21</del>12 pieces
<br>
<!-- details标签 -->
html5 is a <details>language and I love it</details><br>
<!-- dialog标签 -->
<dialog open="true">
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>
</body >
<script type="text/javascript">
function drawcanvas(){
var canvas = document.getElementById('myCanvas');
var ctX = canvas.getContext('2d');
ctX.fillStyle='#FF0000';
ctX.fillRect(0,0,80,100);
}
</script>
</html>
浙公网安备 33010602011771号