3.5、表格标签
表格标签
1、table ：定义表格
1.1、border：规定表格边框的宽度
1.2、width ：规定表格的宽度
1.3、cellspacing：规定单元格之间的空白
2、tr ：定义行
3.1、align：定义表格行的内容对齐方式
3、td ：定义单元格
3.1、rowspan : 规定单元格可横跨的行数
3.2、colspan : 规定单元格可横跨的列数
3.3、th：定义表头单元格
3.6、布局标签
这两个标签，一般都是和css结合到一块使用来实现页面的布局。
div 标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。
3.7、demo
1. <!DOCTYPE html><!-- 声明HTML5--> 2. <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 3. "http://www.w3.org/TR/html4/loose.dtd"> 声明HTML4--> 4. <html lang="en"> 5. <head> 6. <meta charset="UTF-8"> 7. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8. <meta name="viewport" content="width=, initial-scale=1.0"> 9. <title>HTML简单学习</title> 10. </head> 11. <body> 12. <!--居中--> 13. <center> 14. <b><i><u> 15. <font face="楷体" size="10" color="#ff0000">JavaWeb->HTML简单学习</font> 16. </u></i></b> 17. </center> 18. <!--加粗、斜体、下划线--> 19. <b>JavaWeb->HTML</b><br> 20. <i>JavaWeb->HTML</i><br> 21. <u>JavaWeb->HTML</u><br> 22. <b><i><u>JavaWeb->HTML</u></i></b> 23. <p></p> 24. <hr> 25. </body> 26. <body> 27. Java Web 28. <hr><!--水平线--> 29. <font face = "楷体" size = "5" color = "#ff0000">Java Web学习</font><br> 30. Java<br>Web<!--br标签定义换行--> 31. <hr> 32. HTML是用来描述网页内容和结构的语言。 33. 它用标签来描述页面中的各种元素，例如文本、图像、超链接等。 34. 浏览器可以解释HTML标签并在网页上呈现相应的内容。 35. 这些标签不像XML那样可以自定义，HTML中的标签都是预定义好的， 36. 运行在浏览器上并由浏览器解析，然后展示出对应的效果<hr> 37. <!--<P></P>段落标签，添加标签之后会单独为一段--> 38. <p>HTML是用来描述网页内容和结构的语言。</p> 39. <p>它用标签来描述页面中的各种元素，例如文本、图像、超链接等。</p> 40. <p>浏览器可以解释HTML标签并在网页上呈现相应的内容。</p> 41. <p>这些标签不像XML那样可以自定义，HTML中的标签都是预定义好的， 42. 运行在浏览器上并由浏览器解析，然后展示出对应的效果</p> 43. </body> 44. <!--超链接--> 45. <body><a href="https://www.baidu.com" target="_self">点我有惊喜1</a></body> 46. <body><a href="https://www.baidu.com" target="_blank">点我有惊喜2</a></body> 47. <!--列表标签--> 48. <body> 49. <ol type="I"><li>咖啡</li><li>茶</li><li>牛奶</li></ol> 50. <ul type="circle"><li>咖啡</li><li>茶</li><li>牛奶</li></ul> 51. </body> 52. <!--表格标签:<table></table> + 图片标签--> 53. <body> 54. <table border="1" cellspacing="5" width="500"> 55. <tr> 56. <!--th定义表头--> 57. <th>序号</th> 58. <th>品牌logo</th> 59. <th>品牌名称</th> 60. <th>企业名称</th> 61. </tr> 62. <tr align="center"> 63. <td>010</td> 64. <td><img src="https://p1.ssl.qhimg.com/t015e8bc934627ea09c.jpg" width="60" height="50"></td> 65. <td>三只松鼠</td> 66. <td>三只松鼠</td> 67. </tr> 68. <tr align="center"> 69. <td>009</td> 70. <td><img src="https://pic3.zhimg.com/v2-2621fdc2820b28bacde38cbe36a2e63d_1440w.jpg" width="60" height="50"></td> 71. <td>优衣库</td> 72. <td>优衣库</td> 73. </tr> 74. <tr align="center"> 75. <td>008</td> 76. <td> 77. <img src="https://ts1.cn.mm.bing.net/th/id/R-C.b130c87b75a17febd7f7ff8934238178?rik=sVqYsZWZ9sOmVA&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221174024-912240027.jpg&ehk=TiyBsTIzWYVfwoi8BrKTPVZeble44GPuqAXOrQdC2Hk%3d&risl=&pid=ImgRaw&r=0" width="60" height="50"> 78. </td> 79. <td>小米</td> 80. <td>小米科技有限公司</td> 81. </tr> 82. </table> 83. </body> 84. </html>
最终效果：
4、🔺表单标签
登陆页面、注册页面等都是表单。
这样的表单就是用来采集用户输入的数据，然后将数据发送到服务端，服务端会对数据库进行操作。
比如注册就是将数据保存到数据库中，而登陆就是根据用户名和密码进行数据库的查询操作。
4.1、概述
表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
4.2、<from>
form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。
如下图就是不同的表单项标签展示出来的效果。
form的两种标签属性：
①action：规定当提交表单时向何处发送表单数据，该属性值就是URL
以后会将数据提交到服务端，该属性需要书写服务端的URL。
而在demo中可以先写 # ，表示提交到当前页面来看效果。
②method ：规定用于发送表单数据的方式
method取值有如下两种：
1、get：是默认值。如果不设置method属性则默认就是该值
请求参数会拼接在URL后边
url的长度有限制 4KB
2、post：
浏览器会将数据放到http请求消息体中
请求参数无限制的
代码演示：
由于表单标签在页面上没有任何展示的效果，所以在演示的过程是会先使用 input 这个表单项标签展示输入框效果。
get：
post：
可以查看到post的内容：
4.2.1、from_demo
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <title>Title</title> 6. </head> 7. <body> 8. <form action="#" method="post"> 9. <input type="text" name="username"> 10. <input type="submit"> 11. </form> 12. </body> 13. </html>
4.3、🔺表单项标签
表单项标签即表单的元素
表单项标签有很多，不同的表单项标签有不同的展示效果。
表单项标签可以分为以下三个：
1、<input>：表单项，通过type属性控制输入形式
input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样。type取值如下：
2、<select>：定义下拉列表，<option> 定义列表项。下拉列表的效果如下：
3、<textarea>：文本域。(它可以输入多行文本，而 input 数据框只能输入一行文本)
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
4.3.1、注意事项
以上标签项的内容要想提交，必须得定义 name 属性。
每一个标签都有id属性，id属性值是唯一的标识。
单选框、复选框、下拉列表需要使用 value 属性指定提交的值
5、综合练习
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7. <title>Forms and form item tags</title> 8. </head> 9. <body> 10. <form action="#" method="post"> 11. <input type="hidden" name="id" value="123"><!--隐藏输入的字段--> 12. 13. <label for="username">用户名：</label> 14. <input type="text" name="username"> 15. <br> 16. 17. <label for="password">密码：</label> 18. <input type="password" name="password" id="password"> 19. <br> 20. 21. <label for="gender">性别：</label> 22. <input type="radio" name="gender" value="1" id="male">男<!--定义单选按钮--> 23. <input type="radio" name="gender" value="2" id="female">女 24. <br> 25. 26. <label for="hobby">爱好：</label> 27. <input type="checkbox" name="hobby" value="1">旅游<!--定义复选框--> 28. <input type="checkbox" name="hobby" value="2">电影 29. <input type="checkbox" name="hobby" value="3">游戏 30. <br> 31. 32. <label for="Head picture">头像：</label> 33. <input type="file"><!--定义文件上传按钮--> 34. <br> 35. 36. <label for="city">城市</label> 37. <select name="city"><!--定义下拉列表--> 38. <option>北京</option> 39. <option value="shanghai">上海</option> 40. <option>广州</option> 41. <option>深圳</option> 42. </select> 43. <br> 44. 45. <label for="description">个人描述：</label><br> 46. <textarea cols="30" rows="4" name="description"></textarea> 47. <br> 48. 49. <input type="submit" value="注册"> 50. <input type="reset" value="重置"> 51. <input type="button" value="按钮"> 52. </form> 53. </body> 54. </html>
效果如下：
