skip to main content

常用的HTML Tags和屬性(Attribute)

於2020年02月18日發佈


上次講到在HTML中用在<body></body>中間的都是用戶會見到的部份,以下的HTML Tags都是很常用,你可以加進你index.html<body></body>的中間裏來自己試下效果。

如果你未準備好自己建造的第一個簡單網頁index.html的話,先回上一節課攪好一個基本的HTML檔案再回來這裡,有自己HTML檔案的可以試下以下的幾個常用HTML tag。

先來幾個最簡單的

代碼在第一行,效果在下一行

來個複雜點的tag

Order List

<ol>
<li></li>
<li></li>
</ol>

Unordered List

<ul>
<li></li>
<li></li>
</ul>

Table

<table width="100%" border="1">
<tr>
<td>第一行第一格</td>
<td>第一行第二格</td>
</tr>
<tr>
<td>第二行第一格</td>
<td>第二行第二格</td>
</tr>
</table>

<tr> : table row (表格的每一行/列)
<td> : table cell (表格的每個格)

第一行第一格 第一行第二格
第二行第一格 第二行第二格

如果你將我上面的代碼都加進上次建造的第一個HTML的index.html檔案裏的話,你應該大概會得到以下結果(位置可能有點區別,不過沒關係)

HTML Tag中的Attribute (屬性)

你記住了多幾個新HTML Tag以外,還看到了一些除Tag以外的一個新東西,就是Attribute (屬性)

舉兩個例:

<table width="100%" border="1">
<table>tag裏面的width和border是<table> tag的屬性

意思分別是
width="100%" : 百份百闊度(有多闊就多闊)
border="1" : 1闊度的邊框

或者是以下的<a>超連結的a tag

<a href="https://google.com" target="_blank">直接到Google去</a>

href和 target是<a> tag的屬性,意思分別是
href : 連接去那裏
target : 去那連結的方式

下一節課

下一次我會介紹如何加入外部圖檔,和調較顯示大小比例

→到下一節課 : 常用的HTML Tags(二)- 學會加入外部圖檔,並按比例的調整圖片大小

本文作者

網站位置 : 常用的HTML Tags和屬性(Attribute)

←返回首頁   返回頁頂↑