4.HTML

4.3HTML基本标签

4.3.9表格(table)标签

• 基本语法：

• 说明：

table 是表格标签，border 设置表格标签

width 设置表格宽度，height 设置表格高度

align 设置表格相对于页面的对其方式

cellspacing 设置单元格间的空隙大小，0表示没有空隙

tr 是行标签，th是表头标签，td是单元格标签

align设置单元格文本对齐方式，b是加粗标签

例子

    
    


标签表格的使用



    

        
姓名
        
地址
        
邮件
    
    

        
第1行第1列
        
第1行第2列
        
第1行第3列
    
    

        
第2行第1列
        
第2行第2列
        
第2行第3列
    
    

        
第3行第1列
        
第3行第2列
        
第3行第3列
    

• 跨行跨列表格

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

  使用表格标签，展示如下的表格：

例子

    
    
    


跨行跨列表格

    

        
        
第1行第1列
    
    

        
        
第2行第1列
        
第2行第2列
        
第2行第3列
    
    

        
3.2
        
33
    
    

        
        
第4行第1列
        
42
        
43
    
    

        
52
        
53
    

4.3.10表单form标签

表单语法：

• form 表示表单
• action 表示提交到哪个页面
• method 表示提交方式，常用get和post
• input type="text"输入框
• input type="password"密码框
• input type="submit" 提交按钮
• input type="reset" 重置按钮

    ...
    ...
    

其中 url 表示定位一个web资源的路径

method的星号可以为get，也可以是post，不写的话默认是get

例子

    
    


登录系统

    用户名： 

    
    密　码： 

    　

    
    


登录成功！

4.3.11input标签

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

• 定义密码字段

• 定义用于文本输入的单行输入字段

• 定义提交表单数据至表单处理程序的按钮。

• 定义单选按钮，多个选择中只能选择一个选项

• 定义复选框，复选框允许用户在有限数量的选项中选择零个或多个选项

• 用于应该包含数字值的输入字段

• 定义按钮

• 是文件上传域

  

4.3.12select/option/textarea标签

• 元素定义下拉列表
  元素定义待选择的选项，列表通常会把首个选项显示为被选选项。通过添加 selected 属性来定义预定义选项
  元素定义多行输入字段（文本域）</li> </ul> <img src="https://img.yipin100.com/p.php?img=https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221028190757970.png" alt="image-20221028190757970" style="zoom: 60%"> <h4 id="4313表单综合练习">4.3.13表单综合练习</h4> <pre><code class="language-html">form 标签就是表单 input type=text 是文件输入框 value 设置默认显示内容 input type=password 是密码输入框 value 设置默认显示内容 input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中 input type=checkbox 是复选框 checked="checked"表示默认选中 input type=reset 是重置按钮 value 属性修改按钮上的文本 input type=submit 是提交按钮 value 属性修改按钮上的文本 input type=button 是按钮 value 属性修改按钮上的文本 input type=file 是文件上传域 input type=hidden 是隐藏域，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器） select 标签是下拉列表框 option 标签是下拉列表框中的选项 selected="selected"设置默认选中 textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值） rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度 </code></pre> <blockquote> <p>1.一定要使用form标签将input标签包起来，且一定要给input元素设置name属性，否则数据提交不到服务器</p> <p>2.checkbox 是复选框，如果希望是同一组，就要保证 name 属性一致</p> <ol start="3"> <li>checkbox ,select, radio 提交数据的时候是 value 属性的值</li> </ol> </blockquote> <img src="https://img.yipin100.com/p.php?img=https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221028190924033.png" alt="image-20221028190924033" style="zoom: 67%"> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> 用户注册信息<br/> 用户名称：<input type="text" name="username"><br/> 用户密码：<input type="password" name="pwd1"><br/> 确认密码：<input type="password" name="pwd2"><br/> 请选择你喜欢的运动项目: <input type="checkbox" name="sport" value="lq">篮球<br/> <input type="checkbox" name="sport" value="zq" checked>足球<br/> <input type="checkbox" name="sport" value="sq" checked>手球<br/> 请选中你的性别: <input type="radio" name="gender" value="male" checked>男<br/> <input type="radio" name="gender" value="female">女<br/> 请选中你喜欢的城市 <select name="city"> <option>--选择--</option> <option value="sh">上海</option> <option value="bj">北京</option> <option value="gz">广州</option> </select><br/> 自我介绍 <textarea name="comment" rows="4" cols="25">
  请选中你的头像文件
  
  

  4.3.14表单格式化

  完成如下界面：

  

  练习：使用表格标签将表单格式化

  
  
  
      
      
  
  
  
      
  用户注册信息
      
  
          
  
              
  用户名称：
              
  
          
          
  
              
  用户密码：
              
  
          
          
  
              
  确认密码：
              
  
          
          
  
              
  请选择你喜欢的运动项目：
              
  篮球
                  足球
                  手球
              
          
          
  
              
  请选中你的性别：
              
  
                  男
                  女
              
          
          
  
              
  请选中你喜欢的城市：
              
  
                  
                      --选择--
                      上海
                      北京
                      广州
                  
              
          
          
  
              
  自我介绍：
              
  
          
          
  
              
  请选择你的头像文件：
              
  
          
          
  
              
  
              
  
          
      
  
  
  
  

  

  4.3.15表单提交数据细节

  1. action表示将form表单的数据提交给哪个url，即服务器的哪个资源(如servlet)

  2. method属性设置提交的方式 主要是：get 和 post，默认是get

  3. 表单提交的时候，数据没有发送给服务器的三种情况：

     • 表单某个元素项没有name属性值，则数据不会提交

     • 单选，复选框(下拉列表中的option标签)都需要添加value属性，以便发送给服务器

       对于checkbox复选框，可以提交多个值，但是name是统一的(为了区分复选框的分组)

       对于select，checkbox，radio标签，提交的数据是value指定的值

     • 表单项不在提交的form标签中

       提交的数据一定要放在form标签内，否则不会提交

  4. GET请求的特点是：

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

  5. POST请求的特点是：

     • 浏览器地址栏中只有action属性值，提交的数据是携带在http请求中，不会展示在地址栏中
     • 相对于get请求要更安全
     • 理论上没有数据长度的限制

     post请求分析：

     如下，在浏览器中选择f12快捷键

     

     

     这里是http的请求头：

     POST /1027practice/ok.html HTTP/1.1
     Host: localhost:63342
     User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
     Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
     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
     Accept-Encoding: gzip, deflate, br
     Content-Type: application/x-www-form-urlencoded
     Content-Length: 24
     Origin: http://localhost:63342
     Connection: keep-alive
     Referer: http://localhost:63342/1027practice/form_login.html?_ijt=e39at152i0jkgl2dtreahm36fk&_ij_reload=RELOAD_ON_SAVE
     Cookie: Idea-14176161=c5173052-46ad-4245-9208-03592d0dcf0e; Idea-f24e85b1=ae595c67-c988-4ef0-856d-44549b2b2eb7
     Upgrade-Insecure-Requests: 1
     Sec-Fetch-Dest: document
     Sec-Fetch-Mode: navigate
     Sec-Fetch-Site: same-origin
     Sec-Fetch-User: ?1
     

     这里是http的请求体：

     username=jack&pwd=123456