<!doctype html> <html> <head> <meta charset="utf-8"> <title>sishuang--homework(2)</title> </head> <style> *{padding: 0; } ul,li{list-style: none; line-height: 30px} h3{padding: 4px; margin: 0 } a{text-decoration:none; color: #333} a:hover{text-decoration: underline} table th,table td{text-align:center} table caption { line-height: 40px; font-weight: bold} button{cursor: pointer; padding: 2px} </style> <body> <h3>时政新闻</h3> <ul> <li><a href="#">上海人均GDP超过2万美元 达到上中等发达国家水平</a></li> <li><a href="#">美国***片商说服特朗普放宽华为禁令 只采取“针对性行动”</a></li> <li><a href="#">“中国神船”要来了!南北船合并获确认,市值飙升超200亿</a></li> <li><a href="#">督导组赴酒店抓涉黑分子 敲错门发现公安局长等3人聚赌</a></li> <li><a href="#">美国拟对40亿美元欧盟输美商品加征更多关税</a></li> </ul> <br/><br/><br/> <table border="1" cellpadding="0" cellspacing="0"> <caption>学生档案</caption> <thead> <tr> <th width="40">序号</th> <th width="60">姓名</th> <th width="60">性别</th> <th width="60">课程</th> <th width="70">分数</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>数学</td> <td>100</td> </tr> <tr> <td>2</td> <td>李四</td> <td>男</td> <td>语文</td> <td>76</td> </tr> <tr> <td>3</td> <td>王五</td> <td>男</td> <td>数学</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">所有学生分数总分</td> <td>276</td> </tr> </tfoot> </table> <br/><br/><br/> <h3>表单</h3> <form id="form1" action="#" method="POST"> <p> <label for="username">用户名:</label> <input type="text" name="username" id="username" placeholder="至少输入8个字节" required /> </p> <p> <label for="pwd">密 码:</label> <input type="password" name="pwd" id="pwd" placeholder="字母加数字的8个字节组合" required /> </p> <p> <label for="email1">邮 箱:</label> <input type="email" name="email1" id="email1" placeholder="XXX@XXX.XXX" /> </p> <p> <label for="birthday">生 日:</label> <input type="date" name="birthday" id="birthday" /> </p> <p> <label for="age">年龄:</label> <input type="number" min="10" max="99" id="age" name="age" /> </p> <p> <label for="like">爱好:</label> <input type="checkbox" id="php" name="like" /> <label for="php">php</label> <input type="checkbox" id="java" name="like" /> <label for="java">java</label> <input type="checkbox" id="javascript" name="like" /> <label for="javascript">javascript</label> </p> <p> <label for="sex">性别:</label> <input type="radio" id="male" name="sex" /> <label for="male">男</label> <input type="radio" id="female" name="sex" /> <label for="female">女</label> <input type="radio" id="herm" name="sex" /> <label for="herm">人妖</label> </p> <p> <h5>下拉框</h5> <select name="select1" id="select"> <optgroup label="fore"> <option value="HTML" selected>HTML</option> <option value="javascript">javascript</option> </optgroup> <optgroup label="back"> <option value="PHP">PHP</option> <option value="JAVA">JAVA</option> </optgroup> </select> </p> <p> <label for="info">简介:</label><br/> <textarea rows="10" cols="40" id="info" name="info" ></textarea> </p> <p> <button type="submit">submit</button> <button type="reset" >reset</button> <button type="button">Ajax</button> </p> </form> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body> </html>
点击 "运行实例" 按钮查看在线实例