1. 在HTML的大部分元素中，标签都是用尖括号括起来的第一个，所以以你的代码为例：
<input type="checkbox" name="chiwhat" id="chiwhat" value="huanggua">黄瓜<br>
input 是标签 br 是标签，input 后面的 type name id value 都是属性，属性后是“=”，
等号后是“ ”，双引号里面的叫属性值。
2. id 就是身份证属性，就像人的身份证号码一样，id=“.... ” 这个属性值必须是唯一的。为什么要个id属性和值，因为HTML有很多元素，例如你的代码，一次出现三个 input ，那么怎么区分它们呢？就是用id属性和值了，你有三个 input 就相当于有三个人都叫 张三，如果第一个张三有个唯一的身份证号码 12345，第二个张三有个唯一的身份证号码 12346，第三个张三有个唯一的身份证号码12347.那么我说：找12346. 那么找的就是第二个张三。三个input都有id属性和值，那么就能找到对应的 input而不是其它的input。找到对应唯一的input，就能对这个input进行修改：在CSS中改变颜色，大小，位置等等，也能在javascript中对这个input进行其他操作。
如果HTML中多个标签的id属性的值都是相同的，那么会把id当成class对待，CSS中选择器会一次选择多个元素，然后对它们都修改。
因为id属性和值是唯一的，所以你的代码三个id都一样，那是错误的写法。正确的写法是：
<p><input type="checkbox" name="chiwhat" id="chiwhat1" value="huanggua">黄瓜<br>
<input type="checkbox" name="chiwhat" id="chiwhat2" value="egg">鸡蛋<br>
<input type="checkbox" name="chiwhat" id="chiwhat3" value="miantiao">面条<br>
</p>
以上代码的<br>是百度没有显示出来，不是删除了。
3. name代表的input的名字，用name这个属性和值目的是：一次找到都叫这个名字的input。相当于一大群人中，有三个人叫 张三，5个人叫 李四，2个人叫王五。我叫：张三出来。 那么就能够一次叫出三个人，这三个人都叫张三。你的代码中有三个input的 name="chiwhat" ，那么在javascript中，用这个name="chiwhat"，就能一次对这三个名叫 chiwhat 的input进行操作。用name="chiwhat" 主要是为了在javascript中操作方便。
在CSS中一般用class来代替，那就能一次对多个元素进行修改。javascript中也能使用class，但是有些浏览器不兼容，所以要用class就需要写更多的代码，用name属性更容易。
一、作用：
ID是以 #定义的CSS样式，也可以用JS获取来控制 getElementById(这里是ID) 来获取；
name就是给当前标签或元素指定名称，也可以用JS来控制值，form提交后获取的时候就需要获取name名称。
二、区别：
1、含义不同：
id要符合标识的要求，比如大小写敏感，最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求，甚至可以用数字。ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。
2、表示不同：
<input>标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
id：作为标签的唯一标识。name：作为可与服务器交互数据的HTML元素的服务器端的标示。
定义用法
<input>标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<input>标签可定义输入域的开始，在其中用户可输入数据。
对于大量通常的表单控件，可以使用 <input>标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。
虽然 <input>标签中有许多属性，但是对每个元素来说，只有type属性和name属性是必需的（提交或重置按钮只有 type 属性）。
以上内容参考：百度百科-input
