!『嵐設』免費電子報訂閱募集中!

在下方輸入您的Email訂閱就可收到本部落最新文章資訊喔!

Delivered by FeedBurner

      既然要成為CSS高手,HTML語法就不能不稍微了解一下,因為CSS樣式是針對HTML的標籤作為定義的對象;且設定好的CSS樣式也是得套用在HTML文件中,所以,想要真正搞懂CSS,以下這些HTML請確實掌握,這樣成為CSS高手的路會平坦一些。

     但是話說前頭,本文主要是就HTML語法架構做『入門』的說明,如果是已經有一定製作網頁程度或是只願意在『所見即所得』網頁編輯軟體中製作網頁的人,此篇不妨可以先略過,直接進入下一篇的CSS教學文章!

下圖為一個純粹使用HTML語法撰寫的頁面:

 

1-1.jpg 

而下圖則是此頁面的原始碼畫面:

1-2.jpg

1.首先,我們來了解一下HTML語法的基本架構:

a.HTML的語法是由許多的『標籤』所構成,每一個< > 的括號框住的部分就是標籤。

b.HTML的標籤都是以英文組成,沒有大小寫的分別,也就是說<html>和<HTML>是一樣的。

c.< >中的項目我們稱為HTML的『元素』,例如<body>的body就是元素的一種。

d.許多的標籤都是『成對』的,例如下圖中的<head>和</head>,其中的<head>寫在前面,我們稱為『起始標籤』,而寫在後面的</head>則稱為『結束標籤』。

1-2-1.jpg 

e.而寫在起始標籤和結束標籤之間的文字就是該元素的『內容』,例如下圖的紅框處就是head元素的內容。

1-2-2.jpg

2.網頁頁面內容圖解說明: 

1.jpg 

‧上圖1為網頁內文的大標題文字,套用了html語法中的<h1></h1>標籤。

1-2-5.jpg 

 ‧上圖2為內文的段落文字,套用了<p></p>標籤。

1-2-6.jpg 

‧上圖3表示在頁面中插入了一張圖片,套用了<img>標籤。

1-2-7.jpg 

‧上圖4為在內文中插入一個3欄3列表格,使用的是<table></table>標籤。

1-2-8.jpg 

‧上圖5表示在文字上加入了『超連結』,使用了<a></a>標籤。

1-2-9.jpg 

‧上圖6表示網頁的頁面標題,使用了<title></title>標籤。

1-2-10.jpg  

3.接著我們便針對上述頁面撰寫時所使用到的HTML標籤做分別的說明:

a.<html>和</html>:宣告HTML文件的開始與結束

      這個標籤目的在宣告HTML文件的開始與結束,也因為有這個標籤的存在,我們所編輯的文件才會被視為網頁文件,一般來說,<html>會出現在文件原始碼的最前面;而</html>則出現在原始碼的最後面,而此頁面所有的語法則一定會放在此組標籤之間。(如下圖)

 1-2-3.jpg 

b.<head>與</head>:用來放置網頁的檔頭資訊

      所謂的檔頭資訊,就是用來放置一些不直接顯示在頁面內容中的設定,像是『頁面標題』、『關鍵字』,還有就是當我們要宣告CSS樣式的時候,也是將語法放在這組標籤當中。(下圖紅框處內容即為放在<head>和</head>之間的語法)

 1-2-4.jpg 

c.<title></title>:網頁頁面標題標籤

     此組標籤的目的是用於定義網頁頁面的標題,寫在兩個標籤當中的文字就是標題文字,此文字會出現在瀏覽器的最上面標題烈的地方,而此標籤必須寫在<head>和</head>之間。(如下圖)

1-2-4.jpg

結果顯示如下圖 紅框處就是標題:

1-2-11.jpg

d.<body></body>:文件內容

      此標籤是用來定義網頁的所有內容,舉凡所有眼睛看得到的部分(像是文字、圖片、表格等等)的標籤語法,都會寫在此標籤當中。 

 1-2-12.jpg

      到此,設計嵐針對了HTML語法中最初淺,也最基本一定會出現在網頁裡面的標籤做了一個介紹,有心提升CSS技術的人參考一下。當然,HTML的標籤絕對不止於此,但是有了這樣的基本概念,接下來設計嵐說明CSS的相關概念時,應該是夠用了,後續,我們將開始針對CSS的樣式作一系列的說明,敬請期待!

 

 

 

 

創作者介紹

『嵐設』-設計教學部落

設計嵐 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • ruru814
  • 不好意思想請教一下耶,我在ie看到自已blog的留下迴響,整個留言欄位只有一字的空間可填,版面也亂七八糟,不知道有解準的辦法嗎?(firefox非常正常)謝謝你喔~~
  • 我之前就有發現耶~~我還以為妳是故意的呢!!妳試著這樣看看..妳到後台管理→樣式設定→樣式修改精靈→樣式原始碼修改,在裡面很下面很下面的地方找到一個『#content-form』的樣式規則,裡面有一個width的項目,修改這個寬度的數值看看..記得先記住原本數字,改不好至少可以改回來~~試試看有問題歡迎再問..^^..

    設計嵐 於 2010/05/19 22:06 回覆

  • ruru814
  • 哇,你人真的太好了,我有調的好多了,雖然不盡理想(左右比例怪怪的)。真對那些之前用ie留言的人感到不好意思...

    耶,還能再請教一個問題嗎?我的My Favorites,只是要每行間距相同,我弄了好久,就是分類標題離內容近那麼一點點,分類標題我也想換個顏色這樣。
    謝謝你了!
  • My Favorites...是指側邊的欄位內容嗎??你可以直接在樣式編輯精靈裡面找到『側欄』的項目修改文字的顏色..試試看..^^..

    設計嵐 於 2010/05/20 11:03 回覆

找更多相關文章與討論