关于id=p1和id=p2的问题

    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式1" onclick="add()"/>
    <input type="button" value="添加样式2" onclick="acc()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

请问标黑的地方， 为什么第一个用<p id="p1" >，第二个 <p id="p2" class="one">加上了class="one"?怎么理解呢？

另外，把<p id="p2 class="one">改成<p id="p2">执行结果是一样的。求大神指点。谢谢。