前端 Day1（html）
前端之前已学一部分，这里主要作复习和补充
重点做三个案例来熟悉html：
1.文本标签练习：
效果图：
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑马旅游网</title> </head> <body> <h1>公司简介</h1><!--标题大小标签--> <hr color="#ffd700"><!--水平线--> <p><font color="ff0000">第一段之换色标签</font>，<strong><i>第一段之加粗斜体标签</i></strong>，第一段其他内容。</p> <p>第二段内容。</p> <p>第三段内容。</p> <p>第四段内容。</p> <hr color="#ffd700"> <center><font color="gray" size="2">下方水印1，居中显示，灰色小字©<br/><!--换行标签--> 下方水印2，居中显示，灰色小字</font></center> </body> </html>
2.表格练习
遇到表格结构比较复杂的情况，不要使用合并行或者合并列的属性，而是用表格的嵌套来实现。
也就是说，一行一行地写，每行如果有多格，就嵌套一个几列的表格。
实现一个机构如下的表格：
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑马旅游网</title> </head> <body> <table width="100%" align="center"> <!--第1行--> <tr><td><center>亲子周边旅游节</center></td></tr> <!--第2行--> <tr><td><table width="100%" align="center"><tr> <td>公司所有 </td> <td>搜索 </td> <td>客服热线 </td> </tr></table></td></tr> <!--第3行--> <tr><td><table width="100%" align="center"><tr bgcolor="#ffd700" align="center" height="45"> <td>首页 </td> <td>门票 </td> <td>酒店 </td> <td>香港车票 </td> <td>出境游 </td> <td>国内游 </td> <td>港澳游 </td> <td>抱团定制 </td> <td>全国自由行 </td> <td>收藏排行榜 </td> </tr></table></td></tr> <!--第4行--> <tr><td><center>玉龙雪山：洗涤心灵的旅程</center></td></tr> <tr></tr> <!--第5行--> <tr><td>精选</td></tr> <!--第6行--> <tr><td><table align="center" width="95%"><tr> <td>精选1 </td> <td>精选2 </td> <td>精选3 </td> <td>精选4 </td> </tr></table></td></tr> <!--第7行--> <tr><td>国内游</td></tr> <!--第8行--> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2">舌尖上的韩国：南部篇</td> <td>方案1</td> <td>方案2</td> <td>方案3</td> </tr> <tr> <td>方案4</td> <td>方案5</td> <td>方案6</td> </tr> </table> </td> </tr> <!--第9行--> <tr><td>境外游</td></tr> <!--第10行--> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2">特价旅游频道</td> <td>特价1</td> <td>特价2</td> <td>特价3</td> </tr> <tr> <td>特价4</td> <td>特价5</td> <td>特价6</td> </tr> </table> </td> </tr> <!--第11行--> <tr><td><table><tr> <td>产品齐全 </td> <td>便利快捷 </td> <td>安全支付 </td> <td>贴心服务 </td> </tr></table></td></tr> <!--第12行--> <tr><td align="center" bgcolor="#ffd700" height="40">版权所有</td></tr> </table> </body> </html>
3.表单标签
表单标签非常重要，因此再次作详细学习，完整笔记整理如下：
表单概念：用于采集用户输入的数据的。用于和服务器进行交互。
根据我的理解，表单标签主要就是包括input，select等各种类型的输入框。但是，我们在定义了输入框之后，必须将他们用form标签包裹起来，不然其中输入的数据，无法被提交！
那也许你就会有疑问，输入的数据必然是希望被提交的，那么form标签不是很鸡肋吗？那是因为from标签种包含两个重要的属性，可以去定义数据提交的方式和提交的地址等等！
当然，form标签中的数据想要被提交，光被form标签包裹是不够的，还必须在input等输入框标签中指定其name属性，这一点后面会再详细说。
- <form></form>
属性1：action
指定提交数据的URL（提交到哪里去）
属性2：method
指定提交方式（共7种，比较常见的就是get与post）
<form action="#" method="get"></form>
- <label></label>
属性1：for
输入框所对应的文字，都应放到各自的label标签里，并指定for属性。
label标签的for属性与input标签的id标签一致的，就表示该文字与该输入框对应。点一下文字，对应的输入框会亮。
接下来开始正式介绍几种不同的输入框标签：
- <input>
<input>是一个自闭合标签，包含了文本，密码，单选，复选等多种不同的简单输入框。
属性1：name
形象地说，就是定义了该框的key-value中的key。例如name定义为gender，那么一旦数据被提交，显示在url中的就是gender=xxx。
因此，如果一个输入框没有定义name，是无法被提交的。
属性2：value
value属性在不同type的输入框中的功能有些不同。text与password中表示默认值，radio与checkbox中表示提交数据的值等，后面会各自介绍。
属性3：checked
用于radio和checkbox设置默认第一个选项。写checked="checked"或直接写checked即可。
属性4：placeholder
用于text和password展示输入提示语。
属性5：id
用于与label标签中的for属性对应。
属性3：type
用于指定输入框的类型，种类比较多，下面挑一些重要的学习：
1.text：默认，文本输入框。
必须同时定义name属性。
可以同时定义value属性设置输入默认值（点了不会消失）。
可以同时定义placeholder属性设置输入提示语（点一下会消失）。
2.password：密码输入框
必须同时定义name属性。
可以同时定义placeholder属性设置输入提示语（点一下会消失）。
3.radio单选框
注意：一组单选框的选项，必须配合同一个额外的name属性。
必须同时指定name属性。
可以同时指定checked属性，设置默认第一个选项。
<input type="radio" name="gender">男 <input type="radio" name="gender">女
4.checkbox复选框
注意：一组复选框的选项，必须配合同一个额外的name属性。
必须同时指定name属性。
可以同时指定checked属性，设置默认第一个选项。
5.file上传文件
必须同时指定name属性。
6.hidden隐藏域
必须同时指定name属性和value属性。
隐藏于在页面中什么都不会展示，但是，一旦提交数据按钮，其name，value值会被提交上去。
7.submit
一个普通的提交按钮。
无须指定name属性，但是必须指定value属性（展示在该按钮上的字）
按下后，包在一起的所有数据会被提交。
8.button
一个普通的按钮。后续会与js结合使用。
无须指定name属性，但是必须指定value属性（展示在该按钮上的字）
9.image
无须指定name和value。
必须与src属性结合使用。
在src中指定图片地址，页面将会展示该图片作为一个提交按钮。按下按钮，提交包在一起的所有属性。
功能与submit相同，只是可以用指定的图片作为按钮外观而已。
10.color取色器
必须指定name。
11.date与datetime-local
用于固定格式输入时间。
均须指定name
<input type="date" name="date"><br> <input type="datetime-local" name="time">
12.还有email，number等等，用于特定内容的输入。
- <select></select>
下拉列表。与input标签并列，也是一种重要的输入框类标签。
select标签必须指定name属性。
必须与<option></option>标签配合使用。顾名思义，option里面就是一个个的选项。
option标签必须指定value属性，用于选中该选项后提交的值。比较高级的浏览器会自动提交option标签包裹的内容。
option标签可以用selected属性指定默认选项。
- <textarea></textarea>
文本域。
必须指定name属性。
cols属性：列数
rows属性：行数
autofocus属性：自动获取焦点
placeholder属性：引导语
required：必须输入
<textarea name="text" required placeholder="请输入内容" rows="5" cols="5" autofocus></textarea>
案例：一个完整的注册界面
<form action="#" method="get"> <table border="1" align="center" width="70"> <!--第一行：输入用户名--> <tr> <td><label for="username">用户名</label></td> <td><input type="text" id="username" name="username" placeholder="请输入账号"></td> </tr> <!--第二行：输入密码--> <tr> <td><label for="password">密码</label></td> <td><input type="password" id="password" name="password" placeholder="请输入密码"></td> </tr> <!--第三行：输入邮箱--> <tr> <td><label for="email">Email</label></td> <td><input type="email" id="email" name="email" placeholder="请输入Email"></td> </tr> <!--第四行：输入真实姓名--> <tr> <td><label for="name">姓名</label></td> <td><input type="text" id="name" name="name" placeholder="请输入真实姓名"></td> </tr> <!--第五行：输入手机号--> <tr> <td><label for="phonenumber">手机号</label></td> <td><input type="text" id="phonenumber" name="phonenumber" placeholder="请输入手机号"></td> </tr> <!--第五行：选择性别--> <tr> <td><label for="gender">性别</label></td> <td> <input type="radio" id="gender" name="gender" value="male" checked>男 <input type="radio" id="gender" name="gender" value="female">女 </td> </tr> <!--第六行：输入出生日期--> <tr> <td><label for="birthday">出生日期</label></td> <td><input type="date" id="birthday" name="birthday"></td> </tr> <!--第七行：提交--> <tr> <td colspan="2" align="center"><input type="submit" value="注册"></td> </tr> </table> </form>
