HTML介紹

了解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標籤

發現您可以在網頁上使用的各種HTML標籤來顯示文本 p 標籤 此標籤定義了一個文本段落。 <p>一些文本</p> 這是一個塊元素。 在其中,我們可以添加任何內聯元素,例如 span 或 a。 我們不能添加塊元素。 我們不能將 p 元素嵌套到另一個其中。 默認情況下,瀏覽器會對段落進行上下邊距設置。在Chrome中為 16px,但實際值可能各瀏覽器不同。 這使得兩個連續的段落之間產生間距,模擬我們印刷文本中的“段落”。 span 標籤 這是內聯標籤,可用於在段落中創建一個可通過CSS選取的部分: <p>文本的一部分 <span>這裡還有一部分</span></p> br 標籤 此標籤表示換行。它是內聯元素,不需要關閉標籤。 我們使用它在 p 標籤中換行,而不創建新的段落。 與創建新段落相比,它不會添加額外的間距。 <p>一些文本<br>換行</p> 標題標籤 HTML提供了6個標題標籤。從最重要到最不重要,我們有 h1,h2,h3,h4,h5,h6。 通常,一個頁面只會有一個 h1 元素作為頁面標題。然後,根據頁面內容,可能會有一個或多個 h2 元素。 標題,特別是標題的組織,對於SEO也很重要,搜索引擎以各種方式使用它們。 瀏覽器默認情況下會呈現較大的 h1 標籤,並根據 h 數字的增加使元素的大小變小: 所有標題都是塊元素。它們不能包含其他元素,只能包含文本。 strong 標籤 此標籤用於將其中的文本標記為粗體。這是非常重要的,它不是視覺提示,而是語義提示。根據使用的媒介不同,它的解釋也會有所不同。 瀏覽器默認情況下將此標籤中的文本設置為粗體。 em 標籤 此標籤用於將其中的文本標記為強調。與 strong 一樣,它不是視覺提示,而是語義提示。 瀏覽器默認情况下將此標籤中的文本設置為斜體。 引用 blockquote HTML標籤可用於在文本中插入引用。 瀏覽器默認情況下將 blockquote 元素應用了一個邊距。Chrome應用了左右邊距為40px,上下邊距為10px。 q HTML標籤用於內嵌引用。 水平線 雖然不是基於文本,但 hr 標籤經常在頁面內部使用。它表示水平分隔線並在頁面中添加一條水平線。 有助於區分頁面中的各個部分。 代碼塊 code 標籤對於顯示代碼特別有用,因為瀏覽器給它一個等寬字體。...