道德三皇五帝， 功名夏后商周， 五霸七雄闹春秋， 顷刻兴亡过首。 青史几行名姓， 北茫无数荒丘， 前人撒种后人收， 无非是龙争虎斗！ pia~（惊堂木）（自己手动拍手叫好）
咳咳，很高兴能在这里给大伙讲一个故事，这个故事呢，叫做《我要当FE Developer》，这边的吃瓜群众要问了，什么是FE Developer 呀？
FE Developer 就是Front-End-Developer,过了英语四级的人都知道，它叫前端开发，又有人问了，什么是前端开发呀？
那我只能说去年买个登山包，趁我还没开始正式讲，把票又退了吧，学挖掘机美容美发不在这里。
故事呢，不是从头讲起的，一开始就是面试题，所以希望你是有一些基础的（众人起哄），要退票的现在没戏了啊，我都开讲了。
HTML篇
- Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
Doctype的作用：告知浏览器文档使用哪种HTML或者XHTML规范。
模式分为：阉割严格版本，过渡版本，以及基于框架的HTML文本。
严格模式： 浏览器很时髦，他要以最高标准来呈现网页。
混杂模式： 他很包容，既能够接受老式的样式，也能够接受时髦的东西，他将会以一种比较宽松的方式来向后兼容。而且遇到老前辈（也就是老网页）的时候，将会去模拟老式浏览器的行为来解析网页。
- HTML5 为什么只需要写 <!DOCTYPE HTML>？
一般的网页其实都要写DTD标准，但是HTML5并不是基于SGML的，所以不用写在PUBLIC后面，但是还是须要DOCTYPE来规范浏览器一标准模式渲染。
而HTML4.01是基于SGML的，所以需要✅DTD进行引用。-----
SGML 是国际上定义电子文档和内容描述的标准。
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
推荐链接 biubiubiu~
行内元素：(只写了常见的)
a
b
br
button
em
i
img
input
label
select
span
strong
textarea行内元素属性
- 设置width 无效
- 设置height 无效，但是可以通过设置line-height来设置。
- margin值设定只有左右有效，上下没有效果
- 设置padding，只有左右padding有效，上下还是没有效果。
块级元素
address
button
div
dl
dt
form
h1->h6
li
p
table
tbody
td
tfoot
th
thead
tr
ul
块级元素属性
�设置height width 都有效。
margin，padding上下左右都有效。空元素
常见
<area>
<br‘>’(转个译)
<img‘>’(转个译)
<input>
<link>
<meta>
#######不常见
<base>
<col‘>’(转个译)
<colgroup‘>’
<command>
<embed>
<keygen>
<param>
<source>
<track>
<wbr>
- 页面导入样式时，使用link和@import有什么区别？
- link属于XHTML标签，而import是CSS提供的一种方式，也就导致了link除了可以引用css外还可以做很多其他的东西，比如说定义RSS，定义rel连接等等，但是对于@import 那就只能加载css了
- 他们两个的加载顺序不同，当一个页面被加载的时候，link引用的CSS会同时被加载，但是@import引用的样式是在页面加载完了之后才会加载， 在网速慢的时候两者的差别比较大。
- @import 在一些老浏览器上不兼容，link都兼容
- javascript可以通过dom去改变link的样式，但是不能改变@import的样式
- @import之中可以继续引用其他样式，也就是css里面继续引用其他样式
- 介绍一下你对浏览器内核的理解？
浏览器内核，就是用来解释网页语法并且渲染网页的。所以一般的浏览器的内核就是渲染引擎。
- 常见的浏览器内核有哪些
Trident -> IE
Gecko -> Firefox
WebKit->Safari
Presto->Oprea
- HTML5有哪些特性、移除了哪些元素？如何处理HTML5新标签浏览器兼容的问题？如何区分HTML和HTML5?
HTML5有哪些特性、移除了哪些元素？
新增有绘画canvas，用于媒介回放的audio，video还有本地离线存储localStorage 长期存储数据，浏览器关闭之后数据不会丢失。
内容元素，article、footer、header、nav、section
表单控件，canlendar、date、timer、email、url、search
控件元素，webworker，websockt,Geolocation
移出的元素
显示层元素：basefont，big，center，font，s，strike，tt，u
性能较差的元素：frame，frameeset,noframes
- 简述一下你对HTML语义化的理解？
用正确的标签做正确的事、
HTML语义化 让页面内容结构化，结构更加的清晰，便于对浏览器，搜索引擎解析；即使在没有css样式的情况下也能够以一种文档的样式来显示，并且是容易阅读的，搜索引擎的爬虫也是依赖HTML标记来确定上下文以及各个关键字的权重的，有利于seo，使阅读源代码的人跟容易 将网站分块，便于阅读和理解。
- HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接的时候，可以正常访问站点或者应用，在用户与因特尔网连接的时候，就更新机器上面的缓存。
原理就是： HTML5的离线缓存是基于一个新建的.appcatche文件的缓存机制（不是存储技术），通过这个文件的解析清单离线存储资源，那么这些资源就会像cookie一样被存储下来，浏览器会通过被离线存储的数据进行页面展示。
- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
加载
页面头部像下面那样加入一个manifest的属性：
HTML5的离线储存_-_kan_kan_-_博客园.png
而在 catche.manifest文件中编写离线存储资源
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
> 离线状态时，操作window.applicationCatche进行实现
**解析**
- 在线的情况下，浏览器发现html头部有manifest属性，它会请求mainifet文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过得app已经被加载过了也被离线过了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比行的manifest 与旧的manifest对比，如果文件改变那么浏览器将会离线新的文件，跟新离线存储的资源。
>但是在离线的情况下，浏览器就会直接使用离线存储资源。
>
>- 对于mainest 文件进行缓存的时候十分小心，因为可能出现一种情况就是mainfest已经更新了，但是http缓存还有原来的旧的mainfest 而且没有过期，那么就会有问题，所以最好不要设置mainfest缓存。
>
>- 浏览器更新mainfest的时候是一次性的下载的，如果下载失败，那么浏览器使用的还是原来的mainfest，这次更新算是失败的。
> - 在更新资源之后，新的资源需要下次打开app才会生效，如果过需要资源马上加载就能生效```windoq.applicarionCathe.SwapCatche（）```方法来使之生效，出现这种原因是因为浏览器先用离线资源加载页面，然后再去检查manifest是否有更新，所以需要下次打开才生效。
那么说了这么多关于html5存储的东西，大家能够分清楚cookies，sessonStorage和localStorage的区别吗？？ 欲知后事如何，且听下回分解，pia~~~~
网友评论