HTML 讲解

定义和用法

    fieldset 元素可将表单内的相关元素分组。

  

标签将表单内容的一部分打包，生成一组相关表单的字段。

标签没有必需的或唯一的属性。

    当一组表单元素放到

标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

HTML 与 XHTML 之间的差异

NONE

标准属性

id, class, title, style, dir, lang, xml:lang

事件属性

accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, 
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

标签 -- 对表单进行分组

• fieldset标签是成对出现的,以
  开始,以
  结束
• 一个表单可以有多个
  ,每对

  为一组,每组内容的描述可以使用标签说明
• 属性:
  • -- 一般属性

示例

 action="dreamdu.php" method="post" id="dreamduform">   
	

		
用户名与密码:
		 id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
		 for="username">用户名:
		 type="text" id="username" name="username" value="dreamdu" />
		 for="pass">密码:
		 type="password" id="pass" name="pass" />
	

	

		
性别:
		 for="boy">男
		 type="radio" value="1" id="sex" name="sex" />
		 for="girl">女
		 type="radio" value="2" id="sex" name="sex" />
		 for="sex">保密
		 type="radio" value="3" id="sex" name="sex" />		
	
	

		
我最喜爱的:
		 for="computer">计算机
		 type="checkbox" value="1" id="fav" name="fav" />
		 for="trval">旅游
		 type="checkbox" value="2" id="fav" name="fav" />
		 for="buy">购物
		 type="checkbox" value="3" id="fav" name="fav" />		
	
	

		
对梦之都的意见:
		 for="select">你对梦之都的感觉
		 size="1" id="select" name="select">
			很全面,很好
			一般般吧,还要努力
			有很多问题,不过还可以
		
	
	

		
梦之都编程语言选择:
		 for="multipleselect">你想在梦之都学习的编程语言
		 size="10" multiple="multiple" id="multipleselect" name="multipleselect">
			XHTML
			CSS
			JAVASCRIPT
			XML
			PHP
			C#
			JAVA
			C++
			PERL
		
	
	

		
我要在梦之都学:
		 for="WebDesign">选择一个你在梦之都最想学的
		 id="WebDesign" name="WebDesign">
			 label="client">
				 value="HTML">HTML
				 value="CSS">CSS
				 value="javascript">javascript
			
			 label="server">
				 value="PHP">PHP
				 value="ASP">ASP
				 value="JSP">JSP
			
			 label="database">
				 value="Access">Access
				 value="MySQL">MySQL
				 value="SQLServer">SQLServer
			
		
	
	

		
个人化信息:
		 for="myimage">个性照片上传
		 type="file" id="myimage" name="myimage" size="35" maxlength="255" />
		 for="contactus">联系我们
		 cols="50" rows="10" id="contactus" name="contactus">
			可爱的猴子 
		
	
	

		
提交:
		 type="submit" value="submit" id="submit" name="submit" />
		 type="reset" value="reset" id="reset" name="reset" />
	

fieldset是一个不常用的HTML标签，其语法如下：


fieldset名称

在IE中，如果不加css，fieldset的效果是圆角的,但加了css后就变成方角的了。
在Firefox中的效果都为方角。

或许你想到可以用图片来实现这样的效果，但图片除了体积稍大，语义上也很欠缺。这样的效果如何用xhtml+css实现呢？首先我们通过 fieldset设置一个方框（也译作域），然后通过特定的标签legend域标题，设置一个标题，并对它们进行相应的样式定义即可实现这样效果。我们首 先来了解一下fieldset方框、legend域标题这两个标签的知识。

HTML元素 fieldset方框

　　Draws a box around the text and other elements that the field set contains.
　　在字段集包含的文本和其它元素外面画一个方框。

　　fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。它与窗口框架的行为有些相似。fieldset在 Internet Explorer 4.0 及以上版本的HTML 和的脚本中可用。
　　fieldset元素元素是块元素。 并且需要关闭标签，即必须成对出现：

。

HTML元素 legend域标题

　　Inserts a caption into the box drawn by the fieldSet object.
　　在 fieldSet 对象绘制的方框内插入一个标题。

　　legend元素必必位于fieldset内的第一个元素。在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。
　　legend元素是块元素。并且需要关闭标签，即必须成对出现：

。

我们开始着手制作这样的一个小实例，我们看下面的xhtml代码：[]

   

CSS网页布局

    

      
• Div+CSS教程 系统的讲述了关于CSS布局的知识

      
• CSS布局实例 向你呈现了52css.com中的一些实例

      
• CSS模板下载 你可以查看一些模板

      
• CSS酷站欣赏 高手与大师的作品定会让你有所收获

    

　　这是一个简单的页面，所有的代码处于一个fieldset方框内，方框内的第一个元素为legend域标题，另外就是一个无序列表ul，随机加了一些内容。我们看下面的css是如何定义的：s.com]

* {
      font-size:12px;
      margin:0;
      padding:0;
}
fieldset {
      padding:10px;
      margin:10px;
      width:270px;
      color:#333;
      border:#06c dashed 1px;
}
legend {
      color:#06c;
      font-weight:800;
      background:#fff;
}
ul {
      list-style-type: none;
      margin:8px 0 4px 0;
}
li {
      margin-top:4px;
}