本篇内容介绍了“HTML5和CSS3的面试题有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1. 列举3个HTML5新标签，3个CSS3新特性。

HTML5 新标签 header,nav,article,footer,section,aside,audio,video,embed

CSS3 新特性 border-radius ,box-shadow,border-image,background-image,transition.

2. HTML5实现本地临时存储和永久存贮、读取、删除一条 key 为c，value 为 tom 的数据。

//临时存储sessionStorage.setItem('c','tom')//永久存贮localStorage.setItem('c','tom')//读取localStorage.getItem('c')//删除localStorage.removeItem("c");//逐条删localStorage.clear();//删除全部3.用 js+css3 实现某 DIV 以50px每秒的速度左移 100px

<style>.box{width:100px;height:100px;background-color:pink;position:relative;left:0;top:0;}</style><body><divclass="box"></div><script>//100*20=2000//获取boxletbox=document.querySelector('.box')letleft=box.style.leftvarleftnum=Number(left.split('px')[0])//不要单位varnum=1varanimate=setInterval(()=>{if(num>=100){clearInterval(animate)}leftnum+=1box.style.left=leftnum+'px'num++},20);</script></body>4.CSS 实现三栏布局（左右固定200px，中间自适应）

双飞翼布局：都左浮动，中间包一个盒子，padding 隔开两侧宽度。左右两侧都有 margin-left.

<style>body{min-width:550px;}.col{float:left;}#main{width:100%;height:400px;background-color:#ccc;}#main-wrap{margin:0200px0200px;}#left{width:200px;height:400px;margin-left:-100%;background-color:red;}#right{width:200px;height:400px;margin-left:-200px;background-color:#ff0000;}</style><body><divid="container"><divid="main"class="col"><divid="main-wrap"></div></div><divid="left"class="col"></div><divid="right"class="col"></div></div></body>

圣杯布局：中间不包盒子但还是有 padding。

<style>#container{padding:0190px0190px;}.col{position:relative;float:left;}#main{width:100%;height:400px;background-color:#ddd;}#left{width:190px;height:400px;background-color:red;/*离左边距本身的距离*/margin-left:-100%;/*然后又自己向左移了本身的宽度*/left:-190px;}#right{width:190px;height:400px;background-color:yellow;margin-left:-190px;right:-190px;}</style><body><divid="container"><divid="main"class="col"></div><divid="left"class="col"></div><divid="right"class="col"></div></div></body>

拓展 左右布局

<style>html,body{height:100%;}.left{width:256px;height:100%;background-color:#ddd;float:left;}.right{width:100%;height:100%;margin-left:256px;background-color:rgb(230,48,48);}</style><body><divclass="left"></div><divclass="right"></div></body>5.使用 html5 canvas 绘制实心原形。

<style>#canvas{width:500px;height:500px;}</style><body><canvasid="canvas"></canvas></body><script>varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");//画一个空心圆ctx.beginPath();//arc()方法是创建弧/曲线(用于创建圆或部分圆)//context.arc(x,y,r,sAngle,eAngle,counterclockwise);//起始角为0//结束角为2*Math.PIctx.arc(100,75,50,0,2*Math.PI);ctx.lineWidth=5;ctx.strokeStyle="green";//使用stroke()或fill()方法在画布上绘制实际的弧ctx.stroke();//画空心圆ctx.closePath();//画一个实心圆//ctx.beginPath();//ctx.arc(200,100,50,0,360,false);//ctx.fillStyle="red";//填充颜色,默认是黑色//ctx.fill();//画实心圆//ctx.closePath();//空心和实心的组合//ctx.beginPath();//ctx.arc(100,100,50,0,360,false);//ctx.fillStyle="red";//ctx.fill();//ctx.strokeStyle="green";//ctx.stroke();//ctx.closePath();</script>6.如何使用 css3 动画实现盒子 hover 时高度从10到100的动画？

<style>#box{width:100px;height:10px;background-color:pink;transition:all1sease;}#box:hover{height:100px;}</style><body><divid="box"></div></body>

“HTML5和CSS3的面试题有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！