HTML及css总结

1、HTML&css 部分

1、src 和 href 的区别 ？

Src： source 资源引用：

【指向外部文档中的资源引入到当前所在标签位置】

特性 ：

1- 表示引用外部资源

2- 替换元素本身的内容

3- 暂停其他资源下载

Href ：hypertext reference 超文本引用

【用来建立当前元素和文档之间的链接】

特性：

1- 表示超链接

2- 不替换元素本身的内容

3- 不暂停其他资源下载

核心思想本质区别：

Src 代表的是网站的一部分，不会对网站的使用造成影响

Href 带表网站的附属资源，不会对网站的核心逻辑和结构造成影响

为什么 css 引用中使用 href？

Css 属于网站的附属资源，不影响网站核心逻辑和结构，也可以简单归结为历史遗留

问题

特性第三条详细说明 ：

1 浏览器始别 href 引用的文档并对该文档进行下载，同时不会停止当前文档的处理， 「这

也是建议用 link 方式引入 css 而不用 import 的原因」

2 当浏览器解析到 src 引用时，会暂停浏览器的渲染，直到该资源加载完毕， 「这也是建

议将 javascript 脚本放在底部的原因」

2、页面元素隐藏方式 和各自特点？

1 display:none 元素在页面上将消失，不占据页面空间，会导致浏览器的回流与重绘,不能响应交

互类事件 ；【 元素不可见，不占据空间，无法响应点击事件 】

2 visibility:hidden 元素在页面占据的空间不变，所以它只会导致浏览器重绘而不会回流，也不能

响应交互类事件； 【 元素不可见，占据空间，无法响应点击事件 】

3 opacity:0

元素在页面占据的空间不变，不会导致浏览器回流或重绘（因为浏览器对于

transform 和 opacity 这两

种变化处理的方法为合成渲染），可以响应交互类事件。 【 改变元素

透明度，元素不可见，占据页面空间，可以响应点点击事件。 】

4 设施 height、width 属性为 0： 如果想要隐藏需要将盒模型的边距样式都清 0，如存在子元素子

元素 overflow：hidden 【 元素不可见，不占据空间，无法响应点击事件 】

5 Position：absolute 设置元素移出当前页面 【 元素不可见，不影响布局 】

注意：择优记前 3 点，详细说明如下 display 属性为 none，效果：元素不显示，不占位

设