列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--无序列表--> <ul> <!--a标签href属性等链接路径--> <li><a href="/">首页</a></li> <li><a href="/">图库</a></li> <li><a href="/">平面素材</a></li> <li><a href="/">室内素材</a></li> <li><a href="/">首页</a></li> </ul> <hr> <!--tabley就是表格的意思--> <table border="1" cellpadding="10" cellspacing="0" width="500" align="left"> <!-- caption 表头--> <caption><h3>工资表</h3></caption> <!-- thead 表头 一张表格只有一个表头 --> <thead> <!-- tr 行 --> <!--th(代替td） 单元格 多个单元格组成行--> <!--bgcolor背景色--> <tr bgcolor="aqua"> <th>编号</th> <th>姓名</th> <th>工号</th> <th>工资</th> <th>实发</th> <th>备注</th> </tr> </thead> <!-- tbody 表格主体内容 必须要写 --> <tbody> <!-- align属性=表格的左中右 --> <tr align="center"> <!-- width 属性表格的宽度，数值根据场景跳整 --> <td width="50">1</td> <td width="200">曾庆柳</td> <td width="70">001</td> <td width="70">3000</td> <td width="50">3500</td> <!-- rowspan属性行的合并 --> <td width="50" rowspan="4">请财务人员注意</td> </tr> <tr> <td>2</td> <td>张三</td> <td>002</td> <td>2500</td> <td>3000</td> </tr> <tr> <td>3</td> <td>李四</td> <td>003</td> <td>2000</td> <td>2500</td> </tr> <tr> <!-- colspan 列表合并行 --> <td colspan="3">总计</td> <!-- <td></td>--> <!-- <td></td>--> <td>7500</td> <td>9000</td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
表单与表单中的控件元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单与表单中的控件元素</title> </head> <body> <h3>用户注册</h3> <form action="" method="get" name="register" > <!-- id 和for属性是通过对应值来绑定的 跟前后顺序无关--> <p> <label for="username">帐号：</label> <!-- placeholder 提示信息 autofocus自动获取 --> <input type="text" id="username" name="uwername" placeholder="不超过8个字符" autofocus> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="6-12个字母或数字"> </p> <p> <label for="email">邮箱：</label> <!-- required 必填项 --> <input type="email" id="email" name="email" placeholder="exampl@mail.com" required> </p> <p> <label for="age">年龄：</label> <!-- min max属性是设置取值范围 --> <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" sizz="1"> <!-- selected属性默认选项--> <option value="0" selected>请选择</option> <option value="1">平面素材</option> <option value="2">室内素材</option> <option value="3" >广告素材</option> </select> </p> <p> <!-- 复选框--> <!-- 爱好lable for属性可任意绑定子级下面的fof属性值 --> <label for="programme">爱好：</label> <input type="checkbox" name="hobby[]" value="game" id="game"> <label for="game">摄影</label> <input type="checkbox" name="hobby[]" value="programe" id="programme"> <label for="programme">跑步</label> <!-- checked 默认值--> <input type="checkbox" name="hobby[]" value="programme" id="movies" checked> <label for="movies">看电影</label> </p> <!-- radio 单选按钮 --> <!-- name属性值必须一样--> <p> <label for="male">性别</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" checked> <label for="secrecy">保密</label> </p> <!-- textarea 文本域--> <p> <label for="comment">个人简介</label> <!--不要设置value --> <!-- cols 列 rows 行 maxlength 多少个字 placeholder 提示--> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea> </p> <!-- input 按钮--> <p> <input type="submit" name="submit" value="提交" > <!-- reset重置，不是删除，回到默认--> <input type="reset" name="reset" value="重置" > <!--button就是按钮意思 默认type属性值submit --> <button type="submit">提交1</button> <button type="button">Ajax</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例