eb開發是一個很依賴經驗的領域，然而這對初學者很不友好。

知識一旦脫離了應用場景就會變得晦澀、空洞，且知識本身也滿足“二八定律”，“抓大放小”是提高學習效率的關鍵。

下文向大家介紹了HTML和CSS之間的關系。內容選自《HTML 5與CSS 3核心技法（全彩）》一書。本書主線清晰，講解簡潔，并提供在線效果演示效果，非常適合小白上手！

1 HTML是骨架

很難想象一個人在桌前對著一塊砧板坐一夜，隔一會兒就噼里啪啦敲幾下，一會兒哭一會兒笑，是一種什么景象。事實上，在貓眼中我們就是這樣的。只不過我們面對的是一塊會發光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網”到底是在做什么？

獲取信息。

重點在“信息”，一種看不見摸不著卻真實存在的東西。無論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會影響它傳遞了完整的信息，以及這條信息的內在邏輯是正確的，不是嗎？HTML就是用來盛放最核心的內容——信息。

所以，在CSS和JavaScript出現之前，HTML就出現了。這是必然的，因為如果連最核心的信息都無法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無意義的。

除滿足承載核心信息的需求外，HTML還解決了一個重要的問題——將信息結構化。

試想有這樣一篇文章：

背影

我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

評論

王花花 大概，天底下的父親，老去的樣子都有些共同的特質吧

李拴蛋 我們都不愿意承認他老了

劉備備 想吃橘子...

此時上面的信息基本沒有結構，只能通過斷行或縮進盡可能讓內容更易讀，編輯時的狀態就是其最終的顯示效果。

HTML就派上了用場，見下方的代碼：

代碼

<artcle>

<h1>背影</h1>

<p>

我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<section id="comment-list">

<div class="title">評論</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>

</div>

<divclass="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我們都不愿意承認他老了</span>

</div>

<div class="comment">

<strong class="username">劉備備</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

一頭霧水沒關系，后面我們會細說每一個部分。總之這段內容給人感覺反而更繁瑣。但繁瑣是代價，重要的是現在這段信息有結構了。這就意味著計算機可以通過結構的規律將其顯示得更便于閱讀（甚至是交互）。

以下是不加任何裝飾性內容直接讓瀏覽器呈現的結果：

效果

這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯，即便是這樣也比純文字狀態易讀了許多。但注意，HTML本身沒有樣式，字體大小和粗細有變化的原因是瀏覽器的默認樣式起了作用，與HTML沒有關系。而重點就在這里，這意味著我們可以基于這個結構設計自己的頁面效果，見下方的示例。

代碼

<style>

body { font-family: 'Microsoft YaHei', sans-serif; }

#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

#comment-list .title {

color: #777; font-size: 1.1rem; padding-bottom: 5px;

border-bottom: 1px solid #ccc;

}

</style>

<artcle>

<h1>背影</h1>

<p>

我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<section id="comment-list">

<div class="title">評論</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>

</div>

<div class="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我們都不愿意承認他老了</span>

</div>

<div class="comment">

<strong class="username">劉備備</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

效果

這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化，進而讓用戶體驗有所差異（或差距）。“千變萬化”因CSS靈活、強大，“輕而易舉”因HTML簡潔、有序。結構的力量！

CSS是皮膚

一個充滿活力的生態是不滿足于現狀的。人們在適應了便利地瀏覽核心信息之后，就會想方設法改進瀏覽的體驗。比如，讓自己的博客以多欄顯示，以便在視覺上區分不同板塊；修改字體顏色，以便強調一些重要信息等。

起初的做法是——準備幾種特殊的標簽，專門用于樣式的指定。涉及布局的地方，如果沒有特殊標簽就直接用表格布局。以下沒有任何樣式的狀態（以下代碼均不需要看懂）：

代碼

<h1>標題</h1>

<p>

從前有座山，山里有個廟，廟里...

</p>

效果

此時的頁面結構下。

如果想讓標題居中，則需要給其添加元素<center>，見下方的示例。

代碼

<center>

<h1>標題</h1>

</center>

<p>

從前有座山，山里有個廟，廟里...

</p>

效果

此時的頁面結構如下。

居中標題的目的確實達到了，但是有一個很大的問題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行，但如果是復雜的頁面，這種做法的工作量就是噩夢，因為每個地方都得修改，無論是對齊方式、顏色、背景色，還是大的布局都必須通過修改結構才能完成。這種做法的最大問題是可維護性太差，很多時候為了一種樣式要修改很多不必要的結構，枯燥、重復、削足適履的工作太多，基本上寫一次就再也不想改了。

這個問題亟待解決，而且解決方案還要兼容現有規則。現有規則是什么？HTML的語法及結構。不過既然HTML已經有結構了，為什么不好好利用呢？

以前面示例中的文章頁面為例，如果我們想更改標題，是否可以先統一選中所有標題，然后說明想要什么樣式規則呢？就像下面這樣：

所有h1 元素聽著

對齊方式 居中。

字體顏色 黑色。

如果想將所有段落字體放大，則像下面這樣：

所有p 元素聽著

字體大小 150%。

這種方式的確很高效！同時這個規則與HTML語法無關，相當于另一種語言。這樣結構和樣式就不會互相影響，結構是結構，樣式是樣式，兩者隔離開了。如果想修改樣式，則完全不需要勞HTML大駕，只需要修改樣式文件即可，更便于管理和維護。這就是CSS，只不過其語法更簡潔。

下面以修改標題對齊方式為例：

h1 { /* 所有h1 元素聽著 */

text-align: center; /* 對齊方式 居中 */

}

通過批量選擇和處理，極大地提高了開發效率，降低了維護成本，四兩撥千斤。

（完）

圖書推薦

《HTML 5與CSS 3核心技法（全彩）》

表嚴肅 著

本書能夠為自學Web開發初學者建立一套HTML與CSS的核心知識框架，同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。

想從事前端開發的，可將本書作為學習的起點。正從事前端開發的，可將本書作為速查的手冊。

么是HTML / HTM文件？他們相差一個字母有什么區別嗎，如何查看或編輯源代碼以及如何轉換成其他格式，例如DOCX，PDF，JPG 等，針對這些問題編程獅W3Cschool整理以下資料希望能對你有所幫助：

什么是HTM或HTML文件？

HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。

由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本引用（例如本文中的配圖）。

HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。

HTM與HTML的區別

HTM 與 HTML 沒有本質意義的區別，只是為了滿足 DOS 僅能識別 8+3 的文件名而已，因為一些老的系統 (win32) 不能識別四位文件名，所以某些網頁服務器要求 index.html 最后一個 l 不能省略。MSIE 能自動識別和打開這些文件，但編寫網頁地址的時候必須是完全對應的，也就是說 index.htm 和 index.html 是兩個不同的文件，對應著不同的地址。值得一提的是 UNIX 系統中對大小寫敏感，不吻合的話就可能報沒有文件或者找不到文件。

如何打開HTM或HTML文件？

任何 Web 瀏覽器，例如 Edge，Firefox，Chrome，Opera，IE，360 安全瀏覽器等，都可以打開并正確顯示 HTM 和 HTML 文件。換句話說，在瀏覽器中打開這些文件并“解碼（decode）” HTM 或 HTML 文件使其能正確顯示。

現在有很多簡化編輯和創建 HTM / HTML 文件的工具。一些著名的免費 HTML 編輯器包括 Eclipse ，Komodo Edit 和 Bluefish 。另一個流行的具有許多高級功能的 HTM / HTML 編輯器是 Adobe Dreamweaver ，不過它是收費的。

雖然 Windows 系統自帶的記事本等簡單的文本編輯器的功能不如專用的 HTM 編輯器那么豐富，但是對 HTM 或 HTML 文件進行簡單編輯修改還是可以的。不過，W3Cschool還是建議大家使用專用的編輯器，如 WebStorm、VS Code 等，它具更多專業功能。

這是一個非常簡單的 HTML 頁面以文本形式顯示的示例：

源碼：

<!doctype html>
<html>

    
<head>
<meta charset="utf-8">
<title>什么是HTM或HTML文件？ - 編程獅(w3cschool.cn)</title>
</head>


<body>
    <h1>什么是HTM或HTML文件？</h1>
    <p>HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。</p>
    <p>由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本*引用*（例如本文中的配圖）。</p>
    <p>HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。</p>   
</body>

    
</html>

當 Web 瀏覽器呈現信息時，HTML 文件的源代碼被“轉換”為真實的網頁（盡管源代碼已很精簡了）。

如何轉換HTML和HTM文件？

HTM 文件以特定的語法（規則）構成，以使其中的代碼和文本在瀏覽器中打開時能夠正確顯示。因此，將 HTM / HTML 文件轉換為另一種格式可能會丟失頁面上的所有功能。

如果你想要做的是將一個 HTM / HTML 文件轉換為方便離線查看的文件，這時圖片或 PDF 格式會方便很多。

在 Chrome 中，鼠標右鍵單擊網頁，出現的選項菜單中進入 “打印(P)...”(快捷鍵：CTRL + P) ，在打印選項中選擇另存為 PDF，以將窗口中的頁面轉換為 PDF 文件。Chrome 瀏覽器的擴展功能也稱為“全屏截屏”，可將 Chrome 瀏覽器中所有打開的 HTM / HTML 文件轉換為 PNG 文件。

其他瀏覽器具有類似的功能，例如 Firefox 的 “另存為 PDF” 加載項。

您也可以使用專門用于 HTM / HTML 進行圖像文件轉換的網站，例如iWeb2Shot 或Web-capture 。

一個免費的文件轉換器可以用來轉換并保存 HTM / HTML 文件到您的計算機。如 FileZigZag 是一個免費的文檔轉換器網站，可將 HTM 轉換為RTF，EPS，CSV，PDF 和許多其他格式。

HTM / HTML 文件不能轉換為文本文件格式以外的任何格式。例如，HTML 文件永遠不能轉換為 MP3 音頻文件。

文件打不開？

HTML / HTM 文件應該很容易打開，因為它們只是任何 Web 瀏覽器都可以查看的文本文件。如果您的文件沒有從上面建議的任何程序打開，則很有可能正在打開的這個文件并非超文本標記語言文件。

某些文件格式使用的文件擴展名與 HTML / HTM 非常相似，但實際上并非相同。一個主要的示例是用于壓縮 HTML 電子書文件的 HTMLZ 文件擴展名。有 HTML 文件在內的 HTMLZ 文件，但整個包的格式為 ZIP，不會在 Web 瀏覽器或文本編輯器打開。

在此示例中，您需要特定的 HTMLZ 文件查看器，例如Caliber 。或者，由于此文件格式實際上是存檔，因此您可以使用 7-Zip 之類的文件解壓縮器將其打開，然后您可以使用網絡瀏覽器或上述任何其他 HTML 查看器/編輯器打開任何單獨的 HTML 文件。

TMLANGUAGE 是另一個可能與 HTML / HTM 文件混淆的文件擴展名。這些實際上是TextMate 用于 macOS 的 TextMate 語言語法文件。

以上就是編程獅W3Cschool為你整理的關于《什么是HTM或HTML文件？如何打開、編輯和轉換HTM和HTML文件？》的全部內容，現希望可以幫到你~

TML 或超文本標記語言 允許 Web 用戶使用元素、標簽和屬性創建和構造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因為它不能創建動態功能。

HTML有很多用例，即：

1. 網頁開發。開發人員使用 HTML 代碼來設計瀏覽器如何顯示網頁元素，例如文本、超鏈接和媒體文件。
2. 互聯網導航。由于 HTML 被大量用于嵌入超鏈接，因此用戶可以輕松地在相關頁面和網站之間導航和插入鏈接。
3. 網絡文檔。HTML 使組織和格式化文檔成為可能，類似于 Microsoft Word。
4. 還值得注意的是，HTML 現在被視為官方 Web 標準。萬維網聯盟 (W3C)維護和開發 HTML 規范，同時提供定期更新。

本文將介紹 HTML 的基礎知識，包括它的工作原理、優缺點以及它與 CSS 和 JavaScript 的關系。

什么是 HTML？

HTML（代表超文本標記語言）是構成大多數網頁和在線應用程序的計算機語言。超文本是用于引用其他文本片段的文本，而標記語言是告訴 Web 服務器文檔的樣式和結構的一系列標記。

HTML 是如何工作的

html文件

平均每個網站包含幾個不同的信息 HTML 頁面。例如，主頁、關于頁面和聯系頁面都將具有單獨的 HTML 文件。

HTML 文檔是以 .html 或 .htm 擴展名結尾的文件。Web 瀏覽器讀取 HTML 文件并呈現其內容，以便互聯網用戶可以查看它。

html元素的三個部分

所有 HTML 頁面都有一系列 HTML 元素，由一組標簽和屬性組成。HTML 元素是網頁的構建塊。標簽告訴 Web 瀏覽器元素在哪里開始和結束，而屬性描述元素的特征。

元素的三個主要部分是：

• 開始標簽 - 用于說明元素開始生效的位置。標簽用左尖括號和右尖括號包裹。例如，使用開始標簽 <p> 創建一個段落。
• 內容——這是其他用戶看到的輸出。
• 結束標簽 - 與開始標簽相同，但在元素名稱前有一個正斜杠。例如，</p> 結束一個段落。

這三個部分的組合將創建一個 HTML 元素：

<p>這是在HTML中添加段落的方法。</p>

HTML 元素的另一個關鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標識用戶想要添加的附加信息，并且屬性值給出進一步的說明。

例如，添加紫色和 font-family verdana 的樣式元素將如下所示：

< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >

另一個屬性，HTML 類，對于開發和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如，我們將對標題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現相同的樣式，請在每個開始標記后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多數元素都有一個開始標簽和一個結束標簽，但有些元素不需要結束標簽即可工作，例如空元素。這些元素不使用結束標簽，因為它們沒有內容：

< img src= "/" alt= "圖像" >

這個圖像標簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內容，也沒有結束標簽。

最后，每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：

< !DOCTYPE html >

最常用的 HTML 標簽和 HTML 元素

目前，有 142 個 HTML 標簽可以用于創建各種元素。盡管現代瀏覽器不再支持其中一些標簽，但學習所有可用的不同元素仍然是有益的。

第二節將討論最常用的 HTML 標簽和兩個主要元素——塊級元素和內聯元素。

塊級元素

塊級元素占據頁面的整個寬度。它總是在文檔中開始一個新行。例如，標題元素將位于與段落元素不同的行中。

每個 HTML 頁面都使用這三個標簽：

• <html>標簽是定義整個 HTML 文檔的根元素。
• <head> 標簽保存頁面標題和字符集等元信息。
• <body>標簽包含了頁面上出現的所有內容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的塊級標簽包括：

• 標題標簽 - 這些范圍從 <h1> 到 <h6>，其中標題 h1 的大小最大，當它們向上移動到 h6 時變得越來越小。
• 段落標簽——全部使用 <p> 標簽括起來。
• 列表標簽——有不同的變體。<ol> 標簽用于有序列表，<ul> 用于無序列表。然后，使用 <li> 標記將各個列表項括起來。

內聯元素

內聯元素格式化塊級元素的內部內容，例如添加鏈接和強調的字符串。內聯元素最常用于在不破壞內容流的情況下格式化文本。

例如，一個 <strong> 標簽會以粗體呈現一個元素，而 <em> 標簽會以斜體顯示它。超鏈接也是使用 <a> 標記和 href 屬性來指示鏈接目標的內聯元素：

<a href="https://www.icodingdeu.com/" >點我！</a> 

HTML 演變——HTML 和 HTML5 有什么區別？

HTML 的第一個版本由 18 個標簽組成。從那時起，每個新版本都帶有添加到標記中的新標簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。

HTML 和 HTML5的主要區別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標簽，可以清楚地描述內容，例如 <article>、<header> 和 <footer>。

HTML 的優點和缺點

就像任何其他計算機語言一樣，HTML 有其優點和局限性。以下是 HTML 的優缺點：

優點：

• 初學者友好: HTML 具有干凈且一致的標記，以及較淺的學習曲線。
• 支持領域廣：該語言被廣泛使用，擁有大量資源和龐大的社區。
• 無障礙：它是開源的并且完全免費。HTML 在所有 Web 瀏覽器中本機運行。
• 靈活的：HTML很容易與PHP和 Node.js等后端語言集成。

就像任何其他計算機語言一樣，HTML 有其優點和局限性。以下是 HTML 的優缺點：

缺點：

• 靜止的 該語言主要用于靜態網頁。對于動態功能，您可能需要使用 JavaScript 或 PHP 等后端語言。
• 單獨的 HTML 頁面 用戶必須為 HTML 創建單獨的網頁，即使元素相同。
• 瀏覽器兼容性 一些瀏覽器采用新特性的速度很慢。有時較舊的瀏覽器并不總是呈現較新的標簽。

HTML、CSS 和 Javascript 是如何相關的

HTML 用于添加文本元素并創建內容結構。然而，僅僅建立一個專業的和完全響應的網站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創建絕大多數網站內容。

• CSS 負責樣式，例如背景、顏色、布局、間距和動畫。
• JavaScript 添加了動態功能，例如滑塊、彈出窗口和照片庫。這三種語言是前端開發的基礎。

結論

HTML 是 Internet 上的主要標記語言。每個 HTML 頁面都有一系列創建網頁或應用程序內容結構的元素。

HTML 是一種對初學者友好的語言，有很多支持，主要用于靜態網站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我們還向您展示了一些在線教學課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。

如果您有任何其他喜歡的資源來學習 HTML，請在評論部分告訴我們。