1.表格基本框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
2.表头单元格标签
<!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> <table> <tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr> <tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr> <tr><td>张学友</td> <td>男</td> <td> 58 </td></tr> <tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr> <tr><td>黎明</td> <td>男</td> <td> 57 </td></tr> </table> </body> </html>
3.合并单元格
<table align="center" width="500" height="249" border="1" cellspacing="0">
cellspacing表示网格间的间距为0
4.有序列表和无序列表
<ul> <td></td> <td></td> <td></td> </ul> <ol> <td></td> <td></td> <td></td> </ol>
5.自定义列表
<dl> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl>
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
6.表单域
<!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> <form action="demo.php" method="POST" name="name1"> </form> </body> </html>
7.input表单
要实现单选或者复选框，均要保证name属性相同
<!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>input 表单元素</title> </head> <body> <form action="xxx.php" method="get"> <!-- text 文本框 用户可以里面输入任何文字 --> 用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br> <!-- password 密码框 用户看不见输入的密码 --> 密码: <input type="password" name="pwd"> <br> <!-- radio 单选按钮 可以实现多选一 --> <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 --> <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 --> 性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br> <!-- checkbox 复选框 可以实现多选 --> 爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked"> <br> <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 --> <input type="submit" value="免费注册"> <!-- 重置按钮可以还原表单元素初始的默认状态 --> <input type="reset" value="重新填写"> <!-- 普通按钮 button 后期结合js 搭配使用--> <input type="button" value="获取短信验证码"> <br> <!-- 文件域 使用场景 上传文件使用的 --> 上传头像: <input type="file"> </form> </body> </html>
8.label标签
<label for="email">E-mail:</label> <input type="text" id="email">
9.selected下拉表单
<option value="" selected="selected">diao</option> <option value="" selected="true">lao</option>
10.文本框textarea
<!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>textarea 文本域</title> </head> <body> <form> 今日反馈: <textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea> </form> </body> </html>
