網頁設計基礎，學習筆記

HTML網頁設計筆記(1)－基本HTML標籤使用

本篇為個人的學習筆記，因此如有紕漏為本人學藝不精，敬請指教。

網站的基本架構長這樣：

<!DOCTYPE html>  //html標準宣告
<html>
  <head>
    <title>這裡是網站標題</title>
    </head>
    <body>
	
    </body>
</html>

一個網頁除了使用html語法之外，裡面會再使用css語法來設定各種的樣式，以及使用javascript來撰寫程式快速完成酷炫效果。接下來的筆記會陸續介紹到，不過本篇應該只會先提到html基本架構。

html本身是使用各種標籤來創造各種網頁的樣式，因此在直觀上

詳細記錄一下各個位置的含意：

<!DOCTYPE html>
<!-- 在角括號內的，係為元素 (element) / 標籤 (tag) 的名稱 -->
<html>
  <head>
<!-- 讓瀏覽器得知，該頁面的程式碼，要依萬國碼 (Unicode) 當中的 UTF-8 格式來加以顯示各國文字。 -->
    <meta charset="utf-8">
    <title>一開始的測試頁面</title>
  </head>
<!-- 要被顯示在網頁畫面當中的，主要理應被撰寫於 body 元素裡。 -->
<!-- <元素名稱 屬性名稱="屬性值" 屬性名稱="屬性值"> -->
<!-- style內是css語法 -->
<body style="color: Gold">
	<marquee>World Peace?!</marquee>  <!--跑馬燈-->
	</body>
</html>

<div>這裡面可以撰寫程式</div>

以上一個被<div></div>包起來的完整程式可以稱作為元素

接著來看看其他基本的標籤

程式碼：

<p>這代表可以放下一段字但不會斷行</p>
<p>
不

管
你
分
得
多
開
</p>

網頁效果：

這代表可以放下一段字但不會斷行

不 管 你 分 得 多 開

下面展示的是另一種元素可以自動斷行的

程式碼：

<pre>
	<!--這是pre的功能-->
功蓋三分國，
名高八陣圖。

<!--突然沒來由地插入一個註解，
這樣的插入程式碼會忽略，但是我們
人類會很容易閱讀-->
江流石不轉，
遺恨失吞吳。

</pre>

網頁效果：

	
功蓋三分國，
名高八陣圖。




江流石不轉，
遺恨失吞吳。

接著要來嘗試創作出一堆顏色的方塊

 <!-- DIV 元素係為一種區塊元素，瀏覽器顯示其完畢之後，會自動換列。 -->
 <div style="width:150px; height:150px; background-color: Moccasin; text-align: center; line-height: 150px">方塊1</div>
    <div style="width:150px; height:150px; background-color: DarkViolet; text-align: center; line-height: 150px">方塊2</div>
    <div style="width:150px; height:150px; background-color: DeepSkyBlue; text-align: center; line-height: 150px">方塊3</div>
    <div style="width:150px; height:150px; background-color: HoneyDew; text-align: center; line-height: 150px">方塊4</div>

    <!-- SPAN 元素係為一種行內元素，瀏覽器顯示其完畢之後，「並不」會自動換列...。 -->
    <span style="width:150px; height:150px; background-color: Moccasin; text-align: center; line-height: 150px">方塊5</span>
    <span style="width:150px; height:150px; background-color: HoneyDew; text-align: center; line-height: 150px">方塊6</span>
    <span style="width:150px; height:150px; background-color: DeepSkyBlue; text-align: center; line-height: 150px">方塊7</span>
方塊1
方塊2
方塊3
方塊4
方塊5 方塊6 方塊7

這邊wordpress沒辦法完整顯示出差別有點可惜，但是大致上可以看出<div>與<span>的差別

如中間註解所說的，div是一種區塊元素，會自動換列，但span元素則是行內元素，並不會自動換列，因此在網頁的設計上，必須注意使用上需不需要換行。

到這邊為止就是最基本的HTML排版架構跟標籤的使用，可以看到div中參雜了很多標籤參數等等。

下一篇會開始筆記css是如何改變元素型態。

發表留言