HTML

1.简述一下你对 HTML 语义化的理解？

p>①用正确的标签做正确的事情。

②html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

③ 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;

④ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

2.Label 的作用是什么？是怎么用的

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

3.iframe 框架有那些优缺点？

优点

iframe 能够原封不动的把嵌入的网页展现出来。

如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。

如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。

缺点

框架结构中出现各种滚动条

iframe 会阻塞主页面的 Onload 事件

搜索引擎的检索程序无法解读这种页面，不利于 SEO

iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

4.HTML 与 XHTML 二者有什么区别

应该使用XHTML，因为XHTML是XML重写了HTML的规范，比HTML更加严格，表现如下：

1、XHTML中所有的标记都必须有一个相应的结束标签；

2、XHTML所有标签的元素和属性的名字都必须使用小写；

3、所有的XML标记都必须合理嵌套；

4、所有的属性都必须用引号“”括起来；

5、把所有‹和&特殊符号用编码表示；

6、给所有属性附一个值；

7、不要在注释内容中使用“--”；

8、图片必须使用说明文字。

5.HTML5 的 form 如何关闭自动完成功能？

将不想要自动完成的 form 或 input 设置为 autocomplete=off

6.title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区

①title用于网站信息标题，突出网站标题或关键字，一个网站可以有多个title，seo权重高于H1；H1概括的是文章主题，一个页面最好只用一个H1，seo权重低于title。

解析：

A.从网站角度而言，title则重于网站信息标题，突出网站标题或关键字用title，一篇文章，一个页面最好只

用一个H1，H1用得太多，会稀释主题；一个网站可以有多个title，最好一个单页用一个title以便突出网站页面

主题信息。

B.从文章角度而言，H1则概括的是文章主题，突出文章主题，用H1，面对的用户，要突出其视觉效果。

C.从SEO角度而言，title的权重高于H1，其适用性要比H1广。

②b为了加粗而加粗，strong为了标明重点而加粗

7.严格模式与混杂模式

严格模式：以浏览器支持的最高标准运行

混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

8.前端页面有哪三层构成，分别是什么？作用是什

分成：结构层、表示层、行为层。

结构层（structural layer）

由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）

由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

9.为什么用多个域名存储网站资源更有效？

1、CDN 缓存更方便

2、突破浏览器并发限制

3、节约 cookie 带宽

4、节约主域名的连接数，优化页面响应速度

5、防止不必要的安全问题

10. div+css 的布局较 table 布局有什么优点

分离 方便改版 快清晰简洁 seo

1.改版的时候更方便 只要改 css 文件。

2.页面加载速度更快、结构化清晰、页面显示简洁。

3.表现与结构相分离。

4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

11.渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

（一开始保证最基本的功能，再改进和追加功能）

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

（一开始就构建完整的功能，再针对低版本浏览器进行兼容。）

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

12.html 常见兼容性问题？

1.双边距 BUG float 引起的，解决办法: 使用 display解决

2.3 像素问题 使用 float 引起的，解决办法: 使用 dislpay:inline -3px

3.超链接 hover 点击后失效，解决办法: 使用正确的书写顺序 link visited hover active

4.Ie z-index 问题，解决办法: 给父级添加 position:relative

5.Png 透明 ，解决办法: 使用 js 代码

6.Min-height 最小高度 ，解决办法: ！Important 解决

7.select 在 ie6 下遮盖，解决办法: 使用 iframe 嵌套

8.为什么没有办法定义 1px 左右的宽度容器，解决办法: （IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）

9.IE5-8 不支持 opacity，解决办法：

.opacity {

  opacity: 0.4;

  filter: alpha(opacity=60); /_ for IE5-7 _/

  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; /_ for IE 8_/

}

10.IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片 或者filter滤镜

13..html5 有哪些新特性、移除了那些元素？

新特性：

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频 API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术 webworker, websocket, Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持 HTML5 新标签：

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式：

当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

14.HTML 全局属性(global attribute)有哪些

accesskey:设置快捷键，提供快速访问元素如aaa在 windows 下的 firefox 中按 alt + shift + a 可激活元素

class:为元素设置类标识，多个类名用空格分开，CSS 和 javascript 可通过 class 属性获取元素

contenteditable: 指定元素内容是否可编辑

contextmenu: 自定义鼠标右键弹出菜单内容

data-*: 为元素增加自定义属性

dir: 设置元素文本方向

draggable: 设置元素是否可拖拽

dropzone: 设置元素拖放类型： copy, move, link

hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果

id: 元素 id，文档内唯一

lang: 元素内容的的语言

spellcheck: 是否启动拼写和语法检查

style: 行内 css 样式

tabindex: 设置元素可以获得焦点，通过 tab 可以导航

title: 元素相关的建议信息

translate: 元素和子孙节点内容是否需要本地化

15.什么是渐进式渲染

渐进式渲染（progressive rendering）

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

一些举例：

图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。

确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。

异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。

16.img 上 title 与 alt

title 指图片的信息、alt 指图片不显示时显示的文字

CSS

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒

（1）有两种， IE 盒子模型、W3C 盒子模型；

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

（3）区 别： IE 的 content 部分把 border 和 padding 计算了进去;

2.CSS 隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

Position:不会影响布局，能让元素保持可以操作;

Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

3.CSS 清除浮动的几种方法（至少两种）

清除浮动： 核心：clear:both;

①使用额外标签法（不推荐使用）

在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动

a 内部标签：会将父盒子的高度重新撑开

b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子

②使用 overflow 清除浮动（不推荐使用）

先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响

③使用伪元素清除浮动(用的最多)

伪元素：在页面上不存在的元素，但是可以通过 css 添加上去

种类：

  :after(在。。。之后)

  :before(在。。。之前)

注意：每个元素都有自己的伪元素

.clearfix:after {

    content:'';

    height:0;

    line-height:0;

    display:block;

    clear:both;

    visibility:hidden;  /_将元素隐藏起来_/\
}

在页面的 clearfix 元素后面添加了一个空的块级元素

（这个元素的高为 0 行高也为 0 并且这个元素清除了浮动）

.clearfix {

  zoom:1;/_为了兼容 IE6_/

}

4.页面导入样式时，使用 link 和@import 有什么区别

Link 属于 html 标签，而@import 是 CSS 中提供的

在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

5.伪元素和伪类的区别？

伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。

伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；

伪类是给页面中已经存在的元素添加一个类。

6.CSS 选择符有哪些？哪些属性可以继承？优先级算

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul id > class > tag

important 比 内联优先级高

7.CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 ‹p› 元素的每个 ‹p› 元素。

p:last-of-type 选择属于其父元素的最后 ‹p› 元素的每个 ‹p› 元素。

p:only-of-type 选择属于其父元素唯一的 ‹p› 元素的每个 ‹p› 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 ‹p› 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 ‹p› 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

8.行内元素和块级元素的具体区别是什么

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。

9.什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse。

在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和

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

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

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

11.css 中可以让文字在垂直和水平方向上重叠的两个

垂直方向：line-height

水平方向：letter-spacing

12. px 和 em 的区别

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。

13.如何垂直居中一个元素？

方法一：绝对定位居中（原始版之已知元素的高宽）

.content {

  width: 200px;

  height: 200px;

  background-color: #6699ff;

  position: absolute; /*父元素需要相对定位*/

  top: 50%;

  left: 50%;

  margin-top: -100px; /*设为高度的1/2*/

  margin-left: -100px; /*设为宽度的1/2*/

}

方法二：绝对定位居中（改进版之一未知元素的高宽）

.content {

  width: 200px;

  height: 200px;

  background-color: #6699ff;

  position: absolute; /*父元素需要相对定位*/

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/

}

方法三：绝对定位居中（改进版之二未知元素的高宽）

.content {

  width: 200px;

  height: 200px;

  background-color: #6699ff;

  margin: auto; /*很关键的一步*/

  position: absolute; /*父元素需要相对定位*/

  left: 0;

  top: 0;

  right: 0;

  bottom: 0; /*让四个定位属性都为0*/

}

方法四：flex 布局居中

body {

  display: flex; /*设置外层盒子display为flex*/

  align-items: center; /*设置内层盒子的垂直居中*/

  justify-content: center; /*设置内层盒子的水平居中*/
}

  .content {

    width: 200px;

    height: 200px;

    background-color: #6699ff;

  }

14.BFC

什么是 BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件

浮动元素，float 除 none 以外的值

定位元素，position（absolute，fixed）

display 为以下其中之一的值 inline-block，table-cell，table-caption

overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC 的特性

内部的 Box 会在垂直方向上一个接一个的放置。

垂直方向上的距离由 margin 决定

bfc 的区域不会与 float 的元素区域重叠。

计算 bfc 的高度时，浮动元素也参与计算

bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

15.用纯 CSS 创建一个三角形的原理是什么？

span {

  width: 0;

  height: 0;

  border-top: 40px solid transparent;

  border-left: 40px solid transparent;

  border-right: 40px solid transparent;

  border-bottom: 40px solid #ff0000;

}

16.移动端 1px 问题的解决办法

推荐解决方法：媒体查询 + transfrom

/* 2倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {

    .border-bottom::after {

        -webkit-transform: scaleY(0.5);

        transform: scaleY(0.5);

    }

}

/* 3倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {

    .border-bottom::after {

        -webkit-transform: scaleY(0.33);

        transform: scaleY(0.33);

    }

}

17.哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;

不可继承 ：border padding margin width height ;