HTML常用的知识点-2

最新推荐文章于 2024-05-23 13:39:19 发布

South-Fly

最新推荐文章于 2024-05-23 13:39:19 发布

阅读量750

点赞数

分类专栏：前端技术文章标签： HTML fieldset

本文链接：https://blog.csdn.net/sunlovefly2012/article/details/9622427

版权

前端技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.HTML cellpadding与cellspacing属性

单元格(cell) -- 表格的内容
单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离
引用网址:http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspacing/

表格单元格图示

上图说明了表格的几个属性,其中黑色部分就是单元格(cell)，白色的区域是单元格边距(表格填充)，灰色的区域是单元格间距(表格间距)。

2.用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元素元素是块元素。并且需要关闭标签，即必须成对出现：<fieldset></fieldset>。

HTML元素 legend域标题

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

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

</fieldset>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>HTML fieldset 标签示例</title>		
	</head>
	<body>
		<form action="http://www.dreamdu.com/dreamdu.php" method="post" enctype="multipart/form-data" id="dreamduform">   
			<fieldset>
				<legend>用户名与密码:</legend>
				<input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
				<label for="username">用户名:</label>
				<input type="text" id="username" name="username" value="dreamdu" />
				<label for="pass">密码:</label>
				<input type="password" id="pass" name="pass" />
			</fieldset>
			<fieldset>
				<legend>性别:</legend>
				<label for="boy">男</label>
				<input type="radio" value="1" id="sex" name="sex" />
				<label for="girl">女</label>
				<input type="radio" value="2" id="sex" name="sex" />
				<label for="sex">保密</label>
				<input type="radio" value="3" id="sex" name="sex" />		
			</fieldset>
			<fieldset>
				<legend>我最喜爱的:</legend>
				<label for="computer">计算机</label>
				<input type="checkbox" value="1" id="fav" name="fav" />
				<label for="trval">旅游</label>
				<input type="checkbox" value="2" id="fav" name="fav" />
				<label for="buy">购物</label>
				<input type="checkbox" value="3" id="fav" name="fav" />		
			</fieldset>
			<fieldset>
				<legend>对梦之都的意见:</legend>
				<label for="select">你对梦之都的感觉</label>
				<select size="1" id="select" name="select">
					<option>很全面,很好</option>
					<option>一般般吧,还要努力</option>
					<option>有很多问题,不过还可以</option>
				</select>
			</fieldset>
			<fieldset>
				<legend>梦之都编程语言选择:</legend>
				<label for="multipleselect">你想在梦之都学习的编程语言</label>
				<select size="10" multiple="multiple" id="multipleselect" name="multipleselect">
					<option>XHTML</option>
					<option>CSS</option>
					<option>JAVASCRIPT</option>
					<option>XML</option>
					<option>PHP</option>
					<option>C#</option>
					<option>JAVA</option>
					<option>C++</option>
					<option>PERL</option>
				</select>
			</fieldset>
			<fieldset>
				<legend>我要在梦之都学:</legend>
				<label for="WebDesign">选择一个你在梦之都最想学的</label>
				<select id="WebDesign" name="WebDesign">
					<optgroup label="client">
						<option value="HTML">HTML</option>
						<option value="CSS">CSS</option>
						<option value="javascript">javascript</option>
					</optgroup>
					<optgroup label="server">
						<option value="PHP">PHP</option>
						<option value="ASP">ASP</option>
						<option value="JSP">JSP</option>
					</optgroup>
					<optgroup label="database">
						<option value="Access">Access</option>
						<option value="MySQL">MySQL</option>
						<option value="SQLServer">SQLServer</option>
					</optgroup>
				</select>
			</fieldset>
			<fieldset>
				<legend>个人化信息:</legend>
				<label for="myimage">个性照片上传</label>
				<input type="file" id="myimage" name="myimage" size="35" maxlength="255" />
				<label for="contactus">联系我们</label>
				<textarea cols="50" rows="10" id="contactus" name="contactus">
					可爱的猴子 <img src="/images/dreamdumail.png" />
				</textarea>
			</fieldset>
			<fieldset>
				<legend>提交:</legend>
				<input type="submit" value="submit" id="submit" name="submit" />
				<input type="reset" value="reset" id="reset" name="reset" />
			</fieldset>
		</form>

	</body>
</html>

South-Fly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常用的知识点-2

1.用fieldset、legend实现文字写在边线上的效果HTML元素 fieldset方框　　Draws a box around the text and other elements that the field set contains. 　　在字段集包含的文本和其它元素外面画一个方框。　　fieldset元素用于对表单中的元素进行分组并在文档中区别标出
复制链接

扫一扫