金三银四-《HTML面试题》

且月三十
230 阅读7分钟

简述下对HTML语义化的理解

  1. 语义化可以让页面和代码更加具有阅读性，比如布局中的语义标签有<header></header>用来表示这是头部信息，<nav></nav>用来表示导航链接区域，<main></main> 表示文档内容区域，<footer></footer>用来表示文档页脚部分内容，还有像<h1></h1>,<p></p>,<aside></aside>等等，便于浏览器和搜索引擎的解析
  2. 有利于SEO优化，便于爬虫的爬取。

iframe框架有哪些优缺点

优点：

  1. 可以原封不动的把嵌套的网页展现出来
  2. 如果遇见广告这种，就可以用iframe来实现

缺点：

  1. 框架结构中会出现各种滚动条
  2. iframe会阻塞主页面的onLoad事件
  3. 搜索引擎无法检索iframe页面

描述下SEO中的TDK

在SEO中，所谓的TDK其实就是title、description、keywords这三个标签

每个HTML文件头里都有个很重要的东西，Doctype是干什么的

<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。
浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过doctype来区分这两种模式。

浏览器的怪异模式和标准模式区别是什么

  1. 盒模型的差异
  2. 行内元素的垂直对齐差异

src与href的区别

src用于引用资源，href一般用于url链接

严格模式与混杂模式

严格模式：以浏览器支持的最高标准运行
混杂模式：页面以宽松向下兼容的方式显示

列举IE与其他浏览器不一样的特性

  1. IE的排版引擎是Trident（又称为MSHTML）
  2. Trident内核曾经几乎与w3c标准脱节（2005年）
  3. Trident内核的大量Bug等安全性问题都没有得到及时解决
  4. JS方面有很多独立的方法，比如绑定事件attachEvent，创建事件的createEventObject等
  5. CSS方面，IE的盒模型和标准的w3c盒模型也不一样（IE8以下）

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

前端有三层结构：结构层、表示层、行为层。

  1. 结构层是有HTML标记语言负责创建
  2. 表示层是由CSS创建
  3. 行为层是由JS负责对事件行为做出反应

描述一下渐进增强和优雅降级之间的不同

渐进增强：针对低版本浏览器进行构建页面，在保证功能都能正常实现的前提下再去针对高版本浏览器追加更好的用户体验效果的功能

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

HTML常见的兼容性问题

  1. 浏览器默认的margin和padding不同
    • 解决：把margin和padding都设置为初始0
  2. 超链接访问之后hover样式不出现了，被点击后也不具有active和hover样式。
    • 解决：按照顺序写 ：a:link{ } a:visited{ } a:hover{ } a:active{ }

前端需要注意哪些SEO

  1. 合理的title、description、keywords
  2. 使用语义化标签
  3. 少用iframe，搜索引擎不会抓取iframe
  4. 提高网站速度

HTML5有哪些新特性

  1. 增加了拖拽释放Api
  2. 提供了语义化标签
  3. 增加了音频，视频Api
  4. 增加画布（Canvas）Api
  5. 本地离线存储LocalStorage与SessionStorage

CSS有几种引入方式

  1. 内联样式
    • <div style="width: 100px"></div>
  2. 嵌入式样式
    • 一般放在<head>标签中通过<style></style>来写
  3. 外联样式
    • 通过<link>在<head>中来引入外部css文件

JS有几种引入方式

  1. 行内引入
    • <button οnclick="alert(123)">点击我</button>
  2. 内部引入
    • 在<head>或<body>中通过<script>标签写入js代码块
  3. 外部引入
    • 在<head>或<body>中通过<script src="xxxx">src属性链入js文件

为什么最好把CSS的<link>标签放在<head></head>之间

把<link>放在</body>中是规范要求这样的。这种做法可以让页面逐步呈现，提高了用户体验，如果放在文档底部，会出现DOM结构已经出现，然后执行到css就一下子改变了页面布局

为什么要把js的<script>标签恰好放在</body>之前

把<script>标签放在</body>之前脚本在下载和执行期间会组织HTML解析，因为JS渲染线程和GUI渲染线程是冲突的。如果非要放在文档头部可以给<script>标签加上async或者defer属性。

DOM和BOM的理解

DOM：文档对象模型，这里的文档指的是网页，跟浏览器没有关系
BOM：浏览器对象模型，提供的Api是为了操作浏览器的

DOM Tree是如何构建的

  1. HTML解释器：将网络或者本地磁盘获取的HTML网页和资源从字节流解释成DOM树结构
  2. JavaScript的执行：在HTML解释器的工作过程中，可能会与JavaScript代码需要执行，它发生在将字符解释成词语之后、创建各种节点的时候。这也是为什么全局执行的 JavaScript 代码不能访问 DOM 的原因——因为 DOM 树还没有被创建完呢。

描述下Cookies、sessionStorage和LocalStorage区别

三者都是用在浏览器端存储数据的，但是Cookies是用来做客户端与服务器间的安全策略的，但是SessionStorage和LocalStorage是H5新增用来客户端存储数据的

  1. Cookies有大小限制，（4K）
  2. sessionStorage会在窗口关闭就清除缓存（5M）
  3. localStorage则只会有手动清除才会失效（5M）

选择器的优先级

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承

有几种可以让页面元素隐藏的Api

  1. visibility: hidden
  2. display: none
  3. opacity: 0

行内元素有哪些？行内块元素有哪些？块级元素有哪些？

  1. 行内元素：<span></span>、<a></a>、<b></b>、<i></i>、<br/>
  2. 块级元素：<div></div>、<p></p>、<h1></h1>、<ul></ul>、<table></table>、<form></form>
  3. 行内块元素：<img/>、<input></input>、<textarea ></textarea >

使用link和@import有什么区别

  1. link引用css，页面载入的同时会同时加载css，而@import需要在页面加载完成之后加载
  2. link是html提供的标签，不仅可以加载css还可以加载其他，而@import只是css提供的语法规则
  3. link不存在兼容性问题但是@import的有兼容性问题（IE5+）
  4. @import在html使用的时候需要在外层使用<style>标签

常见的浏览器内核有哪些

  1. Trident（IE）
  2. Gecko（FireFox）
  3. Blink（Opera/Chrome）
  4. Webkit（Safari）

实现垂直居中的几种方法

<!--DOM结构-->
<div class="parent">
    <div class="child"></div>
</div>

/* 1. 使用flex布局实现 */
.parent {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parent .child {
    width: 150px;
    height: 150px;
    background-color: #ccc;
}

/* 2. 使用绝对定位 + transform 实现 */
.parent {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    position: relative;
}

.parent .child {
    width: 150px;
    height: 150px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 3. 使用绝对定位 + top,bottom,left,right都为0 + margin: auto实现 */
.parent {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    position: relative;
}

.parent .child {
    width: 150px;
    height: 150px;
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

/* 4. 使用display: table-cell; vertical-align: middle + margin: 0 auto;(子级) */
.parent {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    display: table-cell;
    vertical-align: middle;
}

.parent .child {
    width: 150px;
    height: 150px;
    background-color: #ccc;
    margin: 0 auto;
}

清除浮动的方式

/*1. 给父级元素添加overflow: hidden;*/
.parent {
    overflow: hidden;
}

/*2. 给父级元素单独定义高度*/
.parent {
    height: 100px;
}

/*3. 给父级元素添加伪类after*/
.parent:after {
    content: '';
    display: block;
    clear: both;
}

/*4. 给最后一个个元素增加clear:both;*/
.new-div {
    clear: both;
}

什么是BFC

BFC块级格式化上下文，可以理解成它是一种独立的渲染区域，它可以用来解决外边距塌陷、清除浮动、浮动元素覆盖的问题

触发BFC的几种方式

  1. float不设置为none
  2. position的值不为static或releative任意一个
  3. overflow的值不为visible
  4. display的值不为table-cell、inline-block、table-caption任意一个

如何解决外边距塌陷

父子元素之间的外边距合并：

  1. 给父元素设置border
  2. 给父元素增加内边距
  3. 给父元素设置overflow: hidden

同级垂直相邻元素外边距合并：

  1. 给二个盒子设置float: left;
  2. 给二个盒子设置position: absolute;
avatar
文章
阅读
粉丝