前端HTML常见面试题解答

web前端开发的局限是什么 前端开发要求什么学历  前端用什么开发系统好

1. 什么是语义化的html?有何意义?为什么要做到语义化?(高频率考题)

答:
语义化的html就是正确的标签做正确的事情,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。
在做前端开发的时候要记住:html 告诉我们一块内容是什么(或其意义),而不是它长的什么样子,它的样子应该由css来决定。(即结构与样式分离!)

为什么?
1、有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
2、在没有css的时候能够清晰的看出网页的结构,增强可读性。
3、便于团队开发和维护,语义化的html可以让开发者更容易的看明白,从而提高团队的效率和协调能力。
4、支持多终端设备的浏览器渲染。

2. 行内元素和块元素分别有哪些?(高频率)

答:
常用行内元素(内联元素):a,br,em,font,i,img,input,label,span,strong,textarea
常用块状元素:center,div,dl,form,h1~h6,hr,ol,p,pre,table,ul
区别:
1)块级元素会独占一行,其宽度自动填满其父元素宽度
   行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容的变化而变化
2)块级元素可以设置 width, height属性,行内元素设置width,  height无效
  【注意:块级元素即使设置了宽度,仍然是独占一行的】
3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,
   但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

3. 严格模式与混杂模式的区分?如何触发这两种模式?(高频率)

答:(引用自:[HTML_严格模式与混杂模式](http://www.jianshu.com/p/2c381cd4fcf9))
混杂模式:混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作。
严格模式:严格模式是浏览器根据其支持的最高标准规范去显示页面

触发:浏览器根据doctype是否存在和使用的是那种dtd来决定。
1.如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE,那么它一般以严格模式呈现。
2.包含过渡DTD和URI的DOCTYPE也导致页面以严格模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
3.DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

html5既然没有DTD,也就没有严格模式与宽松模式的区别,html5有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。

4. Doctype 是什么?有啥作用

答:DOCTYPE(DOCument TYPE)标签是一种标准通用标记语言的文档类型声明。
    它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD:Document Type Definition)来解析文档。

5. HTML与XHTML的区别

答:简单来说,XHTML是基于XML发布的HTML规范,旨在规范HTML的格式,对语法的苛刻程度更接近XML。
    XHTML 1.0 是 XML 风格的 HTML 4.01。
    XHTML 1.1 主要是初步进行了模块化。
    HTML5 是下一代 HTML,取代 HTML 4.01。

    它们最主要的不同:

    1.XHTML 元素必须被正确地嵌套。
    错误:<p><span>this is example.</p></span>
    正确:<p><span>this is example.</span></p>

    2.XHTML 元素必须被关闭。
    错误:<p>this is example.
    正确:<p>this is example.</p>

    3.标签名必须用小写字母。
    错误:<P>this is example.<P>
    正确:<p>this is example.</p>
    3.1空标签也必须被关闭
    错误:<br>
    正确:<br/>

    4.XHTML 文档必须拥有根元素。
    所有的 XHTML 元素必须被嵌套于 <html> 根元素中。

(推荐--[HTML4,HTML5,XHTML 之间有什么区别](http://blog.csdn.net/zuoluoboy/article/details/17927939))

6. HTML5以什么标签开头?

答:<!DOCTYPE html>

7. Div与span的区别

答:
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表(共同点)。
两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素)。

8. Img的alt和title有啥区别?各自作用?

答:
    alt属性是在网页图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,
    同时还具有搜索引擎优化效果,因为搜索引擎不认识图片,只认识文字

title属性是在你鼠标悬停在该图片上时显示一个小提示,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的。

9. HTML5的离线储存

本人对离线存储也不太了解,暂时空着,下面放一个相关的博文
([HTML5离线存储原理及实现](http://www.codeceo.com/article/html5-cache.html))

10. iframe有哪些优缺点?

答:
iframe是一种框架,也是一种很常见的网页嵌入方式。
iframe的优点:

1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

iframe的缺点:

1.会产生很多页面,不容易管理。
2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

分析了这么多,现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。

11. 针对移动浏览器端开发页面,不期望用户放大屏幕,且要求“视口(viewport)”宽度等于屏幕宽度,视口高度等于设备高度,如何设置?

答:
<meta name=”viewport” content=”width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no”>

12. data-xxx 属性的作用是什么

答:
HTML5 data-* 属性:

定义和用法
data- 属性用于存储页面或应用程序的私有自定义数据。
data- 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 “data-” 的自定义属性。
这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用css属性选择器进行样式设置。数量不受限制,在控制和渲染数据的时候提供了非常强大的控制。

html:

<div class=”egg” data-name=”pig” id=’test’></div>
<div class=”egg” data-name=”undefined”></div>

css:

.egg{width:200px; height:100px;}
.egg[data-name=’pig’]{ }
.egg[data-name=’undefined’]{ }

js:

var test = document.getElementById(‘test’).dataset;
console.log(test.name);

13. 请描述一下cookies,sessionStorage和localStorage的区别

答: 推荐: 本地存储与扩容

14. 请描述一下HTTP缓存机制

答: 推荐: 彻底弄懂HTTP缓存机制及原理

15. HTTP1.0,1.1,2.0区别

答: 推荐: HTTP 协议入门

前端开发与ui有什么区别吗 前端开发入门该学什么? 前端开发有什么好的书籍推荐

» 本文来自:前端开发者 » 《前端HTML常见面试题解答》
» 本文链接地址:https://www.rokub.com/5394.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!