HTML标签,表格和表单
一.通用属性
id:给标签取一个唯一名称
class:给标签取一个类名
title:鼠标移动到标签,出现的提示幸喜
style:设置行内样式
二.自定义标签(用于传值和图片懒加载
格式:data-*
<img data-src="图片名" alt="提示文本"/>
<p data-id="test1">...</p>
三.表格
1.创建表格
table>tr*2>td{内容$}*3=
<table>
<tr>
<th>学号</th>(th为表头,对下列内容起说明作用,会自动加粗和居中显示)
<th>姓名</th>
<th>地址</th>
</tr>
<tr>
<td>007</td>
<td>张三</td>
<td>北京</td>
</tr>
</table>
效果:
2.表格属性
border:设置表格边框(px)
width:设置表格宽度(px)
align:设置表格对齐(left(默认),right,center)
cellpadding:设置单元格间距
cellspacing:设置像素间隙
3.跨行与跨列
跨行:
<table>
<tr>
<td rowspan="2">内容区01</td>
<td>内容区02</td>
<td>内容区03</td>
</tr>
<tr>
<td>内容区02</td>
<td>内容区03</td>
</tr>
<tr>
<td>内容区01</td>
<td>内容区02</td>
<td>内容区03</td>
</tr>
</table>
效果:
跨列:
<table>
<tr>
<td rowspan="2">内容区01</td>
<td colspan="2">内容区02</td>
</tr>
<tr>
<td>内容区02</td>
<td>内容区03</td>
</tr>
<tr>
<td colspan="3">内容区01</td>
</tr>
</table>
效果:
4.表格组成
caption(标题),thead(表头),tbody(表体),tfoot(表尾)
table[border=1 width=600 align=center]>(caption{学生信息表})+(thead>tr>th*4)+(tbody>tr*3>td*4)+(tfoot>tr>td[colspan=1])=
<table border="1" width="600" align="center">
<caption>学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>家庭地址</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Tom*</td>
<td>aaaaaaaaaa</td>
<td>该生为“三好学生”</td>
</tr>
<tr>
<td>002</td>
<td>Mickle</td>
<td>bbbbbbbbb</td>
<td></td>
</tr>
<tr>
<td>003</td>
<td>Mary</td>
<td>cccccccc</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1">附注:*为优秀学生。</td>
</tr>
</tfoot>
</table>
效果:
5.表单及表单标签
表单:用于提交用户输入的数据
表单标签
name:表单名称
action:表单数据提交的地方(通常为后台文件名(.jsp/.php/.asp/.aspx/.py),或网址,#代表提交到当前文件下)
method:前端提交数据到后端的方法(主要是get或post(都是提交数据,但post更安全以及提交的数据量更大),默认为get,但尽量使用post方式提交)
<form name="..." action="..." method="get">
...
</form>
6.表单元素
1)input类:用来输入或发出指令
type:text/password/radio/checkbox/file/button/image/submit/reset
text:"type=text"可不写,默认值
属性:placeholder(提示),name(命名),minlength和maxlength(最少/多输入的字符),disabled(失效),readonly(只读),value(默认值),pattern(正则表达式)
password:密码框,属性同text
radio:单选钮,通常两项以上。
属性:name(必须有),value,checked,disabled,readonly
<input type="radio" name="sex">男
<input type="radio" name="sex">女
checkbox:复选框,选择0项,1项,多项,
属性:name(必须有),value,checked,disabled,readonly
file:文件上传按钮
button:普通按钮,通常用来调用脚本代码
属性:value(按钮标题),disabled
image:图片按钮,同button(src代替value)
submit:提交按钮,将数据提交到后台
reset:重置按钮,将所有组件的内容清空
2)textarea类:文本域,用于输入大批量内容
属性:name,id,cols(列数),rows(行数),placeholder,minlength,maxlength,required(必须输入)
3)select类:下拉列表框,默认单选
属性:multiple(可多选),size(最多显示行数)
<select id="course" >
<option value="语文">语文</option>
<option value="数学">数学</option>
<option value="计算机">计算机</option>
<option value="其他">其他</option>
</select>
效果:
<select id="course" multiple>
<option value="语文">语文</option>
<option value="数学">数学</option>
<option value="计算机">计算机</option>
<option value="其他">其他</option>
</select>
效果:
4)button类:普通按钮,具有提交的作用。
button可单独使用,不写在form中;写在form中,有提交功能
单独使用:
<button id="bth01">确认</button> (这里button用于调用js代码)
四.iframe框架集
实际开发中,不建议使用
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。