前端面试题——html与css基础篇

整理一波html和css的面试题，侧重基础，希望明天面试能用到~(╥╯^╰╥)

一、HTML部分

1、浏览器页面有哪三层构成，分别是什么，作用是什么?

构成：结构层、表示层、行为层
分别是：HTML、CSS、JavaScript
作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务

2、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、 Doctype声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
（2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

3、说说你对HTML语义化的理解?常见的语义化标签有哪些？

(1)、什么是 HTML 语义化？

HTML语义化，即根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

(2)、为什么要语义化？
• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；

• 用户体验：例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用；

• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3) 、语义化标签主要有：h5新增的<header></header> <footer></footer> <nav></nav> <section></section> <article></article> 等以及标题（ H1~H6 ）、列表（ li ）、强调（ strong em ）等等。

4、谈谈你对WEB标准以及W3C的理解与认识?

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

5、link和@import的区别? XML/HTML代码

区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

6、简述一下src与href的区别？

src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。

src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。 <script src ='js.js'></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加 <link href='common.css' rel='stylesheet'/> 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用 @import 方式。

7、img的title和alt有什么区别？

Alt 用于图片无法加载时显示 Title 为该属性提供信息，通常当鼠标滑动到元素上的时候显示

8、表单的基本组成部分有哪些，表单的主要用途是什么？

表单的基本组成：表单标签、表单域、表单按钮
a、表单标签：这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。

b、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

c、表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。主要用途：表单在网页中主要负责数据采集的功能，和向服务器传送数据。

9、表单提交中Get和Post方式的区别？

（1)、 get 是从服务器上获取数据， post 是向服务器传送数据。

(2)、 get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
(3)、对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。
(4)、 get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB 。
(5)、 get 安全性低， post 安全性较高。

10、HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作， <canvas id=” canvas1 ″ width= ” 300 ″ height= ” 100 ″ > </canvas>

11、 HTML5 中如何嵌入视频？

HTML5 支持 MP4 、 WebM 和 Ogg 格式的视频，下面是简单示例：

<video width=” 450 ″ height= ” 340 ″ controls> <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ > Your browser does’ nt support video embedding feature. </video>

12、 HTML5 中如何嵌入音频？

HTML5 支持 MP3 、 Wav 和 Ogg 格式的音频，下面是一个简单示例：

 <audio controls> <source src=” jamshed.mp3 ″ type= ” audio/mpeg ” > Your browser does’ nt support audio embedding feature. </audio>

13、新的 HTML5 文档类型和字符集是？

HTML5 文档类型很简单：<!doctype html>
HTML5 使用 UTF-8 编码示例：<meta charset="UTF-8 " >

二、CSS部分

1、CSS的盒子模型

标准盒模型：width = content
怪异（ＩＥ）盒模型：width = content+padding-Left+padding-right+border-left + border-right

CSS3中新增加了box-sizing属性，可以设置盒子模型：

IE：box-sizing：border-box

标准：box-sizing：content-box

2、说说你对页面中使用定位(position)的理解？

(1)、static ：可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。

(2)、relative ：相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移，不会影响常规流中的任何元素。

(3)、absolute ：绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

注意：设置为absolute的元素定位参考的是离自身最近的定位祖先元素，其最近定位祖先元素为设置了position并值不为默认值的最近祖先元素，如果找不到则默认为body

(4)、fixed ：固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

(5)、center ：与absolute一致，但偏移定位是以最近定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。

(6)、page ：与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。

(7)、sticky ：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

3、页面布局方式有哪些，三列布局，左右定宽，中间自适应布局方式请举例：

常见布局方法：双飞翼、圣杯、弹性、流式、瀑布流、响应式布局

（1）、圣杯布局

html代码

    <h5>圣杯</h5>

    <div class="main">

        <div class="md"></div>

        <div class="lt"></div>

        <div class="rt"></div>

    </div>

css代码

     .main:after{content: '.';visibility: hidden;display: block;height:;clear:both;}

     .main{

         padding: 0 300px 0 200px;position: relative;zoom:;

     }

     .md,.lt,.rt{float: left;position: relative;min-height: 300px;}

     .md{width: 100%;background-color: #89a;}

     .lt{width: 200px;background-color: #37a;margin-left: -100%;left: -200px;}

     .rt{width: 300px;background-color: #699;margin-left: -300px;right:-300px; }

2）、双飞翼布局

html代码

        <h5>双飞翼</h5>

    <div class="main2">

        <div class="md2">

            <div class="content"></div>

        </div>

        <div class="lt2"></div>

        <div class="rt2"></div>

    </div>

css代码

.main2:after{content: '.';visibility: hidden;display: block;clear: both;}

     .main2{margin-top: 20px;zoom:;}

     .main2 .md2,.main2 .lt2,.main2 .rt2{float:left;text-align: center;min-height: 300px;}

     .main2 .md2{width: 100%;background-color: #ececec;}

     .main2 .md2 .content{margin: 0 300px 0 200px;background-color: #699;min-height: 300px;}

     .main2 .lt2{width: 200px;margin-left: -100%;background-color:#123;}

     .main2 .rt2{width: 300px;margin-left: -300px;background-color: #39e;}

3）、flex布局

html代码

        <h5>flex</h5>

    <div class="main3">

        <div class="md3"></div>

        <div class="lt3"></div>

        <div class="rt3"></div>

    </div>

css3代码

     .main3{margin-top: 20px;display: flex;display: -webkit-flex;/*min-height: 300px;*/}

     .main3 .md3{flex:;min-height: 300px;background-color: #666;}

     .main3 .lt3{order :-1;}

     .main3 .lt3{flex:0 0 200px;width: 200px;min-height: 300px;background-color: #699;}

     .main3 .rt3{flex:0 0 300px;width: 300px;min-height: 300px;background-color: #169;}

三、其他

1、你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?

a、 IE: trident 内核
b、 Firefox ： gecko 内核
c、 Safari:webkit 内核
d、 Opera: 以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核
e、 Chrome:Blink( 基于 webkit ， Google 与 Opera Software 共同开发 )

ps：js高级程序设计里对浏览器大战的那段历史讲的很细致，有兴趣的可以去看一下，特有意思。

2、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 JS引擎则：解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

前端面试题——html与css基础篇的更多相关文章

常见前端面试题之HTML/CSS部分
转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...
前端面试题（HTML/CSS）
(前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...
前端面试题整理—HTML/CSS篇
1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并 ...
各大互联网公司前端面试题（HTML/CSS）
Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...
[前端]前端面试题第二波~[http/tcp/网络篇]
目录: Cookie 是否会被覆盖,localStorage是否会被覆盖? 如何保持登陆状态? Ajax原生 Jsonp的原理.怎么去读取一个script里面的数据. 如果页面初始载入的时候把ajax ...
前端面试题整理（css）
1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...
最近面试前端面试题整理（css部分）
对最近面试的面试题坐下总结: 一,css部分 1,html元素的垂直居中答案: <div id="box"> <div> 测试 </div> ...
前端面试题（一）JS篇
内置类型 JS 中分为七种内置类型,七种内置类型又分为两大类型:基本类型和对象(Object). 基本类型有六种: null,undefined,boolean,number,string,symbo ...
最近面试前端岗位，汇总了一下前端面试题（JS+CSS）
JavaScript 运行机制 1. 单线程(用途决定,需要与用户互动以及操作DOM) 2. 分同步任务(主线程)与异步任务(任务队列),只有任务队列通知主线程某个任务可以执行了,该任务才会进入主线 ...

随机推荐

nodeJS 中mongoose操作分页
开始前先聊聊五毛钱的: 好久没写了,可能是因为懒(哎),写这个是好事,既帮助了自己,巩固一下知识,也可以让别人给自己纠错纠错,三月份接触到了node,先是跟着一些教程写了一些小实例,感觉自己就喜欢上了 ...
windows的磁盘操作之七——获取当前所有的物理磁盘号加备注
windows的磁盘操作之七--获取当前所有的物理磁盘号 2011-07-28 17:47:56 标签:windows API DeviceIoControl 物理磁盘驱动器号原创作品,允许转载 ...
python 15 带参装饰器
目录 2. 带参数的装饰器 3. 多个装饰器装饰一个函数 2. 带参数的装饰器 #在装饰器的基础上再套一层 def auth(argv): def wrapper(func): def inner(* ...
zookeeper快速上手
## # zookeeper的基本功能和应用场景 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件. ...
你知道JavaScript这六种错误类型吗？
前言今日话题,了解JavaScript的错误处理机制. 一.ReferenceError 引用一个不存在的变量时发生的错误.将一个值分配给无法分配的对象,比如对函数的运行结果或者函数赋值. 举栗子 ...
Delphi - 通过WinAPI GetCursorPos实现鼠标位置的实时显示
通过WinAPI GetCursorPos实现鼠标位置的实时显示有时候我们需要将鼠标的位置实时抓取出来,可以通过如下方式实现. 添加一个Timer控件,执行间隔改为100ms,双击控件输入如下代码: ...
Jmeter 之测试片段、Include Controller、模块控制器应用
一.测试片段是什么? 应用在控制器上的一个特殊线程组,与线程组处于同一层级,必须与Include Controller或模块控制器一起使用才被执行. 二.应用场景 1.当jmeter脚本非常复杂的时候 ...
C#开发BIMFACE系列8 服务端API之获取文件上传状态信息
系列目录 [已更新最新开发文章,点击查看详细] 在BIMFACE控制台上传文件,上传过程及结束后它会自动告诉你文件的上传状态,目前有三种状态:uploading,success,failure ...
【StyleCop】StyleCop规则汇总
所有规则的翻译(基于版本4.7.44.0): 文档规则 1.SA1600:ElementsMustBeDocumented元素必须添加注释 2.SA1601: PartialElementsMustB ...
A-Graph Games_2019牛客暑期多校训练营（第三场）
题意给出一张无向图,定义S[x]表示与点x直接相连的点集,有两个操作 1 x y表示将第x到第y条边状态变化(若存在则删除,不存在则建立) 2 x y询问S[x]与S[y]是否相等题解有一个技巧 ...

前端面试题——html与css基础篇

前端面试题——html与css基础篇的更多相关文章

随机推荐

热门专题