HTML学习8--id属性、div、span

乌鸦不像写字台

已于 2024-09-06 15:46:23 修改

阅读量270

点赞数 3

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

于 2024-08-24 15:18:37 首次发布

本文链接：https://blog.csdn.net/qq_54641174/article/details/141499721

版权

html学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

其他

前言
一、id属性
二、div和span

前言

介绍id属性、div和span，与接下来的CSS连接。

一、id属性

在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
注意，表单提交数据的时候，只和name有关系，和id无关。
id有什么用？
- JavaScript语言，可以对HTML文档当中的任意节点进行增删改操作。（动态效果）
- JavaScript可以对HTML文档中任意的节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
- id的存在当我们获取元素（节点）更方便。
HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
- JavaScript主要就是对这棵树DOM树上的节点进行增删改。

<html>
	<head>
		<title>id属性</title>
	</head>
	<body>
		<form id="myform">
			<input type="text" id="username" name="username"/>
			<input type="password" id="userpwd" name="userpwd"/>
			<!--
			id就是节点的身份证号，不能重复。
			-->
		</form>
	</body>
</html>

二、div和span

div和span是什么？有什么用？
- div和span都可以成为“图层”
- 图层的作用是为了保证页面可以灵活的布局。
- 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
- div和span是可以定位的，只要定下div的左上角x轴和y轴坐标即可。
其实最早的网页是采用table进行布局的，但是table不灵活，太死板。现在的网页开发中div布局使用最多，几乎很少使用table进行布局了。
div独占一行，span是一格。

<html>
	<head>
		<title>div和span</title>
	</head>
	<body>
		<div id="div1">div</div>
		<span id="span1">span</span>
		<div id="div2">
			<div id="div3">TEST</div>
		</div>
	</body>
</html>