iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
1
自我挑戰組

新手前端開發通俗系列 第 1

Day 01 Html基本語法

什麼是 Html 標籤語言?
以下為一個基本Html所包含的基本結構


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網站標題</title>
</head>

<body>
</body>

</html>
<!DOCTYPE html>:表示此份為Html5的網頁文件

<html lang="en">...</html>:這一大段表示的是這份Html文件所使用的語系如"en"則為英文"zh"則為中文

<head>...</head>:這段所包含的是文件的相關訊息,如:關鍵字、內容概述、文件編碼、文件語系或文件類型..等
也可在此處撰寫JavaScript或CSS樣式。若要在文件中指定utf-8編碼,則可以在此標籤中加入<meta>標籤,
寫法如下
`
<meta charset="utf-8" />
`

<body>...<body>:網頁所顯示的主要內容均撰寫於此

簡單來說,Html的程式語言在編譯時會有開頭與結束
寫法如下

寫法1:成對標籤
<起始標籤 屬性名稱 1="屬性值 1" 屬性名稱2="屬性值2" ...>內容</結束標籤>
寫法2:非成對標籤
1. <標籤名稱 屬性名稱1="屬性值1" 屬性名稱2="屬性值2".../>內容
2. 內容<標籤名稱 屬性名稱1="屬性值1" 屬性名稱2="屬性值2".../>

只要了解其架構,基本上後續的語法都是大同小異的
在撰寫Html前推薦下載編譯器,Visual Studio Code

基本入門請以上面簡單程式手法,並瞭解其中語法所使用的效果

    <b>文字以粗體標示</b>
    <br><br>
    <strong>文字以粗體標示(強調)</strong>
    <br><br>
    <i>文字以斜體顯示</i>
    <br><br>
    <em>文字以斜體顯示</em>
    <br><br>
    <u>文字下面加上底線</u>
    <br><br>
    <ins>文字下面加上底線</ins>
    <br><br>
    <s>文字加上刪除線</s>
    <br><br>
    <del>文字加上刪除線</del>
    <br><br>
    這是正常字<sup>文字以上標字顯示</sup>
    <br><br>
    這是正常字<sub>文字以下標字顯示</sub>
    <br><br>

可以自行嘗試看看將上述程式碼貼到編譯器body標籤裡,並保存Html所顯示出來的文字是不是和其效果一樣呢?
此外還有標籤
超連結標籤<a>
列表標籤<ol>、<li>
圖片標籤<figure>、<figcaption>、<img>
影片、音訊標籤<video>、<audio>、<source>..等重要標籤

可以參考以下自學網站
W3SChool


系列文
新手前端開發通俗1

尚未有邦友留言

立即登入留言