- 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/>， ，<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- |
27. PC 浏览器前端优化策略
28. 表格行分组有哪几个标签：
- 表头：
<thead></thead> - 表体：
<tbody></tbody> - 表尾：
<tfoot></tfoot>
29. 怎么去除换行产生的空格？
（1）方案一：不换行；
（2）方案二：在给父元素设置：font-size:0;，子元素再设置 font-size 大小。案例示范
91
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
