HTML常用的知识点-2
2013-07-29 21:57
267 查看
1.HTML cellpadding与cellspacing属性
单元格(cell) -- 表格的内容
单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离
引用网址:http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspacing/
上图说明了表格的几个属性,其中黑色部分就是单元格(cell),白色的区域是单元格边距(表格填充),灰色的区域是单元格间距(表格间距)。
在字段集包含的文本和其它元素外面画一个方框。
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>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
单元格(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>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</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>
相关文章推荐
- html常用知识点个人笔记
- html+css 常用的知识点
- html 常用知识点
- Html常用知识点
- html+css2次学习-----常用知识点总结
- HTML常用的知识点
- 常用的一些小知识点 html、jsp、css、js、java、tomcat、mysql 等
- html+css知识点总结(田彦霞)
- HTML常用标签(1)————格式标签
- html常用特殊字符(备用)
- html 常用的标签
- [正则]常用正则表达式大全!(例如:匹配中文、匹配html)
- HTML——常用标签元素分类
- HTML常用meta标签详细版
- [Android] Sqlite 常用知识点(持续更新)
- CSS常用知识点
- HTML5学习_day02(4)--html常用标签分类
- 常用正则表达式大全!(例如:匹配中文、匹配html)
- HTML常用代码
- Html常用正则表达式