4.HTML 語法

4-1HTML簡介
        HTML (Hyper Text Markup Language)中文稱做超文件標示語言,是建構網頁的最基本元素。

4-2HTML結構

  •    一個基本的 HTML 文件結構
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    (定義文件的類別)
    <html>
    <head>
        (head 標頭撰寫區)
    </head>
    <body>
        (body 本文撰寫區,這裡就是顯示網頁的主要內容)
    </body>
    </html>
    • 文件類別
      文件類別的宣告,代表了指明你所使用的 html 規格,最常用的文件類別有以下三種 DTD(Document Type Definition)。這是一份標準的 html 文件一定要放在開頭的。
      1.Strict
      對於文件語法的要求較為嚴謹的規格。
      2.Transitional
      這是比較鬆散的規格,對於語法的嚴謹度要求比較寬鬆。
      3.Frameset
      這個規格是專門用在含有框架頁
    • HTML元素
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
          <title> hello world!!</title>
      </head>
      <body>
          <h1>hello world!!</h1>
          <IMG src="http://www.cajh.chc.edu.tw/html/themes/default_A/logo.gif" > </IMG>
      </body>
      </html>
    • tag(標籤)
      1.用< >包起來的文字,我們稱為 tag (標籤)。結尾的部份一定要加上 "/" 。
      2.可以注意到,HTML 的標籤一般都是「成對的」,有頭就有尾,而文字內容就擺在中間。
      3.果出現交錯的寫法,那是錯誤的寫法,這種語法會造成維護困難,也會使瀏覽器誤判
    • 屬性
      src標籤所包起來的為 屬性
      通常使用雙引號包起來(但偶有例外)
    • 註解
      在html裡其註解語法如下:
      <!-- 單列註解 -->
      <!-- 多列
      註解
      -->
    • 字元參考
      &#D; 「D」表示10進位數值
      &#H; 「H」表示16進位數值
      以「&」開始,「;」結束。
      "表示雙引號("),在ascii表中
      '表示單引號(')

4-3 HTML tag 簡易教學

  • 連結
    <a href=“http://www.cajh.chc.edu.tw/html/index.php">彰安國中</a>
    絕對位置 EX:”http://www.cajh.chc.edu.tw/html/index.php”
    相對 EX:” ./html/index.php”

  • 圖片
    <img src="images/ball.gif" alt="標題圖示" />
  • 表單
    <form action="add_finish.php" method="post"></form>
  • 表格
    <table>
    <tr>列
    <td></td>欄
    </tr>
    </table>

範例 觀看結果

<html lang="zh-tw">
<!-- head 提供網頁的頁頭資訊,如標題、網頁url、樣式表、文稿語言-->
<head>
<!-- title提供網頁的標題-->
<title></title>

<!-- meta tag提供網頁相關的資訊-->
<!-- meta的資訊內容屬性、標頭的名稱-->
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<!-- 說明本網頁的屬性-->
<META NAME="keywords" CONTENT="HTML, CSS, PHP">
<!-- 描述網頁的內容-->
<META NAME="description" CONTENT="本站討論的主題為 HTML, CSS 及 PHP">

<!-- Style tag css樣式標籤,提供網頁外觀形式的設定-->
<style type="text/css">
<!--
BODY {font-size:24px;color:blue}
-->
</style>

</head>

<!-- HTML網頁的本體,較大埔分的html元素都放這裡-->
<body>
<!-- script tag 文稿script可以放在head或是body標籤裡,或是放在一個外部檔案
底下以php文稿為範例
-->
<?php
echo "<H4>現在是 " . strftime("%c") . "</H4>";
?>
<A href="hello.html">以相對URL連結至hello.html</A>
<br>
<H1>這是標題文字H1一號字體</H1>
<H2>這是標題文字H2二號字體</H2>
<H3>這是標題文字H3三號字體</H3>
<H4>這是標題文字H4四號字體</H4>
<H5>這是標題文字H5五號字體</H5>
<H6>這是標題文字H6六號字體</H6>
</body>
</html>