HTML5，CSS3初级面试题
2017-08-28 本文已影响0人
穷鬼_h
CSS3新特性有哪些？
- 选择器类
- first-child
- last-child
- nth-child
- :checked
- 文字样式
- @font-face
@font-face{ font-family:BorderWeb; src:url(BorderWeb.eot) } .border{ font-family:"BorderWeb" }- text-overflow & white-space & word-warp
.ellipsis{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc; } - text-decoration为文本添加下划线 默认值none
- 边框，背景 样式
- 圆角 border-radius,四个参数 从上左到下右 4个方位
- 渐变
-
线性渐变
linear-gradient(left,#333,#999)(默认是从上到下) 第一个参数为方位，可以是对角,如left to。也可以是角度，注意这里是顺时钟，如180deg就是从下到上 -
径向渐变
adial-gradient(center,circle,yellow 10%,bule 30%) -
阴影，box-shadow.反射,box-reflect
-
背景，background-clip
-
布局
- 弹性盒子
-
动画，过渡
-
HTML有哪些新特性？
- 新增标签
<header>
<footer>
<nav>
<section>
<artical>
<aside>
time - 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持 Local storge，sessionStorage
- 新的表单控件，比如 calendar、date、time、email、url、search，移动端体验更好
- 新增获取地理位置，上传文件等API
localStorage,sessionStorage,cookie 的区别
- localStorage 用于持久化的本地存储，关闭页面还有，除非主动删除，否则一直存在，存储量大
- sessionStorage 不是持久化的本地存储，关闭页面就会自动删除
- cookie 是与服务器交互的，作为http规范的一部分而存在，在浏览器和服务器之间来回，存储量小
如何优化页面速度，提高页面响应
- 取消重定向，原因是网站都会首先加载一个空白的页面，然后在定向到另外的页面。
- 合并javaScript
- 合并css
- 使用css sprite
- 启用GZIP
- css,js引入文件位置，css放在<head>里面，js放在尾部
- img标签要添加alt属性
- 清除无效的a标签，并给a标签加上title属性
- 缓存静态资源
- 不用iframe/frame
- 减少DNS域名查找时间，将DNS的时间设置为较低的水平，比如60-100ms进行一次DNS查询
如何提高前端性能
- 用webStorage代替cookie,可以减少HTTP请求的数据量
- 使用css3动画，开启GPU加速。translate3d()
- 缓存HTML标记
如何对网站的文件和资源进行优化
- 文件合并
- 文件最小化
- 使用cdn托管
- 缓存的使用
请简单说明浮动和绝对定位的区别和应用。
- 二者都会脱离文档流，并自动转换为块级元素。不同的是绝对定位的元素是按照浏览器的左上角计算的或者对设置相对定位的父元素开始的，它的脱离文档流不占据空间，因此会产生覆盖页面上的其他元素，故有了z-index属性。
- 浮动元素还是基于正常的文档流，只是在文档流中抽出，并尽可能的移动到最左侧或者右侧，文字内容会围绕在浮动元素周围，仍然在文档流中的元素会替补原先的空间。
meta 元标签基础知识
- 将窗口调整为设备窗口，并禁止用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" - 忽略页面中的数字识别为电话号码,Android平台对邮箱的识别
<meta name="format-detection",content="telephone=no"> - 当网站添加到主屏幕快速启动方式,以及顶部导航条样式
<meta name="apple-mobile-wep-app-capable",content="yes">
<meta name="apple-mobile-web-app-status-bar-sytle",content="black">
说说移动端2栏布局，左侧定宽，右侧自适应的两种方法
- HTML代码
<div class="main">
<div class="left">左侧固定</div>
<div class="right">右侧自适应<div>
</div>
- 第一种方法，flex
.main{
display:flex;
}
.left{
width:100px;
height:400px;
}
.right{
flex:1;
height:400px;
}
- 第二种方法 定位+margin
*{
margin: 0;
padding: 0;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 400px;
}
.right {
margin-left: 100px;
height: 400px;
}
