html基础标签-学习笔记2-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51273315/article/details/130650385

本文介绍了HTML中input标签的不同用途，包括文件上传、隐藏传输、只读属性和输入长度限制。还讨论了id属性的独特性以及div和span在网页布局中的作用，强调了现代网页设计倾向于使用div和span而非table进行布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、input标签-上传文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		
		<!-- 后台java程序使用IO流的方式接收这个文件！ -->
		<form action="http://www.baidu.com">	
			文件：<input type="file" />
			<br><br><br><br>
			<input type="submit" value="文件上传" />
		</form>
		
	</body>
</html>

2、 input标签-隐藏传输、只读、输入字符长度限制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hidden控件</title>
	</head>
	<body>
		<!-- hidden隐藏域空间 -->
		<form action="http://127.0.0.1:8080/crm/save" >
			<!-- 不希望用户在浏览器上看到，但是希望可以将这个数据提交过去！ -->
			<input type="hidden" name="usercode" value="11111"/>
			<input type="submit" value="提交" />	
		</form>
		<!-- 最终提交：http://127.0.0.1:8080/crm/save?usercode=11111 -->
		

        <!--readonly和disabled都是只读的！  -->
		<!-- http://127.0.0.1:8080/crm/save?orgcode=1111 -->
		<!-- readonly修饰的表单项可以提交给服务器，但是disabled修饰的不会提交！ -->
		<form action="http://127.0.0.1:8080/crm/save">
			机构代码 <input type="text" name="orgcode" value="1111" readonly />
			<br>
			用户代码 <input type="text" name="usercode" value="2222" disabled />
			<br>
			<input type="submit" value="提交" />
		</form>

        <!-- 最多输入3个字符 -->
		<input type="text" maxlength="3" />
	</body>
</html>

3、id属性

<!DOCTYPE html>
<html id="myhtml">
	<head id="myhead">
		<meta charset="utf-8">
		<title id="mytitle"></title>
	</head>
	<body id="mybody">
		<!-- HTML元素的id属性 -->
		<!-- 
			1、在HTML中任何一个节点上，都有id属性
			2、在同一个网页中，id属性是不能重复的。
			3、id代表了这个节点，id是这个节点的身份证号。
		 -->
		 <form id="myform">
		 	<input id="username">
		 </form>
		 
		 <ul id="myul">
		 	<li id="myli">111</li>
		 </ul>
		 
	</body>
</html>

4、div标签和span标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div和span</title>
	</head>
	<body>
		<!-- div和span -->
		<!-- 
			1、div和span都是图层。（div和span都是盒子）
			2、什么是图层，有什么用？
				每一个图层在网页当中都是一个独立的盒子。
				图层的最主要作用就是：网页布局
			3、table表格不是可以布局吗？
				table表格布局有什么缺点：不灵活
				div和span布局更加灵活。
			4、每一个div和span左上角的顶点，都有x和y轴的坐标，通过这个坐标可以定位div在网页当中的位置。
			后面讲CSS的时候，我们可以通过CSS样式进行定位。
			5、很久以前都是采用table进行布局，现代化的网页都是采用div+span进行布局。
			6、对于web前端来说，怎么调试程序？
				每一个浏览器都内置了调试器。
				使用快捷键F12，可以调出来调试器。
			
			7、div和span有什么区别？
				div默认情况下独自占用1行。
				span不会独占行！
		 -->
		 <div id="div1">
		 	我是一个div！
		 </div>
		 是新的一行吗？
		 <span id="myspan">我是一个span标签！</span>
		 是新的一行吗？
		 <!-- div嵌套-->
		 <div id="" >
		 	<div id="">
		 		<div id="">
		 			<span id="">
		 				哈哈哈哈
		 			</span>
					<span id="">
						酷酷酷酷
					</span>
		 		</div>
		 	</div>
		 </div>
		 
	</body>
</html>