我找到了一个网站,该网站提供了将自定义标签添加到html的指南,就像人们制作新的HTML5标签一样。我必须承认,我认为添加我自己的标签,“扫描”代码并查找所需内容会更好。但是我发现的每个网站,人们都说这不好。…但是为什么不好呢?
带有类的示例html:
<ul class="commentlist"> <li class="comment odd"> <div class="1"> <div class="avatar"> <img src="http://placehold.it/60x60" width="60" height="60" /> </div> <div class="metadata"> <div class="name">Name</div> <p>response1</p> </div> </div> <ul class="children"> <li class="comment even"> <div class="2"> <div class="avatar"> <img src="http://placehold.it/60x60" width="60" height="60" /> </div> <div class="metadata"> <div class="name">Name</div> <p>response1a</p> </div> </div> </li> <li class="comment odd"> <div class="3"> <div class="avatar"> <img src="http://placehold.it/60x60" width="60" height="60" /> </div> <div class="metadata"> <div class="name">Name</div> <p>response1b</p> </div> </div> </li> </ul> </li>
在这里,我可以使用自定义标签进行操作,我认为这很容易找到解决方法,所以为什么不这样做:
<clist> <ccommentbox class="odd"> <ccomment class="1"> <cavatar> <img src="http://placehold.it/60x60" width="60" height="60" /> </cavatar> <cdata> <cname>Name</cname> <ctext>response1</ctext> </cdata> </ccomment> <cchildren> <ccommentbox class="even"> <ccomment class="2"> <cavatar> <img src="http://placehold.it/60x60" width="60" height="60" /> </cavatar> <cdata> <cname>Name</cname> <ctext>response1a</ctext> </cdata> </ccomment> </ccommentbox> <ccommentbox class="odd"> <ccomment class="3"> <cavatar> <img src="http://placehold.it/60x60" width="60" height="60" /> </cavatar> <cdata> <cname>Name</cname> <ctext>response1b</ctext> </cdata> </ccomment> </ccommentbox> </cchildren> </ccommentbox>
请考虑一下:
document.createElement('custom-tag')
<span>
custom-tag { display: block }
<pane>
<tab>
<div>