div 中的i标签如何点击事件_前端优化：语义标签进化史

内容提要 语义标签的应用，在SEO优化中是最为基础的内容，语义标签的发展与进化，是随着HTML和CSS版本的升级而不断进化来的，随着HTML5的普及，SEO语义化的发展也向前大大的迈进了一步。这主要体现在语义标签和微数据的应用上。一个使用语义标签+微数据编写前端代码的网站，在搜索排名与搜索样式展现的丰富性上具有无与伦比的优势。 HTML 4.0：表格布局时代 记得刚上大学的时候，学习网页设计这门课程就是从html4.0开始的，当时用到最多的语义标签就是 h1-h6、p、table、当时的css还没有真正的得到普及，所有样式属性都是写在html代码中的，而且标签是否闭合，也没有严格要求，网格布局系统更是遥不可及的梦想。   当时为了实现两栏或多栏布局只能使用表格套表格的模式进行操作。编写出来的页面代码层级繁多，且不易修改。表格布局的唯一优势是：在不同浏览器中都能得到很好的兼容。时至今日表格布局依然在EDM营销中发挥着不可替代的作用。   div+css：病态的极简风 随着CSS技术的发展成熟，div+css布局逐渐成为了潮流，各种DUV+CSS主题QQ群数不胜数，大家都在一起研究CSS，以及如何用div+css布局取代传统的table布局。典型的例子是利用css的display属性模拟table。

display模拟表格时常用属性值

table-footer-group	指定元素作为表格脚注组显示。类似于
display属性值	功能描述
table	指定元素会作为块级表格来显示。类似于 inline-table 指定元素会作为内联表格来显示。类似于 table-caption 指定元素作为表格标题来显示。类似于 table-row 指定元素作为表格行来显示。类似于 table-cell 指定元素作为表格单元格来显示。类似于 、 table-column 指定元素作为表格列来显示。类似于 table-column-group 指定元素作为表格列组显示。类似于
table-row-group	指定元素作为表格行组来显示。类似于
table-header-group	指定元素作为表格标题组显示。类似于

使用这种div+css布局的优势是：从传统的表格布局过度到DIV布局思路转换清晰，且在浏览器大战的年代可以少写很多css hack，大大提升了前端代码编写速度。   但不知从何时起，出现了div+span两个标签走天下的病态极简风。甚至连表格布局时代常用的h标签和p标签都被div所取代了，大家都去研究css了，而忽略了html标签的本质。这其实是一种倒退。   XHTML与web标准：