位置: IT常识 - 正文

day02-HTML02

编辑:rootadmin
4.HTML 4.3HTML基本标签 4.3.9表格(table)标签 基本语法: <table border="边框宽度" cellspacing="空隙大小" cellpadding="填充大小"> </table> 说明: table 是表格标签,border 设置表格标签 width 设置表 ... 4.HTML4.3HTML基本标签4.3.9表格(table)标签基本语法:<table border="边框宽度" cellspacing="空隙大小" cellpadding="填充大小"></table>说明:

推荐整理分享day02-HTML02,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

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

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

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

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

例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格标签</title></head><body><h1 align="center">标签表格的使用</h1><!--使用表格标签显示三行三列的表格--><!--px表示像素,不写单位默认就是像素--><table width="500" border="5" align="center"> <tr> <th>姓名</th> <th>地址</th> <th>邮件</th> </tr> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> </tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>第3行第1列</td> <td>第3行第2列</td> <td>第3行第3列</td> </tr></table></body></html>

跨行跨列表格

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

使用表格标签,展示如下的表格:

例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跨行跨列表格</title> <!-- 思路: 1.先把整个表格完整的行和列展示出来5*3 2.再使用合并的技术来处理 3.十六进制表现的颜色前名要加#号 --></head><body><h2>跨行跨列表格</h2><table border="1" bordercolor="#E87EFA" width="500" cellspacing="0"> <tr> <!--合并了三列--> <td colspan="3" align="center">第1行第1列</td> </tr> <tr> <!--合并行,跨行row--> <td rowspan="2">第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>3.2</td> <td>33</td> </tr> <tr> <!--合并行,跨行row--> <td rowspan="2">第4行第1列</td> <td>42</td> <td>43</td> </tr> <tr> <td>52<img src="https://www.cnblogs.com/liyuelian/archive/2022/10/28/imgs/2.png" width="100"></td> <td>53</td> </tr></table></body></html>

4.3.10表单form标签

表单语法:

form 表示表单action 表示提交到哪个页面method 表示提交方式,常用get和postinput type="text"输入框input type="password"密码框input type="submit" 提交按钮input type="reset" 重置按钮<form action="url" method=*> ... ... <input type="submit"><input type="reset"></form>

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

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

例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单登录</title></head><body><h1>登录系统</h1><form action="ok.html" method="post"> 用户名: <input type="text" name="username"><br/> <!--为了汉字对齐,输入全角的空格即可--> 密 码: <input type="password" name="username"><br/> <input type="submit" value="登录"> <input type="reset" value="重新填写"></form></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录成功</title></head><body><h1>登录成功!</h1></body></html>

4.3.11input标签

<input> 元素有很多形态,根据不同的 type 属性

<input type="password"> 定义密码字段

<input type="text"> 定义用于文本输入的单行输入字段

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

<input type="radio"> 定义单选按钮,多个选择中只能选择一个选项

<input type="checkbox"> 定义复选框,复选框允许用户在有限数量的选项中选择零个或多个选项

<input type="number"> 用于应该包含数字值的输入字段

<input type="button"> 定义按钮

day02-HTML02

<input type="file" > 是文件上传域

4.3.12select/option/textarea标签<select> 元素定义下拉列表<option> 元素定义待选择的选项,列表通常会把首个选项显示为被选选项。通过添加 selected 属性来定义预定义选项<textarea>元素定义多行输入字段(文本域)

4.3.13表单综合练习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 属性设置每行可以显示几个字符宽度

1.一定要使用form标签将input标签包起来,且一定要给input元素设置name属性,否则数据提交不到服务器

2.checkbox 是复选框,如果希望是同一组,就要保证 name 属性一致

checkbox ,select, radio 提交数据的时候是 value 属性的值

<!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"></textarea><br/> 请选中你的头像文件 <input type="file" name="myfile"><br/> <input type="submit" name="提交" value="提交"> <input type="reset" name="重置" value="重置"></form></body></html>

4.3.14表单格式化

完成如下界面:

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单格式化</title></head><body><form> <h1>用户注册信息</h1> <table> <tr> <td>用户名称:</td> <td><input type="text" name="username"></td> </tr> <tr> <td>用户密码:</td> <td><input type="password" name="pwd1"></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="pwd2"></td> </tr> <tr> <td>请选择你喜欢的运动项目:</td> <td><input type="checkbox" name="sport" value="lq">篮球 <input type="checkbox" name="sport" value="zq" checked>足球 <input type="checkbox" name="sport" value="sq" checked>手球 </td> </tr> <tr> <td>请选中你的性别:</td> <td> <input type="radio" name="gender" value="male" checked>男 <input type="radio" name="gender" value="female">女 </td> </tr> <tr> <td>请选中你喜欢的城市:</td> <td> <select name="city"> <option>--选择--</option> <option value="sh">上海</option> <option value="bj">北京</option> <option value="gz">广州</option> </select> </td> </tr> <tr> <td>自我介绍:</td> <td><textarea name="comment" rows="4" cols="25"></textarea></td> </tr> <tr> <td>请选择你的头像文件:</td> <td><input type="file" name="myfile"></td> </tr> <tr> <td><input type="submit" name="提交" value="提交"></td> <td><input type="reset" name="重置" value="重置"></td> </tr> </table></form></body></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的请求头:

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

这里是http的请求体:

username=jack&pwd=123456
本文链接地址:https://www.jiuchutong.com/zhishi/304093.html 转载请保留说明!

上一篇:Python中numpy数组如何添加元素(python中numpy数组和列表的区别)

下一篇:python生成器中的send()方法和next()方法(python中生成器的作用)

  • ipad2021有充电器吗(2021款ipad有充电器吗)

    ipad2021有充电器吗(2021款ipad有充电器吗)

  • ipad第八代是2020吗(ipad第八代是2020还是2018啊)

    ipad第八代是2020吗(ipad第八代是2020还是2018啊)

  • 快手怎样一次性删除所有作品(快手怎样一次性删除所有点赞作品)

    快手怎样一次性删除所有作品(快手怎样一次性删除所有点赞作品)

  • 谷歌浏览器兼容性设置在哪里(谷歌浏览器兼容性设置在哪里找)

    谷歌浏览器兼容性设置在哪里(谷歌浏览器兼容性设置在哪里找)

  • 微信头像可以用动态图吗(微信头像可以用菩萨做头像吗)

    微信头像可以用动态图吗(微信头像可以用菩萨做头像吗)

  • 黑鲨3和黑鲨3pro的区别有哪些(黑鲨3和黑鲨3pro对比)

    黑鲨3和黑鲨3pro的区别有哪些(黑鲨3和黑鲨3pro对比)

  • 华为nova5悬浮球怎么关闭(华为nova5悬浮球怎么开启)

    华为nova5悬浮球怎么关闭(华为nova5悬浮球怎么开启)

  • 华为顶端下拉菜单没了(华为顶端下拉菜单不见了)

    华为顶端下拉菜单没了(华为顶端下拉菜单不见了)

  • oppo a92s什么时候上市(oppoa92s什么时候出产的)

    oppo a92s什么时候上市(oppoa92s什么时候出产的)

  • 网线连接路由器哪个口(如何不插网线连接路由器)

    网线连接路由器哪个口(如何不插网线连接路由器)

  • 微信突然收不到信息也发不出信息(微信突然收不到信息)

    微信突然收不到信息也发不出信息(微信突然收不到信息)

  • 淘宝为什么不能代付了(淘宝为什么不能访问相册)

    淘宝为什么不能代付了(淘宝为什么不能访问相册)

  • vivox30pro有nfc功能吗(vivox30pro的nfc在哪里)

    vivox30pro有nfc功能吗(vivox30pro的nfc在哪里)

  • ipadpro带耳机吗(ipadpro有配耳机吗)

    ipadpro带耳机吗(ipadpro有配耳机吗)

  • 苹果手机黑名单在哪里(苹果手机黑名单怎么把人拉出来)

    苹果手机黑名单在哪里(苹果手机黑名单怎么把人拉出来)

  • ps怎么看前后对比图(ps怎么看前后对比快捷键)

    ps怎么看前后对比图(ps怎么看前后对比快捷键)

  • i7级和i7的区别(i7和i7级哪个好)

    i7级和i7的区别(i7和i7级哪个好)

  • ipad老是闪退怎么回事(ipad闪退)

    ipad老是闪退怎么回事(ipad闪退)

  • 唯品会怎么免邮费教程(唯品会怎么免邮劵)

    唯品会怎么免邮费教程(唯品会怎么免邮劵)

  • 快手相册照片怎么删除(快手相册照片怎样删除)

    快手相册照片怎么删除(快手相册照片怎样删除)

  • 天猫排行榜在哪(天猫排行榜在哪里)

    天猫排行榜在哪(天猫排行榜在哪里)

  • 快捷方式和程序文件的区别(快捷方式一般与一个应用程序或文档关联)

    快捷方式和程序文件的区别(快捷方式一般与一个应用程序或文档关联)

  • 华为无线耳机一个响一个不响(华为无线耳机一个响一个不响怎么办)

    华为无线耳机一个响一个不响(华为无线耳机一个响一个不响怎么办)

  • 换手机登微信能看到之前的信息吗(换手机登微信能看到最后一条)

    换手机登微信能看到之前的信息吗(换手机登微信能看到最后一条)

  • 苹果手机的原彩显示是什么意思(苹果手机的原彩在哪里打开)

    苹果手机的原彩显示是什么意思(苹果手机的原彩在哪里打开)

  • YOLOv8代码上线,官方宣布将发布论文,附精度速度初探和对比总结(yolov1代码)

    YOLOv8代码上线,官方宣布将发布论文,附精度速度初探和对比总结(yolov1代码)

  • 微信小程序--》小程序—全局数据共享和分包(微信小程序开发一个多少钱)

    微信小程序--》小程序—全局数据共享和分包(微信小程序开发一个多少钱)

  • 计提企业所得税会计分录怎么做
  • 价税分离的公式是什么呀
  • 异常凭证进项税额转出
  • 定期定额征收如何办理税费认定
  • 企业年末要写财务报告吗
  • 外派人员工资费用怎么算
  • 上个月工资没有发
  • 怎么理解捐赠支出税前扣除标准计算口径
  • 停业之后申请恢复营业申请书范文
  • 财务报表中预收账款的数据是怎么来的
  • 销售利润率如何提高
  • 个体户到税务局开普票需要什么手续
  • 专票开户行和账号必须填吗
  • 收到政府补助怎么发朋友圈
  • 增值税小规模纳税人免征增值税政策
  • 营改增后二手房转让 一般计税 可以差额
  • 总账会计需要做账吗
  • 总资产利润率计算公式是什么意思
  • 业绩补偿协议
  • cdr插件哪个最好用
  • 失联发票进项税额转出
  • 王者荣耀中白起的台词
  • 新装的电脑开机慢是什么原因
  • 财政拨付专项资金进什么会计科目
  • 配股条件是什么意思
  • 企业跨年度的收入退回应该如何进行会计处理?
  • 公司卖二手车的流程
  • 吉隆坡石油双塔有多高
  • 应收债权换入无偿收益
  • 位于Praprotno村之上的圣托马斯教堂 (© Guy Edwardes/Minden Pictures)
  • 废旧物资回收经营单位
  • img标签怎么写
  • php 通信
  • 钉钉工资表如何生成工资条?
  • linux中suid
  • 进入微信小程序
  • 被黑客攻击
  • 固定资产内部转移单
  • 发票过期未认证可以用吗
  • 如何理解符合立案标准的,行政机关应当及时立案
  • pandas columns排序
  • 在建工程应交税金怎么算
  • 发行的企业债券计入什么科目
  • 个人所得税专项附加扣除2023
  • 应付利息的账务处理
  • 购进新车旧车置换流程
  • 纳税人增值税专用发票票面价税合计最多开多少金额
  • 上市公司发放现金的规定
  • 房地产开发公司注册资金要求
  • 职工薪酬包括哪些应如何计算
  • 加计抵扣会计处理
  • 出口退税过期怎么处理
  • vmware安装macos10.15
  • win10安装固态硬盘打开软件卡
  • ubuntu安装后怎么启动
  • win8怎么进去安全模式
  • Linux系统配置要求
  • nmeo.exe是什么
  • windows xp系
  • centos6.10安装
  • netddeclnt.exe - netddeclnt是什么进程 有什么用
  • 如何用u盘安装win8操作系统
  • linux 开启snmp
  • win7桌面右键菜单多余选项删除
  • win10怎么关闭讲述人模式
  • js 原型链继承 原型式继承
  • Ext JS 4实现带week(星期)的日期选择控件(实战二)
  • javascript到c
  • python的步骤
  • mare的用法
  • python利用matplotlib将扇形平分成50份
  • vue父子组件之间的通讯
  • websocket协议解析
  • react-router react-router-dom
  • python读写docx
  • jQuery中通过ajax调用webservice传递数组参数的问题实例详解
  • 国税局宁夏税务
  • 新三步走和旧三步走的异同点
  • 海南海葬需要多少费用
  • 地税怎么查个人所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设