iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
3
自我挑戰組

從零開始的基礎網站開發系列 第 3

day2 - 文字的藝術

  • 分享至 

  • xImage
  •  

正文開始:
每篇文章皆有許多不同的語法去凸顯某段文字的存在,用來使文章豐富多彩,今天我們就來學習如何在HTML上使用這些語法吧。

但,首先我們最需要的還是得先知道如何在網頁上編寫中文!!
參考資源:維基百科
UTF-8(8-bit Unicode Transformation Format)是一種針對Unicode的可變長度字元編碼,也是一種字首碼。它可以用來表示Unicode標準中的任何字元,且其編碼中的第一個位元組仍與ASCII相容,這使得原來處理ASCII字元的軟體無須或只須做少部份修改,即可繼續使用。因此,它逐漸成為電子郵件、網頁及其他儲存或傳送文字的應用中,優先採用的編碼。

許多編譯器上會預設字元編碼為UTF-8,倘若沒有這個設定,輸入英文沒有問題,但一旦你輸入的是中文,網頁便無法解讀文字進而輸出亂碼,因此我們今天第一步就是學習如何告訴網頁我們使用的是UTF-8。

 <head>
     <meta charset="utf-8" />
 </head>

meta主要的用途是用來描述網頁相關訊息,他是一個空白元素(沒有結束標記,結尾直接加上/)
charset為meta內的一個參數,用來設定字元編碼

現在我們已經可以正確地輸入文字了,接下來就開始進行更改吧
在html中無論我們無論輸入多少個空白字元輸出都會只剩下一個,並且換行視為空白字元,這被稱為空白壓縮,空白壓縮也會用來進行縮排原始碼,因此上面那段代碼也可以修改成

 <head><meta charset="utf-8" /></head>

因此我們需要有空白字元和換行的輸入方式,分別為

 半形空白:&nbsp;
 全形空白:&emsp;
 換行:<br />

這邊再介紹一個很好用的標籤

 <body>
    <pre>內的格式不會更改</pre>
 <body>

pre內的空白字元和換行可以正常的出現,因此在pre標籤內不用額外輸入空白和換行標籤
此標籤通常運用於歌詞或代碼顯示,其本身是無意義的

接下來我們介紹在html內的標題輸入方式

 <body>
    <h1></h1><h2></h2><h3></h3>
    <h4></h4><h5></h5><h6></h6>
 </body>

h也就是heading,後面數字代表其重要性,數字越小重要性越高,其字體也會由大至小,但我們不應只因修改字體大小而使用此標籤。

文字的粗體和斜體我們會使用b標籤和i標籤,但在網頁解讀上並無意義,若需要加強語調請用strong標籤,若要表達轉折語意請用em標籤

 <body>
  <p><b>我是粗體無意義</b></p>
  <p><i>我是斜體無意義</i></p>
  <p><strong>我是用來表達強調的粗體</strong></p>
  <p><em>我是用來轉折的斜體</em></p>
 </body>

我們要引述一段文章的話可以使用blockquote標籤,瀏覽器大多會將其縮排,其內部可以輸入cite參數,cite本身意義為註解來源,來源通常為一段URL(網址)

 <body>
  <blockquote cite="#">引述的段落</blockquote>
 </body>

abbr標籤用來表示縮寫字(min.),而acronym標籤為首字母縮寫(NASA),在html5中acronym為非標準元素,僅出現在html4,但本身使用上還是沒問題的,二者內部皆有一個title參數,用來表示縮寫的原文。(如何告訴網頁html使用版本將在後面提到)

 <body>
  <abbr title="minute">min.</abbr>
  <acronym title="National Aeronautics and Space Administration">NASA</acronym>
 </body>

當我們在文章中有進行些想要讓讀者了解的更動時我們可以使用ins標籤表示增加(增加底線),del標籤表示刪除(加上刪節線)

 <body>
  <p><del>售價:50</del><ins>大特價40</ins>元</p>
 </body>

今天我們了解到如何去讓網頁上的文字更加富有含意,人類可以看到一段文字去推敲其意義,然而你必須在網頁編寫上添加各種標籤方能告訴搜尋引擎文字的意義,明天我們將學習如何讓網頁更加美觀易讀,不再只有死板的文字。


上一篇
day1 - 向世界打招呼吧
下一篇
day3 - 超連結。表格。清單
系列文
從零開始的基礎網站開發29
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言