为什么html标签的id必须唯一
1、新建一个a.html网页，输入下面的内容，然后在浏览器中打开
2、<html>
<head>
</head>
<body >
姓名：<input type="text" id="txtName" /> </br>
密码：<input type="text" id="txtName" /> </br>
</body>
</html>
3、注意，姓名和密码后面的文本框使用了相同的ID，但是在浏览器中打开后，页面没有报错，效果图如下：
1、修改源代码，添加上样式，代码如下：
2、<html>
<head>
<style type="text/css">
#txtName {background:red;}
</style>
</head>
<body >
姓名：<input type="text" id="txtName" /> </br>
密码：<input type="text" id="txtName" /> </br>
</body>
</html>
3、#txtName {background:red;}
设置了ID="txtName"的标签背景色为红色，效果图如下，可以看出，样式对所有设置了ID="txtName"的标签都起作用了。
1、修改源代码，添加上脚本，代码如下：
2、<html>
<head>
<style type="text/css">
#txtName {background:red;}
</style>
<script type="text/javascript">
function GetValue()
{
var a = document.getElementById('txtName').value;
alert(a);
}
</script>
</head>
<body >
姓名：<input type="text" id="txtName" /> </br>
密码：<input type="text" id="txtName" /> </br>
<input type="button" value="获取id=txtName的文本框的值" onclick="GetValue();" />
</body>
</html>
3、var a = document.getElementById('txtName').value;
获取ID="txtName"的标签的值，结果是第一个文本框的值弹出来了，说明，浏览器只是取了第一个具有该ID的标签的值，效果图如下：
1、html中具有相同ID的标签，页面不会报错。
2、CSS对同一个页面中具有相同ID的标签，都会应用样式。
3、如果有相同的ID，javascript只会取第一个具有该ID的标签。