iT邦幫忙

2

[鼠年全馬鐵人挑戰] Week08 - 超新手入門:HTML 的基本語法

Hi~又見面啦:)

想必很多剛開始碰前端程式語言的新手都會對一堆程式碼搞的頭很痛(嗯,我就是...)
新手一開始必定會接觸到 HTML 及 CSS語法,但我該用哪個程式碼?這些程式語法怎麼用呢?
這篇文章就來介紹 HTML 的基本語法,希望能幫助到新手唷:)

HTML 基本撰寫格式

在撰寫基本的HTML前,首先要知道 HTML 的基本格式:


<html>

 <head>

  <title> </title>

 </head>

 <body>


 </body>

</html>

一個網頁就是由很多個 <> 包起來的語法所建制而成的, <> 這個符號也就是所謂的「 標籤 」。而最上方使用 <html> 及最下方使用 </html> 就是要告訴網頁瀏覽器這是個一個 html 的網頁(記得結尾要用</html>唷),通常是放在整個網頁的頭跟尾,把所以的程式碼標籤都包在裡面。

P.S 也是有標籤不用寫結尾的,例如:<br>、<hr>等等...。

在這裡整理出上面的標籤語法:

<html> </html> = 文件宣告格式,網頁的開頭及結尾。
<head> </head> = 描述網頁的主題資訊,裡面可以放很多功能。
<body> </body> = 網頁的內容區塊。

一般常見語法

在開始撰寫網頁的時候,我們會用到許多語法,但對新手來說語法那麼多該用哪一個語法標籤來呈現出自已想要呈現的網呢?在這裡也列出幾個常見我平常比較會使用到的語法:

<a href> = 加入超連結,例如要引導使用者到另一個網頁可以用上的語法。
<b> = 粗體字,可以讓字體變
<i> = 斜體字,可以讓字體變
<u> = 可以讓文字下方加入下底線。
<br> = 換行,如果你想讓一段很長的文字換行可以使用這個語法。
<h1> = 設定標題文字大小,h1為最大可當作主標題。
<h2> ~ <h6> = 同樣可以設定標題文字大小,但會比h1還小,可當作副標題
<img src> = 插入圖片。
<ul>、<ol> = 項目列表文字,前者以點來表示後者是數字。
<li> = 項目標題。
<div> = 區塊,透過 div 標籤可以在網頁中創造各個不同的區塊,每個區塊內還可以增加更小的區塊,是常見排版會用的標籤。
<span> = 同樣的也跟div一樣會拿來用在排版上面,跟div不同的是,div顯示會是一塊一堆的區塊,span則是在平行在同一行的。
<! - - ... - -> = 用於HTML文件中的註解。

其實,HTML的標籤語法還有很多,依照開發者不同的需求而有相對應可應用的標籤,上面列的是我平常較常用的,在還是初學者的我目前會用的標籤還不多,隨著學習時間的增長,我相信會學到越到越來越多的標籤語法的:)
寫這篇文章其實也很怕寫錯誤人子弟呢(誤XD
但還是試著寫出來了~希望對初學者還是可以有一點小小小幫助,我就很開心啦XD
下一篇,來試試寫寫看 CSS 常見語法吧~:)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
iT邦新手 5 級 ‧ 2020-03-30 16:46:16

哇~越寫越棒惹~
有些HTML標籤不用結尾呦
看看要不要補充一下 : P

a841722 iT邦新手 5 級 ‧ 2020-03-31 17:26:22 檢舉

好的,感謝:)

我要留言

立即登入留言