• 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>
    

      

  • 相关阅读:
    day52—JavaScript拖拽事件的应用(自定义滚动条)
    day51—JavaScript绑定事件
    day50—JavaScript鼠标拖拽事件
    day49—JavaScript阻止浏览器默认行为
    day48—JavaScript键盘事件
    day47—JavaScript事件基础应用
    day41—JavaScript运动的停止条件
    Java Web项目使用图形验证码 — Kaptcha
    Disconf-Web管理端安装
    Git基本常用指令
  • 原文地址:https://www.cnblogs.com/Gabby/p/5350053.html
Copyright © 2020-2023  润新知