為什麼你應該學習編碼（一點點）：HTML 和 CSS 簡介

已發表: 2021-08-15
注意：在對商店代碼進行任何更改之前，請務必備份您的站點。

開設在線商店從未如此簡單。 借助 Shopify 等平台，您可以在幾個小時內購買主題、上傳產品並銷售給您的客戶！ 進入門檻很低，幾乎任何人都可以做到。

雖然上手很容易，但也很容易將這種簡單性視為理所當然。 最終，您會想要在您的商店中添加或更改某些內容，並且您會意識到您的主題不支持它。 開發人員並不便宜，你最不想做的就是為了你自己可以做的事情而付錢給別人。

如果我告訴您，您可以預先花一點時間來學習網站工作原理的基礎知識，並且以後可以節省一些時間和金錢，該怎麼辦？

到本文結束時，您應該了解 HTML 和 CSS 的基礎知識，並且知道足以開始在您自己的商店中進行修補。

所以花幾分鐘準備好，讓我們開始吧！

什麼是 HTML 和 CSS？

HTML 代表超文本標記語言。 它是最古老和最重要的網絡基礎語言之一。 它負責在這個頁面上構建和呈現內容！

CSS 代表級聯樣式表。 它負責提供 HTML 的樣式和格式。

總之，這些是任何網站的必要構建塊。 在本文中，我將向您介紹基礎知識，並向您展示如何編碼和設計您的第一個網頁。

由於我是 Bill Murray 的忠實粉絲（他不是），我們將在網絡上為 Bill 創建我們自己的神殿。

首先，讓我們深入研究 HTML 和 CSS，真正全面了解它們的力量和能力。

網站剖析

通過將 HTML 和 CSS 與房屋的結構部分進行比較，我們可以輕鬆理解它們是如何協同工作的。

每棟房子的牆壁後面都有一個負責其結構的框架。 把 HTML 想像成一個房屋框架。 它負責網站的結構。

堅持我們的房子類比，CSS 負責諸如油漆顏色、餐廳的尺寸、木地板的顏色以及餐桌的形狀和風格之類的事情。

讓我們看看一些基本的 HTML 標記並逐行瀏覽它。

HTML 標記示例

文檔類型

<!DOCTYPE html>標籤幫助瀏覽器知道我們要使用的文檔類型是 HTML。

頭

<head>標籤內是我們存儲文檔所有元數據的地方。 這些數據包括標題、樣式 (CSS)、描述等內容。 此數據不會顯示給最終用戶，但瀏覽器會使用它來確定文檔應具有的標題或在向最終用戶顯示時應使用的樣式。

廣告

在HTML 頁面的<head>中找到的其他一些元素可能包括作者信息、頁面描述或指向用於收藏夾圖標（瀏覽器選項卡中的小圖標）的圖像的鏈接。

網站圖標示例

身體

<body>標籤包含網站的所有標記（代碼）。 這是最終用戶在查看我們的網站時會看到的唯一代碼。

建立網站所需的工具

要開始編寫 HTML，您可能認為需要一些花哨的、昂貴的軟件，但實際上並不需要。 事實上，你已經擁有了你需要的東西。

如果您使用的是 PC，請打開 NotePad 程序。 如果您使用的是 Apple Mac，請打開 TextEdit。

現在你已經打開了你的文本編輯程序，跟著我一起來擴展上面的基本 HTML 標記。 複製（Windows 上的 Ctrl + C / Mac 上的 Cmd + C）並粘貼（Windows 上的 Ctrl + p / Mac 上的 Cmd + P）以下代碼到您的文本編輯器中。

<!DOCTYPE html>
<html>
<頭>
<title>頁面標題</title>
</頭>
<身體>
<h1>世界你好！</h1>
<p>這是我們的第一段。</p>
</正文>
</html>

將此文件保存在您的桌面上並在您的 Web 瀏覽器中打開它。 您現在應該會看到您的代碼被瀏覽器翻譯或呈現，它應該如下所示：

代碼呈現示例

標題元素 (<h1>)

<h1>標籤用於引起對某些文本的注意和定義。 在本例中，我們需要文本“Hello World！” 比後面的文字更大更突出。

開箱即用的 HTML 有六個不同的標題標籤可供您使用：h1、h2、h3、h4、h5 和 h6。

HTML 標題示例
每走一步，字體大小就會變小； H1 最大，H6 最小。 默認情況下，它們會有一些邊距（或它們周圍的間距）以將它們與頁面上的其他元素分開並為用戶提供視覺層次結構。

花一點時間嘗試更改標題、標題和/或段落標籤。 進行更改後，保存它，然後刷新瀏覽器。 恭喜，您剛剛編輯了第一次 HTML！

不過看起來很無聊，對吧？

讓我們為我們的頁面添加一些樣式並了解更多關於 CSS 的真正力量。

為了給這些 HTML 元素添加我們自己的樣式，我們需要在文檔的<head>中添加一個<style>標籤。

這個標籤包含了我們所有的 CSS。 將<style>標籤內的內容視為瀏覽器的樣式指南。

在新行的<title>標籤下，添加如下樣式標籤：

<title>頁面標題</title>

廣告

<樣式>

 </style>

在 style 標籤內，我們可以輸入我們所有的聲明。 CSS 聲明由一個屬性和一個值組成。

CSS 聲明

讓我們將<h1>的顏色與文本的其餘部分不同，因為它是最重要的，我們希望它脫穎而出。 在<style>標籤之間添加以下內容，保存文件，然後再次刷新瀏覽器。

<樣式>
h1 { 顏色：藍色； }
</style>

您現在應該希望看到看起來像這樣的東西！ 你會注意到我們的“Hello World!” 文字現在是藍色的。 很簡單吧？

對 H-Tag 的 CSS 修改

在那裡，你已經做到了！ 您已經成功地使用 CSS 更改了 HTML 元素的樣式。 我們剛才玩的高興嗎？

將圖像添加到我們的頁面

您可以在頁面上包含許多其他元素，但任何網站上最突出的元素之一就是全能圖像。 我們可以通過包含像這樣標記：

<img src= "https://www.fillmurray.com/400/500" >

注意：為了演示，我使用了一個名為 www.fillmurray.com 的圖像佔位符服務。 如果您願意，可以在本地計算機上使用圖像。

從網站抓取圖片的另一種（專業提示）方式：在您想要使用的網站上找到一張圖片，然後右鍵單擊它。 單擊複製圖像地址，該圖像的 URL 將在您的剪貼板中。 根據您的瀏覽器，措辭可能略有不同。 我正在使用谷歌瀏覽器。 我不建議過度使用盜鏈，但對於這個演示來說，這沒什麼大不了的。

如何從網站保存圖像

複製並粘貼此圖像元素並將其放在您的段落標籤下，這樣您的完整代碼塊看起來像我的：

<!DOCTYPE html>
 <html>
 <頭>
 <title>頁面標題</title>
 <樣式>
 h1 {顏色：藍色；}
 </style>
 </頭>
 <身體>
 <h1>世界你好！ </h1>
 <p>這是我們的第一段。 </p>
 <img src= “ https://www.fillmurray.com/400/500 ” alt=”比爾默里的圖像” >
 </正文>
 </html>

保存您的文件並重新加載瀏覽器，您現在應該會看到如下內容：

如何開始編寫您的第一個網站

如果您正在註意，您會注意到<img>標籤上的另一個屬性， alt=”Bill Murray 的圖像” 。 由於瀏覽器解密代碼並且無法像您和我一樣看到渲染的輸出，因此它需要某種方式來了解它所顯示內容的上下文。

廣告

通過向我們的圖像添加 ALT 標籤（替代文本），我們可以告訴瀏覽器我們圖像的主題是關於什麼的。

這對於 SEO（搜索引擎優化）也非常重要，更重要的是，使用屏幕閱讀器為盲人用戶朗讀本文。

但是鏈接呢？

不覆蓋鏈接的 HTML/CSS 介紹是不完整的！ 當您構建網站時，您會希望能夠鏈接到外部資源或您自己網站中的其他內部頁面。

我們來談談錨元素。 錨元素的真正魔力實際上是它的 href 屬性。 讓我們通過添加到 Bill 的 Wikipedia 頁面的鏈接來演示錨標記的結構。

<a href="www.google.com" >閱讀他的維基百科條目</a>

這段代碼告訴瀏覽器，當用戶點擊文本：“閱讀他的維基百科條目”時，將他們帶到 www.google.com。

讓我們在標題元素下添加這段代碼，這樣我們的代碼塊現在看起來像這樣：

<!DOCTYPE html>
 <html>
 <頭>
 <title>頁面標題</title>
 <樣式>
 h1 {顏色：藍色；}
 </style>
 </頭>
 <身體>
 <h1>世界你好！ </h1>
 <a href= "https://en.wikipedia.org/wiki/Bill_Murray">閱讀他的維基百科條目</A>
 <p>這是我們的第一段。 </p>
 <img src= “https://www.fillmurray.com/400/500” alt= “比爾默里的形象” >
 </正文>
 </html>

點擊保存並刷新瀏覽器，希望你的看起來像我的。

編碼基礎

跨越終點線

我繼續向比爾默里致敬，這是我的最終結果。 我將在下面介紹一些添加的樣式。

鼓聲請...

HTML 和 CSS 的基礎

現在，您可以看到這不是什麼值得大寫的東西，但這是設計使然。 這是冰山的一角，當談到如何頁面可能看起來還是樣式。 我想讓事情保持簡單，以便您了解以下每種樣式方法的作用。

廣告

讓我們跳到我必須添加的小 CSS 才能讓我們走到這一步。

造型身體：

首先，在頁面正文中，我添加了：

身體 {
 背景色：#eee;
 字體系列：Helvetica、Arial、sans-serif；
 文本對齊：居中；
 邊距：25px；
 }

背景顏色
我使用十六進制顏色值#eee 將頁面的背景顏色設置為非常淺的灰色。 您可以在 MOZ 上了解有關這些的更多信息並查看一些示例。

字體系列
我想更改 Times New Roman 瀏覽器使用的默認字體。 為此，我選擇 Helvetica 作為我的第一選擇（如果用戶在他們的計算機上安裝了該字體），Arial 作為我的第二選擇（如果用戶沒有 Helvetica，它將默認為 Arial），並作為最終備份，一種基本的無襯線字體。

文本對齊
我選擇將頁面上的所有文本居中對齊。 對於左和右等值還有其他幾個選項，但我認為它看起來最好居中。

利潤
我在文檔正文中添加了一點邊距，以給它一些喘息的空間。

造型我們的形象：

最後給Bill的美顏造型，呃，我是說形像元素

圖像{
 邊框：10px 實心 #41bcd6；
 框陰影：2px 5px 5px #999;
 填充：10px；
 邊框半徑：5px；
 }

我沒有做太多事情，但想讓比爾的照片在頁面上有一些存在感。

邊境
我在圖像周圍添加了一個 10 像素的邊框。 #41bcd6 是另一個十六進制顏色值，它呈現淺藍色（我的秘密潛意識 Steve Zissou 顏色主題的一部分）。

盒子陰影
我想給圖像一個 3D 的感覺，所以我給它添加了一個光影。 box-shadow 屬性接受決定陰影長度、模糊度和顏色的像素和顏色值。 要了解有關 box-shadow 聲明的更多信息，Moz 在此處為您詳細介紹。

填充
為了使圖像看起來更像一個相框，我在它和邊框之間添加了 10px 的填充。

邊界半徑
只是為了說明 CSS 的一項更酷的功能，我使用 border-radius 使圖像的角變圓。 當我開始構建網站時，沒有任何類似的東西存在，在網絡上製作圓角實際上非常具有挑戰性。 從那時起，我們已經走了很長一段路，現在很簡單。 它接受一個像 px 或 ems 這樣的值，在這裡我選擇通過將值設置為 5px 來對其進行四捨五入以引起注意。

結論

在整篇文章中，我們共同學習了網站的基本結構。 我們還學習了一些簡單的 HTML 和 CSS，它們最終變成了一個非常驚人的一頁小作品，向一代人中最偉大的演員之一致敬

不過，嚴肅地說，我希望您能夠跟隨我並建立您的第一個基本網站。 現在，如果 Bill Murray 不是您最喜歡的演員，我挑戰您編輯此代碼以展示您最喜歡的演員、樂隊或任何您喜歡的東西。

如果您需要隨時參考此代碼，請返回閱讀本文，或者為方便起見，我已將其放在 CodePen 上。

有這麼多有趣的事情，你可以只用HTML + CSS做。 這裡有一些很好的資源可以幫助你擴展你的學習：

廣告

  • Code Academy：100% 免費的 HTML/CSS 課程介紹
  • CSS Zen Garden：網絡上第一個真正讓我“點擊”的例子，幫助我意識到你可以擁有 100 個不同外觀的網站，它們都使用相同的 HTML 標記
  • CSS 動畫
  • 僅使用 CSS 的蒙娜麗莎
  • 僅使用 CSS 的動畫哈士奇狗
  • CodePen：CodePen 是一個在線工具，用於現場測試和展示您的 HTML、CSS 和 JavaScript 代碼

我們在本文中只觸及了皮毛，所以我鼓勵您閱讀更多內容，參加一些在線課程，並不斷提升您的知識！