整理一波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代码
<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />
XML/HTML代码
<style type='text/css' media='screen'> @import url('CSS文件 '); </style>
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
区别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>
16、 HTML5 中如何嵌入音频？
HTML5 支持 MP3 、 Wav 和 Ogg 格式的音频，下面是一个简单示例：
<audio controls> <source src=” jamshed.mp3 ″ type= ” audio/mpeg ” > Your browser does’ nt support audio embedding feature. </audio>
17、新的 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)的理解？
语法： position：static | relative | absolute | fixed | center | page | sticky ，其中默认值为static，center、page、sticky是CSS3中新增加的值。
(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: 0;clear:both;} .main{ padding: 0 300px 0 200px;position: relative;zoom:1; } .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:1;} .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:1;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 共同开发 )
2、介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 JS引擎则：解析和执行 javascript 来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。