了解使用 HTML 的 iframe 標籤的基礎知識 iframe 標籤允許我們將來自其他來源（其他網站）的內容嵌入我們的網頁中。 從技術上講，iframe 創建了一個嵌套的瀏覽上下文。這意味著 iframe 中的任何內容都不會干擾父頁面，反之亦然。JavaScript 和 CSS 不會「洩漏」到/從 iframe 中。 許多網站使用 iframe 執行各種操作。你可能熟悉 Codepen、Glitch 或其他允許你在頁面的一部分中編寫代碼並在框中查看結果的網站。這就是一個 iframe。 你可以通過以下方式創建一個 iframe： <iframe src="page.html"></iframe> 你也可以加載絕對 URL： <iframe src="https://site.com/page.html"></iframe> 你可以設置一組寬度和高度參數（或使用 CSS 設置它們），否則 iframe 將使用默認值，即 300x150 像素的框： <iframe src="page.html" width="800" height="400"></iframe> Srcdoc srcdoc 屬性允許您指定一些內嵌 HTML 以顯示。這是 src 的替代方案，但最近版本並不支持 Edge 18 及更低版本和 IE： <iframe srcdoc="<p>我的狗是一隻乖狗</p>"></iframe> 沙盒 sandbox 屬性允許我們限制 iframe 中允許的操作。 如果省略它，則允許做任何操作： <iframe src="page.html"></iframe> 如果將其設置為 “"，則不允許任何操作： <iframe src="page.html" sandbox=""></iframe> 我們可以通過在 sandbox 屬性中添加選項來選擇允許的操作。您可以通過在它們之間添加空格來允許多個操作。以下是您可以使用的選項的不完整列表：...

＃使用srcset實現響應式圖片 如何使用HTML img 標籤的srcset屬性來定義響應式圖片 img標籤的srcset屬性允許您根據像素密度或窗口寬度來設置響應式圖片，以滿足您的需求。這樣，它只需下載瀏覽器在渲染頁面時需要的資源，例如在移動設備上下載較大的圖片。 這是一個例子，我們為4個不同的屏幕尺寸提供了4個額外的圖片： <img src="dog.png" alt="一只狗的照片" srcset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w"> 在srcset中，我們使用w衡量窗口寬度。 由於我們這樣做，還需要使用sizes屬性： <img src="dog.png" alt="一只狗的照片" sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px" srcset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w"> 在這個例子中，sizes屬性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px字符串描述了圖片與視窗的大小關係，多個條件用逗號分隔。 媒體條件max-width: 500px將圖片的大小設定為與視窗寬度相關。簡而言之，如果窗口大小小於500px，它以100%的視窗大小渲染圖片。 如果窗口大小更大，但小於900px，它以視窗大小的50%渲染圖片。 如果更大，則以800px的大小渲染圖片。 vw單位的度量可能對您來說是新的，簡單來說，我們可以說1vw是視窗寬度的1%，因此100vw是視窗寬度的100%。 一個有用的網站可以生成srcset和逐漸縮小的圖片：https://responsivebreakpoints.com/。

在開發網站時，我根據當前頁面的 URL 動態加載圖片。 為了避免未來忘記創建圖片，我尋找了一種避免顯示常見的“損壞圖片”所顯示的“該網站已棄置”的方法。 我使用的技術如下： <img src="/{{$bookname}}.png" onerror="this.remove()" /> 提示：在 HTML 中的內聯事件處理程序中，this 表示“該元素” 當然，最理想的方法是確保圖片始終可用。但從各種角度來看，這不是最優解。但作為獨立開發人員，我知道有可能不會注意到這一點，而且在我意識到之前，可能會顯示一張損壞的圖片數個星期。 如果需要，你還可以通過以下方式顯示一個替代圖片： <img src="/{{$bookname}}.png" onerror="this.onerror=null; this.src='fallback.png'" /> 這裡的this.onerror=null是必需的，以避免當替代圖片無法找到時出現“無限循環”。

警告：此文章已經過時，可能無法反應目前的技術狀態。 自動焦點 當頁面加載時，<input autofocus="autofocus" />會將焦點放在指定的HTML元素上。 下載文件 <a href="file.pdf" download="pdf-file">下載</a>將下載指定的文件，並提供文件名。 隱藏元素 儘管將表現放在HTML中並不理想，但<div hidden="hidden"></div>有時會派上用場。 關閉（或打開）拼寫檢查 操作系統設定了拼寫檢查功能，它有時可能會妨礙使用者輸入 - <input type="text" spellcheck="true|false">有助於解決此問題。 自動建議文字輸入控件 <input list="mylist" name="mylist" > <datalist id="mylist"> <option value="CSS"> <option value="HTML"> <option value="PHP"> <option value="Jquery"> <option value="Wordpress"> </datalist>

了解HTML的歷史和基本結構 HTML是由WHATWG（Web Hypertext Application Technology Working Group）定義的標準，這是一個由開發最受歡迎的網頁瀏覽器的人組成的組織。這意味著它基本上由Google、Mozilla、Apple和Microsoft控制。 過去，W3C（World Wide Web Consortium）負責創建HTML標準的機構。 隨著W3C推向XHTML的路線不被接受，控制權非正式地從W3C轉移到了WHATWG。 如果你從未聽說過XHTML，這裡有一個簡短的故事。在2000年初，我們都相信Web的未來是XML（當真的）。所以HTML從基於SGML的作者語言轉變為XML標記語言。 這是一個很大的改變。我們必須了解並遵守更多的規則。更嚴格的規則。 最終瀏覽器供應商意識到這不是Web的正確道路，他們進行反擊，創造了現在被稱為HTML5的東西。 W3C並不真正同意放棄對HTML的控制權，多年來我們得到了2個競爭的標準，每個標準都試圖成為官方標準。最終，W3C在2019年5月28日宣布，由WHATWG發布的“真正”的HTML版本被確定為官方版本。 我提到了HTML5。讓我解釋這個小故事。我知道，到現在為止，這可能有些混亂，當涉及到很多參與者時，生活中的很多事情也是如此，這也很迷人。 我們在1993年有了HTML版本1。[這裡是原始的RFC]。 1995年出現了HTML2。 我們在1997年1月獲得了HTML3，並於1997年12月推出了HTML4。 繁忙的時代！ 20多年過去了，我們經歷了所有這些XHTML的事情，最終我們現在到達了這個“東西”HTML5，這實際上不僅僅是HTML。 HTML5現在定義了一整套技術，包括HTML，並添加了許多API和標准，如WebGL、SVG等。 在這裡需要理解的關鍵是：現在沒有HTML版本這樣的東西了。它是一個活標準。就像CSS一樣，我們稱之為3，但實際上它是一組獨立開發的模塊。就像JavaScript一樣，我們每年都有一個新版本，但這不再重要，重要的是引擎實現了哪些個別特性。 是的，我們稱之為HTML5，但HTML4來自1997年。時間對於任何事情來說都很漫長，想象一下對於Web來說有多長。 這是標準“居住”的地方：[https://html.spec.whatwg.org/multipage]。 HTML基礎 HTML是我們用來結構化Web上的內容的標記語言。 HTML以不同的方式提供給瀏覽器。 它可以由根據請求或會話數據構建它的服務器端應用程序生成，例如Rails、Laravel或Django應用程序。 或者它可以由JavaScript客戶端應用程序生成HTML。 或者，在最簡單的情況下，它可以存儲在文件中，並由Web服務器提供給瀏覽器。 讓我們深入研究這種情況，儘管實際上它可能是生成HTML的最不流行方式，但仍然有必要了解基本結構。 按照慣例，HTML文件以.html或.htm擴展名保存。 在此文件中，我們使用標籤來組織內容。 標籤封裝內容，每個標籤為其封裝的文本賦予特殊含義。 讓我們舉幾個例子。 此HTML片段使用p標籤創建一個段落： <p>A paragraph of text</p> 此HTML片段使用ul標籤創建一個項目列表，其中ul表示無序列表，li標籤表示列表項： <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> 當瀏覽器提供HTML頁面時，標籤將被解釋，瀏覽器根據定義元素的規則呈現這些元素的外觀。 其中一些規則是內建的，例如列表的呈現方式。或者鏈接以藍色、底線顯示。 其他一些規則是由帶有CSS的指令集定義的。 HTML不是表現性的。它不關心事物的外觀，而是關心事物的含義。 由瀏覽器決定事物的外觀，由構建頁面的人定義的指令和CSS語言來決定事物的外觀。 現在，我所做的這兩個例子是在頁面上下文之外使用的HTML片段。 HTML頁面結構 讓我們舉一個正確的HTML頁面的例子。 其中一個重要開始的地方是文檔類型聲明（也稱為doctype），這是一種告訴瀏覽器這是一個HTML頁面，以及我們使用的HTML版本的方式。 現代HTML使用以下doctype： <!DOCTYPE html> 然後我們有html元素，它具有開始和結束標籤： <!DOCTYPE html> <html> ... </html> 所有標籤都有開始和結束標籤，除了一些不需要結束標籤的自結束標籤，因為它們不包含任何內容。...

了解使用圖片和HTML的img標籤的基礎知識，以及如何使它們具有響應性 圖片可以使用img標籤顯示。 這個標籤接受一個src屬性，我們用它來設置圖片的來源： <img src="image.png" /> 我們可以使用各種圖片格式。最常見的是PNG、JPEG、GIF、SVG和最近的WebP格式。 HTML標準要求必須有一個alt屬性來描述圖片。這對於螢幕閱讀器和搜索引擎機器人來說都很重要： <img src="dog.png" alt="一張狗的圖片" /> 您可以設置width和height屬性來設置元素所占的空間，以便瀏覽器在完全加載之前預留空間，防止佈局變化。它接受以像素為單位的數值。 <img src="dog.png" alt="一張狗的圖片" width="300" height="200" /> 使用srcset實現響應式圖片 srcset屬性允許您根據像素密度或窗口寬度設置響應式圖片，根據您的喜好，瀏覽器可以根據需要下載所需的資源，例如在移動設備上不下載更大的圖片。 下面是一個例子，我們為4個不同的螢幕尺寸提供了4個附加圖片： <img src="dog.png" alt="一張狗的圖片" srcset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w"> 在srcset中，我們使用w單位來指示窗口寬度。 既然這樣做，我們還需要使用sizes屬性： <img src="dog.png" alt="一張狗的圖片" sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px" srcset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w"> 在這個例子中，sizes屬性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px字符串描述了圖片相對於視口的大小，使用逗號分隔的多個條件。 媒體條件max-width: 500px根據視口寬度設置圖片的大小。簡單地說，如果視窗大小小於500px，則以視窗大小的100%渲染圖片。 如果窗口大小更大，但小於900px，則以視窗大小的50%渲染圖片。 如果更大，則以800px渲染圖片。 vw單位可能對您來說是新的，簡單地說，可以將1vw視為視窗寬度的1%，因此100vw就是視窗寬度的100%。 一個有用的網站可以生成srcset和漸進式縮小的圖片是 https://responsivebreakpoints.com/。

了解圖片處理和HTML picture標籤的基礎知識，以及如何使它們具有響應性。 HTML為我們提供了picture標籤，它與img標籤的srcset屬性非常相似，但兩者之間的差異非常細微。 當你想要完全改變圖片，或者提供不同的圖片格式時，你可以使用picture。 我發現最好的用例是用於提供WebP圖片，這是一種目前還不被廣泛支援的格式。在picture標籤中，你可以指定一個圖片列表，它們會按順序使用。所以在下面的例子中，支援WebP的瀏覽器會使用第一張圖片，否則會回退到JPG圖片： <picture> <source type="image/webp" srcset="image.webp"> <img src="image.jpg" alt="一張圖片"> </picture> source標籤為圖片定義了一個（或多個）格式。img標籤則是一個後備選項，用於在瀏覽器過於老舊，不支援picture標籤的情況下。 在picture標籤內的source標籤中，你可以添加media屬性來設置媒體查詢。 下面的例子與上面使用srcset的例子類似： <picture> <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw"> <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw"> <source media="(min-width: 1000w)" srcset="dog-1000.png" sizes="800px"> <source media="(min-width: 1400w)" srcset="dog-1400.png" sizes="800px"> <img src="dog.png" alt="一張狗圖片"> </picture> 但這不是它的用例，因為正如你所看到的，這樣更冗長。 picture標籤是一個相對較新的標籤，現在已經被所有主要瀏覽器支援，除了Opera Mini和IE（所有版本）。

了解HTML表格的基本工作原理。 在Web早期，表格是构建布局的重要组成部分。 后来，表格被CSS及其布局功能取代，如今我们有强大的工具，如CSS Flexbox和CSS Grid来构建布局。现在，表格只用于构建表格！ table标签 使用table标签定义表格： <table> </table> 在表格内定义数据。我们按行来思考，这意味着我们将行添加到表格中（而不是列）。我们在行内定义列。 行 使用tr标签添加行，这是我们可以将其添加到table元素中的唯一元素： <table> <tr></tr> <tr></tr> <tr></tr> </table> 这是一个有3行的表格。 第一行可以作为表头。 列标题 表头包含列的名称，通常以粗体字显示。 想想Excel / Google Sheets文档。顶部的A-B-C-D…表头。 我们使用th标签定义表头： <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr></tr> <tr></tr> </table> 表格内容 使用td标签在其他tr元素内部定义表格的内容： <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> <td>Row 1 Column 3</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> <td>Row 2 Column 3</td> </tr> </table> 这是浏览器渲染的效果，如果您没有添加任何CSS样式：...

了解如何在HTML中使用表單和所有表單元素標籤 表單是使用Web技術構建的頁面或應用程序中與用戶交互的方式。 您可以通過一組控件與表單交互，當您提交表單時，無論是通過單擊“提交”按鈕還是以編程方式，瀏覽器都會將數據發送到服務器。 默認情況下，數據發送後會導致頁面重新加載，但使用JavaScript，您可以更改這種行為（本書不會介紹該如何更改）。 可以使用標籤來創建一個表單： <form> ... </form> 默認情況下，表單使用GET HTTP方法提交。這有其缺點，通常您希望使用POST。 您可以使用method屬性來設置表單在提交時使用POST： <form method="POST"> ... </form> 無論是使用GET還是POST提交，表單都將被提交到與其所在的URL相同的URL。 因此，如果表單位於https://flaviocopes.com/contacts頁面上，按下“提交”按鈕將對該URL發起請求。 這可能會導致什麼也不發生。 您需要在服務器端處理該請求，通常在專用URL上“監聽”這些表單提交事件。 您可以通過action參數指定URL： <form action="/new-contact" method="POST"> ... </form> 這將導致瀏覽器使用POST將表單數據提交到相同源的/new-contactURL。 如果源（協議+域名+端口）為“https://flaviocopes.com”（端口80是默認），這意味着表單數據將被發送到https://flaviocopes.com/new-contact。 我談到了數據。什麼數據？ 數據通過Web平台上提供的一組控件由用戶提供： 輸入框（單行文本） 文本區（多行文本） 選擇框（從下拉菜單中選擇一個選項） 單選按鈕（從始終可見的列表中選擇一個選項） 复选框（選擇零個、一個或多個選項） 文件上傳 等等！ 讓我們在以下表單字段概述中介紹每個表單字段。 input標籤 input字段是最常用的表單元素之一。它也是一個非常通用的元素，根據type屬性可以完全更改其行為。 默認行為是成為單行文本輸入控件： <input /> 等效於： <input type="text" /> 與後面的所有字段一樣，您需要給字段命名，以便在提交表單時將其內容發送到服務器： <input type="text" name="username" /> 使用placeholder屬性可以在字段為空時顯示顯示文本，顯示為淺灰色。這對於向用戶添加提示以指導其輸入的內容非常有用： <input type="text" name="username" placeholder="Your username" /> 電子郵件 使用type="email"將在提交之前在瀏覽器中對電子郵件進行語義正確性驗證（不保證電子郵件地址的存在）。 <input type="email" name="email" placeholder="Your email" /> 密碼 使用type="password"使輸入的每個鍵顯示為星號(*)或點，對於包含密碼的字段非常有用。 <input type="password" name="password" placeholder="Your password" /> 數字...

了解如何在HTML中使用容器標籤，並找出應該選擇哪個標籤。 容器標籤 HTML提供了一組容器標籤。這些標籤可以包含不特定的其他標籤。 我們有： article section div 他們之間的區別可能讓人困惑。 讓我們看看何時使用它們中的每一個。 article article標籤用於標識一個可以與頁面上的其他事物獨立的"事物"。 例如，首頁上的博客文章列表。 或者一個連接列表。 <div> <article> <h2>一篇博客文章</h2> <a ...>閱讀更多</a> </article> <article> <h2>另一篇博客文章</h2> <a ...>閱讀更多</a> </article> </div> 我們並不限於列表：一個article可以成為頁面上的主要元素。 <article> <h2>一篇博客文章</h2> <p>這裡是內容...</p> </article> 在article標籤內部，我們應該有一個標題(h1-h6)和… section 表示文檔的一部分。每個部分都有一個標題標籤(h1-h6)，然後是該部分的內容。 示例： <section> <h2>頁面的一個部分</h2> <p>...</p> <img ... /> </section> 將一篇長文章分拆為不同的部分是很有用的。 不應將其用作通用容器元素。div是為此而設計的。 div div是通用的容器元素： <div> ... </div> 通常在此元素上添加class或id屬性，以允許使用CSS對其進行樣式設置。 我們在任何需要容器的地方使用div，但現有的標籤不適用。 與頁面相關的標籤 nav 此標籤用於創建定義頁面導航的標記。在此內部，通常我們添加一個ul或ol列表： <nav> <ol> <li><a href="/">首頁</a></li> <li><a href="/blog">博客</a></li> </ol> </nav> aside aside標籤用於添加與主內容相關的內容片段。 例如，一個放置引文的框，或者一個側邊欄。 示例： <div> <p>一些文本...</p> <aside> <p>一個引文..</p> </aside> <p>其他文本....