眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領取相關學習資料！

一、HTML

1、<image>標簽上title屬性與alt屬性的區(qū)別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應用》

2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標簽列表》

3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景

section：定義文檔中的一個章節(jié)

nav：定義只包含導航鏈接的章節(jié)

header：定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內(nèi)容關聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

參考《HTML5 標簽列表》

4、請說說你對標簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結構

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網(wǎng)頁；

d. 便于團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

5、Doctype作用? 嚴格模式與混雜模式如何區(qū)分？它們有何意義?

聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現(xiàn)。

6、你知道多少種Doctype文檔類型？

標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標準的網(wǎng)頁，

Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設計的網(wǎng)頁。

7、HTML與XHTML——二者有什么區(qū)別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內(nèi)容標簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失

h. sessionStorage 的數(shù)據(jù)在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；

9、iframe的優(yōu)缺點？

優(yōu)點：

a. 解決加載緩慢的第三方內(nèi)容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務器的http請求

d. 會產(chǎn)生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區(qū)別？

在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。

a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異?；靵y

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

12、簡述一下src與href的區(qū)別

src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯(lián)系。

src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置

href是Hypertext Reference的縮寫，指向網(wǎng)絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接

公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈 測試 PPT JS HTML 簡歷 領取相關學習資料！

讀：

什么是對話UI？

如何建立一個對話網(wǎng)站

為什么會話界面更好

為什么會話界面是未來的

在我們邁向未來之前，讓我們先回到歷史。

你有沒有想過世界上第一個網(wǎng)站是什么樣的？是誰創(chuàng)造了它？嗯，世界上第一個網(wǎng)站是由Tim Berners Lee爵士在1991年推出的。這是一個簡單的網(wǎng)頁，里面有一些文字和超鏈接。您可以點擊此鏈接查看它。

從1991年的那個溫和的開始，我們已經(jīng)走了27年，在網(wǎng)頁設計領域發(fā)生了一些非凡的轉(zhuǎn)變。無論是微軟1996年推出的第一款瀏覽器，還是1996年推出的CSS和Flash（以及最近幾年），響應式設計的需求，都在網(wǎng)頁設計的演變中發(fā)揮了作用。

現(xiàn)在，我們正在進入網(wǎng)頁設計的未來，會話界面將成為現(xiàn)代移動第一網(wǎng)站的關鍵。

什么是對話UI？

對話界面被正確地稱為“未來的用戶界面”。谷歌，亞馬遜和蘋果等全球領導者已經(jīng)開發(fā)了智能網(wǎng)站，可以使用對話界面處理客戶查詢。

事實上，幾年前谷歌開發(fā)了一個可以與用戶討論生活意義的聊天機器人 - 它的開發(fā)人員并沒有通過代碼構建它，而是使用機器學習算法來研究現(xiàn)有的對話 - 即電影對話以教會它回應來自考慮生命更深層含義的用戶的詢問。

會話界面是能夠模仿與真人交談的平臺。這意味著，用戶可以使用相同語言與機器進行交互，就好像他們正在與人通信一樣。這在自然語言處理的幫助下發(fā)生，其允許計算機從用戶輸入或說出的單詞理解，分析和創(chuàng)建意義。

使用鍵盤開始的UI的演變使用像DOS這樣的命令級語言來輸入可以被計算機輕易理解的命令。從那時起，我們已經(jīng)從用于輸入數(shù)據(jù)的基本輸入設備轉(zhuǎn)變?yōu)楦訌姶蟮钠脚_，不需要數(shù)據(jù)輸入，而是通過語音，手勢等輸入可以滿足用戶命令?，F(xiàn)在，隨著Apple的Siri和亞馬遜的Echo的推出，計算機能夠輕松理解用戶的語言，無論是像Siri這樣簡單的需求，告訴我溫度在外，更復雜的請求，比如Google可以預約我預約在女士美發(fā)沙龍。

在看到現(xiàn)代網(wǎng)站的世界存在之后，您可以忘記按鈕，因為彩色按鈕的時代即將結束。相反，聊天機器人和語音助理等對話界面將為未來的網(wǎng)站注入活力。

但是不要相信我的話。以下是一些使用Chatbots大幅提高生產(chǎn)力的現(xiàn)代品牌：

• 受歡迎的乘車歡呼服務Lyft讓您通過打字/ lyft home通過Slack等工具預訂游樂設施。
• Sephora是一個知名的個人護理品牌，可讓您與其KIK機器人VIA平臺互動，以獲取產(chǎn)品信息，觀看教程等。
• 1-800花。著名的花卉和美食食品企業(yè)有一個非常對話的網(wǎng)站，通過花卉安排場景，您可以選擇您喜歡的訂單。

這里的觀點是，很多流行品牌已經(jīng)在很長一段時間內(nèi)嘗試了對話網(wǎng)站的概念，隨著在線服務性的提升，品牌有望建立全方位的數(shù)字體驗。

越來越多的品牌看到機器人驅(qū)動的網(wǎng)站，應用程序等不僅僅是棘手的技術，而是作為必不可少的客戶管理資產(chǎn)，可以幫助他們降低成本并提高在線流量。

如何建立一個對話網(wǎng)站

會話網(wǎng)站是一個簡單的網(wǎng)站，它使用聊天機器人（語音或文本）與用戶進行交互。關鍵在于創(chuàng)建一個與訪客真正交談的網(wǎng)站。堅持設計網(wǎng)站的基本規(guī)則，然后添加互動功能。他或她應該感覺他們正在與一個真正的人而不是機器人進行交互。

只需將聊天機器人添加到現(xiàn)有站點，即可將無聊的網(wǎng)站轉(zhuǎn)換為未來的網(wǎng)站。聊天機器人可以是兩種類型，即文本聊天機器人和語音聊天機器人。讓我們來了解這些。

• 基于文本的聊天機器人 - 文本聊天機器人以文本形式收集數(shù)據(jù)，處理它們并以文本形式返回結果。您可以使用名為Python的語言創(chuàng)建文本聊天機器人。這是一個用Python編寫機器人的交互式指南。
• 基于語音的聊天機器人 - 語音聊天機器人以語音形式收集數(shù)據(jù)，處理它們并以語音形式返回結果。您可以使用本教程創(chuàng)建支持語音的Android聊天機器人。

如果您不想將頭腦撞到代碼中，那么您可以選擇更方便的選項。您可以在chatbot構建器的幫助下輕松創(chuàng)建聊天機器人。

Amazon Lex是為您的網(wǎng)站構建會話界面的頂級解決方案。它使用與Alexa相同的技術，使您能夠快速輕松地構建復雜的自然語言聊天機器人。

除了亞馬遜Lex之外，還有像Collect.chat這樣的其他建設者可以幫助您為您的企業(yè)構建自定義的聊天機器人。通過后端的強大算法，聊天機器人可以與訪問者互動，了解他們的要求并向他們推薦最好的產(chǎn)品或服務。

為什么會話界面更好

與傳統(tǒng)界面相比，會話界面總是更好，因為它們有助于減少溝通中的摩擦，人們可以用最舒適的語言輕松溝通，從而帶來更好的用戶體驗和更高的銷售額。

• 據(jù)估計，大約83％的購物者在網(wǎng)上購物時需要幫助。因此，聊天機器人可以幫助他們在最短的時間內(nèi)選擇最好的產(chǎn)品。
• 聊天機器人可以一次處理多個請求，因此等待時間減少到NIL。因此，企業(yè)可以擴大業(yè)務規(guī)模，從而提高收入。
• 會話界面有助于產(chǎn)生更好的潛在客戶，并有助于領導培育。
• 聊天機器人為每個用戶增加了個性化體驗，從而提高了客戶滿意度。這樣可以提高投資回報率并增加口碑推薦。
• 客戶可以使用可為您的業(yè)務帶來可觀收入的同一平臺輕松付款。
• 聊天機器人從不睡覺，因此您可以期待客戶互動全天候進行。這有助于提高品牌價值和增加客戶保留率。

為什么會話界面是未來的

會話界面越來越受歡迎，并且沒有回歸。未來的網(wǎng)站將擁有由語音助理和聊天機器人提供支持的簡單界面。能夠建立網(wǎng)站，為客戶提供更好的體驗，讓他們打字或說少，獲得即時但準確的建議的企業(yè)必將獲勝。

TML 5.2<dialog>為本機模態(tài)對話框引入了一個新元素。乍一看，它看起來相當簡單（而且確實如此），但是當我一直在玩它時，我發(fā)現(xiàn)它有一些很容易錯過的好功能。

在本文末尾提供了一個完整的工作演示，

這是基本對話框的標記：

該open屬性表示該對話框可見。沒有它，對話框?qū)⒈浑[藏，直到您使用JavaScript來顯示它。在添加任何樣式之前，對話框呈現(xiàn)如下：

它絕對位于頁面上，因此它會像您期望的那樣出現(xiàn)在其他內(nèi)容的前面，并且水平居中。默認情況下，它與內(nèi)容中的內(nèi)容一樣寬。

基本操作

JavaScript有一些方法和屬性可以輕松地使用<dialog>元素。你可能最需要的兩種方法是showModal()和close()。

當您使用showModal()打開對話框時，會向頁面添加背景，阻止用戶與模態(tài)外部的內(nèi)容進行交互。默認情況下，此背景是完全透明的，但您可以使用CSS顯示它（更多信息如下）。

按Esc將關閉對話框，您可以提供關閉按鈕來觸發(fā)該close()方法。

還有第三種方法，show()也可以使模態(tài)出現(xiàn)，但沒有伴隨的背景。用戶仍然可以與對話框外可見的元素進行交互。

瀏覽器支持和Polyfill

目前，<dialog>Chrome只支持行為。Firefox提供默認樣式，但JavaScript API僅在標志后面啟用。我懷疑Firefox很快會默認啟用它。

值得慶幸的是，有既提供JavaScript行為，又提供具有默認樣式的樣式表。dialog-polyfill在npm中安裝以使用它 - 或使用常規(guī)舊<script>標簽。它適用于IE9及以上版本。

使用polyfill時，頁面上的每個對話框都需要初始化：

這不會取代擁有它的瀏覽器的本機行為。

對話框樣式

打開和關閉模態(tài)很不錯，但最初它看起來不太專業(yè)。添加樣式就像設置任何其他元素一樣簡單?？梢允褂眯碌?:backdrop偽元素設置背景樣式。

對于使用polyfill的舊瀏覽器，此偽元素選擇器將不起作用。在其位置，polyfill會.backdrop在對話框后立即添加元素。您可以使用CSS來定位它：

添加一點標記以提供樣式掛鉤。對話框的常用方法是將其分解為標題，正文和頁腳：

為此添加一些CSS，您可以根據(jù)需要制作模態(tài)外觀：

更多控制

通常，我們希望從對話框中獲得某種用戶反饋。關閉對話框時，可以將字符串值傳遞給close()方法。此值分配給returnValue對話框DOM元素的屬性，因此可以在以后讀取：

還有一些你可以聽的活動。兩個有用的是close（當模態(tài)關閉cancel時觸發(fā)）和（當用戶按下Esc以關閉模態(tài)時觸發(fā)）。

似乎缺少的一件事是在單擊背景時關閉模態(tài)的能力，但有一種解決方法。單擊背景會觸發(fā)具有<dialog>事件目標的單擊事件。如果構造模態(tài)以使子元素填充對話框的整個空間，那么這些子元素將成為對話框內(nèi)任何單擊的目標。這樣，您可以偵聽對話框上的單擊，并在對話框本身是click事件的目標時關閉它：

這并不完美，但它確實有效。如果您找到更好的方法來檢測背景上的點擊次數(shù)，請與我們聯(lián)系。

完整的工作演示

下面是演示地址：http://www.ikinsoft.com/demo/dialog/dialog.html