摘要：元素是使用小于號(hào)和大于號(hào)包裹元素名來(lái)標(biāo)示。一個(gè)結(jié)束標(biāo)簽表示元素的結(jié)束它由小于號(hào)元素名組成例如。和嵌套在內(nèi)，它們頁(yè)面中都是可視的。使用選擇器類型選擇器類型選擇器也叫作元素選擇器根據(jù)元素類型選擇元素。

可以的話，請(qǐng)想象一下互聯(lián)網(wǎng)沒(méi)有發(fā)明之前的日子。網(wǎng)站還不存在，紙質(zhì)的書本是我們主要的信息來(lái)源，而在書本中查詢我們想要的資料會(huì)耗費(fèi)相當(dāng)多的精力和時(shí)間。
而如今，你打開(kāi)個(gè)瀏覽器用搜索引擎搜索，任何你能想到的信息都會(huì)呈現(xiàn)在你的指間。并且有可能某人在某地建立了一個(gè)跟你心中實(shí)際要搜索內(nèi)容一致的網(wǎng)站。
在接下來(lái)的一系列課程中， 我將引導(dǎo)你使用HTML和CSS構(gòu)建一個(gè)屬于你的網(wǎng)站。但在開(kāi)始構(gòu)站之旅前，我們需要重點(diǎn)的了解兩個(gè)語(yǔ)言之間的差異，它們的語(yǔ)法和一些常見(jiàn)的術(shù)語(yǔ)。

HTML(HyperText Markup Language) 超文本標(biāo)記語(yǔ)言，通過(guò)標(biāo)記告訴瀏覽器如果去解析文本信息，比如解讀為標(biāo)題、 段落、圖片等。
CSS(Cascading Style Sheets)層疊樣式表，這是一種描述性語(yǔ)言，通過(guò)樣式來(lái)修飾頁(yè)面，比如設(shè)置文字的字體、大小、顏色等。
這兩種語(yǔ)言是相對(duì)獨(dú)立的，我們?cè)诰帉懰鼈儠r(shí)也應(yīng)該保持這種原則。CSS不應(yīng)嵌入HTML文本中，反之亦然。
一般來(lái)說(shuō)， HTML代表內(nèi)容，而CSS代表內(nèi)容的外觀。

在開(kāi)始接觸HTML時(shí)，你可能會(huì)遇到新的陌生的術(shù)語(yǔ)。別擔(dān)心，隨著接下來(lái)的學(xué)習(xí)你會(huì)對(duì)它們?cè)絹?lái)越熟悉。首先你需要了解三個(gè)常見(jiàn)的術(shù)語(yǔ)：元素，標(biāo)簽和屬性。

元素是定義頁(yè)面中對(duì)象的結(jié)構(gòu)和內(nèi)容的指示符。一些最常用的元素例如多級(jí)標(biāo)題(

...

)、段落(

),還有,

,, 和等等。
元素是使用小于號(hào)<和大于號(hào)>包裹元素名來(lái)標(biāo)示。如下所示：

標(biāo)簽(Tags)

使用小于號(hào)<和大于號(hào)>包裹元素名形成標(biāo)簽，標(biāo)簽通常都是成對(duì)出現(xiàn)的，由開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽組成。
一個(gè)開(kāi)始標(biāo)簽表示一個(gè)元素的開(kāi)始,它由 <+元素名+ >組成，例如

。
一個(gè)結(jié)束標(biāo)簽表示元素的結(jié)束,它由小于號(hào)<+ /+元素名+ >組成 例如

。
在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容為那個(gè)元素的內(nèi)容。例如一個(gè)鏈接，擁有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，兩個(gè)標(biāo)簽之間的內(nèi)容為鏈接的內(nèi)容，如下所示：

...

屬性(Attributes)

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

Shay Howe

示例中，文字Shay Howe會(huì)展現(xiàn)在頁(yè)面上，點(diǎn)擊 Shay Howe 用戶將訪問(wèn) http://shayhowe.com/。
超鏈接元素a通過(guò)用開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽包裹文本內(nèi)容來(lái)聲明。 超鏈接屬性為href="http://shayhowe.com/"。

現(xiàn)在你已經(jīng)知道了什么是HTML元素(elements),標(biāo)簽(tags)和屬性(attributes)。讓我們一起來(lái)完成我們的第一張頁(yè)面，如果在這里遇到了一些新的知識(shí)，別擔(dān)心，我們會(huì)將它們一一破解。

設(shè)置文檔結(jié)構(gòu)

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

所有的HTML文檔都有一個(gè)必需的結(jié)構(gòu)，由以下元素構(gòu)成：，，head 和

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

  
    
    
  
  
    
Hello World
    
This is a web page.
  

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

在元素中添加

和

元素,在

中還是添加內(nèi)容“Styles Conference”，

中輸入一段話簡(jiǎn)單的介紹我們的討論會(huì)。

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

接下來(lái)我們切換頻道，從HTML轉(zhuǎn)換到CSS上來(lái)。 再提一次，HTML設(shè)置頁(yè)面的結(jié)構(gòu)和內(nèi)容， 而css定義頁(yè)面的樣式和外觀。

CSS術(shù)語(yǔ)

除了HTML術(shù)語(yǔ)， CSS也有一些常用術(shù)語(yǔ)你需要熟悉。這些術(shù)語(yǔ)包括 選擇器，屬性，值。和HTML術(shù)語(yǔ)一樣，你使用的越多，那么你會(huì)對(duì)他們?cè)绞煜ぁ?/p> 選擇器(Selectors)

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

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

和

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

元素：

p { ... }

屬性(Properties)

一旦元素被選中，那么所寫的屬性就會(huì)被應(yīng)用在這個(gè)元素上，屬性名寫在{}中，后面跟著一個(gè)冒號(hào):，有很多可以設(shè)置的屬性例如：background, color, font-size, height, 和width。 在下面的實(shí)例中，我們?cè)谶x擇器中定義了color和font-size屬性：

p {
  color: ...;
  font-size: ...;
}

值(Values)

到目前為止，我們選中了一個(gè)元素，而且決定了設(shè)置它的什么樣式。現(xiàn)在我們可以為屬性設(shè)置一個(gè)值，值被定義在冒號(hào):的右側(cè)，以分號(hào); 結(jié)束,現(xiàn)在我們將color 屬性的值設(shè)置為orange，將font-size屬性的值設(shè)為16px。

p {
  color: orange;
  font-size: 16px;
}

回顧一下，CSS中我們先定義選擇器，然后在選擇器后添加{}，在大括號(hào)中添加屬性和值；屬性描述由屬性名:值;組成,記住以分號(hào);結(jié)尾。
對(duì)屬性和值縮進(jìn)也是CSS的普遍做法，和HTML一樣，縮進(jìn)有利于保持我們的代碼結(jié)構(gòu)清晰。

現(xiàn)在我們對(duì)CSS語(yǔ)法有了一些了解，不過(guò)在深入探討之前，還需要知道一些知識(shí) 。比如選擇器是如何工作的。

使用選擇器 類型選擇器

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

CSS

div {...}

HTML

...
...

Class選擇器

類選擇器根據(jù)元素的 class屬性的值選擇元素，它比類型選擇器稍微具體一些，它會(huì)選擇特定的元素而不是所有同種類型的元素，可以使我們?cè)诙鄠€(gè)不同類型的元素添加同一樣式。
在CSS中，Class選擇器通過(guò)在class值前添加前綴.表示，以下示例展示了CSS與其選中的HTML元素：

CSS

.awesome { ... }

HTML

...
...

ID選擇器

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

其他選擇器

選擇器非常強(qiáng)大，我們列出的是最常用的選擇器類型。還有許多高級(jí)選擇器存在，如果你有興趣可以去多了解一些高級(jí)選擇器
好了，總之呢，我們?cè)贖TML頁(yè)面中添加元素，通過(guò)選擇器選中它們并添加樣式?，F(xiàn)在我們來(lái)學(xué)習(xí)怎么使CSS在HTML頁(yè)面中生效，怎么連接它們。

引用CSS

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

其他引用方式
引用CSS還有內(nèi)聯(lián)和內(nèi)嵌兩種方式 ，這里不深入介紹了，這兩種方式并不推薦使用，它們會(huì)使頁(yè)面變得繁瑣和笨重，不易維護(hù)。

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

為了讓CSS在頁(yè)面中正確渲染，href屬性必須正確關(guān)聯(lián)CSS文件地址。 在上述例子中，main.css所在目錄與HTML所在目錄一致。
如果CSS文件在子文件夾中，舉個(gè)例子，若main.css文件在名為stylesheets的子文件夾下，那么href指向的路徑就變?yōu)榱?b>stylesheets/main.css，用斜杠/表示移動(dòng)到了子文件中。
我們的頁(yè)面要開(kāi)始成型了，雖然很慢。你可以發(fā)現(xiàn)很多元素本身就帶有樣式，盡管我們沒(méi)有添加CSS；這是因?yàn)闉g覽器自身對(duì)這部分元素的樣式進(jìn)行了渲染。幸運(yùn)的是，我們可以對(duì)這部分的樣式復(fù)寫和覆蓋，這就是我們接下來(lái)學(xué)習(xí)的CSS重置。

CSS重置

每個(gè)瀏覽器都對(duì)不同的元素都設(shè)置了默認(rèn)樣式。chrome對(duì)標(biāo)題(

...

)、段落(

)、列表(li)的呈現(xiàn)可能與IE是不同。為了卻確?？鐬g覽器的兼容，CSS重置成了廣泛的需求。
CSS重置為常用的HTML元素預(yù)設(shè)了樣式，并兼容所有的瀏覽器。這些重置涉及移除margin、padding或其他樣式，調(diào)小這些樣式的值。因?yàn)闃邮戒秩臼菑纳现料碌?，所以我們把它添加到CSS文件的最上面。確保這些樣式會(huì)第一時(shí)間被解讀，那么不同瀏覽器之間的基本樣式就保持了一致，在一條基準(zhǔn)線上。
有一推重置方案可供我們使用，這些方案都有他們自己的強(qiáng)項(xiàng)。最流行的方案是 Eric Meyer’s reset, 它包含了HTML5元素的樣式。
如果你覺(jué)還是不夠全面，可以選擇Nicolas Gallagher創(chuàng)建的Normalize.css，Normalize.css重點(diǎn)不在對(duì)樣式的重置，而是對(duì)這些元素設(shè)置了通用的樣式。它需要我們對(duì)CSS有更多的了解，知道什么樣式是你想要的。

跨瀏覽器兼容及測(cè)試
前面有提到，不同的瀏覽器對(duì)元素的渲染不同，所以識(shí)別跨瀏覽器兼容性和測(cè)試非常重要。雖然網(wǎng)站不需要在每個(gè)瀏覽器中看起來(lái)一模一樣，但要接近。哪些瀏覽器需要支持，支持到什么程度，考慮好這些可以幫助你創(chuàng)建出最符合你需求的網(wǎng)站。

練習(xí)

我們來(lái)看下上次練習(xí)中，我們是否可以添加一些CSS上去

在“styles-conference”文件夾下面創(chuàng)建一個(gè)名為"assets"的文件夾。我們將會(huì)把資源都存在這個(gè)目錄下，例如：樣式文件、圖片、視頻等等。接下來(lái)我們?cè)僭?assets"文件夾下為樣式文件創(chuàng)建一個(gè)名為“stylesheets”的文件夾。

打開(kāi)我們的文本編輯器，創(chuàng)建一個(gè)名為main.css的文件，并將它保存在“stylesheets”文件夾下。

在瀏覽器中打開(kāi)我們的index.html頁(yè)面，可以看到

和

元素都有默認(rèn)的CSS樣式，它們都有各自的字體大小和周邊空間。如果我們使用 Eric Meyer’s reset ，會(huì)降低這些差別，讓它們處在差不多的基準(zhǔn)線上。接下來(lái)我們將Eric Meyer’s reset中的樣式復(fù)制過(guò)來(lái)，粘貼在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;
}

接下來(lái)，我們將main.css文件連接到index.html頁(yè)面中。在文本編輯器中打開(kāi)index.html頁(yè)面，在元素中的元素后添加一個(gè)元素，

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

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

現(xiàn)在我們來(lái)檢驗(yàn)一下HTML和CSS是否正常工作。 在瀏覽器中打開(kāi)index.html對(duì)比一下是否跟之前有所不同

演示源代碼

這是練習(xí)的源代碼。點(diǎn)擊下載

總結(jié)

非常好！ 我們已經(jīng)完成了初步的學(xué)習(xí)?；仡櫼幌履隳壳皩W(xué)到的基礎(chǔ)知識(shí)，接下來(lái)我們會(huì)花更多的時(shí)間來(lái)書寫HTML和CSS，你將會(huì)對(duì)它們更加熟悉。

到目前為止，我們所學(xué)內(nèi)容概括如下：

HTML和CSS之前的區(qū)別

了解了什么是HTML元素、標(biāo)簽和屬性

創(chuàng)建了第一張網(wǎng)頁(yè)

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

使用選擇器

引用CSS到HTML中

CSS重置

接下來(lái)我們將進(jìn)一步的學(xué)習(xí)HTML并了解語(yǔ)義化。

文章來(lái)源

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

GPU云服務(wù)器 云服務(wù)器 第一張 第一張圖片 html 一張圖片 html 放一張圖片

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112315.html

• 上一篇：H5活動(dòng)全屏滾動(dòng)頁(yè)面在安卓智能電視TV調(diào)試
• 下一篇：【轉(zhuǎn)】css樣式自動(dòng)換行（強(qiáng)制換行）