20240811紀錄

點此進入Google Google logo

文字範例，這是紅色的字。

段落範例，這是一段文字。，邊框：0cm寬、0cm寬、黑色、粗度0.5cm

這是一段帶有title的文字。

這個GOOGLE沒有使用雙引號

這邊使用單引號

這邊使用雙引號

"> 點此進入Google Google logo

文字範例，這是紅色的字。

段落範例，這是一段文字。，邊框：0cm寬、0cm寬、黑色、粗度0.5cm

這是一段帶有title的文字。

這個GOOGLE沒有使用雙引號

這邊使用單引號

這邊使用雙引號

"> 點此進入Google Google logo

文字範例，這是紅色的字。

段落範例，這是一段文字。，邊框：0cm寬、0cm寬、黑色、粗度0.5cm

這是一段帶有title的文字。

這個GOOGLE沒有使用雙引號

這邊使用單引號

這邊使用雙引號

<!DOCTYPE html>
<html lang="zh-TW">
    <!-- HTML版本：5，網頁語言：中文 -->
     <head>
     </head>

    <body>

        <a href="<https://www.google.com>">點此進入Google</a>

        <img src="GOOGEL.png" alt="Google logo" width="200" height="200">>
        <!-- 圖片，圖片路徑/名稱，文字：Google logo，寬度200，高度200 -->

     <p style="color:red;">文字範例，這是紅色的字。</p>
     <!-- 文字範例，文字：這是紅色的字，字型顏色：紅色 -->

     <p style=display:none;>隱藏文字範例。</p>
     <!-- 隱藏文字範例 -->

     <P style="border: 0cm solid black; padding: 0.5cm;">
        段落範例，這是一段文字。，邊框：0cm寬、0cm寬、黑色、粗度0.5cm
      </P>
     <!-- 段落範例，文字：這是一段文字，邊框：0cm寬、0cm寬、黑色、粗度0.5cm -->
      

      <p title="title在裡面">這是一段帶有title的文字。<p>
        <!-- 當使用者滑鼠指向文字時，會顯示title文字 -->

        <a href=https://www.google.com>這個GOOGLE沒有使用雙引號</a>
        <!-- 你可以不使用雙引號，但不建議-->

        <p title='你好'>這邊使用單引號</p>
        <!-- 你可以使用單引號，但建議使用雙引號 -->

        <p title="你好">這邊使用雙引號</p>
       

    </body>
</html>

標題

<!-- <h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
標題有分H1~H6六種，依序從大到小排列，H1為主標題 -->

<!-- <H1 style=" font-size: 80px">可以自訂標題大小</H1>
font-size，此功能可以自訂標題大小，值為字體大小，單位為px -->

<h1>Universal Studios Presents</h1>
<!-- 主要標題 -->
<h2>Jurassic Park<h2>
        <!-- 次要標題 -->
        <h3>About<h3>
                <!-- 關於內文的標題 -->
                <p>On the Island of Isla Nublar, a new park has been built: Jurassic Park is a theme park of cloned
                    dinosaurs!!</p>
                <!-- 內文 -->

段落

<p>這是一個段落元素，代表著網頁的文字內容，</p>
<p>可以包含許多段落，每個段落可以有自己的格式設定。</p>
<!-- 上面的是兩個段落元素，而每個段落都會自動重新的一行開始 -->

<P>
    你可以  嘗試著   在段落裡面製造空白。
    但實際上   瀏覽器， 會自動把   他    刪除<br>

    最終  這些多餘的   空白   都會被   刪減至 剩下一格

    甚至   不會   自動 辨識 換行符號   ， 你需要自己   手動加上
    當然，加上<br>就會換行了
</P>

<!-- <h1>你可以使用</h1>
<P>< hr >這個符號</P> 
<hr> -->
<!-- hr 元素可以用來建立分隔線 -->
<!-- <h2>來建立分隔線</h2>
<p>是一種方法</p> -->

<p>換行符號 br <BR> 可以將它放在句子中間，<br>就可以換行</p>
<!-- 使用時請謹記seo，搜尋引擎會讀取文章開頭與標題，所以換行符號的使用要注意 -->

<pre>
    My Bonnie lies over the ocean.
  
    My Bonnie lies over the sea.
  
    My Bonnie lies over the ocean.
  
    Oh, bring back my Bonnie to me.
  </pre>
  <!-- pre 元素可以保留原格式，保留空白與換行符號 -->

<!-- <!DOCTYPE html>
<html>

<body style="background-color: lightgreen;"> 
    <p>這是正常的字元</p>
    <p style="background-color:red;">這是紅色底的字</p>
    <p style="background-color:blue;">這是藍色底的字</p>

    <p style="font-size: 50px;">這是50px大小的字</p>
</body> -->

<!-- <h1 style="font-family: fantasy;">
    HI 你好 這是FANTASY字體，
    Hello there! this is fantasy font.
</h1>
<p style="font-family: cursive;">
    這是CURISE字體，用作測試。
    This is cursive font.only for testing.</p>
</p> -->

<!-- <h1 style="font-size:larger;">這是larger的文字大小</h1>
<h1 style="font-size:300%;">這是300%的文字大小</h1>
<p style="font-size: xx-large;">這是內文大小為xx-large</p>
<p style="font-size: 125%;">這是內文大小為125%</p> -->

<h1 style="text-align: center;">這是居中的文字</h1>
<h2 style="text-align: right;">這是右對齊文字</h2>
<p style="text-align: left;">這是左對齊文字</p>