html5基础知识(2)-——表格&&列表&&表单
2015-11-12 21:33
621 查看
HTML表格:表格标签
单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距,也就是说单元格中的内容与单元格边缘的距离为0,内容紧挨着边缘表单标签
最简单的一个用户输入
<table> | 定义表格 |
<caption> | 定义表格标题 |
<th> | 定义表格表头 |
<tr> | 定义表格的行 |
<td> | 定义表格的单元 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
<col> | 定义表格的列属性 |
<!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>第二个按钮上的字随浏览器不同而不同,有的浏览器直接是”提交“.
相关文章推荐
- html5基础知识(1)-----属性&&样式
- html5与html4区别
- HTML5的桌面提醒消息
- 【html5】cookie、sessionStorage、localStorage
- 其他类型的标签
- html5桌面通知(Web Notifications)实例解析
- ajax与HTML5 history pushState/replaceState实例
- 活动h5页面倒计时效果
- 使用h5做上传图片的即时显示
- HTML5笔记T0000001:HTML5三大类元素--元数据元素
- HTML5的CANVAS绘制线条,MOVETO和LINETO详解
- HTML5
- 五个2015 年最佳HTML5 框架
- 使用html5 canvas 画时钟代码实例分享
- HTML5 乱记
- html5手机 input file 上传图片 调用API
- H5地理定位
- cdh5.4.7 sqoop使用
- Html5_移动前端不得不了解的html5 head 头标签
- html5视频播放解决方案