iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
自我挑戰組

小白網頁設計練成記系列 第 3

小白網頁設計練成記-DAY3-淺談HTML 元素

  • 分享至 

  • xImage
  •  

HTML裡面的文檔都是由元素定義的,每個元素的組合和串聯就形成一個網頁的結構,
舉例來說:<P></p>代表"段落",<br></br>代表換行,<body></body>則代表內文主體,三個合在一起就變成簡單的結構,如下:

<body>
    <p>hello<br>world</br></p>
</body>

顯示如下:
hello
world

由上述可以知道,HTML文檔是由相互嵌套的HTML元素組合而成(HTML元素內包含其他的元素)。

以下是我們常用的HTML元素

< html > 元素 = 定義一個HTML文檔

<html>

<body>
<p>我是蔡蔡</p>
</body>

</html>

< head >元素 = 關於文檔訊息

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

< title >元素 = 為文檔定義標題

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蔡蔡的小白日誌</title>
</head>

< body > 元素 = 文檔主體

<body>
    <p>我是蔡蔡</p>
</body>

< h1-h6 >元素 = HTML標題

<body>
    <h1>蔡蔡的家</h1>
</body>

< p > 元素 = 段落

<body>
    <h1>蔡蔡的家</h1>
     <p>我是蔡蔡</p>
</body>

< nav >元素 = 導覽列
< a >元素 = 超連結

<body>
    <nav>    
        <a href="p01.html">首頁</a>
        <a href="p02.html">產品介紹</a>
        <a href="p03.html">企業活動</a>
        <a href="p04.html">關於我們</a>
        <a href="p05.html">聯絡我們</a>
</body>

< ul >元素 = 無序列表
< ol >元素 = 有序列表
< li >元素 = 清單

<ul>
    <li>帥帥1</li>
    <li>帥帥2</li>
</ul>
<ol>
    <li>hansome</li>
    <li>hansome</li>
</ol>

< stong >強調粗體
< em >強調斜體
< b >粗體bolded
< i >斜體italic

還有很多標籤小弟我就不贅述了~

每打完一段千萬不要忘記打上結束標籤< / >跟分號;,小心失之毫厘差之千里...

現在HTML標籤並沒有強制規定要使用大寫還是小寫:< UL >=< ul >。

W3c推薦使用小寫,因為未来(X)HTML版本中强制使用小寫。

我是結語

學習至今,還有好多元素沒有掌握,在分享這篇文章同時,就只記得幾個常用的標籤,於是乎又去看了好多文章加深記憶,有時候越看越恐慌哈哈。
今天是鐵人賽的第3天,也是我自學的第10天,如果有跟我一樣剛學的小白,希望我們可以一起堅持到最後~不為別人只為自己!


上一篇
小白網頁設計練成記-DAY2-HTML介绍
下一篇
小白網頁設計練成記-DAY4-淺談區塊元素<div> & <span>
系列文
小白網頁設計練成記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言