2013/06/19

HTML常用標籤（一）

既然我們一腳踏入了HTML的世界，那麼首先我們先來熟悉幾個常用的標籤吧！請看下面的範例：


哈囉！大家好：

這是我的部落格
裡面有一些我個人的心情抒發與教學文章
最新的文章是：
  • HTML常用標籤（一）
  • HTML文件編輯的第一步
  • HTML的基本 - 標籤
  • 網頁基礎：HTML? CSS? javascript?

OK！以上會是你的第二個網頁，讓我們看看這個網頁原始碼：

<html>
     <head>

            <title>我的第二個網頁</title>

      </head>
     <body>

           哈囉！大家好：<br />
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvKnwmuxg-dGBYQl1hQ-vs-qMzoydRsj23abZpaEiYw04-Pqzx7CxlD8q1ZXHxdF7Mphu-euDiQl66aTXNxCa9hNUxFov0J7gQgxUxiQ1WEPRH9yMqSTzDyn4aRxHiLxwwNkQo_tZ9eE/s320/IMG_7004.jpg" />
          <br />
          這是我的<a href="http://okaoka0709.blogspot.tw/">部落格</a>
          <br />
          裡面有一些我個人的<i>心情抒發</i>與<i>教學文章</i>
          <br />
          最新的文章是：<br />
          <ul>
               <li><strong>HTML常用標籤（一）</strong></li>
               <li>HTML文件編輯的第一步</li>
               <li>HTML的基本 - 標籤</li>
               <li>網頁基礎：HTML? CSS? javascript?</li>
          </ul>

      <body>
<html>

你已經會用html標籤包住header跟body標籤了，首先我們先注意到header標籤的地方，裡面包了一個title標籤。

title

title標籤很好理解，title裡面包含的文字會被顯示在瀏覽器分頁籤上：


br

接下來我們看看body的部分，第一個看到的應該是br這個單獨標籤，對HTML來說，空白與Enter斷行並不會對網頁產生任何效果。所以br標籤就是專門用來斷行的標籤，只要你在想斷行的地方加上<br />就可以實現作用了。

img

而後就是重要的img單獨標籤，這個標籤負責為網頁置入圖片。img標籤也是目前你第一個看到可以設定屬性的標籤。

既然標籤各自提供不同的功能，能設定的選項也就不同。而這個功能的選項，就叫屬性，通常寫在標籤開頭之後，單獨標籤的例子如<img src="xxx" />，成對標籤如<div id="xxx" class="xxx" ></div>，寫法是屬性="值"。

img標籤能設定的屬性為src，也就是妳需要圖片的位置(範例為一網址)，img標籤就會把那個位置的圖片顯示出來。

a

a標籤負責處理連結，把要設定連結的物件用a標籤包住就可以作用，a標籤也提供了可以設定的屬性href，值為連結的網站位置如http://tw.yahoo.com。
<a href="http://okaoka0709.blogspot.tw/">部落格</a>表示將"部落格"這三個字連結"http://okaoka0709.blogspot.tw/"。

strong與i

i與strong都是成對標籤，i是italy的縮寫，學過設計的一定都知道italy字體是斜體，所以用i標籤包起來字串就會變成斜體囉！strong顧名思義，字體變強壯；當然就是變粗了。

ul與li

ul是清單標籤，ul標籤的出現即是告訴瀏覽器：「接下來是一個清單」。清單中當然會有一條一條的項目，這個項目就是li標籤，以下會產生一個選單：

<ul>這是一串清單
<li>選項一</li>
<li>選項二</li>
<li&gt;選項三</li>
<li&gt;選項四</li>
<li>選項五</li>
</ul>

會顯示成：
    這是一串選單
  • 選項一
  • 選項二
  • 選項三
  • 選項四
  • 選項五

恭喜你，具備了所有完成第二個網頁的知識，開始動手寫HTML吧！
by at

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)