表格标签
-
表格是用来展示数据的 不是用来布局页面的
-
<!-- table 用于定义表格的标签 --> <table> <!-- tr标签表示行 --> <tr> <!-- td标签 表示单元格 --> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>1 2 3 4 5 6 7 8 9 -
th表头单元格 里面的文本 会加粗 居中显示
<table> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> </table> -
属性（第一次用html的表格做 看起来不错ne）
属性名 属性值 描述 align left、center、right 描述表格相对于周围元素的对齐方式 border 1或”” 规定表格是否有边框 默认为””，表示没有边框 cellpadding 像素值 规定单元格边缘和内容之间的空白 默认1像素 cellspacing 像素值 规定单元格之间的空白 默认2像素 width 像素值或百分比 规定表格的宽度 也可以设置height
-
表格结构标签 感觉没啥效果 就是表示谁是头？
thead表示表格头部 tbody表示表格主体 -
合并单元格
- 先确定是跨行（rowspan）还是跨列（colspan）
- 找到目标单元格 开写
- 删除多余的单元格
<table align="center" cellspacing="0" border="1"> <thead> <tr> <th colspan="3">lcj和小鸟游六花</th> </tr> </thead> <tbody> <tr> <td rowspan="3">lcj和小鸟游六花</td> <td rowspan="3">lcj和小鸟游六花</td> <td rowspan="3">lcj和小鸟游六花</td> </tr> </tbody> </table>lcj和小鸟游六花 lcj和小鸟游六花 lcj和小鸟游六花 lcj和小鸟游六花
列表标签
-
列表是用来布局的
-
无序列表
<h1>lcj最喜欢的三个人</h1> <ul> <li>六花</li> <li>六花</li> <li>六花</li> </ul>lcj最喜欢的三个人
- 六花
- 六花
- 六花
-
有序列表
<h1>最爱的三人</h1> <ol> <li>Rikka</li> <li>Rikka</li> <li>Rikka</li> </ol>最爱的三人
- Rikka
- Rikka
- Rikka
-
自定义列表
<dl> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl>- 关注我们
- 新浪微博
- 官方微信
- 联系我们
表单标签
-
表单目的 : 收集用户信息
-
表单组成 : 表单域 表单控件（表单元素） 提示信息
- 表单域是一个包含表单元素的区域 会把范围内的表单元素信息提交给服务器
- form action=”demo.php” method=”GET” name=”name1″
属性 属性值 作用 action url地址 指定接受处理表单数据 服务器 的url地址 method get/post 设置表单的提交方式 name 名称 指定表单名称 区分多个表单域 - 表单控件 : 就是允许用户在表单中输入或者选择的控件
-
<input>
- 是单标签
- 不同type的属性值 对应不同的控件
属性值 描述 text 定义单行输入字段 用户可在其中输入文本 默认宽度20个字符 password 输进去 看不见哦 radio 单选按钮 多选一 不过名字记得一样哦 checkbox 复选框 可以多选 submit 定义提交按钮 提交会把数据发到服务器 reset 重置按钮 会清除表单中的数据 button 定义可点击按钮（多数情况下 用于通过javascript启动脚本） file 提供文件上传 - <input>还有其他属性
属性 属性值 描述 name 由用户自定义 定义input元素的名称 value 由用户自定义 规定input元素的值 checked 没有感觉也行 规定此元素首次加载时 应当被选中 maxlength 正整数 规定输入字段中的字符的最大长度 <form action=""> 用户名 : <input type="text" name="username" value="admin" maxlength="10"> 最大长度为10 <br> 密码 : <input type="password" name="pwd" value="admin" maxlength="10"> <br> 性别 : <input type="radio" name="sex" value="nan" checked> 男 <input type="radio" name="sex" value="nv"> 女 <input type="radio" name="sex" value="ry"> 人妖 <br> 爱好 : <input type="checkbox" name="hobby" value="eat"> 吃饭 <input type="checkbox" name="hobby" value="sleep"> 睡觉 <input type="checkbox" name="hobby" value="chahua" checked> 插花 <br> <input type="submit" value="免费注册"> <input type="reset" value="重新填写"> <input type="button" value="获取短信验证码"> <br> 上传头像 : <input type="file" </form>-
文本maxlength感觉不错哦
感觉对于这种框框 value 还是重要的 单选框 name也重要
button 按钮什么的 value能改里面的内容 和文本一样 -
<label> 标签
- 用于绑定一个表单元素 当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择(指的是框框的那种把 好像直接替你点了下)对应的表单元素上
- 要有for 和id 而且要对应上（感觉有点像锚点链接 地说呢）
<label for="sex">男</label> <input type="radio" name="sex" id="sex"> <br>
-
<select>标签控件定义下拉列表
- 给用户多个选项 且固定（不用用户输入） 且想节省页面空间
- <option> 里加 selected 会变成默认滴
<select name="" id=""> <option value="0">零花</option> <option value="1">一花</option> <option value="2">二花</option> <option value="3">三花</option> <option value="4">四花</option> <option value="5" selected>五花</option> <option value="6" selected>六花</option> </select> -
<textarea>标签控件定义多行输入 (第一次见 还是 在英语作文那)
<form action=""> <!-- cols每行中的字符数 rows 显示的行数 --> <!-- 其实我还是感觉就是用来控制大小的 --> <textarea name="" id="" cols="300" rows="100">Dear LiuHua</textarea> </form>
-
一个案例
看弹幕 学会了 option*9{200$} 还有折叠&&展开快捷键 ctrl+shift+[ / ]
青春不常在，抓紧谈恋爱
| 性别 | |
| 生日 | |
| 所在地区 | |
| 婚姻状况 | |
| 学历 | |
| 喜欢的类型 | |
| 自我介绍 | |
| 我同意注册条款和会员加入标准 | |
| 我是会员，立即登录 | |
我承诺
|
<!DOCTYPE html>
<html lang="zh-CN">
<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>综合案例-注册页面</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<!-- 没加大的form 只是布局就好了 -->
<!-- 600还真是不粗呢 -->
<table width="600">
<!-- 第一行 -->
<tr>
<td>性别</td>
<td>
<!-- 还贴心的加了label 的说呢 -->
<input type="radio" name="sex" value="nan" id="nan" checked> <label for="nan"><img src="images/man.jpg"
alt="">
男 </label>
<input type="radio" name="sex" value="n1" id="nv"> <label for="nv"><img src="images/women.jpg" alt="">
女
</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select name="" id="">
<!-- option*9{200$} 真是好用呢 的说呢 就是不知道 她属于谁 -->
<option value="" selected>--请选择年份--</option>
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
<option value="">2010</option>
</select>
<select name="" id="">
<option value="">--请选择月份--</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
</select>
<select name="" id="">
<option value="">--请选择日--</option>
<option value="">01</option>
<option value="">02</option>
<option value="">03</option>
<option value="">04</option>
<option value="">05</option>
<option value="">06</option>
<option value="">07</option>
<option value="">08</option>
<option value="">09</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="阿拉斯加"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况</td>
<!-- 没加value 也是因为只要个样子 罢了…… -->
<td><input type="radio" name="marry" id="weihun" checked> <label for="weihun">未婚</label> <input type="radio"
name="marry" id="yihun"> <label for="yihun">已婚</label> <input type="radio" name="marry" id="lihun">
<label for="lihun">离婚</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历</td>
<td><input type="text" value="家里蹲"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型</td>
<td>
<!-- 还真是lsp的默认呢 的说呢 -->
<input type="checkbox" name="love" id="wumei"> <label for="wumei">妩媚的</label>
<input type="checkbox" name="love" id="keai"> <label for="keai">可爱的</label>
<input type="checkbox" name="love" id="xiaoxianrou"> <label for="xiaoxianrou">小鲜肉</label>
<input type="checkbox" name="love" id="laolarou"> <label for="laolarou">老腊肉</label>
<input type="checkbox" name="love" id="douxihuan" checked> <label for="douxihuan">都喜欢</label>
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>自我介绍</td>
<!-- textarea 设置默认居然直接写就好了呢 毕竟是双标签呢 value好像不可以 的说呢 -->
<td><textarea>个人简介</textarea></td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td><input type="checkbox" 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>
原文地址：http://www.cnblogs.com/RikkaandLcj/p/16928214.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
