Web前端面试之HTML

时间：2022-08-31 11:47:08

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的更多相关文章

  1. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  2. web前端面试总结

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...

  3. Web前端面试笔试题总结

    最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面 ...

  4. 百度web前端面试2015&period;10&period;18

    邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对 ...

  5. 2016年Web前端面试题目汇总

    转载: 2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢 ...

  6. web前端面试试题总结---其他

    其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...

  7. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

  8. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  9. web前端-面试经验总结

    这几次面试主要是冲着百度去的 面试1的主要问题: 笔试: 1.解释css盒子模型 2.常用选择器,以及优先级 3.B如何继承A 4.写一个闭包实例,有什么优点缺点 5.html5的心特性有哪些 6. ...

  10. 百度Web前端面试经历

    今天面了百度的前端实习职位.一面.时间大概是50分钟.面试官是位很帅气的小伙子,非常友好的一个人.进门的时候他让我等一会,我瞄了一眼他的电脑屏幕,发现他在coding…… 9点50开始的面试. 面试官 ...

随机推荐

  1. Redis 的 5 个常见使用场景

    2015-07-22 23:31:46 本文由 伯乐在线 - 刘晓鹏 翻译,黄利民 校稿.未经许可,禁止转载!英文出处:Joe Engel.欢迎加入翻译组. 在这篇文章中,我们将阐述 Redis 最常 ...

  2. &period;NET 产品版权保护方案 &lpar;&period;NET源码加密保护&rpar; （转载）

    说 明:你希望自己用.net辛辛苦苦做出来的软件被人轻易破解吗?你希望自己花了大量人力物力用.net开发出来的产品被竞争对手轻易获取核心代码吗?这是 一篇比较详尽地介绍如何保护自己的.net源代码的文 ...

  3. jedis操作redis全指南

    package com.wujintao.redis; import java.util.Date; import java.util.HashMap; import java.util.Iterat ...

  4. streams 日差管理及监控

    第一部分 stream环境的日常管理 1.capture进程管理 --capture进程信息 SET LINESIZE 200 COLUMN CAPTURE_NAME HEADING 'Capture ...

  5. GTEST-ASSERT出错

    ASSERT_TRUE(1==1); ASSERT_EQ(1,1); 会给出以下错误: "cfunctest_normal.cpp", line 121.9: 1540-0258 ...

  6. BZOJ2668&colon; &lbrack;cqoi2012&rsqb;交换棋子

    题解: 可以戳这里:http://www.cnblogs.com/zig-zag/archive/2013/04/21/3033485.html 其实自己yy一下就知道这样建图的正确性了. 感觉太神奇 ...

  7. 安装使用adobe&lowbar;photoshop&lowbar;cs6

    1.先断开网络,安装官方原版PS程序. 2.在安装程序界面选择“试用”安装. 3.等安装完成后,退出程序. 4.复制破解补丁到安装路径覆盖,如:D:\Program Files\Adobe\Adobe ...

  8. 将JDBC ResultSet结果集变成List

    private List<Map<String, Object>> list = new ArrayList<Map<String,Object>>() ...

  9. Revenge of Fibonacc

    算法:搜索: In mathematical terms, the sequence Fn of Fibonacci numbers is defined by the recurrence rela ...

  10. Java读写Word文件常用技术

      Java操作操作Word文件,最近花了几天时间解决使用Word模板导出数据的问题,收集到一些资料分享下. 常见的技术如下: 1.POI(兼容doc.docx文件) 官方网站:http://poi. ...

相关文章