前端面试题

为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；

用户体验：例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

语义化标签有哪些？

<article></article> 表示一套结构完整且独立的内容部分

<aslde></aside> 主题的附属信息

<figure></figure>媒体元素，比如视频，图片

<datalist></datalist>选项列表，与 input 元素配合使用，来定义 input 可能的值

<details></details>用于描述文档或者文档某个部分的细节

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

（1）、声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

（2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

11.请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。

sessionStorage 是在同源的同窗口（或 tab ）中，始终存在的数据。只要浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。

关闭窗口后， sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面， sessionStorage 对象也是不同的

cookies会发送到服务器端。其余两个不会。

区别：

Cookie

每个域名存储量比较小（各浏览器不同，大致 4K ）

所有域名的存储量有限制（各浏览器不同，大致 4K ）

有个数限制（各浏览器不同）

会随请求发送到服务器

LocalStorage

永久存储

单个域名存储量比较大（推荐 5MB ，各浏览器不同）

总体数量无限制

SessionStorage

只在 Session 内有效

存储量更大（推荐没有限制，但是实际上各浏览器也不同）

浏览器页面有哪三层构成，分别是什么，作用是什么?

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

分别是：HTML、CSS、JavaScript

作用：HTML实现页面结构，CSS完成页面的表现与风格，JS实现一些客户端的功能与业务。

HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?

行内元素

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体 ( 不推荐 )

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码 ( 在引用源码的时候需要 )

dfn - 定义字段

em - 强调

font - 字体设定 ( 不推荐 )

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线 ( 不推荐 )

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 定义变量

块元素 (block element)

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易，也是 css layout 的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h3 - 大标题h4 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容

noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表

可变元素,可变元素为根据上下文语境决定该元素为块元素或者内联元素。

applet - java applet

button - 按钮

del - 删除文本

iframe - inline frame

ins - 插入的文本

map - 图片区块 (map)

object - object对象

script - 客户端脚本

空元素 ( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )

input

img

link