HTML介紹與基本語法整理
基本的HTML結構：
<header>
標題元素：預設為區塊元素，為文章或區塊定義標題。
一個頁面中可以有多個header。<header>是一容器，但裡面裝的東西應該只有區塊的標題或者摘要。另外，w3.org 中有提到 <header> 不能放在 <footer>、<address>或另一個 <header>裡面。
<nav>
導覽列。裡面裝的東西應該只有主要的navigation links，用來連結到網站其他頁面，或者連結到網站外的網頁。不要把各種link都丟到裡面。
<nav> 不可以放到<address> 裡面。
<main>
網頁的主要內容，一頁 HTML 只能出現一次。
<section>
文件中的一個群組或區塊。一般來說，section 裡面的應該是有意義且附帶標題的一段內容，裡面都會包含 title 或 heading。
不要把 當作 div 來使用，他們的使用目的不同。
<section>不可以放到<address> 裡面。
<article>
article 是獨立的區塊包含完整的內容，也必須帶有heading。
article跟section的區分是，article有更高的獨立性及完整性。
article 是可以獨立存在、具有完整內容、可獨立於網站其他部分的區塊；而section雖然也具有獨立表達內容的能力，但是對外層有一定的相依性。
例如：雜誌、部落格的文章、報紙文章等。
<aside>
aside 元素定義了除了內容之外的其他內容。例如：側邊欄。
aside 的內容應該與周圍的內容有相關性。
<figure>
figure 是一個有完整內容的區塊，是主要內容的一部分，可以任意移動位置而不影響整體內容的表達。例如：圖片與標題可以組合在 figure 元素裡。
<footer>
footer 代表一個區塊的結尾訊息。footer內通常會包含作者、版權等資訊。
Html語法整理：
基本標籤解說：
|
屬性名稱 |
說明 |
|
<! - -與 - -> |
標示註解 |
|
<a href> |
指定超連結 |
|
<a href target="_blank"> <a href title=""> |
指定超連結(開新視窗) 滑鼠移到超連結時會顯示文字 |
|
<a name=名稱> |
被連結點的名稱 |
|
<b> |
粗體字 |
|
<base target> |
指定超連結的分割視窗 |
|
<basefont size> |
更改預設字形大小 |
|
<bgsound src> |
加入背景音樂 |
|
<big> |
顯示大字體 |
|
<blink> |
閃爍的文字 |
|
<body text link vlink> |
設定文字顏色 |
|
<br> |
換行 |
|
<caption align> |
設定表格標題位置 |
|
<caption>...</caption> |
為表格加上標題 |
|
<center> |
向中對齊 |
|
<cite>...<cite> |
用於引經據典的文字 |
|
<code>...</code> |
用於列出一段程式碼 |
|
<comment>...</comment> |
加上註解 |
|
<dd> |
設定定義列表的項目解說 |
|
<dfn>...</dfn> |
顯示"定義"文字 |
|
<dir>...</dir> |
列表文字標籤 |
|
<dl>...</dl> |
設定定義列表的標籤 |
|
<dt> |
設定定義列表的項目 |
|
<em> |
強調之用 |
|
<font face> |
任意指定所用的字形 |
|
<font size> |
設定字體大小 |
|
<form action> |
設定戶動式表單的處理方式 |
|
<form method> |
設定戶動式表單之資料傳送方式 |
|
<frame marginheight> |
設定視窗的上下邊界 |
|
<frame marginwidth> |
設定視窗的左右邊界 |
|
<frame name> |
為分割視窗命名 |
|
<frame noresize> |
鎖住分割視窗的大小 |
|
<frame scrolling> |
設定分割視窗的捲軸 |
|
<frame src> |
將HTML檔加入視窗 |
|
<frameset cols> |
將視窗分割成左右的子視窗 |
|
<frameset rows> |
將視窗分割成上下的子視窗 |
|
<frameset>...</frameset> |
劃分分割視窗(不能在body內) |
|
<h1>~<h6> |
設定文字大小(H1為最大) |
|
<hr> |
加上分格線 |
|
<i> |
斜體字 |
|
<img align> |
調整圖形影像的位置 |
|
<img alt> |
為你的圖形影像加註 |
|
<img dynsrc loop> |
加入影片 |
|
<img height width> |
插入圖片並預設圖形大小 |
|
<img hspace> |
插入圖片並預設圖形的左右邊界 |
|
<img lowsrc> |
預載圖片功能 |
|
<img src border> |
設定圖片邊界 |
|
<img src> |
插入圖片 |
|
<img vspace> |
插入圖片並預設圖形的上下邊界 |
|
<input type name value> |
在表單中加入輸入欄位 |
|
<isindex> |
定義查詢用表單 |
|
<kbd>...</kbd> |
表示使用者輸入文字 |
|
<li type>...</li> |
列表的項目 ( 可指定符號 ) |
|
<marquee> |
跑馬燈效果 |
|
<menu>...</menu> |
條列文字標籤 |
|
<meta name="refresh" content url> |
自動更新文件內容 |
|
<multiple> |
可同時選擇多項的列表欄 |
|
<noframe> |
定義不出現分割視窗的文字 |
|
<ol>...</ol> |
有序號的列表 |
|
<option> |
定義表單中列表欄的項目 |
|
<p align> |
設定對齊方向 |
|
<p> |
分段 |
|
<person>...</person> |
顯示人名 |
|
<pre> |
使用原有排列 |
|
<samp>...</samp> |
用於引用字 |
|
<select>...</select> |
在表單中定義列表欄 |
|
<small> |
顯示小字體 |
|
<strike> |
文字加橫線 |
|
<strong> |
用於加強語氣 |
|
<sub> |
下標字 |
|
<sup> |
上標字 |
|
<table border=n> |
調整表格的寬線高度 |
|
<table cellpadding> |
調整資料欄位之邊界 |
|
<table cellspacing> |
調整表格線的寬度 |
|
<table height> |
調整表格的高度 |
|
<table width> |
調整表格的寬度 |
|
<table>...</table> |
產生表格的標籤 |
|
<td align> |
調整表格欄位之左右對齊 |
|
<td bgcolor> |
設定表格欄位之背景顏色 |
|
<td colspan rowspan> |
表格欄位的合併 |
|
<td nowrap> |
設定表格欄位不換行 |
|
<td valign> |
調整表格欄位之上下對齊 |
|
<td width> |
調整表格欄位寬度 |
|
<td>...</td> |
定義表格的資料欄位 |
|
<textarea name rows cols> |
表單中加入多少列的文字輸入欄 |
|
<textarea wrap> |
決定文字輸入欄是自動否換行 |
|
<th>...</th> |
定義表格的標頭欄位 |
|
<tr>...</tr> |
定義表格美一行 |
|
<tt> |
打字機字體 |
|
<u> |
文字加底線 |
|
<ul type>...</ul> |
無序號的列表 ( 可指定符號 ) |
|
<var>...</var> |
用於顯示變數 |
參考資料：