关于HTML标签的选用问题探讨

将DIV作为最后的选择来编写页面吧！！！

最近准备做一个UI组件库，在编写按钮组件时，纠结了下使用div，还是button 。所以就了解了下HTML标签选择问题，由于之前一直是div+span写完全套页面，最主要的原因就是样式问题，div用着爽啊，而且很顺手，我想怎样画就怎样画。但经过深入了解后，我改变了对HTML标签的认知，任何事物的诞生都有其用途，而还在不断迭代升级的，就更应该引起重视了。

HTML标签介绍

* 提个问题，如果让你写个按钮，你选择怎么实现？

我想大家大多会有这么几种写法：UI要求是个方块，圆圈等样式的，

• 直接div包起来
• span + padding
• a
• 当前是啥标签，就用啥标签，直接display：inline-block，然后重置样式

* 提个需求，通过程序，爬取目标网站中有用的信息，并进行信息分类、归档

下面提供两种风格的编码，你更喜欢哪种，什么是国际标准？谁来书写标准？没有标准比私有标准更可怕

• 第一种编写风格

<!-- 顶部菜单 -->
  <div class="nk-header"> 大标题、导航菜单、用户信息 </div>
  
  <!-- 中心主屏幕 -->
  <div class="nk-main"> <!-- 丰富精彩的信息，用户关注的部分  -->
  	<span  @click="javascript:location.href='http://www.baidu.com'">点击链接访问百度</span>
  	<div  @click="next()">点击按钮，可以跳转到下个场景，查看更多信息</div>
  </div>
  
  <!-- 右侧悬浮窗 -->
  <div class="nk-suspension">  </div>
  
  <!-- 底部备案声明 -->
  <div class="nk-footer"><div>在这里可以找到我们、联系我们</div></div>

• 第二种编写风格

<!-- 顶部菜单 -->
  <header class="nk-header"> <h1>大标题</h1>、<nav>导航菜单</nav>、<user>用户信息</user> </header>
  
  <!-- 中心主屏幕 -->
  <main class="nk-main"> <!-- 丰富精彩的信息，用户关注的部分  -->
  	<span>点击链接访问详情：</span> 
  	<a href=“http://www.baidu.com”></a>
  	<button @click="next()">点击按钮，可以跳转到下个场景，查看更多信息</button>
  </main>
  
  <!-- 右侧悬浮窗 -->
  <suspension class="nk-suspension">  </suspension>
  
  <!-- 底部备案声明 -->
  <footer class="nk-footer"><address>在这里可以找到我们、联系我们</address></footer>

* 展望未来，假如谷歌推出了一款基于谷歌浏览器的引擎，该引擎完美适配某款人工智能，唯一要求是需要严格的HTML语义标签

• 成熟的规范、标准，才是人工智能发展的正确方向。
  我们不知道人工智能的前景到底有多大，但是有个道理需要明白，机器的运算能力比人脑强亿万倍，但机器目前最致命的弱点就是需要公式，公式即规范、标准。也给机械自动化带来了可能。
  当然，规范、标准也不是随便指定的，需要大家公认才行，而要在现如今非常成熟的生态下生存，就需要遵守该生态下的规范、标准，在还没生成明确标准之前，更应努力成为制定标准的那一批人。
  这时，有人可能会说会不会出现“制裁华为”这种现象发生，当然会，但不会逼到死路，因为死路的尽头就是诞生出第二套生态，这样反而脱离了对当前生态的依赖。虽然很难，但绝境会逢生。

• 技术负债。按照这种情况，我们目前大面积div书写的代码将无法满足新技术的要求，需要花费更多的精力进行项目重构，甚至是重新开发，而按照标准开发的项目，则能快速适配这种引擎，跟上时代发展的脚步

活在当前安逸的生态环境下，没有一颗规划未来的心，你的项目还能走多远