最近想总结一些常见面试题
有我自己亲身经历的
也有听同学面试提起的
今天是关于html5和css3的。
1、设置div居中（上下及左右）
情景1：已知宽高（300*200）
.d{
width: 300px;
height: 200px;
background: pink; //设置颜色方便看效果
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-100px;
}
情景二：未知宽高
.d{
background: pink; //设置颜色看效果
padding:100px; //撑开div
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
2、页面导入样式时，使用link和@import有什么区别？
- 相同的地方，都是外部引用CSS方式，区别：
- link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
- link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
- link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
- link支持使用javascript控制去改变样式，而@import不支持
- link方式的样式的权重高于@import的权重
- import在html使用时候需要标签
3、HTML5有哪些新特性
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 新的内容元素，比如 article、footer、header、nav、section、menu
- 新的表单控件，比如 number、date、time、email、url、search、color、range、month、week、datetime、datetime_local
4、简述一下你对HTML语义化的理解
- 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
5、cookies，sessionStorage和localStorage的区别？
共同点：都是保存在浏览器端，且是同源的。
区别：
- cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会；
- sessionStorage和localStorage的存储空间更大；
- sessionStorage和localStorage有更多丰富易用的接口；
- sessionStorage和localStorage各自独立的存储空间；
6、网页验证码是干嘛的，是为了解决什么安全问题？
- 区分用户是计算机还是人的程序;
- 可以防止恶意破解密码、刷票、论坛灌水；
7、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
行内元素：
块级元素：- div ul ol li dl dt dd h1 p
8、iframe框架有哪些优缺点？
- 优点：iframe能够原封不动的把嵌入的网页呈现出来
- 如网页需统一风格，可以用iframe来嵌套，可以增加代码的可重用
- 第三方内容如图标和广告，也可由iframe来解决
- 缺点：搜索引擎的爬虫程序无法解读这种页面
- 框架结构会出现很多滚动条
- iframe页面会增加请求
9、表单提交中Get和Post方式的区别
- Get一般用于从服务器上获取数据，Post向服务器传送数据
- Get传输的数据是拼接在Url之后的，对用户是可见的；Post的传输数据对用户是不可见的
- Get传送的数据量较小，不能大于2KB。Post传送的数据量较大，一般被默认为不受限制
- Get安全性非常低，Post安全性较高
- 在FORM提交的时候，如果不指定Method，则默认为Get请求
10、position的值有哪些
- static：默认值。没有定位，元素出现在正常的流中
- relative（相对定位）：生成相对定位的元素,相对于其正常（原先本身）位置进行定位
- absolute（绝对定位）：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
- fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位
|
|
转播
