day02-HTML02

兜兜零元  金牌会员 | 2022-10-28 20:20:09 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 864|帖子 864|积分 2592

4.HTML

4.3HTML基本标签

4.3.9表格(table)标签


  • 基本语法：
  1. <table border="边框宽度" cellspacing="空隙大小" cellpadding="填充大小">
  2. </table>
复制代码

  • 说明：
table 是表格标签，border 设置表格标签
width 设置表格宽度，height 设置表格高度
align 设置表格相对于页面的对其方式
cellspacing 设置单元格间的空隙大小，0表示没有空隙
tr 是行标签，th是表头标签，td是单元格标签
align设置单元格文本对齐方式，b是加粗标签
例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格标签</title>
  6. </head>
  7. <body>
  8. <h1 align="center">标签表格的使用</h1>
  11. <table width="500" border="5" align="center">
  12.     <tr>
  13.         <th>姓名</th>
  14.         <th>地址</th>
  15.         <th>邮件</th>
  16.     </tr>
  17.     <tr>
  18.         <td>第1行第1列</td>
  19.         <td>第1行第2列</td>
  20.         <td>第1行第3列</td>
  21.     </tr>
  22.     <tr>
  23.         <td>第2行第1列</td>
  24.         <td>第2行第2列</td>
  25.         <td>第2行第3列</td>
  26.     </tr>
  27.     <tr>
  28.         <td>第3行第1列</td>
  29.         <td>第3行第2列</td>
  30.         <td>第3行第3列</td>
  31.     </tr>
  32. </table>
  33. </body>
  34. </html>
复制代码


  • 跨行跨列表格

    • 合并列：colspan="列数"
    • 合并列：rowspan="行数"
    • cellspacing：设置单元格间的空隙大小，0表示没有空隙
    • bordercolor：指定表格边框的颜色
    使用表格标签，展示如下的表格：

例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>跨行跨列表格</title>
  6.    
  7. </head>
  8. <body>
  9. <h2>跨行跨列表格</h2>
  10. <table border="1" bordercolor="#E87EFA" width="500" cellspacing="0">
  11.     <tr>
  12.         
  13.         <td colspan="3" align="center">第1行第1列</td>
  14.     </tr>
  15.     <tr>
  16.         
  17.         <td rowspan="2">第2行第1列</td>
  18.         <td>第2行第2列</td>
  19.         <td>第2行第3列</td>
  20.     </tr>
  21.     <tr>
  22.         <td>3.2</td>
  23.         <td>33</td>
  24.     </tr>
  25.     <tr>
  26.         
  27.         <td rowspan="2">第4行第1列</td>
  28.         <td>42</td>
  29.         <td>43</td>
  30.     </tr>
  31.     <tr>
  32.         <td>52<img src="https://www.cnblogs.com/imgs/2.png" width="100"></td>
  33.         <td>53</td>
  34.     </tr>
  35. </table>
  36. </body>
  37. </html>
复制代码
4.3.10表单form标签

表单语法：

  • form 表示表单
  • action 表示提交到哪个页面
  • method 表示提交方式，常用get和post
  • input type="text"输入框
  • input type="password"密码框
  • input type="submit" 提交按钮
  • input type="reset" 重置按钮
  1. <form action="url" method=*>
  2.     ...
  3.     ...
  4.     <input type="submit"><input type="reset">
  5. </form>
复制代码
其中 url 表示定位一个web资源的路径
method的星号可以为get，也可以是post，不写的话默认是get
例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单登录</title>
  6. </head>
  7. <body>
  8. <h1>登录系统</h1>
  9. <form action="ok.html" method="post">
  10.     用户名： <input type="text" name="username"><br/>
  11.    
  12.     密　码： <input type="password" name="username"><br/>
  13.     <input type="submit" value="登录">　<input type="reset" value="重新填写">
  14. </form>
  15. </body>
  16. </html>
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>登录成功</title>
  6. </head>
  7. <body>
  8. <h1>登录成功！</h1>
  9. </body>
  10. </html>
复制代码
4.3.11input标签

元素有很多形态，根据不同的 type 属性

  • 定义密码字段
  • 定义用于文本输入的单行输入字段
  • 定义提交表单数据至表单处理程序的按钮。
  • 定义单选按钮，多个选择中只能选择一个选项
  • 定义复选框，复选框允许用户在有限数量的选项中选择零个或多个选项
  • 用于应该包含数字值的输入字段
  • 定义按钮
  • 是文件上传域

4.3.12select/option/textarea标签


  • 元素定义下拉列表
  • 元素定义待选择的选项，列表通常会把首个选项显示为被选选项。通过添加 selected 属性来定义预定义选项
  • 元素定义多行输入字段（文本域）
4.3.13表单综合练习
  1. form 标签就是表单
  2. input type=text 是文件输入框
  3. value 设置默认显示内容
  4. input type=password 是密码输入框 value 设置默认显示内容
  5. input type=radio 是单选框 name 属性可以对其进行分组
  6. checked="checked"表示默认选中
  7. input type=checkbox 是复选框 checked="checked"表示默认选中
  8. input type=reset 是重置按钮 value 属性修改按钮上的文本
  9. input type=submit 是提交按钮 value 属性修改按钮上的文本
  10. input type=button 是按钮 value 属性修改按钮上的文本
  11. input type=file 是文件上传域
  12. input type=hidden 是隐藏域，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
  13. select 标签是下拉列表框
  14. option 标签是下拉列表框中的选项
  15. selected="selected"设置默认选中
  16. textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
  17. rows 属性设置可以显示几行的高度
  18. cols 属性设置每行可以显示几个字符宽度
复制代码
1.一定要使用form标签将input标签包起来，且一定要给input元素设置name属性，否则数据提交不到服务器
2.checkbox 是复选框，如果希望是同一组，就要保证 name 属性一致

  • checkbox ,select, radio 提交数据的时候是 value 属性的值
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <form>
  9.     用户注册信息<br/>
  10.     用户名称：<input type="text" name="username"><br/>
  11.     用户密码：<input type="password" name="pwd1"><br/>
  12.     确认密码：<input type="password" name="pwd2"><br/>
  13.     请选择你喜欢的运动项目:
  14.     <input type="checkbox" name="sport" value="lq">篮球<br/>
  15.     <input type="checkbox" name="sport" value="zq" checked>足球<br/>
  16.     <input type="checkbox" name="sport" value="sq" checked>手球<br/>
  17.     请选中你的性别:
  18.     <input type="radio" name="gender" value="male" checked>男<br/>
  19.     <input type="radio" name="gender" value="female">女<br/>
  20.     请选中你喜欢的城市
  21.     <select name="city">
  22.         <option>--选择--</option>
  23.         <option value="sh">上海</option>
  24.         <option value="bj">北京</option>
  25.         <option value="gz">广州</option>
  26.     </select><br/>
  27.     自我介绍
  28.     <textarea name="comment" rows="4" cols="25"></textarea><br/>
  29.     请选中你的头像文件
  30.     <input type="file" name="myfile"><br/>
  31.     <input type="submit" name="提交" value="提交">
  32.     <input type="reset" name="重置" value="重置">
  33. </form>
  34. </body>
  35. </html>
复制代码
4.3.14表单格式化

完成如下界面：
练习：使用表格标签将表单格式化
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单格式化</title>
  6. </head>
  7. <body>
  8. <form>
  9.     <h1>用户注册信息</h1>
  10.     <table>
  11.         <tr>
  12.             <td>用户名称：</td>
  13.             <td><input type="text" name="username"></td>
  14.         </tr>
  15.         <tr>
  16.             <td>用户密码：</td>
  17.             <td><input type="password" name="pwd1"></td>
  18.         </tr>
  19.         <tr>
  20.             <td>确认密码：</td>
  21.             <td><input type="password" name="pwd2"></td>
  22.         </tr>
  23.         <tr>
  24.             <td>请选择你喜欢的运动项目：</td>
  25.             <td><input type="checkbox" name="sport" value="lq">篮球
  26.                 <input type="checkbox" name="sport" value="zq" checked>足球
  27.                 <input type="checkbox" name="sport" value="sq" checked>手球
  28.             </td>
  29.         </tr>
  30.         <tr>
  31.             <td>请选中你的性别：</td>
  32.             <td>
  33.                 <input type="radio" name="gender" value="male" checked>男
  34.                 <input type="radio" name="gender" value="female">女
  35.             </td>
  36.         </tr>
  37.         <tr>
  38.             <td>请选中你喜欢的城市：</td>
  39.             <td>
  40.                 <select name="city">
  41.                     <option>--选择--</option>
  42.                     <option value="sh">上海</option>
  43.                     <option value="bj">北京</option>
  44.                     <option value="gz">广州</option>
  45.                 </select>
  46.             </td>
  47.         </tr>
  48.         <tr>
  49.             <td>自我介绍：</td>
  50.             <td><textarea name="comment" rows="4" cols="25"></textarea></td>
  51.         </tr>
  52.         <tr>
  53.             <td>请选择你的头像文件：</td>
  54.             <td><input type="file" name="myfile"></td>
  55.         </tr>
  56.         <tr>
  57.             <td><input type="submit" name="提交" value="提交"></td>
  58.             <td><input type="reset" name="重置" value="重置"></td>
  59.         </tr>
  60.     </table>
  61. </form>
  62. </body>
  63. </html>
复制代码
4.3.15表单提交数据细节


  • action表示将form表单的数据提交给哪个url，即服务器的哪个资源(如servlet)
  • method属性设置提交的方式   主要是：get 和 post，默认是get
  • 表单提交的时候，数据没有发送给服务器的三种情况：

    • 表单某个元素项没有name属性值，则数据不会提交
    • 单选，复选框(下拉列表中的option标签)都需要添加value属性，以便发送给服务器
      对于checkbox复选框，可以提交多个值，但是name是统一的(为了区分复选框的分组)
      对于select，checkbox，radio标签，提交的数据是value指定的值

    • 表单项不在提交的form标签中
      提交的数据一定要放在form标签内，否则不会提交


  • GET请求的特点是：

    • 浏览器地址中的地址是：action的属性值[+?+请求参数]  请求参数的格式是：name=value&name=value
    • 不安全 (建议重要信息不要选择get)
    • 它有数据长度的限制

  • POST请求的特点是：

    • 浏览器地址栏中只有action属性值，提交的数据是携带在http请求中，不会展示在地址栏中
    • 相对于get请求要更安全
    • 理论上没有数据长度的限制
    post请求分析：
    如下，在浏览器中选择f12快捷键

    这里是http的请求头：
    1. POST /1027practice/ok.html HTTP/1.1
    2. Host: localhost:63342
    3. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
    4. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
    5. Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
    6. Accept-Encoding: gzip, deflate, br
    7. Content-Type: application/x-www-form-urlencoded
    8. Content-Length: 24
    9. Origin: http://localhost:63342
    10. Connection: keep-alive
    11. Referer: http://localhost:63342/1027practice/form_login.html?_ijt=e39at152i0jkgl2dtreahm36fk&_ij_reload=RELOAD_ON_SAVE
    12. Cookie: Idea-14176161=c5173052-46ad-4245-9208-03592d0dcf0e; Idea-f24e85b1=ae595c67-c988-4ef0-856d-44549b2b2eb7
    13. Upgrade-Insecure-Requests: 1
    14. Sec-Fetch-Dest: document
    15. Sec-Fetch-Mode: navigate
    16. Sec-Fetch-Site: same-origin
    17. Sec-Fetch-User: ?1
    复制代码
    这里是http的请求体：
    1. username=jack&pwd=123456
    复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

兜兜零元

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表