iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0

除了上一篇介紹的基本架構的標籤外,還有一些很常使用到的標籤。

超連結Hyperlinks

是指內由一檔案連接至另一檔案的連結。
標籤定義了一個超鏈接
href全名為Hypertext Reference ,會指定超連結的目標連結,表示連結的目的地。
<a href="網址放這裡 /">超連結顯示文字</a>

<!DOCTYPE html>
<html>
<body>

<h1>超連結</h1>

<p><a href="https://ithelp.ithome.com.tw/articles/10292630">鐵人賽day02</a></p>

</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20220918/20152201cSaMIjqI0j.png

圖片
標籤用於嵌入圖像鏈接到網頁中,顯示圖片。
src(source)指定圖像的路徑
alt(alternative text )指定圖像的替代文字

<img src="圖片名字.檔名" alt="替代文字">

<!DOCTYPE html>
<html>
<body>

<h2>圖片</h2>
<img src="1.png" alt="讚">

</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20220918/20152201PNXxZFdUHf.png

表格
<th>…</th>表格欄位的標題,<th> 可以用來替代 <td> 使用
<td>…</td>為單格的內容
<tr>…</tr>為一行表格。
<table>…</table>為整個表格的結構和內容

<!DOCTYPE html>
<html>
<body>
<h2>表格</h2>
<table style="width:20%">
  <tr>
    <td>姓名</td>
    <td>生日</td>
    <td>興趣</td>
  </tr>
  <tr>
    <td>吳美麗</td>
    <td>2000/5/30</td>
    <td>跳舞</td>
  </tr>
  <tr>
    <td>林志明</td>
    <td>1988/10/8</td>
    <td>游泳</td>
  </tr>
  <tr>
    <td>黃成功</td>
    <td>2012/12/12</td>
    <td>睡覺</td>
  </tr>
</table>
</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20220918/20152201xwz0ZEpRCL.png

佈局

下圖為在做網頁會使用到的網路架構示意圖:
https://ithelp.ithome.com.tw/upload/images/20220918/20152201PmFjvTf8bh.png

<header>標題
<nav>網頁中提供引導連結的區域欄
<section>網頁中有明顯含義的區塊
<aside>內容獨立完整的區塊
<footer>網頁的頁尾
<details>網頁的細節
<summary>- 定義<details>元素的標題

HTML的常見標籤就介紹到這邊。

參考資料:
https://zh.wikipedia.org/zh-tw/HTML
https://www.w3schools.com/html/html_layout.asp


上一篇
HTML+編輯器簡單介紹
下一篇
CSS:將HTML文件變美觀
系列文
大學每日任務:攝取新知識及學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
madonnalily
iT邦新手 5 級 ‧ 2022-09-19 00:21:44

不好意思,以下為補充:
1.「標籤定義了一個超鏈接」前面有個<a>,忘記轉編碼。
2.佈局的網路架構示意圖的圖源為https://www.w3schools.com/html/img_sem_elements.gif

我要留言

立即登入留言