[部落格] 語法筆記。常用 HTML 教學筆記 @ 吉野貓 :: 痞客邦 ::

Apr 07 Thu 2011 01:10
[部落格] 語法筆記。常用 HTML 教學筆記

　　HTML語法在書寫網誌中常常被使用到，從最基本的文字格式到功能化的超連結，如何在文章中套入HTML語法，比較常使用的語法會記得住，但是如果遇到像表格或者安裝mp3等比較冷門的語法，那可能要求助他人了。為了讓自己方便，利用網誌寫下HTML及CSS語法的筆記，當下次要使用的時候就可以減少尋找語法的時間。

　　以下語法筆記可點選連結直接進入內容。 - 最近更新：2016/01/05　

HTML	何謂html	html的結構	網頁顏色設定	加入背景圖像
加入水平分線	清單設定方式	標題文字	文字設定	強迫換行
文字格式化	插入超連結	文件內的連結	插入圖片	表格製作
分割視窗	安裝音樂	跑馬燈	常用字元及符號	FIELDSET, LEGEND 標籤

《何謂html》

　　HTML的全名是HyperText Markup Language，是編寫網頁的基本語言，而它並不是一個程式，只是一些插在普通文件內的碼( code )，這些碼可以控制我們的瀏覽器要怎樣把文件顯示出來，就是你現在所看到的頁面就是用HTML來控制的，它可控制字體的大小，也可以插入連結或圖像。

　　一份標準的HTML文件是由元素所組成的，元素是由標籤(Tag)以及文件內容所組成。文件內容可以是文字、圖形、甚至是影像、聲音等等。而標籤又是啥東東呢？？一個開始標籤(< >)是由一個小於符號(<)和一個大於符號(>)所構成的一個起始標籤中加一道斜線"/"就構成了結束標籤(</>) 而一對標籤是由一個起始標籤和一個結束標籤所構成的。

《html的結構》

　　HTML document 有一固定的格式，瀏覽器才可以辨識及分析，進而顯示在你的眼前，而基本格式為：

<html>

          　<head>

            　　<title>

            　　</title>

          　</head>

              　  <body>

        　　  　   顯示的內容

                
  　</body>

        </html>

　　有兩個須要注意的地方，每一個開啟碼是由< > 兩個符號所框住的，而關閉碼是由</ > 所框住的，而每一個HTML碼必須有開啟以及結束，才能完成一項指令。

《網頁顏色設定》

<body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">

bgcolor = 背景顏色
text = 文字顏色
link = 連結顏色
vlink = 已閱讀過的顏色
alink = 連結的顏色

　　而xxxxxx六個數值代表紅／綠／籃的顏色元素值，為A～F及0～9等(16進位0~F)所組合起來的六個數值。

　　另外在xxxxxx的部份也可用顏色的英文單字代替，但xxxxxx之前的#要去掉，如 "黑色" text="#000000" 可換成 text="BLACK"

《加入背景圖像》

　　若您覺得背景顏色太單調，想要換成背景圖像的話，就得要在<body>內加入background的屬性了。如果你的背景圖檔檔名為 back.gif，則<body>內便要寫成：

　　<body background="back.gif" text="#000000" link="#0066cc" vlink="#336600">

　　PS：如果圖像的檔案跟您網頁的檔案不在同一目錄裡，則必須輸入完整路徑，如 "http://www.123.com.tw/back.gif"。

bgproperties="fixed"(使背景圖像固定不動，不過只有IE有效果)

《加入水平分線》

如果想要在網頁內加入一條像下面的水平線，加入<hr>的碼即可。

這是上面那一條線的原始碼 :

<hr size="3" align="center" noshade width="90%" color="#0000ff">

size = 線的寬度
align = 線是靠左(left) / 靠右(right) / 中間(center)
width = 線的長度，可用數字或百分比
noshade = 線沒有陰影
color = 線的顏色

《清單設定方式》

圓頭清單

只要加入<ul>的碼，便可製出有小圓頭的清單 :


    
    <ul>

    
      <li>物件清單1</li>

      <li>物件清單2</li>

      <li>物件清單3</li>

    </ul>

上面的原始碼會顯示成下面的樣子 :

物件清單1
物件清單2
物件清單3

在<ul>的內加入一些參數就可以有不同效果唷 :


    
    <ul 
    type
    =
    "disc
    ">

    
 
      小圓點 
   
    
    <ul 
    type
    =
    "circle
    ">

    
    

      空心小圓點 
   
    
    <ul 
    type
    =
    "square
    ">

    
    
      實心正方黑點

　

數字清單

跟小圓頭的方式很像，只要加入<ol>的碼，便可製出有數字的清單 :

<ol> <li>清單1</li> <li>清單2</li> <li>清單3</li> </ol>

上面的原始碼會顯示成下面的樣子 :

清單1
清單2
清單3

若<ol>內輸入以下指令，就會有不同的形式產生。

type = A ( A. B. C...)
type = a ( a. b. c...)
type = I ( I. II. III...)
type = i ( i. i. iii...)
start = 起始的數值

《標題文字》

瀏覽器可分出六種大小的標題文字，原始碼如下：

<h1>標題文字1</h1> <h2>標題文字2</h2> <h3>標題文字3</h3> <h4>標題文字4</h4> <h5>標題文字5</h5> <h6>標題文字6</h6>

　　上面的碼會造出下面六種大小的標題文字：

標題文字1

標題文字2

標題文字3

標題文字4

標題文字5

標題文字6

《文字設定》

如果要把文字變成粗體，就要在文字前後加上<b>以及</b>的語法。

斜體，就要加上<i></i>

如果要把文字加上底線，就要加上<u></u>

　　喬伊貓的語法筆記　<b>喬伊貓的語法筆記</b>

　　喬伊貓的語法筆記　<i>喬伊貓的語法筆記</i>

　　喬伊貓的語法筆記　<u>喬伊貓的語法筆記</u>

　

文字的控制要加上<font>的碼，它可以控制文字的大小，顏色，字型，在<font>裡加上一些屬性就可以控制

<font　face="Arial"　color="#cc33ff"　size="7"> I love you.</font>

上面的碼會做出下面的文字 :

I love you.

face = 控制文字字體，填入字體名稱
color = 控制文字顏色
size = 控制文字大小，數字1～7

《強迫換行》

如果覺得您的文字太長，想要您的文字跳到下一行，就要加上<br>或<p>的碼 :

　　斷行1 <br>
　　斷行2 <p>

上面的語法會顯現強迫換行效果 :

　　而<p>是比<br>多跳一行的。

　　在<p>的標籤內，可以加入align=left／right／center這樣就可以控制在<p>之後的物件是靠左／靠右／置中了 :

　　如果在<p>內有加入align的屬性，記得加上</p>的關閉碼

《文字格式化》

用<pre>的碼可以將你所要顯示的文字格式一模一樣的顯示在瀏覽器上，再用</pre>來關閉

<pre> 格式會跟你打的一樣唷看到了嗎會一模一樣唷！！ </pre>


格式會跟你打的一樣唷
看到了嗎
會一模一樣唷！！

《插入超連結》

文字之超連結

　　連結為一個網頁不可少的東西，沒有連結就那都不能去，如要插入一個連結便要加入<a href="URL">連結文字</a>的語法 :

　　按下下面的連結會連到喬伊貓首頁唷!!

<a href="http://joeycatblog.blogspot.com"><font size="2">喬伊貓</font></a>　

URL就是所要連結的網址

如果是要連結在同一系統內的檔案，則將URL改成相對的路徑即可

連結到同一目錄內的檔案

<a href="index.htm">回首頁</a>

連結在子目錄的檔案

<a href="a/1.htm">連到a目錄裡的1.htm</a>

而在<a href="URL">的標籤中，可插入target="_new／_top／_blank／name"
來改變連結所開啟頁面的狀態!!

在target裡的參數如下 :

_new=在一個新視窗開啟，不過只會一直在同一個新視窗開啟，不會另外在開一個新視窗
_top=在同一個視窗出現，不過是整個大視窗，而不是所分割後的視窗
_blank=跟_new差不多，只是會一直出現新的視窗，而不會在同一個新視窗開啟 =''
name=在frame有介紹，是給frame的name

而在<a href="URL">的標籤中，可插入STYLE="text-decoration:none"來消除連結的底線。

所有的連結方式，並不一定用文字，用圖片也是可以的，只要將連結的文字改成 <img src="圖片網址"> 即可。

《文件內的連結》

看到上方的網頁導覽或回教學導覽按下去是不是會跳到網頁內的某個地方，一共有兩個步驟 :

(1) 給目標地一個名稱，而這個名稱是在按下連結時會跳到的地方 :

<a name="目標名稱">目標地點</a>

(2) 插入一個連結，而這個連結是當你按下這個連結時便會跳到目標地點 :

<a href="#目標名稱">跳到目標地點</a>

在連結的標籤內，必須加上#在目標名稱前，本篇文章語法筆記也有利用到此功能的語法。

《插入圖片》

圖像是一個美化網頁的重要因素，要插入圖像，就要加入<img src="圖檔網址">

<img src="http://farm9.staticflickr.com/8010/6966560306_77aee082f6.jpg">

上面的碼會做出下面的效果 :

其中<img src="圖檔網址.jpg">內還可加入下列屬性，來變化圖檔 :

width=控制圖檔長度
height=控制圖檔高度
align=控制圖檔left(靠左)／right(靠右)／center(置中)
border=控制外框粗細，不外框便設成0

《表格製作》

　　表格是每一個網頁不可缺少的東西，首先我們要加入<table>的碼，在<table>的標籤內可以控制整個表格的長度和外框的粗細 :

<table width="300 border="1 cellspacing="2>

width=控制表格長度，可用數字或百分比
cellspaing=控制儲存格的分隔距離，內定為2
background=背景圖檔
border=控制外框粗細，不外框便設成0

　

這只是一開始的設定，必須在<table>後加上<td>，才會新開一個儲存格，再用</td>來關閉儲存格 :

<table border=1>

        <td>儲存格1</td>

        <td>儲存格2</td>

        </table>

儲存格1

儲存格2

　

若想跳到下一行，加上<tr>即可 :

<table border=1>

        <td>儲存格1</td>

        <td>儲存格2</td>

        <tr>

        <td>儲存格3</td>

        <td>儲存格4</td>

        </table>

儲存格1	儲存格2
儲存格3	儲存格4

　

當然亦可使用<th>:


    <table border=1>

        <th>儲存格1</th>

        <th>儲存格2</th>

        <tr>

        <td>儲存格3</td>

        <td>儲存格4</td>

        </table>

儲存格1	儲存格2
儲存格3	儲存格4

　

<td><th>內的屬性如下 :

align=控制水平是left(靠左)／right(靠右)／center(置中)
valign=控制垂直是top(靠上)／middle(置中)／bottom(靠下)
background=背景圖檔
colspan=使一個儲存格橫跨 N 個欄位
rowspan=使一個儲存格下跨 N 個列

若想為表格加上標題，來標明整個表格的主題，可在<table>後加上<caption>的標籤

<table border=1>

        <caption>公佈欄</caption>

        <td>儲存格1</td>

        <td>儲存格2</td>

        <tr>

        <td>儲存格3</td>

        <td>儲存格4</td>

        </table>

公佈欄
儲存格1	儲存格2
儲存格3	儲存格4

　

colspan的用法 :


    <table border=1>

        <td colspan=3 align=center>儲存格 A1</td>

        <tr>

        <td>儲存格 B1</td>

        <td>儲存格 B2</td>

        <td>儲存格 B3</td>

        </table>

儲存格 A1
儲存格 B1	儲存格 B2	儲存格 B3

　

rowspan的用法 :


    <table border=1>

        <td rowspan=3 align=center>儲存格 A1</td>

        <td>儲存格 B1</td>

        <tr>

        <td>儲存格 B2</td>

        <tr>

        <td>儲存格 B3</td>

        </table>

儲存格 A1	儲存格 B1
	儲存格 B2
	儲存格 B3

《分割視窗》

語法如下：


    <frameset cols = 數字或比例,數字或比例>

 (左右分割畫面)

<frameset rows = 數字或比例,數字或比例> (上下分割畫面)

　

也可以寫成這樣 :

<frameset cols=120,*>

以上語法代表的是，左邊分配使用的頁面長度為120，而剩餘的空間都給右方的頁面使用。

　

在<frameset>之後便要加上<frame>的碼，如果左邊頁面的顯示檔案為left.htm，而右邊的頁面顯示的檔案為right.htm，如下所示 :


    <frameset cols=120,*>

        <frame src="left.htm">

        <frame src="right.htm">

        </frameset>

在<frameset>內的控制屬性如下 :

framespacing=控制兩個frame之間的距離
frameborder=控制frame外框的粗細
border=控制外框粗細，不外框便設成0

　

要分割頁面的原始碼如下，不須加上<body>碼 :


    <html>

        <head>

        <title> 

        </title>

        </head>

        <frameset cols=120,* 
        frameborder="0" framespacing="0" border="0">

        <frame src="left.htm">

        <frame src="right.htm">

        </frameset>

        </html>

　

frame內的特性

在<frame>內的特性 :

noresize=讓瀏覽者不可改變frame的size，就加上這行
scrolling=auto/no控制frame是可以/不可以捲動
name=給frame的名字，下面有介紹如何應用

　　看到這整個頁面了沒，按下左邊．右邊的主選單，是不是會在中間的視窗顯示內容，而主選單都不會變呢，這就是利用了上面所說的name的屬性 :

<frame src="left.htm" name="left"> <frame src="right.htm" name="right">

而我們想要在按下左邊頁面裡的連結時，只改變右邊頁面的內容，則在左邊頁面的連結標籤裡要加上 target="center002" :

<a href="right.htm" target="right">回首頁</a>

《安裝音樂》

<embed src="music.mid" loop="1" hidden="true" autostart="true">

src=設定你想要撥放的midi音樂檔名
loop=音樂重撥次數，如想不斷撥放便設成true
autostart=是否要在音樂檔傳完之後，就自動播放音樂。true是要，flace是不要。內定值是不要。
width=控制面版寬度
high=控制面版高度
align=控制面版與旁邊文字的對齊方式，跟<img>的語法一樣
hidden=true(如果寫上這個屬性的話，就會完全隱藏控制面板，但無法設定控制面板的寬和高。)
controls=控制面版樣式為console(正常面版)／smallconsole(較小面版)／playbutton(只顯示撥放按鈕)／pausebutton(只顯示暫停按鈕)／stopbutton(只顯示停止按鈕)／volumelever(只顯示音量調整)

可以放在<body>跟</body>之間做網頁物件使用，也可以加入hidden=true的屬性使面版隱藏做為背景音樂使用

《跑馬燈》

　　若您覺得網頁太單調，想要加上變化的話，跑馬燈是不可少的．只要加上<marquee>即可

<marquee>跑馬燈</marquee>

跑馬燈

在<marquee>內的屬性 :

bgcolor="#aaff00"這裡加上背景顏色，顏色可以自己改喔
direction=這是空控制行進的方巷喔right／up／down
scrollamount=這是空控制行進的步伐喔
behavior=這是空控制行進的方式喔：
slide文字碰到底邊就會停止／alternate左右碰撞
width=加上這可以設定行進的寬度
height=加上這可以設定行進的高度

《常用字元及符號》

　　常用字元及符號常被用來文章使用或者是原始碼使用，由於語法及編碼並不易記憶，故在此做了表格方便存取。

HTML常用字元
HTML字元	實際顯示
&	&
"	"
<	<
>	>
	空白

常用符號
┌	┬	┐	├	┼	┤	└	┴	┘	─	│	↑	↓	←
→	§	∮	《	》	〈	〉	【	】	『	』	〝	〞	‘
’	“	”	☆	★	︵	︶	﹝	﹞	（	）	○	●	◎
※	∵	∴	：	‧	。	，	°	、	；	！	？		＊
﹋	╰	╯	◣	◢	◥	◤	█	□	◇	♂	♀	▼	∞
∥

《FIELDSET,LEGEND》　　FIELDSET 可以像表格一樣，把不同內容依照區域分組歸類出來。而 LEGEND 只能在 FIELDSET 中使用，用來宣告 FIELDSET 的標題，本文章架構就是以FIELDSET及LEGEND設計，跟其他方式比較感覺美觀許多。

<fieldset><legend>基本資料</legend> 姓名：<input size="20"> 電話：<input size="20"> 住址：<input size="20"> </fieldset>

基本資料姓名：
電話：
住址：

　

另外LEGEND可使用 align 指令編輯其位置可設定為：

　　top：標題放在上方(此為內定值)。
　　bottom：標題放在底部。
　　left：標題置左。
　　right：標題置右。

《新增中..》

Yoshinocat

吉野貓

Yoshinocat 發表在痞客邦留言(0) 人氣()

E-mail轉寄

歷史上的今天

2012: 【理財】先鋒基金超市。三折申購手續費免信託保管費

留言列表

最新文章

最新留言

誰來我家

文章搜尋

參觀人氣

本日人氣：
累積人氣：