金魚都能懂的網頁設計入門-HTML 的標籤

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第三天 - HTML 標籤

HTML 的標籤有

網頁會使用到的標籤有:
主標題，副標題，小標題，內文，無序清單 ，有序清單（步驟）， 導覽列， 超連結，粗體字，圖片(是單標籤<img>) ，<figcaption>有利 SEO 但須要隱藏（可用CSS ）, 表格,
粗體: <b>視覺上告知粗體字</b> <strong>強調-for SEO</strong> ,
斜體: <i>斜體字</i> <em>更大層度的強調emphasis-斜體 for SEO</em>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
  <h1>主標題</h1>
  <h2>副標題</h2>
  <h3>副標題</h3>

  <p>內文內文內文內文內文內文內文內文內文內文內文內文內文內文
    內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文
    內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文
    內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文
  </p>

<ul>  
   <li>無序 清單一</li>
  <li>清單二</li>
  <li>清單三</li>
  <li>清單四</li>
  <li>清單五</li>
</ul>


<ol>  
   <li>有序清單 步驟一</li>
  <li>步驟二</li>
  <li>步驟三</li>
  <li>步驟四</li>
  <li>步驟五</li>
</ol>
<!-- nav 導覽列 -->
<nav>
    <!-- 超連結 -->
    <a href="#">選單</a> 
    <a href="#">選單</a>
    <a href="#">選單</a>
    <a href="#">選單</a>
    <a href="#">選單</a>
</nav>

  <p>內文<strong>>粗體字</strong>
    內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文
    內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文內文
    <em>斜體字</em>
  </p>

<!-- src 是 圖片 img 的屬性 -->
<img src="https://picsum.photos/300/200/?random=3" alt="假圖">
<!--figure 圖片 -->
<figure>
    <img src="https://picsum.photos/300/200/?random=3" >
    <figcaption>
        圖片說明，可以敘述多一點。。。。。
    </figcaption>
</figure>

<!-- 表格 -->
<table border="2">
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
        <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

文獻連結:
第四天
https://www.youtube.com/watch?v=88qmvi4snuo&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=3 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos