您的位置:首页 > Web前端 > HTML5

html5基础知识(2)-——表格&&列表&&表单

2015-11-12 21:33 621 查看
HTML表格:表格标签
<table>定义表格
<caption>定义表格标题
<th>定义表格表头
<tr>定义表格的行
<td>定义表格的单元
<thead> 定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚
<col>定义表格的列属性
单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距,也就是说单元格中的内容与单元格边缘的距离为0,内容紧挨着边缘
<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<caption>重要表格</caption>
<!--表头-->
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</td>
<td colspan="2" ></td>   <!--合并单元格-->
</tr>
</table>
</body>
</html>
HTML列表:1、有序列表标签:<ol><li>属性:A、a、I、i、start2、无序列表标签:<ul><li>属性:disc(实体圆)、circle(空心圆)、square(方块)
<ol type="disc">
</ol>
3、嵌套列表<ol><ul><li>
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><body><ol><li>车</li><ul><li>卡车</li><li>汽车</li><li>摩托车</li></ul><li>花</li><ul><li>桃花</li><li>百合</li><li>玫瑰</li></ul></ol></body></html>
4、自定义列表
<dl><dt>学习</dt><dd>学习是很重要的事</dd></dl>
HTML表单:1、表单用于获取不同类型的用户输入表单标签
<form>表单
<input>输入域
<textarea>文本域
<label>控制标签
<fieldset>定义域
<legend>域的标题
<select>选择列表
<optgroup>选项组
<option>下拉列表中的选项
<button>按钮
最简单的一个用户输入
<body><form>用户名<input type="text"><br/>密码:<input type="password"></form></body>
下面我们来写一个也是常见的1、复选框
<body><form>你喜欢的水果有<br/>苹果<input type="checkbox">西红柿<input type="checkbox">梨<input type="checkbox"></form></body>
2、单选按钮
<body><form>你的性别是<br/>男<input type="radio" name="sex">女<input type="radio" name="sex"></form></body>
注意我们新加了一个name,name必须相同,此时不能同时选中3、下拉列表
<body><form>你的专业是<select><option>计算机</option><option>生物</option><option>地理</option><option>医生</option></select></form></body>
当然在html5中,新增了一个文本框的list属性,datalist元素类似选择框,但当用户想要设定的值不在选择列表中,可以自行输入;datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。
<body><form>你喜欢的专业是<input type="text" name="greeting" list="greeting"><datalist id="greeting" style="display: none"><option value="计算机"></option><option value="生物"></option><option value="地理"></option><option value="医生"></option></datalist></form></body>
这里的文本框是可直接输入的。4、文本域文本域可在表单外创建
<body><textarea cols="30" rows="30">请在此输入你的建议</textarea></body>
5、按钮
<body><form><input type="button" value="提交"><input type="submit"><input type="submit" value="提交"></form></body>
第二个按钮上的字随浏览器不同而不同,有的浏览器直接是”提交“.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: