一、
1、无序列表 : <ul> <li>
2、有序列表: <ol> <li>
3、自定义列表: <dl><dt><dd>
二、 区块
1、 div : 负责结构 ，块级元素
2、 span ：负责内容， 内联元素，行内元素
3、 div 和 span 有时也叫做钩子元素
<!-- 小粟子--> <!doctype html> <html lang="ch"> <head> </head> <body> <!-- 电影播放列表--> <h3 align="center"> §one§ </h3> <ul type="none"> <li> <img src="a.png" height="50"> <em>《乘风破浪》</em> <a href="#">点击播放<img src="b.png" width="30"></a> </li> <li> <img src="a.png" height="50"> <em>《乘风破浪》</em> <a href="#">点击播放<img src="b.png" width="30"></a> </li> <li> <img src="a.png" height="50"> <em>《乘风破浪》</em> <a href="#">点击播放<img src="b.png" width="30"></a> </li> <li> <img src="a.png" height="50"> <em>《乘风破浪》</em> <a href="#">点击播放<img src="b.png" width="30"></a> </li> <li> <img src="a.png" height="50"> <em>《乘风破浪》</em> <a href="#">点击播放<img src="b.png" width="30"></a> </li> </ul> <!-- get： 所有的数据全部在url 地址上，不安全，且数量有限 post: 所有的数据在 header 请求头，安全，且数据很大 post 提交，可以在 控制台 network 中查看 --> <form action="a.php" method="post"> 姓名：<input type="text" name="name" value=""><br> 密码：<input type="password" name="pass" value=""><br> <!-- 对于单选按钮，name 的值必须全部相同 --> 性别：<input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 <input type="radio" name="sex" value="secret" checked>保密 <!-- 复选框的 name 属性值必须是数组 --> 爱好： <input type="checkbox" name="hobby[]" value="movie">看电影 <input type="checkbox" name="hobby[]" value="game" checked">打游戏 <input type="checkbox" name=“hobby[]” value="cook"> 做饭 <br/> 级别： <select name="level"> <option value="" seclected="">one</option> <option value="">two</option> <option value="">three</option> </select> <br/> 头像：<input type="file" name="photo" accept="images/*"> <br/> 备注： <textarea name="comment" rows="s" cols="40"></textarea> <br/> <input type="submit" name="submit" value="提交"> </form> </body> </html>
又一个小粟子
<!doctype html> <html lang="en"> <head> </head> <body> <form action="" methd="post"> <table border="1" cellspacing="1" cellpadding="8" align="center" width="400" bgcolor="powderblue"> <caption><h2> 用户注册</h2><caption> <tr><td colspan="2"><hr></td></tr> <tr align="center"> 点击标签,让鼠标自动落到输入框中 <td align="left"> <label for="email"> 邮箱： </label> </td> <td align="right"> <input type="text" id="email" size="30" name="email" placeholder="邮箱"> </td> </tr> <tr align="center"> <td align="left"> <label for="pass"> 密码： </label> </td> <td align="right"> <input type="password" id="pass" size="30" name="email" placeholder="密码"> </td> </tr> <tr align="center"> <td align="right"> 性别:</td> <td align="left"> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 </td> </tr> <tr align="center"> <td align="right"> 性别： </td> <td align="left"> <select name="level"> <option value="0">one</option> <option value="1">two</option> <option value="2" welected="">three</option> </select> </td> </tr> <tr align="center"> <td align="right"> <label for="photo">头像：</label> </td> <td align="left"> <img src="a.png" height="20"> <input id="photo" type="file" id="photo" name="photo" accept="ima </td> </tr> </table> </form> </body> </html>
<body> 用表单控件分组来完成一个登录表单 <form action="" method="post"> <fieldset> <legend align="center">用户登录</legend> <p> <label for="email"> 邮箱:</label> <input type="text" id="email" name="email"> </p> <p> <label for="pass"> 邮箱:</label> <input type="password" id="pass" name="pass" placeholder=""> </p> <hr width="90%" color="orange"> <p> <button type="submit"> 立即登录</button> </p> </fieldset> </form> <body>
