Q1. DOCTYPE 標籤是做什麼用的？ {
Ans：告訴瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令
延伸閱讀：
https://msdn.microsoft.com/zh-tw/library/ms256059(v=vs.120).aspx
http://affairs.kh.edu.tw/study/2017-htmlcss3/02.html
https://harttle.land/2016/01/22/doctype.html
https://www.doubleservice.com/2011/01/html-design-lesson1-doctype/
}
Q2. 都有哪些瀏覽器支持 DOCTYPE 標籤？ {
Ans：IE、FireFox、Chrome、Safari、Opera
延伸 1：( 常用的 DOCTYPE 宣告 )
http://www.w3school.com.cn/tags/tag_doctype.asp
HTML5
<!DOCTYPE html>
HTML4.01 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素 ( 比如 font )。不允許框架集 ( Framesets )。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素 ( 比如 font )。不允許框架集 ( Framesets )。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
該 DTD 等同於 HTML 4.01 Transitional，但允許框架集內容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素 ( 比如 font )。不允許框架集 ( Framesets )。必須以格式正確的 XML 來編寫標記
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素 ( 比如 font )。不允許框架集 ( Framesets )。必須以格式正確的 XML 來編寫標記
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
該 DTD 等同於 XHTML 1.0 Transitional，但允許框架集內容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
該 DTD 等同於 XHTML 1.0 Strict，但允許添加模型 ( 例如提供對東亞語系的 ruby 支持 )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
延伸 2：( HTML 元素和有效的 DTD )
http://www.w3school.com.cn/tags/html_ref_dtd.asp
}
Q3. <!DOCTYPE> 是否大小寫敏感？ {
Ans：沒有結束標籤、大小寫不敏感
延伸：使用 W3C 驗證器來檢查是否編寫了有效的 HTML/XHTML 文檔
}
Q4. 請寫出 HTML5 新增的表單元素類型 {
Ans：
datalist ( 支援瀏覽器：Opera 9.5 )
keygen ( 支援瀏覽器：Opera 10.5、Chrome 3.0 )
output ( 支援瀏覽器：Opera 9.5 )
延伸：HTML5 新增的輸入類型、表單屬性 ... 等等
延伸閱讀：
https://blog.csdn.net/u010556394/article/details/50769853
https://www.cnblogs.com/wenriyao/p/5001396.html
https://www.jianshu.com/p/02c4d6bcea1b
http://www.fly63.com/article/detial/70
http://blcweb.lofter.com/post/1cc30425_3694923
}
Q5. 請寫出 CSS 裡隱藏元素的幾種方法 {
Ans：
Opacity 元素透明度 =>
/* 佔據空間，可以點選 */
opacity: 0;
-webkit-filter: opacity(0);
filter: opacity(0);
Visibility =>
/* 佔據空間，無法點選，無法響應點選事件 */
visibility: hidden;
Display =>
/* 不佔據空間，無法點選，無法響應點選事件 */
display: none;
Position =>
/* 不佔據空間，無法點選，可以響應點選事件 */
position: absolute; top: -99999px; left: -99999px;
/* 佔據空間，無法點選，可以響應點選事件 */
position: relative; top: -99999px; left: -99999px;
Clip-path ( Clip ) =>
/* 佔據空間，無法點選 */
position:absolute;
clip:rect(top,right,bottom,left);
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
Overflow =>
/* 佔據空間，無法點選，無法響應點選事件 */
overflow: hidden;
Z-index =>
/* 不佔據空間，無法點選 */
position: absolute; z-index:-1000;
Transfrom =>
/* 佔據空間，無法點選 */
transform:scaleY(0);
transform: scale(0,0);
延伸閱讀：
https://75team.com/post/five-ways-to-hide-elements-in-css.html
https://juejin.im/post/584b645a128fe10058a0d625
https://tw.saowen.com/a/df5bf002545c2e4f654725f608426f6f22342735f593620fc81c078a16017b0b
}
Q6. CSS3 有哪些視覺新特性 {
Ans：
延伸閱讀：
http://www.cnblogs.com/cqhaibin/archive/2016/12/11/6159721.html
https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html
https://blog.csdn.net/sjinsa/article/details/70854619
https://hk.saowen.com/a/4dc30d91b918b71224fe9fb27a13bb89064f8441577af8d47e0bcf3194c9a3e5
http://c.biancheng.net/view/1276.html
}
Q7. 下面代碼中 <p> 標籤內的文字是什麼顏色
...HTML
<p class="classB classA">Hello
...
{
Ans:
延伸：
https://liguoping2016.github.io/2016/09/19/Interview/
延伸閱讀：
https://liguoping2016.github.io/
}
Q7. display:none 與 visibility:hidden 的區別是什麼 {
Ans：請參考 “Q5. 請寫出 CSS 裡隱藏元素的幾種方法” 的答案
}
Q8. <div> 在沒有任何 CSS 描述時寬度是多少 {
Ans:
Div tags are block level elements. All block level elements inherit the width of their parent element by default.
延伸：
Inline elements has the size of the content inside, block elements has the full siz
All block level elements takes the available width of their parent.
延伸閱讀：
https://stackoverflow.com/questions/35010655/where-is-the-default-size-of-a-div-element-defined-or-calculated
}
Q10. 下面代碼會輸出什麼
javascript var val1 = null; var val2 = []; console.log(typeof val1);
console.log(typeof val2);
{
Ans：
object
undefined
object
undefined
---
object
object
undefined
}
Q11. 下面代碼會輸出什麼
...ES6 var a = []; for(let i = 0; i < 10; i++) { a[i] = function(){ console.log(i); }; } a6;
var b = []; for(var j = 0; j < 10; j++) { b[j] = function(){ console.log(j); }; } b6;
{
Ans：
延伸：
console.log(a[6]); => function () { console.log(i); }
console.log(b[6]); => function () { console.log(j); }
延伸閱讀：
https://www.iware.com.tw/blog-JavaScript%20%E5%AE%A3%E5%91%8A:%20var%E3%80%81let%E3%80%81const.html
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/let
https://medium.com/@dd0425/javascript-es6-var-let-and-const-4fa4a441dae9
http://www.jstips.co/zh_tw/javascript/keyword-var-vs-let/
工具：
http://mikelambert.me/es6/
}
Q12. 為什麼網站要初始化 CSS 樣式 {
Ans:
为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
延伸閱讀：
https://www.jianshu.com/p/beabef833bfe
}
Q13. 用 CSS 實現一個滿屏的 “品” 字佈局 {
Ans：
延伸：
https://www.cnblogs.com/guorange/p/7149999.html
https://blog.csdn.net/lxcao/article/details/52688993
https://my.oschina.net/sencha/blog/493085
https://www.jianshu.com/p/c954fc7f63f0
https://www.jianshu.com/p/318fae26bad8
延伸閱讀：
https://so.csdn.net/so/search/s.do?q=Web%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98&t=blog
https://www.jianshu.com/u/9d28865fc914
}
Q14. DIV+CSS 佈局相比 TABLE 有什麼優點？ {
Ans:
延伸閱讀：
https://softwareengineering.stackexchange.com/questions/277778/why-are-people-making-tables-with-divs
https://stackoverflow.com/questions/2617895/actual-table-vs-div-table
http://goliimage.pixnet.net/blog/post/26437445-div-%E5%8F%8A-table-%E5%BB%BA%E8%AD%B0%E7%94%A8%E8%99%95~~
https://read01.com/zh-tw/gxjx72.html#.W_J2FZMzbOQ
https://www.jianshu.com/p/8a2512bff5e8
https://sofree.cc/css-table/
http://www.wanghang.win/article/33.html
https://blog.csdn.net/caozhangyingfei0109/article/details/10268819
http://www.cnblogs.com/titer666/articles/1353128.html
}
Q15. 為什麼使用多域名存儲網站資源更有效率？ {
Ans：
1、CDN缓存更方便
2、突破浏览器的并发限制
3、节约Cookie带宽
4、节约主域名的连接数，优化页面响应速度
5、防止不必要的安全问题
延伸閱讀：
https://blog.csdn.net/xujie_0311/article/details/42421027
https://www.zhihu.com/question/19997004
http://camnpr.com/archives/front-end-developer-interview-answers.html
}
Q16. Cookie、SessionStorage、LocalStorage 有什麼區別？ {
Ans：
延伸閱讀：
https://hk.saowen.com/a/870232991c37da9d366f23a321e2019433594f01cc342ebac6f9216975012beb
https://hk.saowen.com/a/e80aa3475cafbf2aa3a6f38258f7c6d1e74e68678fe2ac5c2de928cc386bec99
http://jerryzou.com/posts/cookie-and-web-storage/
https://www.jianshu.com/p/bdbae99a3871
https://www.jianshu.com/p/846c033c0cc8
https://segmentfault.com/a/1190000010400892
https://segmentfault.com/a/1190000012478396
https://juejin.im/post/5a320121f265da433562c68b
https://juejin.im/entry/5ac4d661f265da23a049c92a
}
Q17. 一個圖片分享網站，由於頁面有大量圖片導致加載緩慢。有什麼辦法優化體驗？ {
Ans：
延伸：
https://www.jianshu.com/p/637cba4079ae
https://blog.csdn.net/hzp666/article/details/54928488
https://blog.csdn.net/xiaoxia188/article/details/80522455
https://blog.csdn.net/ththcc/article/details/78072155
https://zhuanlan.zhihu.com/p/33370207
https://www.cnblogs.com/tianzhijiexian/p/4052575.html
延伸閱讀：
https://zhuanlan.zhihu.com/p/45936518
https://kknews.cc/news/grjvk59.html
https://www.icisco.cc/blog/web-site-speed/
}