一、旧标签:
(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>