整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
號持續更新前端面試題和答案......
以下是一些HTML基礎面試題：
TML 基礎
非常簡單的HTML文檔
HTML 標題
HTML 段落
HTML 鏈接
HTML 圖片
實例解析
HTML 標題
HTML 標題
在html源碼中插入注釋
插入水平線
實例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文檔中折行的使用。
HTML 格式化的某些問題。
實例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 標簽對空行和空格進行控制。
此例演示不同的"計算機輸出"標簽的顯示效果。
此例演示如何在 HTML 文件中寫地址。
此例演示如何實現縮寫或首字母縮寫。
此例演示如何改變文字的方向。
此例演示如何實現長短不一的引用語。
文本下劃線與刪除線
實例解析
HTML 樣式
HTML Style 元素
背景色樣式
字體樣式，顏色，大小
文本對齊樣式
設置文本字體
設置文本字體大小
設置文本字體顏色
設置文本字體，字體大小，字體顏色
HTML使用不同樣式
沒有下劃線的鏈接
鏈接到一個外部樣式表
實例解析
HTML 鏈接
創建超級鏈接
將圖像作為鏈接
在新的瀏覽器窗口打開鏈接
鏈接到同一個頁面的不同位置
跳出框架
創建電子郵件鏈接
創建電子郵件鏈接 2
實例解析
HTML 圖像
插入圖像
從不同的位置插入圖片
排列圖片
本例演示如何使圖片浮動至段落的左邊或右邊。
制作圖像鏈接
創建圖像映射
實例解析
HTML 表格
簡單的表格
沒有邊框的表格
表格中的表頭
帶有標題的表格
跨行或跨列的表格單元格
表格內的標簽
單元格邊距(Cell padding)
單元格間距(Cell spacing)
實例解析
HTML 列表
無序列表
有序列表
不同類型的有序列表
不同類型的無序列表
嵌套列表
嵌套列表 2
定義列表
實例解析
HTML Forms 和 Input
創建文本域(Text fields)
創建密碼域
復選框
單選按鈕
簡單的下拉列表
預選下拉列表
本例演示如何創建一個文本域（多行文本輸入控件）。
創建一個按鈕
本例演示如何在數據周圍繪制一個帶標題的框。
帶有文本域與輸入域的表單
帶有復選框與提交按鈕的form表單
帶有單選框與提交按鈕的表單
發送郵件表單
實例解析
HTML iframe
內聯框架 (HTML頁面中插入框架)
實例解析
HTML 頭部元素
描述了文檔標題
HTML頁面中默認的URL鏈接
提供文檔元數據
實例解析
HTML 腳本
插入一個腳本
使用 <noscript> 標簽
實例解析
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
習目標：了解JavaScript是如何與HTML結合來創建動態網頁，網頁中嵌入JavaScript的不同方式，JavaScript的內容類型及其與<script>的關系
<script>是由Netscape創造出來，后來加到HTML規范中的。
<script>有8個屬性：
1、async:表示立即開始下載腳本，但不能阻止其他頁面動作，比如下載資源或者等待其他腳本加載。只對外部腳本文件有效。
2、charset：使用src屬性指定代碼字符集。這個屬性很少用，因為大多數瀏覽器不在乎它的值。
3、crossorigin；配置資源請求的CORS（跨源資源共享）設置。默認情況下不使用CORS。crossorigin = “anonymous”配置文件請求不用設置憑據標志。crossorigin = ”use-credentials“設置憑據標志，意味著出站請求會包含憑據。
4、defer:表示腳本可以延遲到文檔全部解析和顯示后再執行。新版本中只能用于外部腳本。
5、integrity:允許比對接收到的資源和指定的加密簽名以驗證子資源完整性（SRI，Subresource integrity），如果驗證簽名不匹配則腳本不會執行。這個屬性可以用于確保內容分發網絡（CDN，Content Delivery Network）不會提供惡意內容。
6、language：此屬性已被廢止。
7、src:表示包含外部要執行的代碼的外部文件。
8、type:代替language，表示代碼塊中腳本語言的內容類型（也稱為MIME類型），按照慣例這個值始終都是”text/JavaScript“，盡管”text/JavaScript“和”text/ecmascript“都已經廢棄。JavaScript文件的MIME類型通常是”application/x-javascript“,不過給type屬性這個值的話可能會導致腳本被忽略。在非IE的瀏覽器中有效的值還有”application/JavaScript“和”application/ecmascript"。如果這個值是module，則代碼會被當成是ES6模塊，而且只有這時候代碼中才能出現import和export關鍵字。
使用<script>的方式有內聯和外嵌兩種，只要把code寫入<script>code</script>中就好，code中要是包含字符串“<script>”,只要加上轉義字符“\”即可。
如果要外嵌JavaScript代碼只要使用src屬性來鏈接外部文件即可如：
<script src=“example.js”></script>
XHTML 文檔中，可以忽略結束標簽寫成<script src=“example.js”/>即可，但是這在HTML中不能使用。
過去把JavaScript和CSS一起寫在head中，但是這意味著必須下載所有code并解析和解釋完成后才開始渲染頁面，對于JavaScript很多的頁面會導致頁面渲染速度過慢，為解決這個問題，JavaScript一般寫在body元素的頁面內容的最后邊，如下
<html>
<head></head>
<body>
message
<script>code<\script>
<\body>
</html>
在外聯JavaScript時可以使用defer屬性來推遲腳本的運行。可以寫成：
<html>
<head>
<script defer src = "example.js">code<\script>
</head>
<body>
message
<\body>
</html>
async屬性從腳本處理方式上與defer類似，但是不同的是標記async的腳本并不能保證腳本按照他們的出現順序執行，比如：
<html>
<head>
<script sync src = "example1.js">code<\script>
<script sync src = "example2.js">code<\script>
</head>
<body>
message
<\body>
</html>
不能保證example1比example2先執行。
除了<script>以外還可以用其他方式加載腳本。因為JavaScript可以使用DOM API，所以通過向DOM中動態地加入script元素同樣可以加載指定腳本。只要創建一個script元素并將其添加到DOM即可。
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
當然，在把 HTMLElement 元素添加到 DOM 且執行到這段代碼之前不會發送請求。默認情況下，以這種方式創建的<script>元素是以異步方式加載的，相當于添加了 async 屬性。不過這樣做可能會有問題，因為所有瀏覽器都支持 createElement()方法，但不是所有瀏覽器都支持 async 屬性。因此，如果要統一動態腳本的加載行為，可以明確將其設置為同步加載：
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
以這種方式獲取的資源對瀏覽器預加載器是不可見的。這會嚴重影響它們在資源獲取隊列中的優先級。根據應用程序的工作方式以及怎么使用，這種方式可能會嚴重影響性能。要想讓預加載器知道這些動態請求文件的存在，可以在文檔頭部顯式聲明它們：
<link rel="preload" href="gibberish.js">
可擴展超文本標記語言（XHTML，Extensible HyperText Markup Language）是將 HTML 作為 XML的應用重新包裝的結果。與 HTML 不同，在 XHTML 中使用 JavaScript 必須指定 type 屬性且值為text/javascript，HTML 中則可以沒有這個屬性。XHTML 雖然已經退出歷史舞臺，但實踐中偶爾可能也會遇到遺留代碼，為此本節稍作介紹。在 XHTML 中編寫代碼的規則比 HTML 中嚴格，這會影響使用<script>元素嵌入 JavaScript 代碼。下面的代碼塊雖然在 HTML 中有效，但在 XHML 中是無效的。
<script type="text/javascript">
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
</script>
在 HTML 中，解析<script>元素會應用特殊規則。XHTML 中則沒有這些規則。這意味著 a < b語句中的小于號（<）會被解釋成一個標簽的開始，并且由于作為標簽開始的小于號后面不能有空格，這會導致語法錯誤。避免 XHTML 中這種語法錯誤的方法有兩種。第一種是把所有小于號（<）都替換成對應的 HTML實體形式（<）。結果代碼就是這樣的：
<script type="text/javascript">
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
</script>
這樣代碼就可以在 XHTML 頁面中運行了。不過，缺點是會影響閱讀。好在還有另一種方法。第二種方法是把所有代碼都包含到一個 CDATA 塊中。在 XHTML（及 XML）中，CDATA 塊表示文檔中可以包含任意文本的區塊，其內容不作為標簽來解析，因此可以在其中包含任意字符，包括小于號，并且不會引發語法錯誤。使用 CDATA 的格式如下：
<script type="text/javascript"><![CDATA[
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
]]></script>
在兼容 XHTML 的瀏覽器中，這樣能解決問題。但在不支持 CDATA 塊的非 XHTML 兼容瀏覽器中則不行。為此，CDATA 標記必須使用 JavaScript 注釋來抵消：
<script type="text/javascript">
//<![CDATA[
function compare(a, b) {
if (a < b) {
console.log("A is less than B");
} else if (a > b) {
console.log("A is greater than B");
} else {
console.log("A is equal to B");
}
}
//]]>
</script>
這種格式適用于所有現代瀏覽器。雖然有點黑科技的味道，但它可以通過 XHTML 驗證，而且對XHTML 之前的瀏覽器也能優雅地降級。
自 1995 年 Netscape 2 發布以來，所有瀏覽器都將 JavaScript 作為默認的編程語言。type 屬性使用一個 MIME 類型字符串來標識<script>的內容，但 MIME 類型并沒有跨瀏覽器標準化。即使瀏覽器默認使用 JavaScript，在某些情況下某個無效或無法識別的 MIME 類型也可能導致瀏覽器跳過（不執行）相關代碼。因此，除非你使用 XHTML 或<script>標簽要求或包含非 JavaScript 代碼，最佳做法是不指定 type 屬性。在最初采用 script 元素時，它標志著開始走向與傳統 HTML 解析不同的流程。對這個元素需要應用特殊的解析規則，而這在不支持 JavaScript 的瀏覽器（特別是 Mosaic）中會導致問題。不支持的瀏覽器會把<script>元素的內容輸出到頁面上，從而破壞頁面的外觀。Netscape 聯合 Mosaic 拿出了一個解決方案，對不支持 JavaScript 的瀏覽器隱藏嵌入的 JavaScript 代碼。最終方案是把腳本代碼包含在一個 HTML 注釋中，像這樣：
<script><!--
function sayHi(){
console.log("Hi!");
}
//--></script>
使用這種格式，Mosaic 等瀏覽器就可以忽略<script>標簽中的內容，而支持 JavaScript 的瀏覽器則必須識別這種模式，將其中的內容作為 JavaScript 來解析。雖然這種格式仍然可以被所有瀏覽器識別和解析，但已經不再必要，而且不應該再使用了。在XHTML 模式下，這種格式也會導致腳本被忽略，因為代碼處于有效的 XML 注釋當中。
雖然可以直接在 HTML 文件中嵌入 JavaScript 代碼，但通常認為最佳實踐是盡可能將 JavaScript 代碼放在外部文件中。不過這個最佳實踐并不是明確的強制性規則。推薦使用外部文件的理由如下。
? 可維護性。JavaScript 代碼如果分散到很多 HTML 頁面，會導致維護困難。而用一個目錄保存所有 JavaScript 文件，則更容易維護，這樣開發者就可以獨立于使用它們的 HTML 頁面來編輯代碼。
? 緩存。瀏覽器會根據特定的設置緩存所有外部鏈接的 JavaScript 文件，這意味著如果兩個頁面都用到同一個文件，則該文件只需下載一次。這最終意味著頁面加載更快。
? 適應未來。通過把 JavaScript 放到外部文件中，就不必考慮用 XHTML 或前面提到的注釋黑科技。包含外部 JavaScript 文件的語法在 HTML 和 XHTML 中是一樣的。在配置瀏覽器請求外部文件時，要重點考慮的一點是它們會占用多少帶寬。在 SPDY/HTTP2 中，預請求的消耗已顯著降低，以輕量、獨立 JavaScript 組件形式向客戶端送達腳本更具優勢。比如，第一個頁面包含如下腳本：
<script src="mainA.js"></script>
<script src="component1.js"></script>
<script src="component2.js"></script>
<script src="component3.js"></script>
...
后續頁面可能包含如下腳本：
<script src="mainB.js"></script>
<script src="component3.js"></script>
<script src="component4.js"></script>
<script src="component5.js"></script>
...
在初次請求時，如果瀏覽器支持 SPDY/HTTP2，就可以從同一個地方取得一批文件，并將它們逐個放到瀏覽器緩存中。從瀏覽器角度看，通過 SPDY/HTTP2 獲取所有這些獨立的資源與獲取一個大JavaScript 文件的延遲差不多。在第二個頁面請求時，由于你已經把應用程序切割成了輕量可緩存的文件，第二個頁面也依賴的某些組件此時已經存在于瀏覽器緩存中了。當然，這里假設瀏覽器支持 SPDY/HTTP2，只有比較新的瀏覽器才滿足。如果你還想支持那些比較老的瀏覽器，可能還是用一個大文件更合適。
IE5.5 發明了文檔模式的概念，即可以使用 doctype 切換文檔模式。最初的文檔模式有兩種：混雜模式（quirks mode）和標準模式（standards mode）。前者讓 IE 像 IE5 一樣（支持一些非標準的特性），后者讓 IE 具有兼容標準的行為。雖然這兩種模式的主要區別只體現在通過 CSS 渲染的內容方面，但對JavaScript 也有一些關聯影響，或稱為副作用。本書會經常提到這些副作用。
IE 初次支持文檔模式切換以后，其他瀏覽器也跟著實現了。隨著瀏覽器的普遍實現，又出現了第三種文檔模式：準標準模式（almost standards mode）。這種模式下的瀏覽器支持很多標準的特性，但是沒有標準規定得那么嚴格。主要區別在于如何對待圖片元素周圍的空白（在表格中使用圖片時最明顯）。
混雜模式在所有瀏覽器中都以省略文檔開頭的 doctype 聲明作為開關。這種約定并不合理，因為混雜模式在不同瀏覽器中的差異非常大，不使用黑科技基本上就沒有瀏覽器一致性可言。標準模式通過下列幾種文檔類型聲明開啟：
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 -->
<!DOCTYPE html>
準標準模式通過過渡性文檔類型（Transitional）和框架集文檔類型（Frameset）來觸發：
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
準標準模式與標準模式非常接近，很少需要區分。人們在說到“標準模式”時，可能指其中任何一個。而對文檔模式的檢測（本書后面會討論）也不會區分它們。本書后面所說的標準模式，指的就是除混雜模式以外的模式。
針對早期瀏覽器不支持 JavaScript 的問題，需要一個頁面優雅降級的處理方案。最終，<noscript>元素出現，被用于給不支持 JavaScript 的瀏覽器提供替代內容。雖然如今的瀏覽器已經 100%支持JavaScript，但對于禁用 JavaScript 的瀏覽器來說，這個元素仍然有它的用處。<noscript>元素可以包含任何可以出現在<body>中的 HTML 元素，<script>除外。在下列兩種情況下，瀏覽器將顯示包含在<noscript>中的內容：
? 瀏覽器不支持腳本；
? 瀏覽器對腳本的支持被關閉。任何一個條件被滿足，包含在<noscript>中的內容就會被渲染。否則，瀏覽器不會渲染<noscript>中的內容。
下面是一個例子：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script defer="defer" src="example1.js"></script>
<script defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>
這個例子是在腳本不可用時讓瀏覽器顯示一段話。如果瀏覽器支持腳本，則用戶永遠不會看到它。
JavaScript 是通過<script>元素插入到 HTML 頁面中的。這個元素可用于把 JavaScript 代碼嵌入到HTML 頁面中，跟其他標記混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重點可以總結如下。
? 要包含外部 JavaScript 文件，必須將 src 屬性設置為要包含文件的 URL。文件可以跟網頁在同一臺服務器上，也可以位于完全不同的域。
? 所有<script>元素會依照它們在網頁中出現的次序被解釋。在不使用 defer 和 async 屬性的情況下，包含在<script>元素中的代碼必須嚴格按次序解釋。
? 對不推遲執行的腳本，瀏覽器必須解釋完位于<script>元素中的代碼，然后才能繼續渲染頁面的剩余部分。為此，通常應該把<script>元素放到頁面末尾，介于主內容之后及</body>標簽之前。
? 可以使用 defer 屬性把腳本推遲到文檔渲染完畢后再執行。推遲的腳本原則上按照它們被列出的次序執行。
? 可以使用 async 屬性表示腳本不需要等待其他腳本，同時也不阻塞文檔渲染，即異步加載。異步腳本不能保證按照它們在頁面中出現的次序執行。
? 通過使用<noscript>元素，可以指定在瀏覽器不支持腳本時顯示的內容。如果瀏覽器支持并啟用腳本，則<noscript>元素中的任何內容都不會被渲染。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
