id####
- 在CSS or Javascript用来识别html元素
- 指定一个元素的名称，此名称必须在文档里是唯一的
name####
- 单独地在一个网页里面，一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的。但是，当我们需要把这个控件所关联的数据传递到数据库时，就必须要设置 name 属性，否则，这个值是没有办法传到服务器上面得到保存的。一个name可以同时对应多个控件(比如
radio buttons,checkboxes) - name的名称在一个文档里可以重复
id name 用途的区别
一. id 的常用用途###
1 . CSS通过 #id 来引用元素
下面是CSS通过 #colored 实现将id="colored"的段落设为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#colored{
color:red;
}
</style>
</head>
<body>
<p id="normal">我是一个段落对</p>
<p id="colored">我是一个有颜色的段落</p>
</body>
</html>
效果：
1.png
2 .JS通过 getElementById()获取元素
下面是JS通过 getElementById("colored ")获取id="colored "的p元素，并设为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function show()
{
//获取id="colored "的p元素
var p = document.getElementById("colored");
//设为蓝色
p.style.color = "blue";
}
</script>
</head>
<body onload="show()">
<p id="normal">我是一个段落</p>
<p id="colored">我是一个有颜色的段落重复</p>
</body>
</html>
2.png
二. name的用途###
下面的代码展示了name 用来给表单里的 radio buttons分组, 所以在这些选择里只能单选一个。并且用getElementsByName()可以获取name相同的radio控件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function handleClick() {
//获取name="student"的元素
var keys = document.getElementsByName("student");
var values = '';
//遍历name="student"的单选框value值
for (var i = 0; i < keys.length; i++) {
values += keys[i].value;
}
alert(values);
}
</script>
</head>
<body>
<form>
<input type="radio" name="student" value="age"/>
<input type="radio" name="student" value="sex"/>
<div>
<input type="submit" value="submit" onclick="handleClick()"/>
</div>
</form>
</body>
</html>
效果：
3.png
总结：
-多用英文搜索，比如id name difference
-学会用show code 的方式理解字面意思
-写博客时应该给自己限定一定的时间
每天都努力一点
谢谢你看完
