iT邦幫忙

2023 iThome 鐵人賽

DAY 1
0

在開始講爬蟲前我們會先花幾天來講解一寫簡單的HTML架構與CSS以了解大概的網站架構,接著講Selenium的爬蟲運用,最後則是Discord bot的介紹與運用並將爬蟲運用至Discord bot上。

今天我們就講一下HTML的內容

在網頁內容<body>裡通常會包含許多的標籤元素來顯示資訊,雖然同樣能夠顯示資訊但分清這些標籤元素的使用方法也是很重要的,用對的元素才能夠顯示出自己想要的形式。

以下使用HTML code來表示,可複製到自己的HTML檔案裡來預覽。

HTML 中較常用的內容標籤有:

段落標籤<p>,用於包含文本內容的段落。每個<p>標籤會單獨佔據一行。

<p>這是一個段落範例。</p>

標題標籤<h1-h6>,一共有6個級別的標題,<h1>最大,<h6>最小。標題可以表示文檔結構和層次。

<h1>這是h1標題</h1>

無序列表標籤<ul>,用於創建專案符號清單。清單項使用<li>標籤定義。

<ul>
    <li>列表項目1</li>
    <li>列表項目2</li>
</ul>

有序清單標籤<ol>,用於創建編號清單。清單項使用<li>標籤定義。

<ol>
    <li>列表項目1</li>
    <li>列表項目2</li>
</ol>

定義清單標籤<dl>,用於創建術語及定義清單。術語使用<dt>標籤,定義使用<dd>標籤。

<dl>
    <dt>術語1</dt>
    <dd>定義1</dd>
    <dt>術語2</dt>
    <dd>定義2</dd>
</dl>

預定義格式化標籤<pre>,保留文本中的空格、換行等格式。

<pre>
    這是一個  
    預定義格式  
    的範例   
</pre>

水平線標籤<hr>,在頁面中創建一條水準分隔線。

<hr>

換行標籤<br>,在文本中插入換行。

這是第一行<br>
這是第二行

鏈接標籤<a>,用於網頁間的超連結。

<a href="http://www.example.com">這是一個連結範例</a>

圖像標籤<img>,用於在頁面內嵌入圖片。

<img src="image.jpg" alt="圖像範例">

表格標籤<table>,用於顯示行列數據。

<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格3</td> 
        <td>單元格4</td>
    </tr>
</table>

塊級容器標籤<div>,用於對內容進行分組。

<div>這是div塊容器範例</div>

行內容器標籤<span>,用於對文檔中的行內元素進行分組。它可以用來對文本中的一部分應用樣式。

<span>這個是span範例。</span>

這些是 HTML 中最常用的內容標籤,涵蓋段落、標題、清單、圖像等內容。通過它們可以創建出格式化的網頁內容。

有更多的標籤可以參考官方MDN文檔


下一篇
[DAY2]HTML-文本格式化
系列文
selenium爬蟲應用至discord bot30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言