本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

HTML 4.01 快速導覽 - <body> 內容根標籤

<body> 為放置網頁內容的地方。



起始標籤結束標籤
選擇性的選擇性的


<body> 有幾個屬性
屬性Deprecated or Obsolete
alink選取的超連結文字顏色Deprecated in HTML 4.01, Obsolete in HTML 5
background背景圖Deprecated in HTML 4.01, Obsolete in HTML 5
bgcolor背景顏色Deprecated in HTML 4.01, Obsolete in HTML 5
link超連結文字顏色Deprecated in HTML 4.01, Obsolete in HTML 5


例如
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<p>You ever have that feeling where you're not sure if
 you're awake or still dreaming?</p>
<p>A prison for your mind.</p>
<p>Free your mind.</p>
<p>Believe the unbelievable.</p>
<p>There is no spoon.</p>
<p>I can only show you the door, you have to walk 
through it.</p>
<p>Choice. The problem is choice.</p>
<p>Then tomorrow we may all be dead, but how would that 
be different from any other day?</p>
<p>I have dreamed a dream, but now that dream has gone 
from me.</p>
<p>Choice is an illusion, created between those with 
power, and those without.</p>
<p>Because I choose to.</p>
<p>Everything that has a beginning has an end.</p>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:example01.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


利用瀏覽器 (broswer) 開啟如下



此例中, <body></body> 成對標籤 (tag) 所圍住的元素 (element) 有十三個 <p> ,表示段落,因此我們可以在網頁內容看到分段的文字。


只要合乎 HTML 語法規則的元素都可以放到 <body> 之中,例如下例為一個利用 JavaScript 寫的猜數字遊戲
<html>
<head>
<title>網頁標題</title>
<script language="JavaScript">
var a = (Math.random() * 10).toFixed();
function guess() {
    var g = document.getElementById("n1").value;
    var v = document.getElementById("n3");
    
    if (a == g) {
        v.innerHTML = "猜對囉!";
    }
    else {
        v.innerHTML = "猜錯咧...";
    }    
}
</script>
</head>
<body>
<input id="n1" type="text" name="input" value="" /> 
<input id="n2" type="button" name="button" value="猜測" onclick="guess();" /> 
<br / ><br / >
<label id="n3">這裡顯示結果</label>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:guessgame.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


利用瀏覽器開啟如下圖



我們在 <body> 中一共放了五個元素,分別是兩個 <input /> ,兩個 <br /> ,以及一個 <label> 。 <input /> 依 type 屬性 (attribute) 可設定為 text ,單行輸入的文字方塊,或是
button ,也就是按鈕。


<br /> 為換行標籤,有一個 <br /> 就呈現換行。這裡由於連續兩個 <input /> ,中間沒有 <br /> ,所以兩個 <input /> 會在同一行,然後碰到第一個 <br /> 就換行,第二個 <br /> 由於前面的元素也是 <br /> ,所以呈現的效果是單獨空一行。最下面就是 <label> ,用為顯示結果之用。


有三個元素設定 id 屬性,這是 JavaScript 程式需要用到的。


有關 JavaScript 程式的相關教學說明,請參考本站的 JavaScript 快速導覽及 HTML DOM 快速導覽(準備中)


這個遊戲猜 10 以內的整數,來玩看看吧!先輸入 1 ,然後按 Enter



哇!真幸運,猜一次就猜到了 :)


中英文術語對照
瀏覽器broswer
標籤tag
元素element
屬性attribute


您可以繼續參考



相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁


參考資料

沒有留言: