表格标记
例子:学生考试成绩单
<body>
<table width="318" height="167" border="1" align="center" bgcolor="red>
<caption>学生考试成绩单</caption>
<tr>
<td align="center" valign="middle">姓名</td>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
</tr>
<tr>
<td align="center" valign="middle">张三</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">87</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">93</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">80</td>
</tr>
<tr>
<td align="center" valign="middle">王五</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">90</td>
</tr>
</table>
</body>
<body>
<table width="318" height="167" border="1" align="center" bgcolor="red">
<caption>学生考试成绩单</caption>
<tr>
<th align="center" valign="middle">姓名</th>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
</tr>
<tr>
<td align="center" valign="middle">张三</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">87</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">93</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">80</td>
</tr>
<tr>
<td align="center" valign="middle">王五</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">90</td>
</tr>
</table>
</body>
</html>
注意:以上两段程序效果一样,唯一不同是,第一个程序表头使用单元格标记,第二个程序使用表头标记
colspan 属性:表示横跨几列
表格的他用:
在实际开发中,表格常常用来设计页面。在页面中创建一个表格并设置没有边框,之后通过该表格将页面划分为几个区域,之后分别对几个区域进行设计,这是一种非常方便的设计页面的方式。
表单标记
表单元素,我们常见的就是网站登录页面中的用户名文本框和密码文本框。表单是用户和网页交互信息的重要手段
表单标记
以<form>开头,以</form>结尾,格式如下:
<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
</form>
表单输入标记
使用最频繁的表单标记,通过这个标记可以向页面中添加单行文本、多行文本、按钮等
格式:
<input type = "image" disabled = "disables" checked = "checked" width = "digt" height = "digit"
maxlength = "digit" readonly = "" size = "digit" src = "uri" usemap = "uri" alt = "" name = "checkbox" value = "checkbox">
属性:
type属性:
原来表单提交用户输入的数据,是根据表单元素的name值来控制表单控件的。那么表单控件里面的id是干嘛的?就是为了区别不同的表单控件,还有一个作用,就是点击表单控件提示信息时也能让表单控件获得焦点的效果,用label提高用户体验,这时的label属性中的for是跟表单控件的id一致的
例子:一个简单的登录界面
<body>
<form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="28" align="center">用 户 名:</td>
<td colspan="2"><input name="username" type="text" id="UserName4" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">密 码:</td>
<td height="28" colspan="2"><input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">确认密码:</td>
<td height="28" colspan="2"><input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"></td>
</tr>
<tr>
<td colspan = "1"></td>
<td class="word_grey">
<input name="Submit" type="submit" id="btn_grey" value="保存">
<input name="Reset" type="reset" id="Reset" value="重新填写">
</td>
</tr>
</table>
</form>
</body>
下拉文本框
格式:
<select name = "name" size = "digit" multiple = "multiple" disabled = "disabled">
<option>内容</option>
</select>
多行文本标记
格式:
<textarea cols = "digit" rows = digit name = "name" disabled = "disabled" readonly = "readonly"
wrap = "value">
默认值
</textarea>