无序列表--------无序列表与有序列表最大的区别是无序列表的编号需要手动编写。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <h1>班级统计</h1> <ul> <li>1,电信,41</li> <li>2,电气,35</li> <li>3,物理,40</li> </ul> </body> <ol> <li>电信,41</li> <li>电气,35</li> <li>物理,40</li> </ol> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
2.表格--------①td-单元格；tr-行；cellspacing-间隙折叠
②水平方向上的合并 （colspan）；垂直方向（rowspan）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <h1>班级统计</h1> <ul> <li>1,电信,41</li> <li>2,电气,35</li> <li>3,物理,40</li> </ul> <table border="1" cellspacing="0" bgcolor="#ffe4c4"align="left"> <caption>班级统计</caption> <thead> <td>编号</td> <td>班级</td> <td>人数</td> <tbody> <tr> <td width="50">1</td> <td width="50">电信</td> <td width="50">41</td> </tr> <tr> <td width="50">1</td> <td width="50">电气</td> <td width="50">35</td> <tr> <td width="50">1</td> <td width="50">物理</td> <td width="50">40</td> </tr> </tbody> <tfoot> <tr> <td colspan="2" align="center">总计：</td> <td>116</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.表单----①for与id绑定点击前面文本也能自动定位；②复选框-checkbox，单选框-radio，文本域-textarea，提交-submit，重置-reset
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h3>用户注册</h3> <form action="" method="get" name="register"> <p> <label for="username">账号：</label> <input type="text" id="username" name="username" placeholder="不超过八个字符" autofocus ><!placeholder提示信息> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password"placeholder="6-12个字母或数字" > <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email"placeholder="examplexxxxxxx@mail.com"required > </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age"min="16" max="70" > </p> <p> <label for="birthday">年龄：</label> <input type="date" id="birthday" name="birthday" > </p> <p> <label for="course">课程:</label> <select name="course" id="course" size="1"> <option value="1">选择</option> <option value="2">语文</option> <option value="3">数学</option> <option value="4">英语</option> <option value="5">物理</option> </select> <p> <label for="game">爱好：</label> <input type="checkbox" name="hobby[]" value="game" id="game"> <label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="programe" id="programe"> <label for="programe">敲代码</label> <input type="checkbox" name="hobby[]" value="movies" id="movies" checked> <label for="movies">看电影</label> <p> <label for="female">性别：</label> <input type="radio"name="gender" value="male" id="male" ><label for="male">男生</label> <input type="radio"name="gender" value="female" id="female" ><label for="female">女生</label> <input type="radio"name="gender" value="secrecy" id="secrecy" ><label for="secrecy">保密</label> <p> <label for="comment">简介：</label> <textarea name="comment" id="comment"cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea> <p> <input type="submit" id="submit" value="提交"> <input type="reset" id="reset" value="重置"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4,html文档结构
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>