基本HTML元件
以下介紹的元件為多數網頁都會使用到的元素。
段落
使用<p>來開始段落，使用</p>來結束段落
<p>Linwebs | 林林.台灣</p>
<p>這是一個段落</p>
換行
使用<br />來換行，PS: 也可寫成<br>
<p>Linwebs | 林林.台灣</p>
<p>這是<br />換行</p>
文字樣式
使用以下標籤來改變文字的樣式
<p>這是普通的文字</p>
<b>這是加粗的文字</b>
<big>這是放大的文字</big>
<i>這是斜體的文字</i>
<small>這是縮小的文字</small>
<strong>這是加強的文字</strong>
這是<sub>上標</sub>的文字
這是<sup>下標</sup>的文字
這是<ins>插入</ins>的文字
<del>這是刪除的文字</del>
標題
h1到h6為HTML的標題語法，大家可依需求使用
<h1>h1. Linwebs | 林林.台灣</h1>
<h2>h2. Linwebs | 林林.台灣</h2>
<h3>h3. Linwebs | 林林.台灣</h3>
<h4>h4. Linwebs | 林林.台灣</h4>
<h5>h5. Linwebs | 林林.台灣</h5>
<h6>h6. Linwebs | 林林.台灣</h6>
分隔線
使用<hr />來顯示分隔線
<p>Linwebs | 林林.台灣</p>
<hr />
<p>這是分隔線下的文字</p>
圖片
使用<img>來顯示圖片，使用src屬性來指定圖片路徑，可使用相對路徑或是絕對路徑，也可配合下個小章節的HTML元件屬性來改變其寬度、高度
<img src="linwebs.png">
<h1>Linwebs | 林林.台灣</h1>
<img height="100px" width="100px" src="logo.png" border="1">
連結
使用<a>標籤來製作連結，可連結至文字、圖片、網頁等，兩個<a>標籤中放入顯示連結的文字，可使用target標籤指定連結開啟位置
<a href="https://linwebs.tw/">Linwebs | 林林.台灣</a>
<a href="https://linwebs.tw/" target="_blank">Linwebs | 林林.台灣</a>
清單
使用<ol>來包含住<li>，可顯示有數字的清單，使用<ul>來包含住<li>，可顯示有圓點的清單
本欄中使用了兩個跳脫字元符號，由於此兩符號是HTML語言中的符號，故須使用跳脫字元方式顯示
< =>【<】
> => 【>】
<ol>
<li><ol></li>
<li>>Linwebs</li>
<li>林林.台灣</li>
</ol>
<ul>
<li><ul></li>
<li>HTML</li>
<li>教學</li>
</ul>
區塊
使用<div>標籤來分割網頁區塊，多用來指定套用CSS的範圍
<div style="background-color:blue; color:white">
<p>Linwebs</p>
<p>林林.台灣</p>
</div>
樣式
經常使用<span>來套用單行文字的CSS
<h4>
<span style="color:blue">Linwebs</span> 林林.台灣
</h4>
表格
使用<table>標籤來製作表格，內含<tr>做為表格的列，<td>作為表格的欄，表格第一列中的欄位經常使用<th>來替代表示此欄的內容為欄位名稱
合併表格：在<td>後方加入colspan="..."表示將這一列表格中的幾個欄位合併
<table border="2">
<tr>
<th>編號</th>
<th>名稱</th>
<th>網址</th>
</tr>
<tr>
<td align="center">1</td>
<td>Linwebs</td>
<td>linwebs.tw</td>
</tr>
<tr>
<td align="center">2</td>
<td>HTML教學</td>
<td>htmltutorial.linwebs.tw</td>
</tr>
<tr>
<td align="center">3</td>
<td colspan="2">Linwebs | 林林.台灣</td>
</tr>
</table>
框架
使用<frame>標籤來引用檔案，多用於引用網頁，呈現頁中頁的效果，YouTube也有提供<iframe>可讓使用者插入其影片於網頁中，甚至可修改是否自動播放、循環播放、顯示播放器工具列等，以下提供兩種範例，一是分割瀏覽器為四等分，以Linwebs網站作為範例，二是<iframe>連結，嵌入YouTube影片
<h1>Linwebs</h1>
<hr />
<iframe width="560" height="315" src="https://www.youtube.com/embed/" "frameborder="0" allowfullscreen></iframe>
<frameset cols="50%,50%" rows="50%,50%">
<frame src="https://linwebs.tw/" />
<frame src="https://linwebs.tw/note" />
<frame src="https://linwebs.tw/diary" />
<frame src="https://linwebs.tw/login" />
</frameset>
表單
使用<form>標籤來製作表單，須以其他網頁後端語言結合方可運作，如：結合PHP語言，製作登錄系統表單，action指定傳送的網址，可使用相對路徑、絕對路徑等網址，method指定傳送的方法，有GET【顯示於網址】和POST【隱藏傳送】兩種方式，而元素則有非常多種，常用的有text【文字】、password【密碼】、radio【單選框】、checkbox【複選框】、submit【送出】等元素，其中需有submit來送出表單，否則此表單將無用處
type => 指定類別
placeholder => 指定提示文字
value => 指定其值
name => 為PHP程式辨認欄位的方式
<form action="login.php" method="post">
<input type="text" name="account" placeholder="請輸入帳號" />
<br />
<input type="password" name="password" placeholder="請輸入密碼" />
<br />
<input type="submit" value="送出" />
</form>
<form action="confirm.php" method="post">
<h2>Linwebs 註冊表單</h2>
<hr />
<input type="radio" name="radio" value="1" />高中職<br />
<input type="radio" name="radio" value="2" />大專院校<br />
<input type="radio" name="radio" value="3" />研究所<br />
<hr />
<input type="checkbox" name="checkbox" value="1" />查看<br />
<input type="checkbox" name="checkbox" value="2" />編輯<br />
<input type="checkbox" name="checkbox" value="3" />發文<br />
<hr />
請輸入驗證碼: <input type="number" name="student_id" placeholder="請輸入數字" />
<br />
<input type="submit" value="送出" />
</form>
