# HTML+CSS常见面试题 ## HTML ### 1、HTML语义化的理解 1、用正确的标签做正确的事情！ 2、`HTML`语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 3、在没有样式`CSS`情况下也以一种文档格式显示，并且是容易阅读的。 4、搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 `SEO`。 5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解 ### 2、HTML5有哪些新特性、移除了那些元素？ `HTML5`现在已经不是 `SGML` 的子集，主要是关于图像，位置，存储，多任务等功能的增加 * 绘画 `canvas` * 用于媒介回放的 `video` 和 `audio` 元素 * 本地离线存储 `localStorage` 长期存储数据，浏览器关闭后数据不丢失 * `sessionStorage` 的数据在浏览器关闭后自动删除 * 语意化更好的内容元素，比如`article`、`footer`、`header`、`nav`、`section` * 表单控件，`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` ### 3、的title和alt有什么区别 * `alt`是图片加载失败时，显示在网页上的替代文字； * `title`是鼠标放上面时显示的文字。 * `alt`是`img`必要的属性，而`title`不是。 ### 4、从浏览器地址栏输入`url`到显示页面的步骤 * 浏览器根据请求的`URL`交给`DNS`域名解析，找到真实`IP`，向服务器发起请求； * 服务器交给后台处理完成后返回数据，浏览器接收文件（`HTML`、`JS`、`CSS`、图象等）； * 浏览器对加载到的资源（`HTML`、`JS`、`CSS`等）进行语法解析，建立相应的内部数据结构（如`HTML`的`DOM`）； * 载入解析到的资源文件，渲染页面，完成。 ### 5、HTML全局属性(global attribute)有哪些 * `class`:为元素设置类标识 * `data-*`: 为元素增加自定义属性 * `draggable`: 设置元素是否可拖拽 * `id`: 元素id，文档内唯一 * `lang`: 元素内容的的语言 * `style`: 行内css样式 * `title`: 元素相关的建议信息 ### 6、介绍一下你对浏览器内核的理解？ 主要分成两部分：渲染引擎(`layout engineer`或`Rendering Engine`)和`JS`引擎 渲染引擎：负责取得网页的内容（`HTML`、`XML`、图像等等）、整理讯息（例如加入`CSS`等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核 `JS`引擎则：解析和执行`javascript`来实现网页的动态效果 最开始渲染引擎和`JS`引擎并没有区分的很明确，后来`JS`引擎越来越独立，内核就倾向于只指渲染引擎 ### 7、请描述一下 `cookies`，`sessionStorage`和 `localStorage`的区别？ `cookie`是网站为了标示用户身份而储存在用户本地终端（`Client Side`）上的数据（通常经过加密） `cookie`数据始终在同源的`http`请求中携带（即使不需要），记会在浏览器和服务器间来回传递 `sessionStorage`和`localStorage`不会自动把数据发给服务器，仅在本地保存 存储大小： `cookie`数据大小不能超过`4k` `sessionStorage`和`localStorage`虽然也有存储大小的限制，但比`cookie`大得多，可以达到`5M`或更大 有期时间： `localStorage`存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 `sessionStorage`数据在当前浏览器窗口关闭后自动删除 `cookie`设置的`cookie`过期时间之前一直有效，即使窗口或浏览器关闭 ### 8、行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？ * 行内元素有：`a b span img input select strong` * 块级元素有：`div ul ol li dl dt dd h1 h2 h3 h4… p` * 空元素：`<br> <hr> <img> <input> <link> <meta>` * 行内元素不可以设置宽高，不独占一行 * 块级元素可以设置宽高，独占一行 ### 9、如何在页面上实现一个圆形的可点击区域？ * `svg` * `border-radius` * 纯`js`实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等 ### 10、HTTP状态码及其含义 * `1XX`：信息状态码 * `2XX`：成功状态码 * `3XX`：重定向 * `4XX`：客户端错误 * `5XX`: 服务器错误 ### 11、你能描述一下渐进增强和优雅降级之间的不同吗 **渐进增强**：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 **优雅降级**：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 ### 12、渲染优化 1、使用`CSS3`代码代替`JS`动画（尽可能避免重绘重排以及回流） 2、页面中空的`href`和 `src`会阻塞页面其他资源的加载 (阻塞下载进程) 3、用`innerHTML`代替`DOM`操作，减少`DOM`操作次数，优化`javascript`性能 4、当需要设置的样式很多时设置`className`而不是直接操作`style` 5、少用全局变量、缓存`DOM`节点查找的结果。减少`IO`读取操作 6、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳 ### 13、如何进行网站性能优化 1、减少`HTTP`请求：合并文件、`CSS`精灵、`inline Image` 2、将样式表放到页面顶部 3、不使用`CSS`表达式 4、使用`<link>`不使用`@import` 5、将脚本放到页面底部 6、将`javascript`和`css`从外部引入 7、压缩`javascript`和`css` ## CSS ### 1、盒子模型 盒模型分为两类: IE盒模型和标准盒模型。 两者的区别在于: * `IE`盒模型的`width/height = content + border + padding` * 标准盒模型的`width/height = content` ### 2、CSS优先级算法如何计算？ * 优先级就近原则，同权重情况下样式定义最近者为准 * 载入样式以最后载入的定位为准 * 优先级为: `!important > id > class > tag; !important`比 内联优先级高 ### 3、CSS3有哪些新特性 * 新增各种`css`选择器 * 圆角 `border-radius` * 多列布局 * 阴影和反射 * 文字特效`text-shadow` * 线性渐变 * 旋转`transform` **CSS3新增伪类有那些？** * `:after`在元素之前添加内容,也可以用来做清除浮动。 * `:before`在元素之后添加内容。 * `:enabled`已启用的表单元素。 * `:disabled`已禁用的表单元素。 * `:checked`单选框或复选框被选中。 ### 4、CSS常用选择器 ~~~ 通配符：* ID选择器：#ID 类选择器：.class 元素选择器：p、a 等 后代选择器：p span、div a 等 伪类选择器：a:hover 等 属性选择器：input[type="text"] 等 ~~~ ### 5、link与@import的区别 * `link`是`HTML`方式，`@import`是`CSS`方式 * `link`最大限度支持并行下载，`@import`过多嵌套导致串行下载，出现`FOUC`(文档样式短暂失效) * `link`可以通过`rel="alternate stylesheet"`指定候选样式 * 浏览器对link支持早于`@import`，可以使用`@import`对老浏览器隐藏样式 * `@import`必须在样式规则之前，可以在`css`文件中引用其他文件 * 总体来说：`link`优于`@import` ### 6、如何创建块级格式化上下文(block formatting context),`BFC`有什么用 **什么是`BFC`**? * `BFC`格式化上下文，它是一个独立的渲染区域，让处于 `BFC`内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响 **如何产生`BFC`**? * `display: inline-block` * `position: absolute/fixed` **BFC作用** * BFC最大的一个作用就是：在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响 ~~~ 解决上外边距重叠;重叠的两个box都开启bfc; 解决浮动引起高度塌陷;容器盒子开启bfc 解决文字环绕图片;左边图片div,右边文字容器p,将p容器开启bfc ~~~ ### 7、绝对定位和相对定位的区别 **`position: absolute`** 绝对定位：是相对于元素最近的已定位的祖先元素 **`position: relative`** 相对定位：相对定位是相对于元素在文档中的初始位置 ### 8、`display:inline-block`什么时候不会显示间隙？ * 移除空格 * 使用`margin`负值 * 使用`font-size:0` * `letter-spacing` * `word-spacing` ### 9、清除浮动的几种方式，各自的优缺点 * 父级`div`定义`height` * 结尾处加空`div`标签`clear:both` * 父级`div`定义伪类`:after`和`zoom` * 父级`div`定义`overflow:hidden` * 父级`div`也浮动，需要定义宽度 * 结尾处加`br`标签`clear:both` * 比较好的是第3种方式，好多网站都这么用 ### 10、为什么要初始化CSS样式? * 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对`CSS`初始化往往会出现浏览器之间的页面显示差异。 * 当然，初始化样式会对`SEO`有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化 ### 11、自适应布局 思路： * 左侧浮动或者绝对定位，然后右侧`margin`撑开 * 使`<div>`包含，然后靠负`margin`形成`bfc` * 使用`flex` ### 12、`position`有哪些值？有什么作用？ * `static`。默认值，不脱离文档流，`top`，`right`，`bottom`，`left`等属性不生效。 * `relative`。不脱离文档流，依据自身位置进行偏离，当子元素设置`absolute`，将依据它进行偏离。 * `absolute`。脱离文档流，依据`top，right，bottom，left`等属性在正常文档流中偏移位置。 * `fixed`。通过浏览器窗口进行定位，出现滚动条的时候，不会随之滚动。 ### 13、垂直居中有哪些方法？ * 单行文本的话可以使用`height`和`line-height`设置同一高度。 * `position+margin`：设置父元素:`position: relative;`，子元素`height: 100px;position:absolute;top: 50%; margin: -50px 0 0 0;`（定高） * `position+transform`：设置父元素`position:relative`,子元素：`position: absolute;top: 50%;transform: translate(0, -50%);`（不定高） * 百搭flex布局(ie10+)，设置父元素`display:flex;align-items: center;`（不定高） ### 14、水平居中的方法 * 元素为行内元素，设置父元素`text-align:center` * 如果元素宽度固定，可以设置左右`margin`为`auto`; * 如果元素为绝对定位，设置父元素`position`为`relative`，元素设`left:0;right:0;margin:auto;` * 使用`flex-box`布局，指定`justify-content`属性为`center` `display`设置为`tabel-ceil` ### 15、Flex布局 ~~~ display: flex //设置Flex模式 flex-direction: column //决定元素是横排还是竖着排 flex-wrap: wrap //决定元素换行格式 justify-content: space-between //同一排下对齐方式，空格如何隔开各个元素 align-items: center //同一排下元素如何对齐 align-content: space-between //多行对齐方式 ~~~ ### 16、`stylus/sass/less`区别 * 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性 * `Scss`和`LESS`语法较为严谨，`LESS`要求一定要使用大括号`“{}”，Scss`和`Stylus`可以通过缩进表示层次与嵌套关系 * `Scss`无全局变量的概念，`LESS`和`Stylus`有类似于其它语言的作用域概念 * `Sass`是基于`Ruby`语言的，而`LESS`和`Stylus`可以基于`NodeJS NPM`下载相应库后进行编译； ### 20、知道css有个content属性吗？有什么作用？有什么应用？ `css`的`content`属性专门应用在 `before/after`伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。 ### 21、CSS在性能优化方面的实践 * `css`压缩与合并、`Gzip`压缩 * `css`文件放在`head`里、不要用`@import` * 尽量用缩写、避免用滤镜、合理使用选择器 ### 22、CSS3动画（简单动画的实现，如旋转等） * 依靠`CSS3`中提出的三个属性：`transition、transform、animation` * `transition`：定义了元素在变化过程中是怎么样的，包含`transition-property、transition-duration、transition-timing-function、transition-delay`。 * `transform`：定义元素的变化结果，包含`rotate、scale、skew、translate`。 * `animation`：动画定义了动作的每一帧（`@keyframes`）有什么效果，包括`animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction`