HTML & CSS面试题(含答案)

问:对WEB标准以及W3C的理解与认识?

答:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

问:xhtml和html有什么区别?

答:HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言

最主要的不同:

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

问:. Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档

加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug

答:参考:http://www.cnblogs.com/shiy/p/6723335.html

问:浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可显示为什么模式

问: 行内元素有哪些?块级元素有哪些?CSS的盒模型?

答:

行内元素:<a>、<span>、<img>、<input>、<select>、<button>、<textarea>、<label>、<b>、<strong>、<em>等

块级元素:<div>、<p>、<form>、<address>、<table>、<ul>、<li>、<dl>、<dt>、<dd>、<h1>-<h6>、<blockquote>等

空元素:即系没有内容的HTML元素,例如:<br>、<meta>、<hr>、<link>、<input>、<img>等

盒子模型:Css盒模型:内容,border ,margin,padding

参考:http://www.cnblogs.com/shiy/p/6005897.html

问: CSS引入的方式有哪些? link和@import的区别是?

答:有4种方式可以在HTML中引入CSS:

一、内联方式:指直接在HTML标签的style属性中添加CSS

示例:<div style="background:red"></div>

评价:不推荐,此种方式只能改变当前标签的样式,如果想要多个<div>拥有相同的样式,需要重复为每个<div>添加相同的样式,想要修改一种样式,又不得不修改所有的style中的代码。

二、嵌入方法:在HTML头部中的<style> 标签下书写CSS代码

示例:

<head>

          <style>

                    .content { background : red;}

          </style>

</head>

评价:此方法可以一目了然的查看HTML结构和CSS样式,但此方法的CSS只对当前网页有效,如果当多个页面需要引入相同CSS代码时,这样写会导致代码冗余,不利于维护。

三、链接方式:使用HTML头部的<head>标签引入外部的CSS文件。

示例:

<head>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

评价:推荐,这种方式,所以得CSS代码只存在于单独的CSS文件中,具有良好的可维护性。并且所以得CSS代码只存在于CSS文件中,CSS文件会在第一次加载时引入,以后切换页面时只需要加载HTML文件即可。

四、导入方式:使用CSS规则引入外部CSS文件。

示例:

<style>

      @import  url(style.css);

</style>

link和@import的区别:

两者都是外部引用CSS方式,但是存在一定的区别

a、link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

b、link支持使用Javascript控制DOM去改变样式,而@import不支持。

c、link是XHTML标签,除了加载CSS,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS

d、link是XHTML标签,无兼容问题;@import是在CSS 2.1提出的,低版本的浏览器不支持。

问:前端页面有哪三层构成,分别是什么?作用是什么?

网页三个层次,即:结构层(Html)、表示层(CSS)、行为层(js)。

网页的结构层(structural layer):由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述。但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。”

网页的表示层(presentation layer):由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层(behavior layer):负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

扩展:

网页的表示层和行为层总是存在的,即使我们未明确地给出任何具体的指令也是如此。此时, Web 浏览器将把它的默认样式和默认事件处理函数施加在网页的结构层上。

例如,浏览器会在呈现“文本段”元素时留出页边距,有些浏览器会在用户把鼠标指针悬停在 某个元素的上方时弹出一个显示着该元素的 title 属性值的提示框,等等。

分离

在所有的产品设计活动中,选择最适用的工具去解决问题是最基本的原则。具体到网页设计工作,这意味着:

使用 (X)HTML 去搭建文档的结构。

使用 CSS 去设置文档的呈现效果。

使用 DOM 脚本去实现文档的行为。

不过,在这三种技术之间存在着一些潜在的重叠区域,如:DOM 技术可以用来改变网页的结构。在 CSS 身上也可以找到这种技术相互重叠的例子。诸如 :hover 和 :focus 之类的预定义符号(伪 class 属性) 使我们可以根据用户触发事件来改变呈现效果。改变元素的呈现效果当然是表示层的“势力范围”,但对用户触发事件做出反应却是行为层的领地。表示层和行为层 的这种重叠形成了一个灰色地带。

伪 class 属性是 CSS 正在深入 DOM 领地证据,但 DOM 在这方面也不是毫无作为。我们完全可以利用 DOM 技术把样式信息施加在 HTML 元素身上。

分离的效果要做到即使去掉表示层和行为层,文档的内容也依然可以访问,因为“内容才是一切”。而且网页的行为层 (javascript) 与其结构 (XHTML) 是彼此互不干扰的,不能混杂在一起。还要给行为层“预留退路”,要考虑到如果你的用户禁用了 Javascript 会怎样?是不可网页还可以正常运作。

问:你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?

IE内核浏览器:360,傲游,搜狗,世界之窗,腾讯TT。

非IE内核浏览器:firefox opera safari chrome 。

问:著名的前端框架都有哪些的呢?

答:布局框架:bootstrap、easy UI等。Js动效框架:jquery、angular.js等。

问:切图工作是UI设计师来做?还是前端工程师来做?

答:对于app工程师,也就是ios和Android工程师,大多由UI设计师来完成切图。

对于web前端工程师,也就是PC端、浏览端,大多有web前端工程师自己完成切图。

问:css的基本语句构成是?

选择器{属性1:值1;属性2:值2;……}

问:. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

important优先级高

问:img标签上title与alt属性的区别是什么?

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

问:描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一

问:解释css sprites,如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量

问:你如何对网站的文件和资源进行优化?期待的解决方案包括:

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用


问:如何居中一个浮动元素?

1、可以在外层加一个div,外层的div采用margin居中,里层的div设置宽度为100%。

2、设置当前div的宽度,然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。

问: 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况

HTML5强化了web网页的表现性能,语义化更强。如: <nav>,<header>,<footer>,<aside>,<section>等。

HTML5有强大的绘图功能(canvas标签,svg)

HTML5新增视频标签<video src="视频地址"></video>

CSS3实现圆角,阴影,对文字加特效,增加了更多的CSS选择器。

问: 如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?

涉及到人手,分工,同步;

1、先期团队必须确定好全局样式(globe.css),编码模式(utf-8)等。

2、编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行)。

3、标注样式编写人,各模块都及时标注(标注关键样式调用的地方)。

4、页面进行标注(例如页面模块开始和结束);

5、CSS跟HTML分文件夹并行存放,命名都得统一(例如:style.css)

6、JS分文件夹存放命名以该JS功能为准英文翻译。

7、图片采用整合的images.pngpng8格式文件使用尽量整合在一起,方便将来的管理。

问: 你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

问: 你怎么来实现下面这个设计图,主要讲述思路 (效果图省略)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,866评论 1 11
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,219评论 0 8
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,222评论 24 450
  • 无限爸爸看了《把时间当做朋友》之后,对他触动很大,从此就成了李笑来老师的铁粉儿,强烈建议我看,所以2017年看的第...
    无限妈妈阅读 191评论 2 1