HTML網頁開發手冊
1.1 HTML基礎
1.1.1 什麼是 HTML？
HTML 是用來描述網頁的一種語言。
· HTML 指的是超文字標記語言 ( H yper T ext M arkup L anguage)
· HTML 不是一種程式語言，而是一種 標記語言 (markup language)
· 標記語言是一套 標記標籤 (markup tag)
· HTML 使用 標記標籤 來描述網頁
1.1.2 HTML結構
<html></html> html5程式 <head></head> 頭部 <title></title> 標題 <body></body> 軀幹（文字、圖片、連結） 1>:html不區分大小寫，但推薦用小寫。 2>:<style>…</style>定義CSS格式 1 <Script language=“”>…</Script> 2 用於定義指令碼，Eg. Javascript
1.1.3 HTML標準開頭 （！+Tab）檔案字尾名為html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
1.1.4 HTML直接命名方式：
輸入“網頁.html” Ctrl+S 儲存
1.1.5 HTML顏色值
顏色由一個十六進位制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。
每種顏色的最小值是0（十六進位制：#00）。最大值是255（十六進位制：#FF）
1.2 HTML標籤
1.2.1 h1~h6 六種標題模式，格式大小依次減小
<h1>這是一個標題</h1> <h2>這是一個標題</h2> <h3>這是一個標題</h3> <h4>這是一個標題</h4> <h4>這是一個標題</h4> <h4>這是一個標題</h4>
1.2.2 常見標籤：
超級連結，跳轉到另一檔案 <a href=“url” target=“TargetWindow”>文字 </a> *標題字型大小--<h#> #=1、2、3、4、5、6 *分隔線--<hr> * ：空格 *<p>…</p>：分段落現實 *<div>…</div>(一層) <span>…</span>（行內塊） *分塊顯示： <ul>…</ul>(列表) <li type=“disc circle square”>… *符號列表： <ol>…</ol> <li>… *數字列表 *<br> 換行 *<nobr>…</nobr> 不換行 *<pre></pre>保留原有格式 *<marquee></marquee>跑馬燈效果 *<blockquote></blockquote> *<dl><dt><dd> *對齊—align <h1 align=“”> <div align=“”> <table align=“”> <hr align=“”> …… 取值:left right center top middle bottom *<img src=“” align=“” alt=“” border=“”> Src 圖片路徑，一般使用相對路徑 Alt 圖片無法顯示時顯示的文字 Border 邊框的厚度 Align = left right top middle bottom 圖文混排時用於和圖片的對齊 <p>這是一個段落</p> 水平線<hr/> 換行<br/> 引用<blockquote></blockquote> 預格式<pre></pre> ol>li*3 + Tab 自動生成列表格式 <ol> <li></li> <li></li> <li></li> </ol> h2*3 + Tab 自動生成3個 <h2></h2> <h2></h2> <h2></h2>
1.2.3 有序列表標籤：
<ol> <li>填寫資訊</li> <li>提交資訊</li> <li>註冊成功</li> </ol>
1.2.4 無序標籤：
<ul> <li></li> <li></li> <li></li> </ul>
文字前面加專案號“點”
1.2.5 描述標籤：
<dl> <dt>標題</dt> <dd>描述1</dd> <dd>描述2</dd> </dl>
標題
描述1
描述2
1.3 div把網頁分成不同的佈局、分割槽、容器
1.3.1 <!–註釋–>
Ctrl+/ 註釋選中的內容、註釋該行
1.3.2 增加樣式
< header> //但是在顯示上沒有區別 頭部logo、搜尋框、目錄等 </header> <footer> //但是在顯示上沒有區別 尾部聯絡資訊、版權資訊等 </footer> <footer style="background-color: blue"> 這是尾部 </footer>
1.3.3 < nav>網頁主導航
<nav> <ul> //無序標籤 <li>首頁</li> <li>產品介紹</li> <li>公司新聞</li> <li>技術中心</li> <li>聯絡我們</li> </ul> </nav>
1.3.4 < hgroup> 標題組
<hgroup></hgroup>
1.3.5 < article>定義文章
<article></article>
1.4 HTML各種標籤巢狀使用
1.4.1 < aside>側邊
<section> 定義節，表示專題 </section>
會生成大綱目錄，而div不會生成
裡面一般跟< h1>標題< h2> …… 不加的話會導致專題錯亂
1.4.2 輸入文字時，沒有任何區別
<header>頭部logo、搜尋框、目錄等</header> <footer>尾部聯絡資訊、版權資訊等</footer> <article>文章</article> <section>定義節，表示專題</section> <aside>側邊</aside> <time>時間戳</time>
1.5 HTML 表單
1.5.1 <input> 元素
<input> 元素是最重要的表單元素。
<input>元素有很多形態，根據不同的 type 屬性。
HTML5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。
-
email
-
url
-
number
-
range
-
Date pickers (date, month, week, time, datetime, datetime-local)
-
search
-
color
<form action="/example/html5/demo_form.asp" method="get"> E-mail: <input type="email" name="user_email" /><br /> Homepage: <input type="url" name="user_url" /><br /> Points: <input type="number" name="points" min="1" max="10" /><br /> Points: <input type="number" name="points" min="1" max="10" /><br /> Date: <input type="date" name="user_date" /> <input type="submit" /> </form>
1.5.2 Action 屬性
action 屬性定義在提交表單時執行的動作。
向伺服器提交表單的通常做法是使用提交按鈕。
通常，表單會被提交到 web 伺服器上的網頁。
在上面的例子中，指定了某個伺服器指令碼來處理被提交表單
如果省略 action 屬性，則 action 會被設定為當前頁面。
<form action="action_page.php">
1.5.3 Method 屬性
method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET"> <form action="action_page.php" method="POST">
何時使用 GET？
如果表單提交是被動的（比如搜尋引擎查詢），並且沒有敏感資訊。
當您使用 GET 時，表單資料在頁面位址列中是可見的：
action_page.php?firstname=Mickey&lastname=Mouse
GET 最適合少量資料的提交。瀏覽器會設定容量限制。
何時使用 POST？
如果表單正在更新資料，或者包含敏感資訊（例如密碼）。
POST 的安全性更加，因為在頁面位址列中被提交的資料是不可見的。
1.5.4 Name 屬性
如果要正確地被提交，每個輸入欄位必須設定一個 name 屬性。
本例只會提交 “Last name” 輸入欄位：
<form action="action_page.php"> First name:<br> <input type="text" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
1.5.5 其他屬性
用 組合表單資料 元素組合表單中的相關資料 元素為 元素定義標題。
屬性
描述
accept-charset
規定在被提交表單中使用的字符集（預設：頁面字符集）。
action
規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete
規定瀏覽器應該自動完成表單（預設：開啟）。
enctype
規定被提交資料的編碼（預設：url-encoded）。
method
規定在提交表單時所用的 HTTP 方法（預設：GET）。
name
規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate
規定瀏覽器不驗證表單。
target
規定 action 屬性中地址的目標（預設：_self）。
onsubmit
onsubmit 屬性在提交表單時觸發。onsubmit 屬性只在<form> 中使用。
*<form>的屬性
Method: (get post)
Get 傳送較少資料（256byte），顯示在url中，url/userinfo?username=張三&password=hehe
Post 資料長度無限制，不會顯示在url中
Action:Form中資料交給伺服器端哪個程式進行處理
*eg: <form method=“post” action=“user.jsp>……</form>
**位於<form>之中，接收使用者輸入:
格式：<input type=“” name=“”>
type:
text radio checkbox password hidden select submit reset button textarea image
name:
提交到伺服器端的變數的名字
文字框 text
<input type=“text” name=“” value=“” maxlength=“” size=“”>
maxlength – 最大字元長度
size – 文字框寬度（字元）
密碼區域—特殊的單行文字輸入框 password
<input type=“password” name=“” value=“” size=“” maxlength=“”>
單選按鈕
<input type=“radio” name=“” value="" checked>
典型用法 : 同一名字，不同的值
錯誤的用法 : 不同的名字
複選框
<input type=“checkbox” name=“” value=“” checked>
典型的用法 : 同一name，不同的value
隱藏域
<input type=“hidden” name=“” value=“”>
不顯示在網頁中
通常用作向下一個頁面傳輸已知資訊或表單的附加資訊
1.5.6 分塊：
<frameset cols=“20%,*”> <frame name=“left” src=“a.htm”> <frameset rows=“40%,*”> <frame name=“righttop” src=“b.htm”> <frame name=“rightbottom” src=“c.htm”> </frameset> </frameset>
html中username表單的驗證：
<input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())"> <span id="usernameErr"></span>
js程式碼：
function checkUserName(ssn){ if( ssn.length<3 || ssn.length>18 ) { document.getElementById("usernameErr").innerHTML = "<font color='red'>請輸入正確的使用者名稱,使用者名稱長度為3-18位！</font>"; form.username.focus() return false; }
- 始終為屬性值加引號
屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。
在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name='Bill "HelloWorld" Gates'
1.6 HTML參考手冊
1.6.1 HTML Basic Document
<html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html>
1.6.2 Text Elements
<p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre>
1.6.3 Logical Styles
<em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code>
1.6.4 Physical Styles
<b>This text is bold</b> <i>This text is italic</i>
1.6.5 Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a> <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a> <a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>
1.6.6 Unordered list
<ul> <li>First item</li> <li>Next item</li> </ul>
1.6.7 Ordered list
<ol> <li>First item</li> <li>Next item</li> </ol>
1.6.8 Definition list
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl>
1.6.9 Tables
<table border="1"> <tr> <th>someheader</th> <th>someheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table>
1.6.10 Frames
<frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset>
1.6.11 Forms
<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="lastname" value="Nixon" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>Apples <option selected>Bananas <option>Cherries </select> <textarea name="Comment" rows="60" cols="20"></textarea> </form>
1.6.12 Entities
< is the same as <
> is the same as >
is the same as ©
1.6.13 Other Elements
<!-- This is a comment --> <blockquote> Text quoted from some source. </blockquote> <address> Address 1<br> Address 2<br> City<br> </address>
tobehero666.png