1.link和@import的区别
HTML代码如下:
<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />
HTML代码如下:
<style type='text/css' media='screen'>
@import url('CSS文件 ');
</style>
虽然,两者都是外部引用CSS的方式,但是还是存在一定区别的:
- 区别1: link 是 XHTML 标签,除了加载 CSS 外,还可以定义 RSS 等其他事务; @import 属于 CSS 范畴,只能加载 CSS 。
- 区别2: link 引用 CSS 时,在页面载入时同时加载; @import 需要页面网页完全载入以后加载。
- 区别3: link 是 XHTML 标签,无兼容问题; @import 是在 CSS2.1 提出的,低版本的浏览器并不支持。
- 区别4: link 支持使用 Javascript 控制 DOM 去改变样式;而 @import并 不支持。
2.src与href的区别
- src用于替换当前元素, href 用于在当前文档和引用资源之间确立联系。
- src是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本, img 图片和 frame 等元素。
如:<script src ='js.js'></script>
,当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。 - href是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加:
<link href='common.css' rel='stylesheet'/>
,那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。
这也是为什么建议使用 link 方式来加载 css ,而不是使用 @import 方式。
3.img的title和alt区别
- Alt 用于图片无法加载的时候显示预先设置好的文字或提示信息
- Title 为该属性提供信息,通常当鼠标滑动到元素上的时候会显示
4.表单提交中Get和Post方式的区别
- get 是从服务器上获取数据, post 是向服务器传送数据。
- get 是把参数数据队列加到提交表单的 action 属性所指的 URL 中,值和表单内各个字段一一对应,在 URL 中可以看到。 post 是通过 HTTP post 机制,将表单内各个字段与其内容放置在 HTML header 内一起传送到 action 属性所指的 URL 地址 , 用户看不到这个过程。
- 对于 get 方式,服务器端用 Request.QueryString 获取变量的值,对于 post 方式,服务器端用 Request.Form 获取提交的数据。
- get 传送的数据量较小,不能大于 2KB 。 post 传送的数据量较大,一般被默认为不受限制。但理论上, IIS4 中最大量为 80KB , IIS5 中为 100KB 。
- get 安全性非常低, post 安全性较高。
5.em与rem的区别
- rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数,只相对于根元素的大小
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
作用:利用rem可以实现简单的响应式布局,可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化,以前的天猫tmall就使用这种办法em 文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(默认16px)。相对父元素的字体大小倍数
- em(font size of the element)是指相对于父元素的字体大小的单位。
em与rem的重要区别: 它们计算的规则一个是依赖父元素另一个是依赖根元素计算
6.display:none和visibility:hidden区别
- 在使用CSS的display:none后,被隐藏的元素是不会占有原来的位置空间的,他会引起浏览器的重排->重绘
- 在使用CSS的visibility:hidden后,被隐藏的元素是会占有原来的位置空间的,他的外表只是被隐藏了而已,霸占的空间已然存在,他会引起浏览器的重绘。
使用HTML5中的新增属性hidden=”hidden”,不会占有原来的位置。
7.浏览器标准模式和怪异模式之间的区别
在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染,而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本
浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式;如果存在一个
完整的`DOCTYPE`则浏览器将会采用标准模式,而如果它缺失则浏览器将会采用怪异模式。
其区别如下:
(1)盒模型:
在怪异模式下,盒模型为IE盒模型而非标准模式下的W3C 盒模型,在 IE 盒模型中:
box width = content width + padding left + padding right + border left + border right,
box height = content height + padding top + padding bottom + border top + border bottom。
而在 W3C 标准的盒模型中,box 的大小就是 content 的大小。
(2)图片元素的垂直对齐方式:
对于inline
元素和table-cell
元素,在 IE 标准模式下 vertical-align 属性默认取值为baseline
。而当inline
元素的内容只有图片时,如table
的单元格table-cell
。在 IE 怪异模式 下,table
单元格中的图片的 vertical-align
属性默认为bottom
,因此,在图片底部会有几像素的空间。
(3)<table>
元素中的字体:
CSS 中,描述font
的属性有font-family
,font-size
,font-style
,font-weigh
,上述属性都是可以继承的。而在 IE 怪异模式 下,对于table
元素,字体的某些属性将不会从body
或其他封闭元素继承到table
中,特别是 font-size
属性。
(4) 内联元素的尺寸:
在 IE标准模式 下,non-replaced inline 元素无法自定义大小,而在 IE 怪异模式下,定义这些元素的width
和height
属性,能够影响该元素显示的大小尺寸。
(5) 元素的百分比高度:
- CSS 中对于元素的百分比高度规定如下:百分比为元素包含块的高度,不可为负值。如果包含块的高度没有显式给出,该值等同于“auto”(即取决于内容的高度)。所以百分比的高度必须在父元素有声明高度时使用。
- 当一个元素使用百分比高度时,在 IE 标准模式下,高度取决于内容的变化,而在 怪异模式 下,百分比高度则被正确应用。
(6) 元素溢出的处理:
在 IE 标准模式下,overflow
取默认值 visible
,即溢出可见,这种情况下,溢出内容不会被裁剪,呈现在元素框外。而在 怪异模式下,该溢出被当做扩展box
来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。