目录
一、你做的页面在那些浏览器测试过?这些浏览器的内核分别是什么?
一、你做的页面在那些浏览器测试过?这些浏览器的内核分别是什么?
图标 | 浏览器 | 内核 | 优点 |
---|---|---|---|
IE浏览器 | trident内核 | IE是WINDOWS自带绑定的,一般人都在用 | |
Firefox(火狐浏览器) | gecko内核 | Firefox使用的人也比较多,插件和应用非常多,不过启动慢,但是负载能力是最强的,同时打开20到30个网页占用电脑资源最少。 | |
Safari(苹果浏览器) | Webkit内核 | Safari有专门支持Windows的版本,一般来说下这样的版本在WINDOWS的系统上是没有任何问题的. 但是,Safari虽然外观完美但是所站内存也很大 | |
Opera(欧朋浏览器) | 以前是Opera现在改用Google Chrome的Bink内核 | Opera 界面非常漂亮,速度也是最快的浏览器。 | |
Chrome(谷歌浏览器) | BInk(基于webkit,Google与Opear Software 共同开发) | 对于HTML5和CSS3(网页结构代码)它的支持的最好的。 |
二、行内元素、块元素和行内块元素都有什么?区别是什么?
元素 | 转换 | |
---|---|---|
行内元素 | span,a,i,strong,em,label,aelect,textarea | display:inline |
块元素 | div,p,nav,aside,header,footer,section,article,ul-li,address | display:block |
行内块元素 | img,input | display:inline-block |
2.1行内元素的特征
- 设置宽高无效
- 对margin仅设置左右方向有效、上下无效;padding设置上下左右都有效,即会撑大空间
- 不会自动进行换行
<style>
span{
span{
/* 设置宽高无效 */
width: 500px;
height: 300px;
background-color: red;
/* margin设置左右有效,上下无效 */
margin: 20px 20px;
/* padding上下左右都有效,会撑大空间 */
padding: 20px 20px;
color: white;
}
}
</style>
<!-- 不会自动换行 -->
<span>我是行内元素</span>
<span>我是行内元素</span>
<span>我是行内元素</span>
<span>我是行内元素</span>
2.2块元素的特征
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 可以自动换行
- 多个块元素标签写在一起,默认排列方式为从上到下
<style>
div{
/* 能够识别宽高 */
width: 200px;
height: 200px;
background-color: antiquewhite;
/* margin和padding都有效 */
margin: 50px;
padding: 30px;
}
</style>
<!-- 可以自动换行,从上往下排 -->
<div>我是块元素</div>
<div>我是块元素</div>
2.3行内块元素的特征
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 不自动换行
- 默认排列方式从左到右
<style>
input{
/* 能够识别宽高 */
width: 30px;
height: 10px;
/* margin和padding都有效 */
margin: 50px;
padding: 30px;
}
</style>
<!-- 不会自动换行,从左往右排 -->
<input type="text">
<input type="text">
三、<image>标签上的title属性与alt属性的区别是什么?
title属性,鼠标移动到图片上会显示这个图片指定的属性文字,以此来对图片进行补充说明
alt属性,图像加载失败,会用alt中设置的文字来代替图像显示
四、html5新增的标签,并说明其语义和应用场景
- header:头部。它经常包含 logo、页面标题和导航性的目录。
- nav:导航栏
- section:定义文档中的一个章节
- aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。
- footer:尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
五、html5有那些新特性、移除了那些元素?
5.1新特性
- 语义化标签(header,nav,footer,aside,article,section)
- 音频、视频API(audio,video)
- 画布(Canvas)API
- 地理(Geolocation) API
- 拖拽释放(Drag and drop)API
- 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失,sessionStorage 的数据在页面会话结束时会被清除
- 新的表单元素,date、time、email、url、search
5.2移除的元素
纯表现的元素:basefont,big、u等;
对可用性产生负面影响的元素:frame,frameset等
六、iframe的优缺点?
优点:
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- iframe无刷新文件上传
- iframe跨域通信
缺点:
- iframe会阻塞主页面的Onload事件
- 无法被一些搜索引擎索引到
- 页面会增加服务器的http请求
- 会产生很多页面,不容易管理。
七、设置文字水平居中的属性是?设置盒子水平居中的属性是?
文字水平居中:text-align:center
盒子水平居中:margin:0 auto