Web前端面试之HTML
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端面试之HTML相关的知识，希望对你有一定的参考价值。
1. 对WEB标准以及W3C的理解与认识
web标准规范要求，书写标签闭合、小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率。--- SEO
使用外链css和js脚本，结构与行为、结构与表现分离，提高页面的渲染速度，更快地显示页面的内容。
样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便
不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性
遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。
2. DOCTYPE作用？严格模式与混杂模式如何区分？它们有何意义?
Doctype 是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。
严格模式的排版和js运作模式是以该浏览器支持的最高标准运行
在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作，DOCTYPE不存在 或格式不正确会导致文档以混杂模式呈现
加入xml头部声明可以触发IE浏览器的Quirks mode，触发之后，浏览器解析方式就和IE5.5一样，拥有IE5.5一样的bug和其他问题，行为（javascript）也是如此。
IE6的触发,在Xhtml的DOCTYPE前加入XML声明
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE7的触发,在XML声明和XHTML的DOCTYPE之间加入HTML注释
<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE6和IE7都可以触发的,在HTML4.01的DOCTYPE文档头部加入HTML注释
<!-- quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
意义：各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。所以，除非是为了兼容的问题，比如你不想修改很久很久以前做的IE ONLY的网页，否则刻意触发混杂模式没有任何意义。
3. 浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
4. 行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签‘P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
div、dir - 目录列表、center、h1-h6、ol、ul、table、pre- 格式化文本、form、fieldset - form控制组、address、blockquote - 块引用、dl - 定义列表、menu、p、hr
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）、noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
内联元素：内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
a/b/br/i/img/strong/small/input/font/cite/code/em/span/sub/sup/select
可变元素 : 需要根据上下文关系确定该元素是块元素或者内联元素。一旦上下文关系确定了类别，就遵循块元素或者内联元素的规则限制。
* applet - java applet * button - 按钮 * del - 删除文本 * iframe - inline frame * ins - 插入的文本 * map - 图片区块(map) * object - object对象 * script - 客户端脚本
空元素(没有内容的HTML内容被称为空元素，空元素是在开始标签中关闭的)有: img input br hr link meta
5. CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
link 方式的样式的权重>@import的权重
link属于XHTML标签，而@import是CSS提供的；
前者无兼容性，后者CSS2.1以下浏览器不支持
link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载
Link 支持使用javascript改变样式，后者不可
link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css
所以我认为结合来使用就最好，比如：<link href="css/main.css" rel="stylesheet" type="text/css">引用了一个main.css文件，在main.css里面再引用@import url(footer.css);@import url(head.css);这样达到一个清晰明了的作用.
6. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7. 前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8. css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Trident) 火狐（Gecko） 谷歌（WebKit的分支Blink） opear(原为Presto现为Blink)
10. 写出几种IE6 BUG的解决方法
【IE6的疯狂之一】IE6中奇数宽高的BUG：http://www.css88.com/archives/1725
【IE6的疯狂之二】IE6中PNG Alpha透明：http://www.css88.com/archives/577
【IE6的疯狂之三】IE6 3像素BUG的实例：http://www.css88.com/archives/117
【IE6的疯狂之四】IE6文字溢出BUG：http://www.css88.com/archives/253
【IE6的疯狂之五】div遮盖select的解决方案：http://www.css88.com/archives/545
【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）：http://www.css88.com/archives/421
【IE6的疯狂之七】样式中文注释后引发失效：http://www.css88.com/archives/726
【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG：http://www.css88.com/archives/744
【IE6的疯狂之九】li在IE中底部空行的BUG：http://www.css88.com/archives/1111
【IE6的疯狂之十】父级使用padding后，子元素绝对定位的BUGhttp://www.css88.com/archives/1584
【IE6的疯狂之十一】!important在IE6下的一个BUG：http://www.css88.com/archives/1716
【IE6的疯狂之十二】一个display:none引起的3像素的BUG：http://www.css88.com/archives/1797
【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG：http://www.css88.com/archives/2916
11. 前端性能优化
网络性能优化，加快访问速度，浏览器并行加载数量，怎样实现原生JS异步载入，CDN加速的原理，如何将不同静态资源发布到多个域名服务器上，发布后这些静态字段的url路径改怎么批量改写，用什么工具进行项目打包，css打包后的相对路径怎么转换为绝对路径，用什么工具进行项目模块依赖管理，怎么进行cookie优化等等，
这个说起来就很多了，尽可能的按照自己做过的优化来讲，否则面试官随便挑一项深究都可能会卡壳，与其这样还不如不讲。
12. 介绍一下你对浏览器内核的理解？
浏览器内核是浏览器最重要的或者说是最核心的部分。主要负责对网页语法的解释并渲染(显示)网页。
浏览器内核又可以分为两个部分（渲染引擎和js引擎）
js引擎则是解析JavaScript语言，执行javascript语言来实现网页的动态效果。
渲染引擎负责取的网页的内容，整理讯息，以及计算网页的显示方式，然后哦会输出至显示器或者打印机。
13. 简述一下你对HTML语义化的理解？
HTML语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
HTML语义化的主要目的是：
1).为了在没有css的情况下，页面也能呈现出很好地内容结构、代码结构
2).有利于用户体验
3).有利于SEO和搜索引擎建立良好的沟通。
4).方便其他设备解析以意义的方式来渲染网页、
5).便于团队开发和维护，增加可读性。
14. HTML5的离线储存怎么使用
离线存储局势将一些源代码文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法(更新相关文件或者使用相关 API)，可以更新、删除离线存储等操作
15. HTML5 为什么只需要写 <!DOCTYPE HTML>？
html5不基于SGML(标准通用语言)，因此不需要对DTD（文档类型定义）进行引用，但需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式运行）
而html4.01基于SGML，所以需要对DTD进行应用，才能告知浏览器文档所使用的文档类型
以上是关于Web前端面试之HTML的主要内容，如果未能解决你的问题，请参考以下文章