摘要：元素是使用小于號和大于號包裹元素名來標示。一個結束標簽表示元素的結束它由小于號元素名組成例如。和嵌套在內，它們頁面中都是可視的。使用選擇器類型選擇器類型選擇器也叫作元素選擇器根據元素類型選擇元素。

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

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

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

元素是定義頁面中對象的結構和內容的指示符。一些最常用的元素例如多級標題(

...

)、段落(

),還有,

,, 和等等。
元素是使用小于號<和大于號>包裹元素名來標示。如下所示：

標簽(Tags)

使用小于號<和大于號>包裹元素名形成標簽，標簽通常都是成對出現的，由開始標簽和結束標簽組成。
一個開始標簽表示一個元素的開始,它由 <+元素名+ >組成，例如

。
一個結束標簽表示元素的結束,它由小于號<+ /+元素名+ >組成 例如

。
在開始標簽和結束標簽中的內容為那個元素的內容。例如一個鏈接，擁有開始標簽和結束標簽，兩個標簽之間的內容為鏈接的內容，如下所示：

...

屬性(Attributes)

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

Shay Howe

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

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

設置文檔結構

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

所有的HTML文檔都有一個必需的結構，由以下元素構成：，，head 和

文檔類型聲明()，告訴瀏覽器使用的HTML版本，寫在HTML文檔最開始。由于我們使用的是最新版本的HTML，所以我們的聲明只需寫，非常簡便。文檔類型聲明之后，元素表示文檔開始(根元素)。
元素內，為其第一個子元素，它包含了文檔標題(顯示在瀏覽器窗口標題欄上)，外部文件鏈接以及其他有用的元數據。中的內容不會顯示在網頁上。
所有可視的內容都包含在元素中。典型HTML的結構如下所示：

  
    
    
  
  
    
Hello World
    
This is a web page.
  

上述示例中，先聲明了文檔類型，跟著是元素。元素中包含了和，中聲明了頁面字符編碼和頁面標題

在元素中添加

和

元素,在

中還是添加內容“Styles Conference”，

中輸入一段話簡單的介紹我們的討論會。

 
Styles Conference
 
Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!

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

CSS術語

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

選擇器(Selectors)

當元素被添加到頁面中，就可以使用CSS控制其樣式。一個選擇器可以精確的為選中的元素添加樣式(例如顏色color， 尺寸size，位置position)；選擇器可以通過不同限定詞組合起來選中唯一元素，這取決于我們的需求。例如，我們希望選中頁面中的每個段落(

)或者我們想要選中頁面中的某一個段落。
選擇器通常使用屬性值，例如id或class的值 或者使用元素名，例如

和

在CSS中，選擇器后跟著大括號{} ，其中包含了應用于選中元素的樣式。下面示例是選中所有的

元素：

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一樣，縮進有利于保持我們的代碼結構清晰。

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

使用選擇器 類型選擇器

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

CSS

div {...}

HTML

...
...

Class選擇器

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

CSS

.awesome { ... }

HTML

...
...

ID選擇器

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

其他選擇器

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

引用CSS

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

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

我們可以用文本編輯器創建一個擴展名為.css的文件，并將它保存在HTML所在的文件夾或子文件夾中。
在元素中添加元素來建立HTML與CSS之間的聯系。由于我們引用的是CSS文件，所以的rel屬性的值設為stylesheet,href屬性來指定CSS文件的路徑。如下所示：

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

CSS重置

每個瀏覽器都對不同的元素都設置了默認樣式。chrome對標題(

...

)、段落(

)、列表(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頁面，可以看到

和

元素都有默認的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頁面，在元素中的元素后添加一個元素，

由于我們使用引用樣式表， 我們要把rel屬性的值設置為 stylesheet

我們還要用href屬性鏈接到main.css文件，main.css保存在“assets”文件夾中的“stylesheet”文件夾下，所以href屬性的值為assets/stylesheet/main.css

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

演示源代碼

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

總結

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

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

HTML和CSS之前的區別

了解了什么是HTML元素、標簽和屬性

創建了第一張網頁

了解了什么是CSS選擇器、屬性和值

使用選擇器

引用CSS到HTML中

CSS重置

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

文章來源

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

云服務器 GPU云服務器 第一張 第一張圖片 html 一張圖片 html 放一張圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112315.html

• 上一篇：H5活動全屏滾動頁面在安卓智能電視TV調試
• 下一篇：【轉】css樣式自動換行（強制換行）