前端面试题之HTML/CSS1、什么是WEB标准以及W3C标准? WEB标准：提倡结构、表现和行为相分离（HTML结构、

1、什么是WEB标准以及W3C标准?

WEB标准：提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）

W3C标准：对WEB标准提出的规范化要求，也就是在实际编程中的一些代码规范：

1）HTML标签字母要小写。

2）HTML标签要闭合。

3）HTML标签嵌套正确。

4）使用外链CSS和JS，实现结构、表现和行为相分离的规范，提高页面渲染速度及用户体验。

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

DOCTYPE是document type(文档类型)的简写，声明叫做文件类型定义（DTD），其声明位于文档中的最前面，其作用是告诉浏览器该文件以何种模式来渲染。

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关：

1）如果文档包含严格的DOCTYPE，那么一般以严格模式呈现。（严格 DTD -严格模式）

2）包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD-严格模式；没有 URI 的过渡 DTD ——混杂模式）

3）DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）

4）HTML5 没有 DTD ，因此没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

3、XHTML和HTML的区别

HTML和XHTML的区别简单来说，XHTML可以认为是XML版本的HTML，为符合XML要求，XHTML语法上要求更严谨些，具体区别如下：

1）XHTML要求正确嵌套。

<b><i>错误示例</b></i>  
<b><i>正确示例</i></b>

2）XHTML所有元素必须关闭。

<p>错误示例  
<p>正确示例</p>

3）XHTML区分大小写。

<BODY> <P>错误示例</P> </BODY>  
<body> <p>正确示例</p> </body>

4）XHTML文档必须拥有根元素，所有的XHTML元素必须被嵌套于根元素中。

<html> 　　  
<head>...</head> 　　  
<body>...</body> 　  
</html>

4、HTML5有哪些新特性、移除了那些元素？

1）新增特性　　

新增标签： article、aside、audio、bdi、canvas、command、datalist、details、dialog、embed、
          figcaption、figure、footer、header、keygen、mark、meter、nav、output、
          progress、rp、rt、ruby、section、source、summary、time、track、video、wbr         
其中常用标签：article、aside、audio、video、canvas、footer、header、nav、section 　　        
新增localStorage、sessionStorage 　　        
新增contenteditable属性 （任何dom节点只要加上contenteditable="true"就可以变得可编辑） 　　        
新增Geolocation 地理定位

2）移除特性

<basefont> 默认字体，
<font> 字体标签，
<center> 水平居中，
<u> 下划线，
<big> 大字体，
<strike> 中横线，
<tt> 文本等宽

5、有哪些行内元素、块级元素及空(void)元素？行内元素和块级元素有什么区别？

（1）行内元素有：a、b、span、img、input、select、strong 
（2）块级元素有：div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、h5、h6、p 
（3）常见的空元素： <br>、<hr>、<img>、<input>、<link>、<meta>          
    鲜为人知的是： <area>、<base>、<col>、<command>、<embed>、<keygen>、
                  <param>、<source>、<track>、<wbr>

6、HTML全局属性(global attribute)有哪些？

html属性赋予元素意义和语境，可以用于任何的html元素
1、accesskey：设置访问元素的键盘快捷键。
2、class：规定元素的类名（classname）
3、contenteditable：规定是否可编辑元素的内容。设置true后可编辑元素的内容
4、contextmenu：指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
5、data-*：用于存储页面的自定义数据
6、dir：设置元素中内容的文本方向。ltr：从左到右， rtl：从右到左
7、draggable：指定某个元素是否可以拖动
8、dropzone：指定是否将数据复制，移动，或链接，或删除
9、hidden：hidden 属性规定对元素进行隐藏。
10、id：规定元素的唯一 id
11、lang：设置元素中内容的语言代码。
12、spellcheck：检测元素是否拼写错误
13、style：规定元素的行内样式（inline style）
14、tabindex：设置元素的 Tab 键控制次序。
15、title：规定元素的额外信息（可在工具提示中显示）
16、translate：指定是否一个元素的值在页面载入时是否需要翻译

7、什么是CANVAS和SVG，有什么区别？

CANVAS：是一个可以在其上绘制图形的HTML区域

SVG：是scalable vector graphics的简写，是可缩放的矢量图形

区别： canvas是html5提供的新元素，而svg存在的历史要比canvas久远；SVG 是一种使用 XML 描述 2D 图形的语言，而Canvas 通过 JavaScript 来绘制 2D 图形；SVG的特性是绘制并记忆，而 canvas则是绘制然后遗忘。

8、的title和alt有什么区别?

1、alt： 图片加载失败时，显示在网页上的替代文字
2、title： 鼠标放在上面时显示的文字
3、alt 是必要属性，title 非必要

9、常用五大浏览器及其内核

（1）IE——Trident内核

（2）Firefox(火狐) ——Gecko内核

（3）Safari ——WebKit内核

（4）chrome(谷歌) ——Blink内核

（5）Opera——Presto内核(已经废弃)

10、HTML5 10个新的表单元素

Color.
Date
Datetime-local
Email
Time
Url
Range
Telephone
Number
Search

11、CSS中的选择器有哪些？

1.标签选择器    
  语法：标签名{}，
  eg：h1{}//为所有的h1元素设置样式。  
2.ID选择器    
  语法：#id名{}//id值唯一不能重复,
  eg:#top{}//为id为top的元素设置样式。    
3.类选择器    
  语法：.class{},
  eg：.box{}//为所有的class值为box的元素设置样式。    
4.组选择器    
  语法：选择器1，选择器2，选择器N{},
  eg:#box1,.box2,p{}//为id为box1，class为box2和p的元素共同设置样式。    
5、通配符选择器    
  语法：*{}，
  eg：*{font-size：16px}//将整个页面字体大小设为16px。    
6.后代选择器    
  语法：选择器1选择器2{}，
  eg：p.aa{}//选中指定祖先元素p的指定后代.aa。    
7.子元素选择器    
  语法：父元素>子元素{},
  eg：p>.box{}//选中父元素p的指定子元素.box。注意与后代元素选择器的区别    
8.伪类选择器      
  :link-未访问过的超链接。    
  :visited-已访问过的超链接。    
  :hover-鼠标经过的元素。    
  :active-正在点击的元素。    
  eg：a:hover{color:red}//鼠标经过a标签时，颜色变为红色。
9.CSS选择器的优先级顺序：
  1）在属性后面使用!important会覆盖页面内任何位置定义的元素样式。    
  2）作为style属性写在元素内的内部样式    
  3）id选择器    
  4）类选择器    
  5）标签选择器    
  6）通配符选择器 
  7）浏览器自定义或继承的

12、CSS盒模型

有两种盒模型，标准盒模型和怪异盒模型（IE盒模型）。区别在于，标准盒模型的宽高大小为content的大小，而怪异盒模型则为content + padding + border的大小。如图所示：

CSS设置如下：

标准模型：box-sizing: content-box;

IE模型：box-sizing: border-box;

13、CSS3伪类和伪元素有哪些，它们的区别在哪？

1）伪类：

伪类-状态

:link 选择未访问的链接
:visited 选择已访问的链接
:hover选择鼠标指针浮动在其上的元素
:active选择活动的链接
:focus 选择获取焦点的输入字段

伪类-结构化

:not 一个否定伪类，用于匹配不符合参数选择器的元素
:first-child 匹配元素的第一个子元素
:last-child 匹配元素的最后一个子元素
:first-of-type 表示一组兄弟元素中其类型的第一个元素
:last-of-type 表示一组兄弟元素中其类型的最后一个元素

:nth-child 根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数

0n+3或简单的3匹配第三个元素
2n+1匹配位置为1,3,5,7...的元素 你可以用odd替换奇数行，even代替偶数行

:nth-last-child 与:nth-child相似，不同之处在于它从最后一个子元素开始计数
:nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素
:nth-last-type 与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。
:only-child 当元素是其父元素中唯一的子元素时，:only-child匹配该元素
:only-of-type 当元素是其父元素中唯一特定类型的子元素时，:only-child匹配该元素
:target 当url带有瞄名称，指向文档内某个具体的元素时:target匹配该元素

伪类-表单相关

:checked 匹配被选中的input元素，这个input元素包裹radio和checkbox.
:default 匹配默认选中的元素
:disabled 匹配禁用的表单元素
:empty 匹配没有子元素的元素，如果元素中含有文本节点，html元素或者一个空格，则:empty不能匹配这个元素
:enabled 匹配没有设置disabled属性的表单元素
:in-range 匹配在指定区域内元素，
:out-of-range 匹配不在指定区域内的元素
:indetermimate 当某组中的单选框或复选框还没有选取状态时，：indeterminate匹配该组中所有的单选框或复选框
:valid 匹配条件验证正确的表单元素
:invalid 匹配提交验证错误的表单元素
:optional :required匹配设置有无设置required属性的表单元素
:read-only 匹配设置了只读属性的元素
：read-write匹配处于编辑状态的元素

伪类-其他关

:root 匹配文档的跟元素
:fullscreen 匹配处于全屏模式下的元素

2）伪元素

有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:)。这是CSS3的一部分，并尝试区分伪类和伪元素，大多数浏览器都支持这两个值。

1 ::before/:before 在被选元素前插入内容，需要使用content属性指定要插入的内容。被插入的内容实际上不在文档树中

2 ::after/:after 在被元素后插入内容.其用法和特性与:before相似

3 ::first-letter/:first-letter 匹配元素中文本的首字母

4 ::first-line/:first-line匹配元素中第一行的文本，这个伪元素只能用在快元素中。不能用在内联中

5 ::selection匹配被用户选择或者处于高亮状态的部分，该元素只支持双冒号的形式

6 ::placeholder 匹配占位符的文本，只有元素设置placeholder属性是，该伪元素才能生效。

3）区别

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

14、清除浮动的方法有哪些？

1）clear清除浮动（添加空div法）

在浮动元素下方添加空div,并给该元素写css样式：   {clear:both;height:0;overflow:hidden;}

2）给浮动元素父级设置高度

我们知道高度塌陷是因为给浮动元素的父级高度是自适应导致的，那么我们给它的父元素设置适当的高度就可以解决
这个问题了。缺点：在浮动元素高度不确定的时候不适用。

3）以浮制浮（父级同时浮动）

何谓“以浮制浮”呢？就是让浮动元素的父级也浮动。
缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。

4）父级设置成inline-block

 缺点：父级的margin左右auto失效，无法使用margin: 0 auto;居中了

5）br 清浮动

<div class="box">
    <div class="top"></div>
    <br clear="both" />
</div>

br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。
问题：不符合工作中：结构、样式、行为，三者分离的要求。

6）给父级添加 overflow:hidden 清浮动方法；

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

overflow: hidden;
*zoom: 1;

7）万能清除法 after伪类清浮动（现在主流方法，推荐使用）

选择符:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
}

同时为了兼容 IE6，7 同样需要配合zoom使用例如：

.clear:after{
           content:'';
           display:block;
           clear:both;
           height:0;
           overflow:hidden;
           visibility:hidden;
}
.clear{zoom:1;}

需要注意的东西：

after伪类： 元素内部末尾添加内容；
    :after{content"添加的内容";} IE6，7下不兼容

zoom 缩放 
    a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
    b、FF 不支持；

15、px、em、rem的区别？

1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3、rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。

4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。

前端面试题之HTML/CSS