前端面试题集锦——HTML/CSS

对WEB以及W3C的理解与认识

1.对于结构要求：

1. 标签字母要小写
2. 标签要闭合
3. 标签不允许随意嵌套

2.对于css和js来说：

1. 尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2. 样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
3. 不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

1. IE 系列的内核：Trident
2. Firefox的内核：Gecko
3. Safari的内核：Webkit
4. Blink 内核：是基于 Webkit 内核的子项目,使用的浏览器有：Chrome/opera 等除 IE、Firefox、Safari 之外的几乎所有浏览器，几乎所有国产双内核浏览器（Trident/Blink）如 360、猎豹、qq、百度等

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：a b span img input select strong

（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：<br> <hr> <img> <input> <link> <meta>

Doctype的作用

文档声明。
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用
哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
IE 下如不书写文档声明会使用怪异模式解析网页导致一系列 CSS 兼容性问题。

xhtml和html有什么区别

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

最主要的不同：

• XHTML 元素必须被正确地嵌套。
• XHTML 元素必须被关闭。
• 标签名必须用小写字母。
• XHTML 文档必须拥有根元素。

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致

你如何理解 HTML 结构的语义化

HTML 结构语义化：

1. 更符合 W3C 统一的规范标准，是技术趋势
2. 没有样式时浏览器的默认样式也能让页面结构很清晰
3. 对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页
4. 对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端
5. 对 SEO 友好

CSS 都有哪些选择器

1. 基本选择器：

*	通用元素选择器，匹配任何元素
E	标签选择器，匹配所有使用 E 标签的元素
.info	class 选择器，匹配所有 class 属性中包含 info 的元素
#footer	id 选择器，匹配所有 id 属性等于 footer 的元素

2. 多元素的组合选择器

E,F	多元素选择器，同时匹配所有 E 元素或 F 元素，E 和 F 之间用逗号分隔
E F	后代元素选择器，匹配所有属于 E 元素后代的 F 元素，E 和 F 之间用空格分隔
E > F	子元素选择器，匹配所有 E 元素的子元素 F
E + F	毗邻元素选择器，匹配所有紧随 E 元素之后的同级元素 F

3. CSS 2.1 属性选择器

E[att]	匹配所有具有 att 属性的 E 元素，不考虑它的值（注意：E 在此处可以省略，比如"[cheacked]"。以下同。）
E[att=val]	匹配所有 att 属性等于"val"的 E 元素
E[att~=val]	匹配所有 att 属性具有多个空格分隔的值、其中一个值等于"val"的 E元素
E[att丨=val]	匹配所有 att 属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的 E 元素，主要用于 lang 属性，比如"en"、“en-us”、"en-gb"等等

4. CSS 2.1 中的伪类

E:first-child	匹配父元素的第一个子元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的 E 元素
E:hover	匹配鼠标悬停其上的 E 元素
E:focus	匹配获得当前焦点的 E 元素
E:lang©	匹配 lang 属性等于 c 的 E 元素

5. CSS 2.1 中的伪元素

E:first-line	匹配 E 元素的第一行
E:first-letter	匹配 E 元素的第一个字母
E:before	在 E 元素之前插入生成的内容
E:after	在 E 元素之后插入生成的内容

6. CSS 3 的同级元素通用选择器

E ~ F	匹配任何在 E 元素之后的同级 F 元素

7. CSS 3 属性选择器

E[att^=“val”]	属性 att 的值以"val"开头的元素
E[att$=“val”]	属性 att 的值以"val"结尾的元素
E[att*=“val”]	属性 att 的值包含"val"字符串的元素

8. CSS 3 中与用户界面有关的伪类

E:enabled	匹配表单中激活的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的 radio（单选框）或 checkbox（复选框）元素
E::selection	匹配用户当前选中的元素

9. CSS 3 中的结构性伪类

E:root	匹配文档的根元素，对于 HTML 文档，就是 HTML 元素
E:nth-child(n)	匹配其父元素的第 n 个子元素，第一个编号为 1
E:nth-last-child(n)	匹配其父元素的倒数第 n 个子元素，第一个编号为 1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child)	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

10. CSS 3 的反选伪类

E:not(s)	匹配不符合当前选择器的任何元素

11. CSS 3 中的 :target 伪类

E:target	匹配文档中特定"id"点击后的效果

rgba()和 opacity 的透明效果有什么不同

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度

而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果

display:none 与 visibility:hidden 的区别是什么

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在

为什么要初始化样式

用于浏览器默认 css 样式的存在并且不同浏览器对相同 HTML 标签的默认样式不同，若不初始化会造成不同浏览器之间的显示差异

HTML 与 XHTML——二者有什么区别

1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 “” 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一

哪些 css 属性可以继承

可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height

css 优先级算法如何计算

!important > id > class > 标签
!important 比 内联优先级高
*　优先级就近原则，样式定义最近者为准;
*　以最后载入的样式为准

有那些行内元素、有哪些块级元素、盒模型

1. 内联元素（inline element）：

a	锚点
abbr	缩写
acronym	首字
b	粗体(不推荐)
big	大字体
br	换行
em	强调
font	字体设定(不推荐)
i	斜体
img	图片
input	输入框
label	表格标签
s	中划线(不推荐)
select	项目选择
small	小字体文本
span	常用内联容器，定义文本内区块
strike	中划线
strong	粗体强调
sub	下标
sup	上标
textarea	多行文本输入框
tt	电传文本
u	下划线
var	定义变量

2. 块级元素：

address	地址
blockquote	块引用
center	举中对齐块
dir	目录列表
div	常用块级容易，也是 css layout 的主要标签
dl	定义列表
fieldset	form 控制组
form	交互表单
h1	大标题
h2	副标题
h3	3 级标题
h4	4 级标题
h5	5 级标题
h6	6 级标题
hr	水平分隔线
isindex	6 级标题
hr	input prompt
menu	菜单列表
noframes	frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容）
noscript	可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol	排序表单
p	段落
pre	格式化文本
table	表格
ul	非排序列表

3. CSS 盒子模型包含四个部分组成：
   内容、填充（padding）、边框（border）、外边界（margin）。