重生之我是前端小白(之路径与表格表单)
上一世,我的亲人离我而去,这一世,我要把我失去的都拿回来!学习完这个知识聆听我的复仇…
4.相对路径和绝对路径
绝对路径就像是门牌号一样,永远不会变的,不会因为你坐在的位置改变而进行改变。就像是一个找你家地址的例子,你可以通过户口本上面的户籍所在地查看你家的地址在哪个省,哪个市,哪个区…不论你现在在哪里,你的家永远在那里,并不会因为你的位置改变而改变。这就是绝对路径。
同理,在文件中可以这样理解在电脑中的文件的相对路径分两种:一种是从根目录开始写,一直写到文件所在的位置然后选中问价。另一种是在网上的文件的话(例如:图片的地址),就直接复制图片的链接就可以。这两种情况下,无论你写的网页储存在哪里,它里面的文件地址不会因为网页存放地址的改变而进行改变。
<!-- 绝对路径 ,从根目录开始写,一直写到图片的位置 --><img src=" D:\huashankeji\开课\html\images\01.jpg" alt="图片未加载"> <!-- 绝对路径 ,直接写网站的图片的网址 企业中一般会用网路上的地址 --><img src="https://img1.baidu.com/it/u=3663508195,2907650417&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
相对路径就像是从你的位置去寻找家的位置,如果你和家庭地址没有在同一个省,首先要出这个省然后找到家庭地址所在省份,然后再往下面找。
就像是文件的位置,首先要跳出当前的文件夹,然后再去寻找目标文件的位置也就是代码中的…/意思为上级。
<!-- 相对路径 , html所在的文件夹与图片在同一文件夹内时 --><img src="../01.jpg " alt=" ">
如果你的位置与家庭地址所在同一个省份,那么就直接从你所在的市直接寻找家庭住址即可。在文件中,就是直接写目标文件的名字即可。在代码中可以加一个./意思为当前。
<!-- 相对路径,html与图片在同一位置时 ./代表当前文件夹的位置 --><img src="./01.jpg" alt="">
如果家庭住址跟你在同一个省同一个市,但你在市区,而家庭住址在市区下面的街道的话,就直接写街道名称然后寻找家庭住址。
在文件中,寻找目标文件所在的文件夹,然后寻找目标文件即可。
<!-- 相对路径 ,html与图片所在文件夹在同一文件夹内时 --><img src="data:images/01.jpg" alt=""> #### 5.html表格标签##### 1.表格结构在使用表格进行布局时,可以将表格划分为标题、头部、主体和脚注。相关标签如下:除了标题标签,其余头部主体脚注标签可以省略不写**`<caption>`**:用于定义表格标题。**`<thead>`**:用于定义表格的头部。一般包含列名、行号等表头信息。**`<tbody>`**:用于定义表格的主体。一般包含数据内容。**`<tfoot>`**:用于定义表格的脚注。定义行和列的标签:**`<tr>`**:用于定义表格的一行。**`<td>`**:用于定义表格的单元格。**`<th>`**:用于定义表头单元格。**重点**:合并单元格跨行合并就是:rowspan 用法:rowspan:"2"就是合并两行后面的数字是几就是合并几行跨列合并就是:colspan 用法:colspan:"2"就是合并两列后面的数字是几就是合并几列实例:```html
<table border="1px" cellpadding="5px" align="center" width="600px" style="border-collapse: collapse;"> <caption><h2>商品信息表</h2><p>制表日期:2023/07/13</p></caption><thead><tr bgcolor="#92CDDB" ><th>ID</th><th>品类</th><th>品名</th><th>数量</th><th>单价</th><th>金额</th></tr></thead><tbody align="center"><tr><td>1</td><td rowspan="2">衣服</td><td>冬装</td><td>1</td><td>100</td><td>100</td></tr><tr><td>2</td><td>夏装</td><td>1</td><td>100</td><td>100</td></tr><tr><td>3</td><td rowspan="2">饮料</td><td>可口可乐</td><td>1</td><td>100</td><td>100</td></tr><tr><td>4</td><td>百事可乐</td><td>1</td><td>100</td><td>100</td></tr><tr><td colspan="6" bgcolor="#FAEADB">以下为备用物品</td></tr><tr><td>5</td><td rowspan="2">数码</td><td>相机</td><td>1</td><td>100</td><td>100</td></tr><tr><td>6</td><td>镜头</td><td>1</td><td>100</td><td>100</td></tr><tr><td rowspan="2" colspan="4">合计</td><td bgcolor="#8FCADA">平均单价</td><td bgcolor="#F8BF8A">金额合计</td></tr><tr><td>100</td><td>600</td></tr></tbody></table>
显示效果如下:
这样,一个简单地表格就制作完成啦,快一起试一试吧!
2.表格属性
属性名 | 含义 | 常用属性值 | 默认值 |
---|---|---|---|
border | 表格的边框 | px | 0,默认是没有边框的 |
cellspacing | 单元格与单元格之间的空白间距 | px | 2px |
cellpadding | 单元格内容与单元格边框之间的距离 | px | 1px |
width | 可以设置整个表格的宽度 | px | |
height | 可以设置整个表格的高度 | px | |
align | 可以设置表格里面照片或者文字的向左或者居中向右的效果 | 一般为center | left |
6.html表单
1.表单的用途
HTML 表单用于收集用户的输入信息。
一个表单有三个基本组成部分:
表单标签:这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
表单域(表单控件):包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框
和文件上传框等。
表单按钮:包括提交按钮、复位(重置)按钮和一般按钮;用于将数据传送到服务器上或者取消输
入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
简单的小案例:(我写的有点麻烦)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{height:80px;font-size: 25px;overflow: hidden;}img{float: left;}span{float: left;margin-top: 38px;}.one{display: inline-block;height: 40px;width: 390px;margin-left: 35px;margin-top: 20px;padding-left: 10px;color: #DDDDDD;}.two{margin-left: 35px; margin-top: 20px; }.three{background-color: #3F89EC;color: white;height: 40px;width: 400px;border: 0;margin-left: 35px; margin-top: 20px;border-radius: 5px;}</style>
</head>
<body><div ><img src="./baidu.png" alt="图片未加载" height="80px" vertical-align="middle"> <span>·用户名密码登录</span> </div><input type="text" placeholder="手机/邮箱/用户名" class="one"><br><input type="password" placeholder="密码" class="one" ><br><input type="checkbox" class="two" checked>下次自动登录<br><input type="submit" value="登录" class="three"></body>
</html>
效果图如下:
控件名称 | type属性值 | 描述 |
---|---|---|
文本框 | text(默认值) | 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。 |
密码框 | password | 定义密码字段 |
单选按钮 | radio | 定义单选按钮。(性别等) |
复选框(多选) | checkbox | 定义 复选框(爱好等) |
提交按钮 | submit | 定义提交按钮。 |
重置按钮 | reset | 定义重置按钮(重置所有的表单值为默认值)。 |
图片提交按钮 | image | 定义图像作为提交按钮。 |
普通按钮 | button | 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本) |
隐藏文本框 | hidden | 定义隐藏输入字段。前后台交互非常有用 |
文件上传框 | file | 定义文件选择字段和 “浏览…” 按钮,供文件上传。可以通过accept属性的值: image/* 接受所有的图像文件。 image/png 表示只接受图片文件的png文件 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。multiple属性可以用来设置一次允许选择多个文件 multiple=“multiple” |
其他的表单控件
1、 <textarea>
:定义文本域 (一个多行的输入控件)
文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和
width 属性。
缩放设置:
禁止缩放:resize: none;
水平缩放:resize: horizontal;
垂直缩放:resize: vertical;
水平垂直缩放:resize: both;
2.<label>
:定义了 <input>
元素的标签,一般为输入标题
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点
击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表
单控件上。
重生之我是前端小白(之路径与表格表单)相关推荐
- 【前端学习日志】HTML表格表单注册页面案例+CSS选择器
今日学习 一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...
- 我的前端学习之路<表格表单标签>
1,表格标签<table> 作用:用来展示数据 <table> /**表格**/<tr> /**行**/<th></th> /**表头单元格 ...
- 2017-2-15从0开始前端学习笔记(HTML)-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...
- 视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- web前端必学功法之一:表单校验(1)
web前端必学功法之一:表单校验 案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
- html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单 发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
- web前端必学功法之一:表单校验(2)
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
- Servlet中转发和重定向的路径问题以及表单提交路径问题
一.请求转发与响应重定向的种类 有两种方式获得Servlet 转发对象(RequestDispatcher):一种是通过HttpServletRequest的getRequestDispatcher( ...
- ssm把后端数据传到前端_ssm框架中前端jsp页面的数据除了表单提交以外如何传到后台?...
ssm框架里面,前端页面的数据是怎么绑定的,如果我不用表单提交的话,我该怎么在后台去取值?用表单提交,添加没问题,换成现在的就不行了? ssm框架里面,前端页面的数据是怎么绑定的,如果我不用表单提交的 ...
最新文章
- 单片机如何从上电复位执行到main函数?
- 磁棒 锰锌铁氧体高频磁条22x5x3mm,作为天线性能测试
- 版本信息文件、虚拟环境创建
- php kml文件解析,英语翻译中文:详细分析了KML、MapInfo文件及二者之间的联系,以KML点标记文件为例,基于PHP编程实现了KML到...
- 红帽启动apache服务器_红帽7搭建httpd的三种模式(基于主机,端口,IP)
- 在机器学习中为什么要进行 One-Hot 编码?
- Sentinel 网关流量控制之Spring Cloud Gateway实战
- 2022年计算机二级C语言程序设计复习题及答案
- 苹果电脑删除下载的更新文件_解决电脑管家病毒库更新误删除T6文件方法
- Off World Live 插件:广播UE4内部的音频信号到NDI
- 入手华为云学生机体验
- 支持向量机的原理与实践
- 866 数据结构模拟题(一)及解析
- 精英反向黄金正弦鲸鱼算法-附代码
- win10 + Ubuntu 20.04 LTS 双系统 引导界面美化
- spring成神之路第十八篇:@ComponentScan、@ComponentScans 详解(bean 批量注册)
- excel怎么设置自动计算_Excel财务表格大全!公式已设置好,数据自动计算产生...
- 复刻一个羊了个羊掘金商城版
- win11、10下安装eNSP最新版(1.3.00.200T)并完美运行(转载)
- CV:计算机视觉技最强学习路线之CV简介(传统视觉技术/相关概念)、早期/中期/近期应用领域(偏具体应用)、经典CNN架构(偏具体算法)概述、常用工具/库/框架/产品、环境安装、常用数据集、编程技巧