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

時間  2019-11-09
標籤 html&css html css lesson1 lesson 構建 一張 頁面 欄目 CSS 简体版
原文   原文鏈接

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

什麼是HTML&CSS

HTML(HyperText Markup Language) 超文本標記語言，經過標記告訴瀏覽器若是去解析文本信息，好比解讀爲標題、 段落、圖片等。
CSS(Cascading Style Sheets)層疊樣式表，這是一種描述性語言，經過樣式來修飾頁面，好比設置文字的字體、大小、顏色等。
這兩種語言是相對獨立的，咱們在編寫它們時也應該保持這種原則。CSS不該嵌入HTML文本中，反之亦然。
通常來講， HTML表明內容，而CSS表明內容的外觀。html

HTML術語

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

元素(Elements)

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

<a>

標籤(Tags)

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

<a>...</a>

屬性(Attributes)

屬性用來爲元素添加額外信息。最經常使用的屬性例如id屬性，用來標識元素；class屬性將元素進行分類；src屬性指向嵌入內容的來源。href屬性提供對連接資源的引用。
屬性定義在開始標籤的標籤名以後，屬性一般包含一個屬性名和一個屬性值，格式是屬性名=值。以下所示：web

<a href="http://shayhowe.com/">Shay Howe</a>

clipboard.png

示例中，文字Shay Howe會展示在頁面上，點擊 Shay Howe 用戶將訪問 http://shayhowe.com/。
超連接元素a經過用開始標籤<a>和結束標籤</a>包裹文本內容來聲明。 超連接屬性爲href="http://shayhowe.com/"。chrome

如今你已經知道了什麼是HTML元素(elements),標籤(tags)和屬性(attributes)。讓咱們一塊兒來完成咱們的第一張頁面，若是在這裏遇到了一些新的知識，別擔憂，咱們會將它們一一破解。canvas

設置文檔結構

HTML文檔使用.html爲擴展名。要開始編寫HTML，你只須要使用純文本編輯器， 請不要使用 Microsoft Word 和 Pages，它們屬於富文本編輯器。 固然你也可使用目前很流行的編輯器 Dreamweaver、Sublime Text。 或者選擇免費的編輯軟件 Windows中的Notepad++ 和 Mac 中的 TextWrangler 。瀏覽器

全部的HTML文檔都有一個必需的結構，由如下元素構成：<!DOCTYPE html>，<html>，head 和 <body>ruby

文檔類型聲明(<!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>

clipboard.png

上述示例中，先聲明瞭文檔類型<!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>

clipboard.png

接下來咱們切換頻道，從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同樣，縮進有利於保持咱們的代碼結構清晰。

clipboard.png

如今咱們對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對比一下是否跟以前有所不一樣

clipboard.png

演示源代碼

這是練習的源代碼。點擊下載

總結

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

到目前爲止，咱們所學內容歸納以下：

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

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

文章來源

http://learn.shayhowe.com/htm...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程