html input type=file 默认路径_HTML

最新推荐文章于 2023-03-07 14:14:55 发布
最新推荐文章于 2023-03-07 14:14:55 发布
阅读量3.9k 收藏 2
点赞数 1
文章标签： html input type=file 默认路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30717229/article/details/112090989
版权

0eb568882ac8672518cf78b9cb74c356.png

HTML

一、结构说明

1.<!DOCTYPE html> html的文档声明,告诉浏览器html的版本。

2.html中的内容分为2部门,head中的内容是给浏览器看的设置,title是唯一一个可以被用户看到的,body中的内容是给用户看的。

3.<meta charset="UTF-8"> 告诉浏览器以什么样的编码格式来解析页面的内容

编码:文件的编码格式

解码:<meta charset="UTF-8">

编码和解码不统一会出现乱码,默认gbk

4.标签:

双标签|闭合标签: <title>Title</title>

单标签|自闭合标签: <meta charset="UTF-8">

5.属性:更完整的展示标签的功能

标签可以添加多个属性

属性名='属性值' 可以需要添加引号,单引号双引号都行

属性前面要添加空格

dfa73bca41c4d5efd6bd573922fc69c2.png

二、常用标签

标签的分类:

行内元素: 元素的大小由内容撑起来,多个元素可以一行显示

不能设置宽高

只能嵌套行内元素或文本

块元素: 自己独占一行,不能和其他元素一行显示

可以设置宽高,独占一行

可以嵌套行内元素,嵌套其他块元素,文本

属性:

align 对齐方式

left 左对齐 right 右对齐 center居中对齐

1.a 超链接标签

href 必填属性 定义连接路径

绝对路径

相对路径

没有地址 每点击一次刷新一次

# 回到页面顶部但是不刷新

target 打开方式

_self 本页面打开 默认

_blank 新页面打开

title 当鼠标悬停在内容上时候显示的提示字

特点:

自带下划线

连接未访问:字体蓝色

连接已访问:字体紫色

锚点|锚链接的作用

2.p 段落标签

定义段落内容

块元素

只能嵌套行内元素和文本

3.div 块

块元素

4.span 设置样式

本身没有任何作用

5.h1~6 标题标签

根据权重不同,字体大小依次减小,h1最大，h6最小。

加粗

块元素

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body bgcolor="pink" background="https://shsxt.shsxt.com/2019/0314/20190314044716888.jpg">

<!--<img src="https://shsxt.shsxt.com/2019/0314/20190314044716888.jpg" alt="" title="shsxt" width="500px" align="right">-->

<img src="images/logo.jpg" alt="网络问题,请刷新" height="300px" width="500px" border="5px" align="center">

<a href="#">哈哈</a>

</body>

</html>

6.img 图像标签

src 图片的地址

绝对地址：直接从网页拿到的网页图片https://shsxt.shsxt.com/2019/0314/20190314044716888.jpg

相对地址：建立文件夹，放入图片

alt 当图片无法正常显示的时候,显示提示字

title 当鼠标悬停在内容上时显示的提示字

html提供的能改变样式的属性

width 宽度 px为单位 是网页开发最基本的单位

height 高度

border 变框

align: 对其方式

left 对其到左边

right 对其到右边

垂直方向的对其方式

top 顶部对其

bottom 底部对其

center 居中对其

路径:

进入某个路径下 文件夹名字/

回到上一层目录 ../

三、列表

列表:

列表中的内容必须定义在列表项li中

无序列表

ul 无序列表标签

li 列表项

type:circle 空心圆圈 square实心方块 desc实心圆圈

有序列表

ol 有序列表标签

li 列表项

type: 1 A a I i

ul,ol添加一个type属性修改列表项标记

css样式表: 标签上添加style属性->css样式 width:100px;height:100px;list-style:none;去除列表项标记

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<h3>我喜欢吃的食物</h3>

<ul type="desc">

<li>奶油->动物奶油</li>

<li>烧烤</li>

<li>火锅</li>

<li>汉堡</li>

<li>

<ol type="I">

<li>哈哈</li>

<li>呵呵</li>

<li>嘿嘿</li>

</ol>

</li>

</ul>

<h3>我最不喜欢吃的食物</h3>

<ol style="list-style: none">

<li>香菜</li>

<li>香菜</li>

<li>香菜</li>

</ol>

</body>

</html>

四、表格 : 展示数据的一种手段

table 定义表格

tr 行

th 表格头单元格 加粗居中

td 表格体单元格

先有行再有列 内容必须存在与单元格中

border 变框

style="border-collapse: collapse" 双线变单线

width 宽度

height 高度

align 对其方式

bordercolor 变框颜色

rowspan 跨行

colspan 跨列

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<table border="1px" style="border-collapse: collapse" width="500px" height="350px" align="center" bordercolor="pink" bgcolor="#faebd7">

<tr><th colspan="6">课程表</th></tr>

<tr align="center">

<td></td>

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

</tr>

<tr align="center">

<td rowspan="2">上午</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

</tr>

<tr align="center">

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

</tr>

<tr align="center">

<td rowspan="3">下午</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

</tr>

<tr align="center">

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

</tr>

<tr align="center">

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td>体育课</td>

<td><img src="images/logo.jpg" alt="" width="50px"></td>

</tr>

<tr><td colspan="6" align="center">晚自习</td></tr>

</table>

</body>

</html>

五、表单

学习html: 学习不同的标签,作用,特点,属性,属性值

表单:收集数据 *****

form 表单标签

属性

name : 表单的名字

action : 数据提交的地址

method : 提交方式 get post

enctype : 当上传文件的时候需要修改特殊的值multipart/form-data,否则默认

表单元素:form标签内部的元素

input 标签定义大部分的表单元素 type属性的值确定不同的表单元素

text 普通文本框 name value

password 密码框 加密

radio 单选框

一组只能选择一个,name属性值相同就是一组

checkbox 多选框 一组

hidden 隐藏框

button 按钮 常常结合js使用

submit 提交

reset 重置

select 下拉列表框

option 下拉列表选项

提交:

input-> submit 提交

textarea 多行文本域 使用样式控制大小

fieldset

id 和 name 和 class 和 value

id 区分一个页面所有元素的唯一 js使用的多

class 结合css使用的多

name 能够提交数据的表单元素必有的属性,后台区分的唯一

value 表单元素的值->手机的数据

常用的属性:

autofocus 自动聚焦

checked selected 默认选中

placeholder 提示字

disabled 禁用 不能修改,不能提交

readonly 只读 不能修改,可以提交

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<fieldset>

<legend><h1>相亲信息表</h1></legend>

<form action="" enctype="multipart/form-data">

<!--表单元素-->

<p>

用户名: <input type="text" name="uname" value="张三" autofocus>

</p>

<p>

银行卡密码: <input type="password" name="pwd">

</p>

<p>

性别:

男: <input type="radio" name="gender" value="man" checked>

女: <input type="radio" name="gender" value="woman">

</p>

<p>

兴趣爱好:

吃饭 <input type="checkbox" name="hobby" value="eat">

睡觉 <input type="checkbox" name="hobby" value="sleep">

敲代码 <input type="checkbox" name="hobby" value="code" checked>

</p>

<input type="hidden" name="隐藏框" value="值">

<p>

生活照:

<input type="file" name="photo">

</p>

<p>

理想型: <select name="fav" id="" multiple>

<option value="1">美丽大方型</option>

<option value="2">可爱型</option>

<option value="3" selected="selected">温柔型</option>

<option value="4">性感型</option>

</select>

</p>

<p>

交友宣言: <textarea name="info" id="" cols="30" rows="10" placeholder="我是.."></textarea>

</p>

<fieldset>

<legend>隐私信息</legend>

身高: <input type="text" name="height" value="180" disabled>

体重: <input type="text" name="weight" value="90" readonly>

</fieldset>

<p>

<input type="submit" >

<input type="button" value="按钮" οnclick="alert(123)">

<input type="reset" value="重置">

<button>提交</button>

<button type="button">按钮</button>

<button type="reset">重置</button>

</p>

</form>

</fieldset>

</body>

</html>

吴建明wujianming
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input file的默认value清空与赋值方法
12-07
这种方法主要是通过JavaScript来替换HTML中的`<input type="file">`元素，以达到清空其默认值的效果。首先，我们需要获取到这个元素的引用，然后创建一个新的相同元素，并替换掉原来的元素。通常，这可以通过以下...
firefox下input type="file"的size是多大
09-05
在Firefox浏览器中，`<input type="file">` 这一HTML元素用于创建一个文件上传控件。与其他浏览器不同，Firefox并不直接支持通过CSS的`width`属性来定义该控件的宽度。然而，Firefox确实提供了`size`属性，允许...
html5 选择文件 默认路径,怎样在Win10电脑中修改文件默认保存位置！
weixin_29717341的博客
06-03 669
【PConline资讯】在Win10系统中，下载文件时常常默认保存在C盘里，殊不知这样不仅容易在重装系统时丢失重要文件，还会导致电脑开机慢，运行程序的时间过长等，为了避免上述情况发生，小编为大家提供了怎样在WIN10电脑中修改文件默认保存位置的方法。Win10电脑中修改文件默认保存位置的方法：步骤：1、在win10桌面点击开始菜单，选择设置，如图所示：2、调出设置窗口后，点击打开系统选项，如图所示...
关于input file上传文件弹出框的默认格式的相关问题
笑到世界都狼狈的博客
04-21 1883
input file文件上传的默认弹框是全部文件，但是有时候在写项目的时候为了方便会让其默认选中xls文件或者 图片，因此需要对其添加一个accept来实现这个功能 具体代码如下： <!-- 默认全部 --> <input type="file" name=""> <!-- 默认xls --> <input type="file" accept="a...
浏览器默认<input type="file"/>标签路径为虚拟路径，获取真实路径需要使用File类的API实现
LFF1991的博客
01-30 1万+
居于安全考虑现代的浏览器无法获取到 这样的真实的路径，而得到的是：C://fakepath/文件名这样的结果，而如果我们要实现图片预览效果就需要绝对路径，那么可以使用以下方式实现图片的预览效果 script type="text/javascript"> var image = ''; function selectImage(file){
electron 中使用input type=“file“ 选择文件时，不保存上次选择的路径
zcc的博客
07-13 991
在html 中使用 input type="file" 选择文件时，再次选择弹出会显示上次选择的文件路径： 但在electron中 使用时 碰到问题：每次选择打开都会显示同一路径，不会保存上次选择的路径，但我之前使用的项目是可以的，对比区别，终于找到了。 解决： 在package.json 文件中，引入的依赖： 之前的程序使用的是10.1.3 是可以的，但是^10.1.3 向上兼容，这次我使用的electron 版本更新了，所以不一样了。我把electron固定使用 10.1.3 版本了。
html input="file" 浏览时只显示指定文件类型 如xls、xlsx、csv、
fly_wugui的博客
11-07 1103
html: <input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /> Valid Accept Types: 对于 CSV 文件 (.csv), 使用...
原生js 选择文件,获取 input type=file 时候的文件路径
m0_64547949的博客
03-07 1万+
原生js 选择文件,获取 input type=file 时候的文件路径
HTML input file控件限制上传文件类型_动力节点Java学院整理
09-28
HTML中的`<input type="file">`控件用于在网页上实现文件上传功能。默认情况下，用户可以选择任何类型的文件进行上传。然而，为了提高用户体验和安全性，常常需要限制用户只能选择特定类型的文件，例如Word文档、...
解决webView不支持网页，webViewinput type="file"上传功能
12-20
然而，WebView在处理某些复杂网页功能时可能会遇到限制，比如`input type="file"`的文件上传功能。这个功能在许多网站上用于让用户选择本地文件进行上传，但在默认情况下，Android或iOS的WebView可能无法直接支持。...
input file 不能更改value值的解决办法
10-30
在HTML中，`<input type="file">` 是用于让用户选择本地文件的元素，它通常不允许直接更改`value`属性，因为出于安全考虑，浏览器不允许直接访问或修改用户选择的文件路径。`value`属性在`<input type="file">`中...
如何设置上传文件控件 input type="file" 的 默认值
weixin_34067980的博客
04-17 2791
出于安全性考虑input type="file" 的value是只读的。 在opera6.0中可以用默认值,不用每次都去点。不过会有一个提示窗口。 opera6.0的下载地址: http://www.brothersoft.com/opera-download-72224.html 转载于:https://www.cnblogs.com/webfpc/archive/2009/04/17...
input type=file 获取选择文件名称、路径方法及input上传按钮美化
热门推荐
Sun_blog
12-17 1万+
input type=file 获取选中文件名称、路径方法及input上传按钮美化
vue input type=file 设置value默认值
最新发布
09-06
在Vue中，我们可以通过v-model指令来处理输入表单的双向绑定。然而，对于input type="file"类型的表单元素，默认情况下是无法通过v-model来设置默认值的。这是出于安全原因，防止恶意自动填充用户计算机上的文件路径。 然而，我们仍然可以通过其他方式来设置input type="file"元素的默认值。一个常用的方法是使用ref属性将input元素绑定到Vue实例上，并在created生命周期钩子函数中使用原生JavaScript或jQuery来设置其值。 首先，在template中给input元素添加ref属性，例如： <input ref="fileInput" type="file"> 然后，在Vue实例的created生命周期钩子函数中，使用原生JavaScript或jQuery来设置该元素的值，例如： created: function() { this.$refs.fileInput.value = "默认值"; } 这样，在页面加载后，input元素的值将被设置为"默认值"。但需要注意的是，尽管input元素的值已经被设置了，但由于浏览器的安全限制，实际显示给用户的仍然是空白的。 总之，对于input type="file"类型的表单元素，无法直接通过v-model来设置默认值，但我们可以使用ref属性和原生JavaScript或jQuery来间接地设置其默认值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值