客户端网页编程--第二章(部分)、第三章

第二章(部分)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>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="4">高级</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr><td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td></tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>



你可能感兴趣的:(客户端网页编程--第二章(部分)、第三章)