html学习3

最新推荐文章于 2024-08-07 21:26:38 发布

aneyal

最新推荐文章于 2024-08-07 21:26:38 发布

阅读量1k

点赞数 1

分类专栏：前端学习文章标签：学习 elementui linq

本文链接：https://blog.csdn.net/aneyal/article/details/123418519

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

下拉列表支持多选

<body>
		<!--multiple="multiple"表示支持多选-->
		<!--size="3"表示显示三条条目-->
		<select multiple="multiple" size="2">
			<option value ="1">1</option>
			<option value ="2">2</option>
			<option value ="2">2</option>
		</select>
	</body>

效果：

form的file控件

通过设置type属性为file来实现

	<body>
		<input type="file" />
	</body>

效果：

form的hidden控件

设置type属性为hidden时，是一个隐藏域，即网页上看不到但表单提交时会自动提交给服务器

	<body>
		<!--最后在网页上随意输入用户名为1，向服务器请求的url如下-->
		<!--https://www.baidu.com/oa/seve?userid=1&username=1-->
		<form action="http://www.baidu.com/oa/seve">
			<!--隐藏域，网页上看不到，但提交时会自动提交-->
			<input type='hidden' name="userid" value="1" />
			用户名<input type="text" name='username'/>
			<input type="submit" value="提交" />
		</form>
	</body>

效果：

readonly和disabled

readonly和disabled都表示只读，用户只能读到值，不能修改。但readonly会提交给服务器，但disabled不会提交给服务器，即使有name

	<body>
		<!--readonly和disabled都是只读，用户只能读到值，不能修改-->
		<!--但readonly会提交给服务器，但disabled不会提交给服务器，即使有name-->
		<form action="http://www.baidu.com/oa/seve">
			用户名<input type="text" name='username' value="11" disabled />
			<br />
			用户代码<input type="text" name='code'  value="22" readonly />
			<br />
			<input type="submit" value="提交" />
		</form>
	</body>

效果：

控件的maxlength属性

控制用户输入的最大数量

		<!--maxlength设置文本框中可输入的字符数量-->
		<input type="text" maxlength="5" />

HTML中元素的id属性

           HTML文档中任何元素都有id属性
           id属性是该节点的唯一标识，所以在同一个HTML文档中id值不能重复
           表单提交数据时，只和name有关系，和id无关
           id的作用是让我们更方便地获取元素
           在后期使用JavaScript语言对HTML文档中的任意节点进行增删改操作时，id可以便于其获取节点，进行操作
           HTML文档是一颗树，树上的每个结点都有唯一的结点

div和span在网页中的应用

div和span的作用是布局，都可以称为图层，图层就是一个一个的盒子，div嵌套div就是盒子套盒子div和span都可以定位，只要定下其左上角的x轴和y轴坐标就可以了
其作用是为了保证页面可以灵活地布局
最开始使用table进行布局，但太死板，所以现代大多使用div进行布局

<!--
			默认情况下div会独占一行
			span不会独自占用一行
		-->
		<div id='div1'>我是一个div</div>
		<div id='div2'>我也是一个div</div>
		<span id='span1'>我是一个span</span>
		<span id='span2'>我也是一个span</span>
		<!--嵌套-->
		<div>
			<div>test</div>
		</div>

效果：