HTML 基礎（五）
一、列表
- 有序列表
- 無序列表
- 自定義列表
無序列表
無序列表是一個專案的列表，此列專案使用粗體圓點進行標記
無序列表使用 <ul> 標籤
<ul> <li>Coffee</li> <li>Milk</li> </ul>
瀏覽器顯示如下：
有序列表
有序列表也是一列專案，列表專案使用數字進行標記。有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
列表項使用數字來標記。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
顯示如下：
自定義列表
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
顯示如下：
其他型別的有序列表
大寫字母列表
<ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
顯示如下：
小寫字母列表：
<ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
顯示如下：
羅馬數字列表
<ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
顯示如下：
巢狀列表
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
顯示如下：
二、區塊
區塊元素：
大多數 HTML 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例項: <h1>, <p>, <ul>, <table>
內聯元素：
內聯元素在顯示時通常不會以新行開始。例項: <b>, <td>, <a>, <img>。
<div> 元素：
HTML <div> 元素是塊級元素，它可用於組合其他 HTML 元素的容器。
它屬於塊級元素，瀏覽器會在其前後顯示折行。
如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設定樣式屬性。
<span> 元素：
<span> 元素是內聯元素，可用作文字的容器
當與 CSS 一同使用時，<span> 元素可用於為部分文字設定樣式屬性。
示例如下：
將文件區域顯示為藍色：
<div style="color:#0000FF"> <h3>這是一個在 div 元素中的標題。</h3> <p>這是一個在 div 元素中的文字。</p> </div>
顯示如下：
使用 <span> 元素對文字中的一部分進行著色：
<p>我的母親有 <span style="color:blue;font-weight:bold">藍色</span> 的眼睛，我的父親有 <span style="color:darkolivegreen;font-weight:bold">碧綠色</span> 的眼睛。</p>
顯示如下：
三、佈局
網站佈局：
大多數網站可以使用 <div> 或者 <table> 元素來建立多列。CSS 用於對元素進行定位，或者為頁面建立背景以及色彩豐富的外觀。
注意：雖然我們可以使用HTML table標籤來設計出漂亮的佈局，但是table標籤是不建議作為佈局工具使用的，表格不是佈局工具。
使用 <div> 元素佈局：
<div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的網頁標題</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>選單</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 內容在這裡</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版權 © cnblogs.com/yytest/</div> </div>
顯示如下：
四、表單
表單用於收集不同型別的使用者輸入，用 <form> 來設定。
<form> . input 元素 . </form>
多數情況下被用到的表單標籤是輸入標籤 <input> ，輸入型別是由型別屬性 type 定義的
文字域
文字域通過 <input type="text"> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文字域。
表單本身是不可見的。並且注意一個文字欄位的預設寬度是20個字元
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
效果如下：
密碼欄位
密碼欄位通過標籤<input type="password"> 來定義
密碼欄位中的字元是隱藏的(顯示為星號或圓圈
<form> Password: <input type="password" name="pwd"> </form>
效果如下：
單選按鈕
<input type="radio"> 標籤定義了表單單選框選項
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
顯示如下：
複選框
<input type="checkbox"> 定義了複選框，使用者需要從若干給定的選擇中選取一個或若干選項。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
顯示如下：
提交按鈕
<input type="submit"> 定義了提交按鈕
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔名。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
顯示如下：
如果在上面的文字框內鍵入幾個字母，然後點選確認按鈕，那麼輸入資料會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。
帶邊框的表單
<body> <form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form> </body>
顯示如下：
傳送郵件：
<body> <h3>傳送郵件到 [email protected]:</h3> <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name" value="your name"><br> E-mail:<br> <input type="text" name="mail" value="your email"><br> Comment:<br> <input type="text" name="comment" value="your comment" size="50"><br><br> <input type="submit" value="傳送"> <input type="reset" value="重置"> </form> </body>
顯示如下：
五、框架
通過使用框架，可以在同一個瀏覽器視窗中顯示不止一個頁面。
iframe 語法：
<iframe src="URL"></iframe>
其中 URL 指向不同的網頁
設定高度與寬度
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
顯示如下：
移除邊框
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">
顯示如下：
使用 iframe 來顯示目標連結頁面
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
顯示如下：
點選連結：
四、顏色
HTML 顏色是由紅色、綠色、藍色混合而成。由一個十六進位制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。
每種顏色的最小值是0（十六進位制：#00）。最大值是255（十六進位制：#FF）。
rgb(0,0,0) 是黑色，rgb(255,255,255) 是白色。
顏色
顏色名字
顏