HTML前端面试题

一.HTML5的新标签

html5新增加的标签有<header>、<footer>、<aside>、<nav>、<video>、<audio>、<article>、<canvas>…等

HTML语义化就是为了让页面的内容结构化, 它具有如下优点

1.易于用户的阅读, 当网站的样式丢失时能让页面呈现清晰的结构。
2.有利于SEO（Search Engine Optimization）：汉译为搜索引擎优化，搜索引擎根据标签来确定上下文和各关键字的权重。
3.方便其他设备解析，如盲人阅读器根据语义化的结构渲染页面。
4.有利于更好地开发和维护，语义化更加具有可读性。与CSS关系更加和谐，更好维护代码。

二. meta viewport 是做什么用的，怎么写？

一个常用的针对移动端网页优化页面的一个 meta 标签的属性，常用的属性如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

width：控制 viewport 的大小，可以指定一个值，或者为 device-width，则设置为设备的宽度
height：和 widht 对应，即指定高度
initial-scale：初始缩放比例，即页面第一次加载时显示的缩放比例
maximum-scale：允许用户缩放的最大比例
minimum-scale：允许用户缩放的最小比例
user-scalable：用户是否可以手动缩放

三. 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

四. 前端需要注意哪些 SEO ？

合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可。
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

五. 渐进增强和优雅降级的定义

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

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

六.常用的 meta 标签

<meta charset="utf-8" />
<!--声明文档使用的字符编码-->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--优先使用 IE 最新版本和 Chrome-->

<meta name="description" content="不超过150个字符" />
<!--页面描述-->

<meta name="keywords" content="" />
<!--页面关键词-->

<meta name="author" content="name, email@gmail.com" />
<!--网页作者-->

<meta name="robots" content="index,follow" />
<!--搜索引擎抓取-->

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" />
<!--为移动设备添加 viewport-->

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--避免IE使用兼容模式-->

<meta name="msapplication-tap-highlight" content="no" />
<!--windows phone 点击无高光-->

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<!--设置页面不缓存-->

七.主流浏览器内核私有属性 css 前缀？

内核	浏览器	前缀
mozilla	firefox,flock	-moz
webkit	safari,chrome	-webkit
opera	opera	-o
trident	ie	-ms

八.localStorage和sessionStorage

知识点:

1.localStorage的生命周期是永久的, 这就意味着除非用户显示在浏览器提供ui上清除localstorage的信息。否则, 这些信息将永远存在。sessionStorage 的生命周期为当前窗口或者标签关闭, 一但窗口或者标签页被永久关闭时,那么所以通过sessionStorage存储的信息也都被清空。注意的是：（a.刷新页面并不能使sessionStorage失效。b.相同URL不同标签页不能共享sessionStorage

2.存储容量不同: localStorage容量一般在2-5Mb左右, sessionStorage存储容量不一, 部分浏览器不设限制。

HTML篇