前端HTML面試

. 【基礎】請說出XHTML和HTML的區別？

1、文檔頂部doctype聲明不同，xhtml的doctype頂部聲明中明確規定了xhtml DTD的寫法。

2、html元素必須正確嵌套，不能亂。

3、屬性必須是小寫的。

4、屬性值必須加引號。

5、標簽必須有結束，單標簽也應該用“/”來結束掉。

2. 【基礎】寫出以下幾個HTML標簽：加粗、下標、居中、字體？

加粗：<b>、<strong> 下標：<sub> 居中：<center> 字體：<font>、<basefont>

3. 【基礎】網頁驗證碼是干嘛的，是為了解決什么安全問題？

1、區分用戶是計算機還是人的程序。

2、可以防止惡意破解密碼、刷票、論壇灌水。

4. 【中級】簡述一下src與href的區別？

1、src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。

2、src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位；href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接。

5. 【中級】<image>標簽上title屬性與alt屬性的區別是什么？

在alt和title同時設置的時候，alt作為圖片的替代文字出現，title是圖片的解釋文字。

6. 【中級】form標簽上定義請求類型的是哪個屬性？定義請求地址的是哪個屬性？

form表單定義請求類型的是 method 屬性，定義請求地址的是 action屬性。

7. 【中級】iframe框架有那些優缺點？

優點：

1、iframe能夠原封不動的把嵌入的網頁展現出來。

2、如果有多個網頁引用iframe，那么你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。

3、網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用。

4、如果遇到加載緩慢的第三方內容如圖標和廣告，這些問題可以由iframe來解決。

缺點：

1、搜索引擎的爬蟲程序無法解讀這種頁面

2、框架結構中出現各種滾動條

3、使用框架結構時，保證設置正確的導航鏈接。

4、iframe頁面會增加服務器的http請求。

8. 【高級】很多網站不常用table、iframe這兩個元素，知道原因嗎？

因為瀏覽器頁面渲染的時候是從上至下的，而table和iframe 這兩種元素會改變這樣渲染規則，他們是要等待自己元素內的內容加載完才整體渲染。用戶體驗會很不友好。

9. 【高級】cookies，sessionStorage和localStorage的區別？

共同點：都是保存在瀏覽器端，且是同源的。

區別：

1、cookies是為了標識用戶身份而存儲在用戶本地終端上的數據，始終在同源http請求中攜帶，即cookies在瀏覽器和服務器間來回傳遞，而sessionstorage和localstorage不會自動把數據發給服務器，僅在本地保存

2、存儲大小的限制不同。cookie保存的數據很小，不能超過4k，而sessionstorage和localstorage保存的數據大，可達到5M。

3、數據的有效期不同。cookie在設置的cookie過期時間之前一直有效，即使窗口或者瀏覽器關閉。sessionstorage僅在瀏覽器窗口關閉之前有效。localstorage始終有效，窗口和瀏覽器關閉也一直保存，用作長久數據保存。

4、作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的瀏覽器共享，即使同一頁面；localstorage在所有同源窗口都是共享。

10. 【高級】請用html知識解決seo優化問題？

1、meta標簽，這個是重中之重

2、頁面結構清晰，

3、logo，給logo圖片添加h1標簽、a鏈接連接到首頁以及alt

4、img標簽，img標簽增加alt屬性，這個logo的時候也提到了

5、h1~h6標簽

6、前后端分離（vue、ajax）、flash不利于seo

7、增加外部鏈接。

PS：小弟不才，略知一二，歡迎大家關注、評論、轉發。

行效果

效果圖

技術要點

CSS選擇器

選擇器	用法
ID選擇器	#mycalssName { }
類選擇器	.mycalssName {}
標簽選擇器	div { }
相鄰選擇器	ul + li { }
子選擇器	ul > li { }
后代選擇器	li a { }
通配符選擇器	*{}
屬性選擇器	a[title] { color: green;}
偽類選擇器	a:hover { }

浮動 float

- none: 默認值，不浮動，為常規流

- left: 靠上靠左排列

- right: 靠上靠右排列

注意浮動的不占有位置，造成坍塌，需要清除浮動，清除浮動的方法可以參考其它文章

源碼

喜歡互聯網的一點是在互聯網放置靜態頁面是如此簡單。今天有人問我該怎么做，所以我想我會快速地寫下來！
-- Julia Evans（作者）

我喜歡互聯網的一點是在互聯網放置靜態頁面是如此簡單。今天有人問我該怎么做，所以我想我會快速地寫下來！

只是一個 HTML 頁面

我的所有網站都只是靜態 HTML 和 CSS。我的網頁設計技巧相對不高（ https://wizardzines.com 是我自己開發的最復雜的網站），因此保持我所有的網站相對簡單意味著我可以做一些改變/修復，而不會花費大量時間。

因此，我們將在此文章中采用盡可能簡單的方式 —— 只需一個 HTML 頁面。

HTML 頁面

我們要放在互聯網上的網站只是一個名為 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它，它是一個 Github 倉庫，其中只包含一個文件。

HTML 文件中包含一些 CSS，使其看起來不那么無聊，部分復制自 https://example.com 。

如何將 HTML 頁面放在互聯網上

有以下幾步：

注冊 Neocities 帳戶
將 index.html 復制到你自己 neocities 站點的 index.html 中
完成

上面的 index.html 頁面位于 julia-example-website.neocities.com 中，如果你查看源代碼，你將看到它與 github 倉庫中的 HTML 相同。

我認為這可能是將 HTML 頁面放在互聯網上的最簡單的方法（這是一次回歸 Geocities，它是我在 2003 年制作我的第一個網站的方式）:)。我也喜歡 Neocities （像 glitch ，我也喜歡）它能實驗、學習，并有樂趣。

其他選擇

這絕不是唯一簡單的方式，在你推送 Git 倉庫時，Github pages 和 Gitlab pages 以及 Netlify 都將會自動發布站點，并且它們都非常易于使用（只需將它們連接到你的 GitHub 倉庫即可）。我個人使用 Git 倉庫的方式，因為 Git 不會讓我感到緊張，我想知道我實際推送的頁面發生了什么更改。但我想你如果第一次只想將 HTML/CSS 制作的站點放到互聯網上，那么 Neocities 就是一個非常好的方法。

如果你不只是玩，而是要將網站用于真實用途，那么你或許會需要買一個域名，以便你將來可以更改托管服務提供商，但這有點不那么簡單。

這是學習 HTML 的一個很好的起點

如果你熟悉在 Git 中編輯文件，同時想練習 HTML/CSS 的話，我認為將它放在網站中是一個有趣的方式！我真的很喜歡它的簡單性 —— 實際上這只有一個文件，所以沒有其他花哨的東西需要去理解。

還有很多方法可以復雜化/擴展它，比如這個博客實際上是用 Hugo 生成的，它生成了一堆 HTML 文件并放在網絡中，但從基礎開始總是不錯的。

via: https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/

作者： Julia Evans 選題： lujun9972 譯者： geekpi 校對： wxy

本文由 LCTT 原創編譯， Linux中國榮譽推出

點擊“了解更多”可訪問文內鏈接

在線咨詢

上一篇：HTML中input文本輸入框限制效果匯集
下一篇：前端基礎入門（HTML）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商