布局知识之历史

最早的css布局方式是table布局,但是table布局有下面几个缺点:
1. 加载缓慢,table内容完全加载后才会显示
2. table本来意思是表格,用来显示数据的,和布局不相关
3. 结构不清晰

为此,CSS 禅意花园的发表标志这div+css布局的到来。它是一套html结构,多套css样式。后来div被极度滥用,为此引入了html5语义化的概念。

语义化的好处如下:
1. 方便代码维护,一看到诸如header的标签就知道是头部
2. 方便搜索引擎阅读,比如提取标题,搜索引擎花更少的时间,爬更多的内容
3. 方便读屏器阅读

实际上语义化是让我们写出一套类似标准化的代码,方便人和机器进行阅读。机器轻松阅读,就能给人提供更好的服务。

在ie8中,解析html5标签会出现错误,会产生如下情况:

// 原
<section>hello</section>

// 解析成了
<section></section>
hello
<section></section>

有人发现通过下面方式可以让ie正常解析标签

  1. 首先document.createElement('header')
  2. 设置元素的header{display: block}

不过仍然ie 6-9, safari等浏览器对html5支持情况也不好。

所以有人做了一个库html5shiv.js,它解决了html5标签不兼容的问题。

使用方法如下:

<!--[if lt IE 9]>
    <script src="https://github.com/aFarkas/html5shiv/tree/master/src/html5shiv.js"></script>
<![endif]-->

发表评论

电子邮件地址不会被公开。 必填项已用*标注