[譯]HTML&CSS Lesson1: 構建第一張頁面

amhuang發表於2019-03-01
HTMLCSS

可以的話，請想象一下網際網路沒有發明之前的日子。網站還不存在，紙質的書本是我們主要的資訊來源，而在書本中查詢我們想要的資料會耗費相當多的精力和時間。
而如今，你開啟個瀏覽器用搜尋引擎搜尋，任何你能想到的資訊都會呈現在你的指間。並且有可能某人在某地建立了一個跟你心中實際要搜尋內容一致的網站。
在接下來的一系列課程中， 我將引導你使用HTML和CSS構建一個屬於你的網站。但在開始構站之旅前，我們需要重點的瞭解兩個語言之間的差異，它們的語法和一些常見的術語。

什麼是HTML&CSS

HTML(HyperText Markup Language) 超文字標記語言，通過標記告訴瀏覽器如果去解析文字資訊，比如解讀為標題、 段落、圖片等。
CSS(Cascading Style Sheets)層疊樣式表，這是一種描述性語言，通過樣式來修飾頁面，比如設定文字的字型、大小、顏色等。
這兩種語言是相對獨立的，我們在編寫它們時也應該保持這種原則。CSS不應嵌入HTML文字中，反之亦然。
一般來說， HTML代表內容，而CSS代表內容的外觀。

HTML術語

在開始接觸HTML時，你可能會遇到新的陌生的術語。別擔心，隨著接下來的學習你會對它們越來越熟悉。首先你需要了解三個常見的術語：元素，標籤和屬性。

元素(Elements)

元素是定義頁面中物件的結構和內容的指示符。一些最常用的元素例如多級標題(<h1>...<h6>)、段落(<p>),還有<a>,<div>,<span>,<strong> 和<em>等等。
元素是使用小於號<和大於號>包裹元素名來標示。如下所示：

<a>複製程式碼

標籤(Tags)

使用小於號<和大於號>包裹元素名形成標籤，標籤通常都是成對出現的，由開始標籤和結束標籤組成。
一個開始標籤表示一個元素的開始,它由 <+元素名+ >組成，例如<div>。
一個結束標籤表示元素的結束,它由小於號<+ /+元素名+ >組成 例如</div>。
在開始標籤和結束標籤中的內容為那個元素的內容。例如一個連結，擁有開始標籤<a>和結束標籤</a>，兩個標籤之間的內容為連結的內容，如下所示：

<a>...</a>複製程式碼

屬性(Attributes)

屬性用來為元素新增額外資訊。最常用的屬性例如id屬性，用來標識元素；class屬性將元素進行分類；src屬性指向嵌入內容的來源。href屬性提供對連結資源的引用。
屬性定義在開始標籤的標籤名之後，屬性通常包含一個屬性名和一個屬性值，格式是屬性名=值。如下所示：

<a href="http://shayhowe.com/">Shay Howe</a>複製程式碼

[譯]HTML&CSS Lesson1: 構建第一張頁面

示例中，文字Shay Howe會展現在頁面上，點選 Shay Howe 使用者將訪問 shayhowe.com/。
超連結元素a通過用開始標籤<a>和結束標籤</a>包裹文字內容來宣告。 超連結屬性為href="http://shayhowe.com/"。

現在你已經知道了什麼是HTML元素(elements),標籤(tags)和屬性(attributes)。讓我們一起來完成我們的第一張頁面，如果在這裡遇到了一些新的知識，別擔心，我們會將它們一一破解。

設定文件結構

HTML文件使用.html為副檔名。要開始編寫HTML，你只需要使用純文字編輯器， 請不要使用 Microsoft Word 和 Pages，它們屬於富文字編輯器。 當然你也可以使用目前很流行的編輯器 Dreamweaver、Sublime Text。 或者選擇免費的編輯軟體 Windows中的Notepad++ 和 Mac 中的 TextWrangler 。

所有的HTML文件都有一個必需的結構，由以下元素構成：<!DOCTYPE html>，<html>，head 和 <body>

文件型別宣告(<!DOCTYPE html>)，告訴瀏覽器使用的HTML版本，寫在HTML文件最開始。由於我們使用的是最新版本的HTML，所以我們的宣告只需寫<!DOCTYPE html>，非常簡便。文件型別宣告之後，<html>元素表示文件開始(根元素)。
<html>元素內，<head>為其第一個子元素，它包含了文件標題(顯示在瀏覽器視窗標題欄上)，外部檔案連結以及其他有用的後設資料。<head>中的內容不會顯示在網頁上。
所有可視的內容都包含在<body>元素中。典型HTML的結構如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>複製程式碼

[譯]HTML&CSS Lesson1: 構建第一張頁面

上述示例中，先宣告瞭文件型別<!DOCTYPE html>，跟著是<html>元素。<html>元素中包含了<head>和<body>，<head>中宣告瞭頁面字元編碼<meta charset="utf-8">和頁面標題<title>。<body>中包含了一個標題元素<h1>和一個段落元素<p>。<h1>和<p>巢狀在<body>內，它們頁面中都是可視的。
當時我們進行元素巢狀的時候，注意子元素的縮排，可以使程式碼結構看起來更清晰，更易辨識。上述示例中，<head>和<body>都進行了縮排，他們內部巢狀的元素也都進行了縮排。

自閉合元素

在前面的例子中，可以看到<meta>沒有結束標籤。放輕鬆，這是故意的。不是所有的元素都由開始標籤和閉合標籤組成。一些元素只是簡單的從單標籤的屬性中獲取值或行為。<meta>
元素就是其中之一， charset屬性設定了它需要處理的內容。以下是一些常見的自閉合元素：

  • <br>
  • <img>
  • <meta>
  • <input>
  • <hr>
  • <link>
  • <source>

再提一句， 在html文件中使用<!DOCTYPE html>，<html>，<head>，<body>，是普遍行為。我們可以儲存這個結構，因為我們建新頁面的時候會經常使用到它。

程式碼檢驗

不管我們書寫程式碼時多麼仔細，還是會有一些小錯誤。幸運的是，我們有驗證工具幫助我們驗證。W3C構建了 HTML和CSS驗證工具幫助檢查程式碼錯誤。 程式碼驗證不僅可以幫助程式碼在所有瀏覽器中都能正確渲染，也助於教會我們書寫程式碼的最佳實踐。

實踐

作為網頁設計師和前端工程師， 我們奢侈的參加一系列大型討論會來提升我們的能力。現在我們將自己組織一個樣式討論會，併為接下來的課程建立一個網站，開始！

  • 首先我們開啟編輯器，建立一個名為index.html的檔案，我在本地桌面建立了一個“styles-
    conference”資料夾，並將檔案儲存在其中。
  • 在index.html中新增一個文件結構，包含<!DOCTYPE html>，<html>，<head>和<body>元素
    <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>複製程式碼
  • 在<head>元素中新增<meta>和<title>元素。<meta>中包含了charset屬性和值， <title>中設定標題名為“Styles Conference”
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
</head>複製程式碼
  • 在<body>元素中新增<h1>和<p>元素,在<h1>中還是新增內容“Styles Conference”，<p>中輸入一段話簡單的介紹我們的討論會。
<body>
 <h1>Styles Conference</h1>
 <p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
</body>複製程式碼

[譯]HTML&CSS Lesson1: 構建第一張頁面

接下來我們切換頻道，從HTML轉換到CSS上來。 再提一次，HTML設定頁面的結構和內容， 而css定義頁面的樣式和外觀。

CSS術語

除了HTML術語， CSS也有一些常用術語你需要熟悉。這些術語包括 選擇器，屬性，值。和HTML術語一樣，你使用的越多，那麼你會對他們越熟悉。

選擇器(Selectors)

當元素被新增到頁面中，就可以使用CSS控制其樣式。一個選擇器可以精確的為選中的元素新增樣式(例如顏色color， 尺寸size，位置position)；選擇器可以通過不同限定片語合起來選中唯一元素，這取決於我們的需求。例如，我們希望選中頁面中的每個段落(<p>)或者我們想要選中頁面中的某一個段落。
選擇器通常使用屬性值，例如id或class的值 或者使用元素名，例如<h1>和<p>
在CSS中，選擇器後跟著大括號{} ，其中包含了應用於選中元素的樣式。下面示例是選中所有的<p>元素：

p { ... }複製程式碼

屬性(Properties)

一旦元素被選中，那麼所寫的屬性就會被應用在這個元素上，屬性名寫在{}中，後面跟著一個冒號:，有很多可以設定的屬性例如：background, color, font-size, height, 和width。 在下面的例項中，我們在選擇器中定義了color和font-size屬性：

p {
  color: ...;
  font-size: ...;
}複製程式碼

值(Values)

到目前為止，我們選中了一個元素，而且決定了設定它的什麼樣式。現在我們可以為屬性設定一個值，值被定義在冒號:的右側，以分號; 結束,現在我們將color屬性的值設定為orange，將font-size屬性的值設為16px。

p {
  color: orange;
  font-size: 16px;
}複製程式碼

回顧一下，CSS中我們先定義選擇器，然後在選擇器後新增{}，在大括號中新增屬性和值；屬性描述由屬性名:值;組成,記住以分號;結尾。
對屬性和值縮排也是CSS的普遍做法，和HTML一樣，縮排有利於保持我們的程式碼結構清晰。

[譯]HTML&CSS Lesson1: 構建第一張頁面

現在我們對CSS語法有了一些瞭解，不過在深入探討之前，還需要知道一些知識 。比如選擇器是如何工作的。

使用選擇器

型別選擇器

型別選擇器(也叫作元素選擇器)根據元素型別選擇元素。比如我們想要選擇所有的div元素，我們可以使用型別選擇器div，以下示例展示了CSS選擇器與其選中的HTML元素：

CSS

div {...}複製程式碼

HTML

<div>...</div>
<div>...</div>複製程式碼

Class選擇器

類選擇器根據元素的 class屬性的值選擇元素，它比型別選擇器稍微具體一些，它會選擇特定的元素而不是所有同種型別的元素，可以使我們在多個不同型別的元素新增同一樣式。
在CSS中，Class選擇器通過在class值前新增字首.表示，以下示例展示了CSS與其選中的HTML元素：

CSS

.awesome { ... }複製程式碼

HTML

<div class="awesome">...</div>
<p class="awesome">...</p>複製程式碼

ID選擇器

ID選擇器比Class選擇器更精準，每個ID選擇器只能選中一個元素。與Class選擇器同理， ID選擇器是通過id屬性的值來選擇元素。
無論是什麼型別的元素，每個ID值在單頁面中只能出現一次,保持其唯一性。推薦只在重要元素中使用。
在CSS中，ID選擇器通過在id值前新增字首#表示，以下示例展示了CSS與其選中的HTML元素：

其他選擇器

選擇器非常強大，我們列出的是最常用的選擇器型別。還有許多高階選擇器存在，如果你有興趣可以去多瞭解一些高階選擇器
好了，總之呢，我們在HTML頁面中新增元素，通過選擇器選中它們並新增樣式。現在我們來學習怎麼使CSS在HTML頁面中生效，怎麼連線它們。

引用CSS

為了讓CSS在HTML頁面中生效，我們需要將CSS檔案引入HTML中， 最佳實踐方式是將所有的CSS放在一個外部的樣式表中，在HTML的<head> 元素中引用它。 外部CSS檔案可以將相同的樣式覆蓋到整個網站並且可以快速的做出修改。

其他引用方式
引用CSS還有內聯和內嵌兩種方式 ，這裡不深入介紹了，這兩種方式並不推薦使用，它們會使頁面變得繁瑣和笨重，不易維護。

我們可以用文字編輯器建立一個副檔名為.css的檔案，並將它儲存在HTML所在的資料夾或子資料夾中。
在<head>元素中新增<link>元素來建立HTML與CSS之間的聯絡。由於我們引用的是CSS檔案，所以<link>的rel屬性的值設為stylesheet,href屬性來指定CSS檔案的路徑。如下所示：

<head>
  <link rel="stylesheet" href="main.css">
</head>複製程式碼

為了讓CSS在頁面中正確渲染，href屬性必須正確關聯CSS檔案地址。 在上述例子中，main.css所在目錄與HTML所在目錄一致。
如果CSS檔案在子資料夾中，舉個例子，若main.css檔案在名為stylesheets的子資料夾下，那麼href指向的路徑就變為了stylesheets/main.css，用斜槓/表示移動到了子檔案中。
我們的頁面要開始成型了，雖然很慢。你可以發現很多元素本身就帶有樣式，儘管我們沒有新增CSS；這是因為瀏覽器自身對這部分元素的樣式進行了渲染。幸運的是，我們可以對這部分的樣式複寫和覆蓋，這就是我們接下來學習的CSS重置。

CSS重置

每個瀏覽器都對不同的元素都設定了預設樣式。chrome對標題(<h1>...<h6>)、段落(<p>)、列表(li)的呈現可能與IE是不同。為了卻確保跨瀏覽器的相容，CSS重置成了廣泛的需求。
CSS重置為常用的HTML元素預設了樣式，併相容所有的瀏覽器。這些重置涉及移除margin、padding或其他樣式，調小這些樣式的值。因為樣式渲染是從上至下的，所以我們把它新增到CSS檔案的最上面。確保這些樣式會第一時間被解讀，那麼不同瀏覽器之間的基本樣式就保持了一致，在一條基準線上。
有一推重置方案可供我們使用，這些方案都有他們自己的強項。最流行的方案是 Eric Meyer’s reset, 它包含了HTML5元素的樣式。
如果你覺還是不夠全面，可以選擇Nicolas Gallagher建立的Normalize.css，Normalize.css重點不在對樣式的重置，而是對這些元素設定了通用的樣式。它需要我們對CSS有更多的瞭解，知道什麼樣式是你想要的。

跨瀏覽器相容及測試
前面有提到，不同的瀏覽器對元素的渲染不同，所以識別跨瀏覽器相容性和測試非常重要。雖然網站不需要在每個瀏覽器中看起來一模一樣，但要接近。哪些瀏覽器需要支援，支援到什麼程度，考慮好這些可以幫助你建立出最符合你需求的網站。

練習

我們來看下上次練習中，我們是否可以新增一些CSS上去

  • 在“styles-conference”資料夾下面建立一個名為"assets"的資料夾。我們將會把資源都存在這個目錄下，例如：樣式檔案、圖片、視訊等等。接下來我們再在"assets"資料夾下為樣式檔案建立一個名為“stylesheets”的資料夾。
  • 開啟我們的文字編輯器，建立一個名為main.css的檔案，並將它儲存在“stylesheets”資料夾下。
  • 在瀏覽器中開啟我們的index.html頁面，可以看到<h1>和<p>元素都有預設的CSS樣式，它們都有各自的字型大小和周邊空間。如果我們使用 Eric Meyer’s reset ，會降低這些差別，讓它們處在差不多的基準線上。接下來我們將Eric Meyer’s reset中的樣式複製過來，貼上在main.css檔案的最上面。
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}複製程式碼
  • 接下來，我們將main.css檔案連線到index.html頁面中。在文字編輯器中開啟index.html頁面，在<head>元素中的<titile>元素後新增一個<link>元素，
  • 由於我們使用<link>引用樣式表， 我們要把rel屬性的值設定為stylesheet
  • 我們還要用href屬性連結到main.css檔案，main.css儲存在“assets”資料夾中的“stylesheet”資料夾下，所以href屬性的值為assets/stylesheet/main.css
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>複製程式碼

現在我們來檢驗一下HTML和CSS是否正常工作。 在瀏覽器中開啟index.html對比一下是否跟之前有所不同

[譯]HTML&CSS Lesson1: 構建第一張頁面

演示原始碼

這是練習的原始碼。點選下載

總結

非常好！ 我們已經完成了初步的學習。回顧一下你目前學到的基礎知識，接下來我們會花更多的時間來書寫HTML和CSS，你將會對它們更加熟悉。

到目前為止，我們所學內容概括如下：

  • HTML和CSS之前的區別
  • 瞭解了什麼是HTML元素、標籤和屬性
  • 建立了第一張網頁
  • 瞭解了什麼是CSS選擇器、屬性和值
  • 使用選擇器
  • 引用CSS到HTML中
  • CSS重置

接下來我們將進一步的學習HTML並瞭解語義化。

文章來源

learn.shayhowe.com/html-css/bu…

相關文章