9 walker studio-9w個人設計工作室
Google
.網頁設計接案業務
.加入GForce手機娛樂聯盟

.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載

.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡

 友站及其它連結
刑事警察局網際網路資訊站
591租屋網站
反毒害大聯盟
台灣認養地圖
KTzone日記, 論壇
::S.H.E 青春組織國際後援會::
基礎HTML教學
Hyper Markup Language

01 HTML簡介 10 分割畫面(Frameset)
02 HTML文件的基本架構及指令 11 超鏈結(Hyper Link)
03 製作第一份HTML文件 12 拋錨(Anchor)
04 網頁背景(Background) 13 表單(Form)
05 控制標題字元大小及字型指令 14 跑馬燈Internet Exploer專用
06 使用CSS控制字元屬性 15 文字編排
07 表格的運用(Table) 16 Meta 指令運用
08 清單(List) 17 標註指令列表
09 加入圖片
18 其他

15、文字編排

在文字處理方面,有用來控制字體大小的H(Heading)和 FontSize,沒有被它們包圍著的文字,瀏覽器便會以預設的字體來出來。

標題 Heading: H1, H2, H3, H4, H5, H6

<h# align="left | center | right | justify">文字</h#>

H是用來控制標題全行文字大小的,其格式是 <h#># 為標題字體大小的級數,成員共有六個,由 161 最大而 6 是最細,當遇到不同級數的文字時便會自動跳行。

<h1>第一級標題</h1>
<h2>第二級標題</h2>
<h3>第三級標題</h3>
<h4>第四級標題</h4>
<h5>第五級標題</h5>
<h6>第六級標題</h6>

輸出結果:

第一級標題

第二級標題

第三級標題

第四級標題

第五級標題
第六級標題

字型 Font: FONT

<font face="字體名稱" size="#" color="colorcode">文字</font>

內文方面則有 <font size="#"></font> 的 tag,這個 tag 十分靈活,能使同一行中的文字大小作出變化,還提供多達七種的大小。

<font size="1">一級大小</font>
<font size="2">二級大小</font>
<font size="3">三級大小</font>
<font size="4">四級大小</font>
<font size="5">五級大小</font>
<font size="6">六級大小</font>
<font size="7">七級大小</font>

輸出結果:

一級大小
二級大小
三級大小
四級大小
五級大小
六級大小
七級大小

我們亦可以用 <font face="FontName"></font> 來定義所用的字體。

<font face="Arial">Arial</font>
<font face="Times New Roman">Times New Roman</font>
<font face="Sans-Serif">Sans-Serif</font>
<font face="Courier New">Courier New</font>
<font facee"Verdana">Verdana</font>

輸出結果:
Arial
Times New Roman
Sans-Serif
Courier New
Verdana

因為很多人都有以上的字體,所以很多人都用些字體來製作網頁。如你看不到這些字體有何變化,亦即表示你並未安裝該種字形。 若瀏覽者是沒有安裝到該被定義的的字體是時,他是看到的只會是預設字體。

字元格式 Bold, Italic & Underlined: B, I & U

至於字元的格式,常用的分別有標準、粗體、斜體和加底線。

<p><b>Bold</b><br>
<i>Italic</i><br>
<u>Underlined</u><br>
<b><i><u>粗斜底線混合使用</u></i></b></p>

輸出結果:
Bold
Italic
Underlined
粗斜底線混合使用

段落 Paragraph & Break: P & BR

<p align="left | center | right | justify">
<br>
</p>

段落 <p>文字</p> 文<br>字

輸出結果:

段落

文字




一段文章的首尾都必定要分別有<p>和</p> (Paragraph),否則整篇文章便會變成一篇巨大的文章了。另外,除非你加了<p></p>,否則瀏覽器是不會理會你跳行的。

在普通的文字處理程式上按兩次空白鍵(Space Bar)即出現兩個空白位,但在HTML裡,除非使用全形的空白,否則無論多少空白位仍被瀏覽器視為一個空白位。

縮排 Quotation: BLOCKQUOTE

<p>未作縮排</p>
<blockquote><p>縮排文字</p></blockquote>

輸出結果:

未作縮排

縮排文字

<p>未作縮排</p>
<blockquote>
  <p>第一次縮排</p>
  <blockquote>
    <p>第二次縮排</p>
    <blockquote>
      <p>第三次縮排</p>
    </blockquote>
  </blockquote>
</blockquote>

輸出結果:

未作縮排

第一次縮排

第二次縮排

第三次縮排

原用格式 Preformatted: PRE

如果你想把一篇文章,毋須受到 HTML Tag 的限制,即不理會 <P></P><BR>、多個空白位等,
而完完整整的以 HTML 方式重現在瀏覽器上,那你便要用到 <PRE></PRE> (Preformatted)。
<PRE></PRE> 內的文字將以原本的形態重現在瀏覽器上。

<p>P     r     eformatted</p>
<pre>P     r     eformatted</pre>

輸出結果:

P r eformatted

P     r     eformatted
<B> … </B> 粗體
<P>...</P> 在兩列文字中間加一列空白列
<I> … </I> 斜體
<EM> … </EM> 強調
<U> … </U> 加底線
<Strike> … </Strike> 文字上加一橫線
<Strong> … </Strong> 特別強調
<Small>...</Small> 縮小文字
<Address> … </Address> 通常用來做署名及地址
<Sup> … </Sup> 上標
<Sub> … </Sub> 下標
<Center> … </Center> 置中
<blockquote>...</blockquote> 縮排
<PRE> … </PRE> 照原編排格式



本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!

Power by 9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站