<html>
:整個網頁的結構<head>
:網頁的標題、元資料、外部資源等<body>
:網頁的內容<h1>
, <h2>
, ..., <h6>
:定義標題的層級<p>
:定義段落<a>
:定義超連結<span>
:定義行內元素,常用於設置特殊樣式或JS操作<img>
:定義圖片<ul>
:無序列表<ol>
:有序列表<li>
:列表項<form>
:定義表單<input>
:定義輸入框<button>
:定義按鈕<select>
:定義下拉選單<table>
:定義表格<tr>
:定義表格的行<th>
:定義表格的標題行<td>
:定義表格的資料行<header>
:定義網頁的頂部<footer>
:定義網頁的底部<nav>
:定義導覽欄這樣分類後,你應該更容易理解各個標籤在網頁結構中的位置和用途了。
這些標籤包含了 HTML 中的一些常見和常用的標籤,但並不是全部的標籤。這些標籤涵蓋了網頁結構、文本內容、列表、表格、表單等常見元素。以下是一些常見的其他 HTML 標籤:
<b>
:粗體文字<i>
:斜體文字<strong>
:強調文字<em>
:強調斜體文字<br>
:換行<hr>
:水平線<sub>
:下標<sup>
:上標<blockquote>
:引用區塊<cite>
:引用標題<code>
:程式碼<pre>
:預格式化的文字<abbr>
:縮寫<del>
:刪除的文字<ins>
:新增的文字<iframe>
:內嵌框架<audio>
:音頻<video>
:視頻這些標籤覆蓋了更多的內容和功能,但在結構和用途上與前面提到的標籤類似。
最外層 | 次層 | 內層 | 用途 | 外層限制標籤 |
---|---|---|---|---|
html | head, body | - | 定義整個網頁的結構 | - |
head | title, meta, link | - | 定義網頁的標題、元資料、外部資源等 | html |
body | header, footer, nav | - | 定義網頁的結構、導覽等 | html |
header | - | h1, h2, h3, h4, h5, h6 | 定義網頁的頂部 | body |
footer | - | - | 定義網頁的底部 | body |
nav | - | a, ul, li | 定義導覽欄 | body |
- | - | p, a, span, img | 定義內文、連結、圖片等 | body |
- | ul, ol, dl | li, dt, dd | 定義列表或定義列表 | body |
- | form | input, button, select, ... | 定義表單元素 | body |
- | table | tr, th, td | 定義表格 | body |
- | b, i, strong, em | - | 定義文字樣式 | 任何內容都可以 |
- | br, hr | - | 定義換行、水平線 | 任何內容都可以 |
- | sub, sup | - | 定義下標、上標 | 任何內容都可以 |
- | blockquote, cite | - | 定義引用 | 任何內容都可以 |
- | code, pre | - | 定義程式碼、預格式化的文字 | 任何內容都可以 |
- | abbr, del, ins | - | 定義縮寫、刪除、新增的文字 | 任何內容都可以 |
- | iframe | - | 定義內嵌框架 | 任何內容都可以 |
- | audio, video | - | 定義音頻、視頻 | 任何內容都可以 |
這樣就能清楚地知道哪些標籤不能再被包裹在特定的標籤內層了。
這是學習筆記嗎?
作為教學有點~稍過於簡化結構特性,而且列了好多不常用的tag... ^ - ^a
<table>
底下要習慣加 <tbody>
再 <tr>
對前端比較好喔 (他的兄弟還有<thead>
,<tfooter>
)<script>
也是滿重要的一個標籤,擺放位置也是一門學問。<title>
頁面標題<div>
, <section>
是常用的 Container,section 屬網頁結構-內文區段<mark>
文字加底色(螢光筆效果)<label>
Input elements 的標籤<option>
Selector 的選項 另外可再包 <optgroup>
成為Group option<textarea>
多行輸入<svg>
, <canvas>
繪圖的元素
以上是常見的幫你補一下。
雖然有些忽略也網頁可以運作,但其實都是Browser自動腦補完成的。而這會導致你下js時,常常抓不到你的結構的element。所以要培養好好習慣喔 =D
算是加強我的印象的學習筆記,因為當時我很好奇標籤外層是否有哪些限制,又好奇 <div>
標籤是不是都通用的情況下,研究製作了這個學習表格。
也謝謝大大的補充說明!