前端的学习
1. html的学习
1.1 label标签的使用
举例:我们想要点击用户名的时候,光标就自动进入input表单元素中时,我们就采用label标签。
性别: <label for="sex">男</label> <input type="radio" name="sex" id="sex"> <label for="sex1">女</label> <input type="radio" name="sex" id="sex1"> <label for="username">用户名:</label><input type="text" id="username"
1.2 select标签的使用
注意:使用selected表示默认选项
1.3 textarea标签的使用
1.4 一个比较简单的例题用来测试学习成果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>综合案例-注册页面</title> </head> <body> <h4>青春不常在,抓紧谈恋爱</h4> <table width="600" > <!-- 第一行 --> <tr> <td>性别:</td> <td> <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label> <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> </td> </tr> <!-- 第二行 --> <tr> <td>生日:</td> <td> <select> <option>--请选择年份--</option> <option>2001</option> <option>2002</option> <option>2003</option> </select> <select> <option>--请选择月份--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select> <option>--请选择日--</option> <option>1</option> <option>2</option> <option>3</option> </select> </td> </tr> <!-- 第三行 --> <tr> <td>所在地区</td> <td><input type="text" value="北京思密达"></td> </tr> <!-- 第四行 --> <tr> <td>婚姻状况:</td> <td> <input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 离婚 </td> </tr> <!-- 第五行 --> <tr> <td>学历:</td> <td><input type="text" value="博士后"></td> </tr> <!-- 第六行 --> <tr> <td>喜欢的类型:</td> <td> <input type="checkbox" name="love" > 妩媚的 <input type="checkbox" name="love" > 可爱的 <input type="checkbox" name="love" > 小鲜肉 <input type="checkbox" name="love" > 老腊肉 <input type="checkbox" name="love" checked="checked"> 都喜欢 </td> </tr> <!-- 第七行 --> <tr> <td>个人介绍</td> <td> <textarea>个人简介</textarea> </td> </tr> <!-- 第八行 --> <tr> <td></td> <td> <input type="submit" value="免费注册" > </td> </tr> <tr> <td></td> <td> <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准 </td> </tr> <tr> <td></td> <td> <a href="#" > 我是会员,立即登录</a> </td> </tr> <tr> <td></td> <td> <h5>我承诺</h5> <ul> <li>年满18岁、单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table> </body> </html>