web前端面试题及答案 html篇 上

1.说说你对语义化的理解?
1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
3,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
4,便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
2.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
1, 声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。
2,严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3,在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4,DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
3.你知道多少种Doctype文档类型?
1, 该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
2,HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
3,XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
4,Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
4.HTML与XHTML——二者有什么区别
区别:
1,所有的标记都必须要有一个相应的结束标记
2,所有标签的元素和属性的名字都必须使用小写
3,所有的XML标记都必须合理嵌套
4,所有的属性必须用引号”“括起来
5,把所有<和&特殊符号用编码表示
6,给所有属性赋一个值
7,不要在注释内容中使“–”
8,图片必须有说明文字
5.常见兼容性问题?
1,png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理。
2,浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
3,IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。
4,浮动ie产生的双倍距离(IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。)
这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(这个符号只有ie6会识别)
渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。现在可以使用html5推荐的写法:
上下margin重合问题
ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。
解决方法,养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。
ie6对png图片格式支持不好(引用一段脚本处理)
6.解释下浮动和它的工作原理?清除浮动的技巧
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;
7.浮动元素引起的问题和解决办法?
(1)父元素的高度无法被撑开,影响与父元素同级的元素
(2)与浮动元素同级的非浮动元素(内联元素)会跟随其后
(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
解决方法:
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:
.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮动的几种方法:
1,额外标签法,

(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)
2,使用after伪类
8.IE 8以下版本的浏览器中的盒模型有什么不同?
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框;
9.DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
(1)创建新节点
1,createDocumentFragment() //创建一个DOM片段
2,createElement() //创建一个具体的元素
3,createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
1,appendChild()
2,removeChild()
3,replaceChild()
4,insertBefore() //在已有的子节点前插入一个新的子节点
(3)查找
1,getElementsByTagName() //通过标签名称
2,getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
3,getElementById() //通过元素Id,唯一性
10.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
1,HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
2,添加元素
①拖拽释放(Drag and drop) API
②语义化更好的内容标签(header,nav,footer,aside,article,section)
③音频、视频API(audio,video)
④画布(Canvas) API
⑤地理(Geolocation) API
⑥本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
⑦sessionStorage 的数据在浏览器关闭后自动删除;
⑧表单控件,calendar、date、time、email、url、search
⑨新的技术webworker, websocket, Geolocation
3,移除的元素
①纯表现的元素:basefont,big,center,font, s,strike,tt,u;
②对可用性产生负面影响的元素:frame,frameset,noframes;
支持HTML5新标签:
IE8/IE7/IE6支持通过document.createElement方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值