您的位置：首页 > 编程语言

客户端网页编程--第二章（部分）、第三章

2015-07-28 22:34 260 查看

第二章（部分）XHTML基础

插入表格状数据

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>实训人员名单</title>

</head>

<body>

<h1>实训人员名单</h1>

<table border="1">

<tr>

<th>阶段</th>

<th>姓名</th>

<th>性别</th>

<th>出生日期</th>

<th>学历</th>

<th>专业</th>

</tr>

<tr>

<td rowspan="3">初级</td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td rowspan="4">高级</td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr><td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td></tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

</body>

</html>

块级元素：

div、列表元素（dl、ol、ul）、form、h1-h6、p、table

内嵌元素：

span、a、img、label、所有的表单输入元素、iframe

第三章 XHTML表单

1、文本框

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>创建表单示例--文本框</title>

</head>

<body>

<form id="myForm" action="#" method="post">

<p>姓<input type="text" id="firstname"/></p>

<p>名<input type="text" id="lastname"/></p>

</form>

</body>

</html>

2、口令输入框

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>创建表单示例--密码输入框</title>

</head>

<body>

<form id="myForm" action="#" method="post">

<p>姓<input type="text" id="firstname" size="30" maxlength="25"/> </p>

<p>名<input type="text" id="lastname" size="30" maxlength="25"/></p>

<p>口令<input type="password" id="password" size="30" maxlength="25"/></p>

</form>

</body>

</html>

3、复选框和单选框

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/html">

<head>

<meta charset="UTF-8">

<title>创建表单示例--密码字段</title>

</head>

<body>

<form id="myForm" action="#" method="post">

<p>请选择你想要去旅游的城市</p>

<p>

<input type="checkbox" id="sh" value="shanghai" checked="checked">上海</input><br/>

<input type="checkbox" id="cd" value="成都">成都</input><br/>

<input type="checkbox" id="xa" value="西安">西安</input><br/>

</p>

<p>你的性别</p>

<p>

<input type="radio" id="male" value="male">男</input><br/>

<input type="radio" id="female" value="female">女</input>

</p>

</form>

</body>

</html>

4、下拉列表

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<form id="myForm" action="#" method="post">

<p>您最喜欢的餐饮风格是？</p>

<select id="food" multiple="multiple" size="4">

<option value="sichuang">川菜</option>

<option value="guangdong">粤菜</option>

<option value="beifang">北方菜</option>

<option value="shanghai">上海菜</option>

<option value="west" selected="selected">西餐</option>

<option value="tailand">泰国菜</option>

</select>

</form>

</body>

</html>

5、fieldset和legend

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<form id="myForm" action="#" method="post">

<fieldset>

<p>

<legend>性别</legend>

<input type="radio" name="gender" id="male" value="male">男</input><br/>

<input type="radio" name="gender" id="female" value="female">女</input>

</p>

</fieldset>

</form>

</body>

</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航