html 5常见的面试题-html教程-PHP中文网

1、常见的块级元素内联元素p -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - 段落 ul - 无序列表 fieldset - 表单字段集 colgroup-col - 表单列分组元素 table-tr-td 表格及行-单元格 pre - 格式化文本a –超链接（锚点） br - 换行 i - 斜体 em - 强调 img - 图片 input - 输入框 label - 表单标签 span - 常用内联容器，定义文本内区块 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 u - 下划线 select - 项目选择2、实现文本三个点的几个条件text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！

IE6+；chrome1.0+；safari3.1+（firefox,opera暂不支持）

3、垂直居中的几个条件

设置一个元素在一个容器中垂直居中，必须更改默认的display属性值为inline-block;
并加上同级元素（标尺）（同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;）。

三个条件：
1：必须给容器（父元素）加上text-align:center;
2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
3：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block

4、置换元素与非置换元素

置换元素与非置换元素

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的、、

、<select>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。 置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高的原因。 b) 不可替换元素（非置换元素）：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。 5、什么是精灵图？优势是什么？ 图片整合，将小的单张背景图整合到一张大的背景图上。 图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。 2）通过整合图片来减小图片的体积。 6、什么是<a href="http://www.php.cn/code/5005.html" target="_blank">css层叠</a>样式表？<a href="http://www.php.cn/code/6066.html" target="_blank">优先级</a>算法如何计算？ a.重要性和来源的优先级排序从低到高是： 1）浏览器默认样式 2）<a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/id.....选择器的权重 3）行间样式 4）内联或者外联 （书写顺序） 5）!important 最高的 7、display:none与<a href="http://www.php.cn/wiki/929.html" target="_blank">visibility</a>:hidden的区别 前者：隐藏不占位  后者：隐藏但是占位置 8、<a href="http://www.php.cn/code/6337.html" target="_blank">清除浮动</a>的几种方式 hack1：给父元素添加声明overflow:hidden; hack2:   给父元素加height hack3:   在浮动元素下方添加空p,并给该元素添加         声明：p{<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>:both; height:0; overflow:hidden;} hack4:万能清除浮动法 p<a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a>{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;} 9、哪些属性可以<a href="http://www.php.cn/code/6064.html" target="_blank">继承</a>？ 1）文字相关：<a href="http://www.php.cn/wiki/804.html" target="_blank">font-family</a>、<a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a>、<a href="http://www.php.cn/wiki/826.html" target="_blank">font-style</a>、<a href="http://www.php.cn/wiki/862.html" target="_blank">font-variant</a>、<a href="http://www.php.cn/wiki/858.html" target="_blank">font-weight</a>、font、<a href="http://www.php.cn/wiki/865.html" target="_blank">letter-spacing</a>、<a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>、text-align、<a href="http://www.php.cn/wiki/867.html" target="_blank">text-indent</a>、<a href="http://www.php.cn/wiki/863.html" target="_blank">text-transform</a>、<a href="http://www.php.cn/wiki/866.html" target="_blank">word-spacing</a> 2）列表相关：<a href="http://www.php.cn/wiki/954.html" target="_blank">list-style</a>-image、<a href="http://www.php.cn/wiki/955.html" target="_blank">list-style-position</a>、<a href="http://www.php.cn/wiki/956.html" target="_blank">list-style-type</a>、list-style 3）颜色相关：color 4）透明度（子元素会继承祖元素的opacity，但是无法更改） 注：font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值得时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。 10、定位的方式 position属性值：<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>，relative，absolute，fixed 1）static static是默认值，元素位于文档流中，正常显示，忽略元素的<a href="http://www.php.cn/wiki/904.html" target="_blank">top</a>，<a href="http://www.php.cn/wiki/906.html" target="_blank">bottom</a>，<a href="http://www.php.cn/wiki/907.html" target="_blank">left</a>，<a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>属性。<a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>属性始终为0. 2）relative 相对定位，保留元素在文档流中占用的位置和尺寸，由left/right/top/bottom几个属性确定相对移动的距离，原来的位置保留 3）absolute <a href="http://www.php.cn/code/6074.html" target="_blank">绝对定位</a>，将<a href="http://www.php.cn/wiki/60.html" target="_blank">对象</a>从文档流中脱离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果没有，则依据body对象 4）fixed fixed和absolute差不多，但是他相对的是窗口的左上角，不会跟随文档滚动。但是如果在多frame页面里面，他相对的是所在frame的左上角，而不是浏览器左上角。 11、link和@import区别？ 1、老祖宗的差别。link属于X<a href="http://www.php.cn/code/427.html" target="_blank">HTML标签</a>，而@import完全是CSS提供的一种方式。 2、link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义<a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a>，定义rel连接属性等，@import就只能加载CSS了 3、加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link<a href="http://www.php.cn/wiki/231.html" target="_blank">引用</a>的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁） 4、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题 5、使用dom控制样式时的差别。当<a href="http://www.php.cn/code/7565.html" target="_blank">使用javascript</a>控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的 12、定位的属性值都有哪些？每个值得意思？ 各属性值的作用： static：默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 absolute：相对于父级元素的绝对定位，s浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value) relative：是相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】 fixed：相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。 13、写出html5<a href="http://www.php.cn/php/php-tp-append.html" target="_blank">新增</a>的标签15个 <a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a>er nav footer <a href="http://www.php.cn/wiki/646.html" target="_blank">main</a> aside article section figure datalist video audio fieldest  legend  label caption 14、一、BFC是什么？作用？怎么产生？ 1、块级格式化上下文 2、自适应两栏布局、清除内部浮动、防止垂直<a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>重叠（放在两个BFC里） 3、根元素、 <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>属性不为none、 position为absolute或fixed、 display为inline-block，table-cell，table-caption，flex，inline-flex、 overflow不为visible 15、.px，em，rem，pt的区别 1）px实际上就是像素，用px设置字体大小时，比较稳定和精确 但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的web页面时，如果对浏览器进行了缩放，这时会使我们的web<a href="http://www.php.cn/code/7955.html" target="_blank">页面布局</a>被打破。因此，这时就提出了使用“em”来定义web页面的字体。 2）em就是根据基准来缩放字体的大小 em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小 3）rem是相对于根元素字体大小来显示的 rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值 4）pt的大小等于1英寸的1/72 磅：他是作为文字的一种计量单位 这种度量方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器 16、实现垂直+水平居中有哪些方法？ 1、p{width:200px;height:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;} 2、p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;} 17、渐进增强和优雅降级 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容 18、css选择符有哪些？ 1）通配选择符      * 2）类型选择符 /元素选择符     a 3）属性选择符      input[type="button"]4）包含选择符     p .code a 5）子对象选择符     ul.test>li 6）ID选择符     # 7）类选择符     . 8）群组选择符     body,ul,li 9）<a href="http://www.php.cn/code/6014.html" target="_blank">伪类</a>及伪对象选择符     p<a href="http://www.php.cn/wiki/970.html" target="_blank">:first-letter</a>     a<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a> 10）相邻选择符     li+li 19、animation和transition的区别 相同点：都是随着时间改变元素的属性值。 不同点： transition需要触发一个<a href="http://www.php.cn/php/php-tp-incident.html" target="_blank">事件</a>(hover事件或click事件等)才会随时间改变其 css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种<a href="http://www.php.cn/code/9595.html" target="_blank">动画</a>的效果，css3的animation就需要明确的动画属性值。 20、什么是标准<a href="http://www.php.cn/code/6444.html" target="_blank">盒模型</a>和怪异盒模型。两者的区别，如何实现怪异盒模型，和标准和模型 标准盒模型：content+border+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a>       怪异盒模型：content 一个算盒子的宽度的时候加上border和padding另一个不加 怪异盒模型实现：box-sizing:border-box 标准盒模型：box-sizing:content-box 21、如何让一个元素在父元素内上下左右居中 1. css： .box{display:flex;width:800px;height:<a href="http://www.php.cn/code/4221.html" target="_blank">300</a>px;just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-content:center} .box p{align-self:center} html:       2. css: .box{display:flex;width:800px;height:800px;justify-content:center;align-items:center;} html:       22、video与audio常用的格式有哪些 用于<a href="http://www.php.cn/code/6707.html" target="_blank">视频</a>：video/ogg   video/mp4     video/webm 用于<a href="http://www.php.cn/code/6093.html" target="_blank">音频</a>：audio/ogg   audio/mpeg 23、简单的解释下<a href="http://www.php.cn/code/10723.html" target="_blank">弹性盒模型</a>的属性和属性值（至少写出6个属性） display:flex; flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: justify-content: align-items: align-self: align-content: flex-wrap: 23、简单的介绍一下线性渐变和径向渐变、重复渐变的用法 线性渐变：linear-gradient() 径向渐变：radial-gradient() 重复线性渐变：repeating-linear-gradient() 重复径向渐变：repeating-radial-gradient() 24、简单介绍下animation的用法 animation有两部分组成：animation:动画名称  动画执行时间  动画类型 动画延迟时间  动画重复次数 动画方向； @<a href="http://www.php.cn/wiki/1051.html" target="_blank">key</a>frames 动画名字 25、css3D的主要几个属性和属性值 1、景深：perspactive:number;     想要看到的物体越大，那么就把值设的较小，如果要看物体看的越小就把值设的越大 2、3D的舞台：transform-style:preserve-3d; 3、translateZ()   rotateZ()   scaleZ() 26、2D中的主要几个属性 transform:translate()   rotate() skew()  scale() transform-origin: 27、简单介绍过度动画的属性和属性值 transition:属性名称（可以用<a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a>） 动画执行的时间  动画的类型  动画的延迟时间 28、css3中新增的<a href="http://www.php.cn/code/6021.html" target="_blank">背景属性</a> <a href="http://www.php.cn/code/865.html" target="_blank">background-origin</a>:背景原点 <a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>:背景裁切 <a href="http://www.php.cn/code/872.html" target="_blank">background-size</a>:<a href="http://www.php.cn/code/8294.html" target="_blank">背景图像</a>的尺寸 以下为background-size的三个值 length 规定背景图的大小。第一个值宽度，第二个值高度。 Percentage(%) 以百分比为值设置背景图大小 cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域     29、写出5大浏览器的内核以及他们的代表作品 *Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器 *Gecko：： 代表作品Mozilla Firefox 是开源的 *Webkit : 代表作品Safari、Chrome ， 是一个开源项目。 *Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。 *Blink  ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。 30、写出IE6里面常见的几种bug以及解决方案(最少4种) 1)图片有边框BUG         方案：给图片加border:0;或者border:0    none; 2、双倍浮向（双倍边距）   方案：display:inline 3、默认高度（IE6、IE7）  方案：给元素添加声明：font-size:0;   方案2：给元素添加声明：overflow:hidden; 4、按钮元素默认大小不一   方案：用a标签模拟 31、IE的<a href="http://www.php.cn/code/120.html" target="_blank">过滤器</a>有哪些？ 1、  _ 下划线属性过滤器 2、  \9 ：  IE版本识别；其他浏览器都不识别 语法：选择符{属性：属性值\9;} 3、  \0  :   IE8及以上版本识别；其他浏览器都不识别     语法：选择符{属性：属性值\0；} 32、元素高度塌陷解决方案（至少4种） hack1：给父元素添加声明overflow:hidden; hack2:   给父元素加height hack3:   在浮动元素下方添加空p,并给该元素添加         声明：p{clear:both; height:0; overflow:hidden;} hack4:万能清除浮动法 p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;}</article><ul class=" list-paddingleft-2"></ul>以上是html 5常见的面试题的详细内容。更多信息请关注PHP中文网其他相关文章！</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">声明：<div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="nphpSytBox">上一篇：<a class="dBlack" title="css多行省略号兼容性写法" href="https://m.php.cn/zh/faq/359949.html">css多行省略号兼容性写法</a>下一篇：<a class="dBlack" title="移动端最佳字体大小设置" href="https://m.php.cn/zh/faq/359951.html">移动端最佳字体大小设置</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><a href="https://m.php.cn/zh/article.html" class="bBlack">查看更多</a><div class="clear"></div></div><ul class="nphpXgwzList"><li><a href="https://m.php.cn/zh/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><a href="https://m.php.cn/zh/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">公益在线PHP培训，帮助PHP学习者快速成长！</div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"> © php.cn All rights reserved
 </div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
 var _times = times || -1, //100次
 _interval = interval || 20, //20毫秒每次
 _self = this,
 _selector = this.selector, //选择器
 _iIntervalID; //定时器id
 if( this.length ){ //如果已经获取到了，就直接执行函数
 func && func.call(this);
 } else {
 _iIntervalID = setInterval(function() {
 if(!_times) { //是0就退出
 clearInterval(_iIntervalID);
 }
 _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
 if( _self.length ) { //判断是否取到
 func && func.call(_self);
 clearInterval(_iIntervalID);
 }
 }, _interval);
 }
 return this;
}
$("table.syntaxhighlighter").wait(function() {
 $('table.syntaxhighlighter').append("");
});
$(document).on("click", ".cnblogs_code_footer",function(){
 $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>