关于HTML的面试题-html4/css2篇

1. 什么是HTML？
2. 用过什么调试器（浏览器），编辑器？
3. HTML4.0 和 HTML5.0 的区别？
4. 手写 HTML 代码
5. 元素类型有哪些（display有哪些属性）？块元素、行元素和行内块元素的区别？你能分别写出多少个块元素、行元素？
6. a标签 中的两个重要属性是什么，分别用来干什么？
7. 什么是相对路径、绝对路径？
8. form 中 name 有什么作用？
9. form 表单中 get 和 method 请求的区别？
10. 创建样式表有哪几种方式，分别怎么写？
11. link 和 import 的区别
12. css 有哪些选择器？这些选择器的权重分别是多少？
13. 让块元素居中
14. 让行元素居中
15. 让图片居中
16. overflow 有哪些属性，默认属性是什么？float 有哪些属性？高度塌陷的解决办法是什么？
17. px、em、rem之间的区别
18. background-repeat 有哪些属性值？
19. 图片常用格式以及区别？
20. 定位属性有哪些？区别是什么？
21. 什么是“盒模型”？画出盒模型，并写出盒模型的宽。
22. 图片整合的优势有哪些？
23. 隐藏一个元素的方法有哪些？
24. 什么是 BFC，有什么作用？
25. 用代码写出几种后台布局（单飞、双飞/圣杯、后台管理）
26. 常用的浏览器及内核、兼容前缀
27. PC 浏览器前端优化策略
28.表格行分组有哪几个标签
29.怎么去除换行产生的空格？

1. 什么是HTML？

HTML 是超文本标记语言。XHTML 指可扩展超文本标记语言（标识语言）。HTML5 指的是HTML的第五次重大修改。

2. 用过什么调试器（浏览器），编辑器？

调试器：火狐浏览器（FireFox），谷歌浏览器（Chrome），IE浏览器。
编辑器：Dreamweaver、HBuild、vsCode

3. HTML4.0 和 HTML5.0 的区别？

（1）更简单；
（2）标签的语义化；
（3）语法更宽松；
（4）多设备跨平台；
（5）自适应网页设计；
（6）兼容性： html4+css2.0 兼容 ie6/7/8，html5不能兼容ie6/7。

4. 手写 HTML 代码

<!-- head标签里面可以放<title>, <style>,<meta>, <link>, <script>, <noscript>, and <base>  -->
<!doctype html> <!--- 声明。告诉浏览器这是html5版本的写法 ---->
<html><head> <!---页头、也叫“站头”，网站头部 ---><meta charset="UTF-8" /> <!---- 翻译国际编码。识别中文，不加这个会乱码 -----><title></title> <!---- 网站名，中文名不合适 ----></head><body></body> <!--- 主体部分 --->
</html>

5. 元素类型有哪些（`display`有哪些属性）？块元素、行元素和行内块元素的区别？你能分别写出多少个块元素、行元素？

（1）元素类型：
常用的有4中：不显示元素（ none 默认），块元素（block）、行元素（inline）、行内块元素（inline-block）；

（2）区别以及标签：

名称	块元素	行元素	行内块元素
区别	1. 天生能换行的元素，独占一行，每一个块状元素都会从新的一行重新开始，从上到下排布； 2. 在不设置宽度的情况下，块元素的宽度是它父级元素内容的宽度； 3. 在不设置高度的情况下，块级元素的高度是它本身内容的高； 4. 可以直接控制宽度、高度以及盒子模型的相关css属性	天生不能换行的元素	天生不能换行但能设置宽高的元素
标签	`h1-h6`，`<p>`，`<br/>`，`&nbsp`，`<hr/>`，`<ul>和<li>`，`<ol>和<li>`，`<dl> <dt> <dd>`，`div`	`<b>`， `<i>`，`<u>`，`<strong>`，`<em>`，`<s>`，`<span>`，`<a>`	`<img>`，`<input>`，`<textarea>`

（3）元素转换通过 display。

6. `a标签` 中的两个重要属性是什么，分别用来干什么？

<!-- a标签中的两个重要属性 --->
<!-- href超链接属性，target="_blank"新窗口打开 -->
<a href="www.baidu.com" target="_blank"></a>

7. 什么是相对路径、绝对路径？

a标签的href属性、img标签的src属性、

（1）绝对路径： 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。
例如：C:\xyz\test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个URL绝对路径。

（2）相对路径： 相对于某个基准目录的路径。包含Web的相对路径（HTML中的相对目录）。
例如：在Servlet中，"/“代表Web应用的根目录。物理路径的相对表示，例如：”./" 代表当前目录，"…/"代表上级目录。这种类似的表示，也是属于相对路径。

/表示源文件的根目录
./表示当前文件所在的目录(可以省略)
../表示当前文件所在的目录的上一级目录

绝对路径：由根目录(/)为开始写起的文件名或者目录名称，如/home/oldboy/test.py;
相对路径：相对于目前路径的文件名写法。例如./home/oldboy/exam.py或…/…/home/oldboy/exam.py，简单来说只要开头不是/，就是属于相对路径

8. form 中 name 有什么作用？

（1）name 属性用于对提交到服务器后的表单数据进行标识
（2）或者在客户端通过 JavaScript 引用表单数据。
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

9. form 表单中 get 和 method 请求的区别？

method，传输方式，默认get。两者的区别：
（1）get 通过地址栏传输，会将信息拼接到地址栏上。而 post 不会讲信息拼接到地址栏上；
（2）post 的传输方式比 get 安全；
（3）post 能传输大量信息；
（4）get 传输速度比 post 快；( get 没有加密 )
注意：常用 get 的传输方式。

10. 创建样式表有哪几种方式，分别怎么写？

（1）内联样式表：<style type="text/css">css语法</style>**，最好写在<head></head>中；
（2）外部样式表：<link rel="stylesheet" type="text/css" href="路径" /> 和 @import url(路径);；
（3）内联样式表（嵌入式、行间、行内）：<div style=“height:100px;background:red;” ></div>

11. link 和 import 的区别

区别	link	import
1. 从属关系	link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。	@import是 CSS 提供的语法规则，只有导入样式表（加载CSS）的作用。
2. 加载顺序	当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载。	而@import引用的CSS 会等到页面全部被下载完再被加载，所以有时候浏览@import加载CSS的页面时开始会没有样式。
3. 兼容性的差别	link标签作为 HTML 元素，不存在兼容性问题。	@import是CSS2.1提出的，所以老的浏览器不支持，@import只t在IE5以上的才能识别。
4. 使用dom控制样式时的差别	当使用javascript控制dom去改变样式的时候，只能使用link标签。	@import不是 dom 可以控制的。
5. 权重区别	link引入的样式权重大于@import引入的样式。

12. css 有哪些选择器？这些选择器的权重分别是多少？

（1）id 选择符 0100
（2）class 选择符 0010
（3）伪类选择符 0010
（4）元素选择符（类型选择符）0001
（5）后代选择符后代选择符的权重之和
（6）群组选择符
（7）通配符
内联样式表的权重最高：1000 ，继承样式的权重为：0000

13. 让块元素居中

（1）高度已知：
① margin: 0 auto;这是让块元素水平居中的手段，需要配合 width 一起使用：

<style>div{width:300px; height:300px; background:#f0f; margin:0 auto;}
</style>
<body><div>box</div>
</body>

② 定位 position:fixed 和 margin: auto; 水平垂直居中。

<style>div{width:300px; height:300px; background:#f0f;position:fixed; left:0; right:0; top:0; bottom:0; margin:auto;}
</style>
<body><div>box</div>
</body>

③ 使用定位 position:fixed 和平移 margin;

<!-- margin: 上 右 下 左; 第一个距离填高度的一半，且要往上，所以是负值 -->
<style>div{width:300px; height:200px; background:#f0f;position:fixed; top:50%; left:50%; margin:-100px 0 0 -150px;}
</style>
<body><div>box</div>
</body>

④ 2D 居中：使用定位 position:fixed 和平移 transform: translate(水平, 垂直);

<!-- 与 ③ 原理一样 -->
<style>div{width:300px; height:200px; background:#f0f;position:fixed; top:50%; left:50%; transform: translate(-150px, -100px);}
</style>
<body><div>box</div>
</body>

（2）高度未知：
① 2D 居中：使用定位 position:fixed 和平移 transform: translate(水平, 垂直);

<!-- translate()中的两个参数百分比是根据自身来的 -->
<style>div{width:300px; background:#f0f;position:fixed; top:50%; left:50%; tansform: translate(-50%, -50%);}
</style>
<body><div>盒子高度未知，定位之后，使用translate平移自身的一半距离</div>
</body>

14. 让行元素居中

（1）text-align:center 让一个 span 标签中的文本水平居中：将该 span 标签套在一个块元素中

<style>p{width:300px; background:#f0f; text-align:center;}
</style>
<p><span>span文字</span>
</p>

（2）line-height: 高度px; 文本垂直居中。

15. 让图片居中

（1）使用 line-height 和 vertical-align。 只在html5中生效，XHTML1.0是不生效的。

<style>div{width:600px; height:300px; border:2px solid black;line-height:300px; /*img 属于行内块元素，可以使用文本属性使img垂直居中 */text-align: center; /*写在父元素身上，属性继承*/}img{width: 200px;height:200px;vertical-align: middle; /*不写这个属性的话，图片对齐点在底部。写了之后图片对齐点在中心*/}
</style>
<body><div><img src="../imgs/蔡蔡2.jpg" alt="" srcset=""></div>
</body>

（2）虚拟一个行内块元素，让图片和这个元素的对齐点都在中心。

<style>div{width:600px; height:400px; border:2px solid black;text-align: center; /*写在父元素身上，属性继承*/}img{width: 200px;height:200px;vertical-align: middle;/*让图片的对齐点在中心*/}i{display: inline-block;/*让i标签可以设置高度*/height: 100%; /*让i标签的高度=框的高度*/vertical-align: middle;/*让i标签的对齐点在中心*/}
</style>
<body><div><img src="../imgs/蔡蔡2.jpg" /><i></i><!-- i标签不要换行，不然会产生5px距离 --></div>
</body>

（3）使用伪元素，类似（2）。

<style>div{width:600px; height:400px; border:2px solid black;text-align: center; /*写在父元素身上，属性继承*/}img{width: 200px;height:200px;vertical-align: middle;/*让图片的对齐点在中心*/}div:after{content: "";display: inline-block;/*让i标签可以设置高度*/height: 100%; /*让i标签的高度=框的高度*/vertical-align: middle;/*让i标签的对齐点在中心*/}
</style>
<body>
<!-- 因为会5px空格，所以不能换行 --><div><img src="../imgs/蔡蔡2.jpg" /></div>
</body>

16. `overflow` 有哪些属性，默认属性是什么？`float` 有哪些属性？高度塌陷的解决办法是什么？

（1）overflow

overflow:visible;/*默认值*/
overflow:hidden;/*溢出隐藏*/
overflow：scroll;/*滚动*/
overflow:auto;/*自动出现滚动条*/

（2）float

float: none; //默认不浮动
float: left; //左浮动
float: right; //右浮动

（3）高度塌陷的解决办法
① 给父元素足够高度；缺点：无法做到高度自适应；
② overflow: hidden; ；缺点：溢出的部分（子元素超出父元素）会被隐藏；
③ 在最后一个浮动元素之后添加一个块元素，这个块元素写样式 clear:both; 来清除浮动。
④ 万能清除法：配合第三种方式通过伪元素来实现

//zoom:1;一条解决ie疑难杂症（比如浮动）的神奇属性
// visibility: visible/hidden;可见/隐藏
//父元素:before{content: ""; display:table;} 解决第一个块元素 margin-top 向上传递问题。
父元素{zoom:1;} 
父元素:after{display: block; content: ""; clear: both; visibility: hidden;}
父元素:before{content: ""; display:table;}

16. 用代码写出下三角

哪个方向的三角形，就将哪个方向的边框设置 border-方向: 大小 solid 颜色，相邻的边框颜色设置成白色（消失色），对边的边框设置为 0；

<style>div{width:0; /*块元素不设置宽度=父元素宽度*/height:0; /*可省略*/border-top:20px solid #00f;border-left:20px solid #fff;border-right:20px solid #fff;border-bottom: 0;}
</style>

17. px、em、rem之间的区别

名称	px	em	rem
介绍	px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。	em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。	rem是CSS3新增的一个相对单位（root em，根em）。
特点	1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。	1. em的值并不是固定的； 2. em会继承父级元素的字体大小。	使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
注意		任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

18. `background-repeat` 有哪些属性值？

repeat //默认平铺
repeat-x //横向平铺
repeat-y //纵向平铺
no-repeat //不平铺

19. 图片常用格式以及区别？

格式	.jpg	.png	.gif
区别	图片有损质量，但肉眼难分辨，用来减小图片大小，图片非镂空使用。	图片有损质量，但肉眼分辨不出，用来减小图片大小，图片镂空使用。	图片有损质量严重，肉眼容易分辨，常用做动图。

20. 定位属性有哪些？区别是什么？

postion: static（默认）、absolute（绝对定位）、relative（相等定位）、fixed（固定定位）

定位属性`position`属性值	`static`	`relative`	`absolute`	`fixed`
称呼	默认不定位	相对定位	绝对定位	固定定位
区别	没有定位，元素出现在正常的流中.	根据自身初始所在位置来定位；不破坏原有元素的特性。	自动向上检索，根据最近的定位元素作为父元素，如果检索不到就以 html 来定位。	始终根据 html 来定位；
是否占文档流	占文档流	占文档流	不占文档流，完全脱离文档流	不占文档流，完全脱离文档流
特点或用法		特点：因为相对定位占文档流，在没有设置 `left`、`top` 属性下的效果和`static` 默认是一样的。	用法：①向上检索定位的元素作为父框； ②多个定位元素使用 `z-index` 来定义层级。	特点：位置不随着滚动条滚动而发生变化。
适用场合		微调距离时可以用此属性。可以使用`left`，`top`，`right`，`bottom`等。	通常用于做重叠效果。	网页遮罩。

21. 什么是“盒模型”？画出盒模型，并写出盒模型的宽。

盒模型的组成分为：外边距、边框、内边距、内容区；
盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）；

在这里插入图片描述
IE盒模型，也叫怪异盒模型，具体可以查看 html笔记（四）弹性盒+响应式

22. 图片整合的优势有哪些？

（1）减少对服务器的请求次数，从而提高页面加载速度；
（2）减少图片体积;

23. 隐藏一个元素的方法有哪些？

（1）display:none; 完全消失，且不占文档流
（2）visibility:hidden; css消失，占文档流
（3）opacity:0; 透明，占文档流
（4）postion:relative;left:-99999px; 相对定位，占文档流
（5）postion:absolute;left:-99999px; 绝对定位，不占文档流

24. 什么是 BFC，有什么作用？

BFC（Block fomatting content）块级格式化上下文。是 w3c css2.1 规范中的一个概念。它是页面中的一块渲染区域，且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

具有 BFC 特性的元素看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

具体：html笔记（二）html4+css2.0（元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹）

25. 用代码写出几种后台布局（单飞、双飞/圣杯、后台管理）

代码太长了，我放到HTML+css实现的效果里面了。

26. 常用的浏览器及内核、兼容前缀

浏览器	内核	兼容前缀
IE浏览器	Trident	-ms-
火狐Firefox浏览器	Gecko	-moz-
原谷歌现苹果	Webkit	-webkit-
现在Opera和谷歌	Blink（由Google和Opera 开发的浏览器排版引擎）
原Opera	Presto（迅速的，但是缺乏兼容性）	-o-