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

来源：互联网发布：淘宝里的旺旺号是什么编辑：程序博客网时间：2024/04/30 12:21

第二章（部分）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>

0 0