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文件？》的全部內容，現希望可以幫到你~