//防止亂碼 head中加入 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //在head中使用外部樣式表進行格式化 <link rel="stylesheet" type="text/css" href= ...
//防止亂碼
head中加入
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//在head中使用外部樣式表進行格式化
<link rel="stylesheet" type="text/css" href="xxxxx.css"/>
//使用html樣式表進行格式化
<style type="text/css">
xxxx
</style>
//bgcolor定義背景顏色；background="xxxx"指定背景圖片，如圖片小於頁面，圖片會重覆顯示
//<p>標簽</p>
段落標簽。瀏覽器會忽略源代碼中的排版，會省略多餘的空格和換行等。
要想換行，可用<br/>來實現。
//h1-h6標題標簽
<h1>h1標題標簽</h1>
<h2>h2標題標簽</h2>
<h3>h3標題標簽</h3>
<h4>h4標題標簽</h4>
<h5>h5標題標簽</h5>
<h6>h6標題標簽</h6>
註意：請僅僅把標題標簽用於標題文本。不要僅僅為了產生粗體文本而使用它們。粗體可使用其它標簽或 CSS 代替。
//文字居中
<h4 align="center">用align="center"將文字居中。</h4>
//hr標簽用於加水平線
<hr />
//註釋<!--XXXX-->
<!--註釋不會在瀏覽器中顯示。-->
//背景顏色
bgcolor="xxxx"
//背景圖像
background="xxxx"
//鏈接
通過a標簽href="xxxx"定義，在新視窗打開用target="_blank"
<a href="http://www.baidu.com" target="_blank">百度</a>
//圖像
通過img的src定義，如果無法顯示圖片，則顯示alt中的文字
<img src="xxxx" alt="xxxx" />
//文本格式化
<b>文本格式化，這是粗體文本bold，用b標簽</b>
<strong>文本格式化，這是加重語氣strong，用strong標簽</strong>
<big>文本格式化，這是大號字big，用big標簽</big>
<em>文本格式化，這是著重文字emphasized，用em標簽</em>
<i>文本格式化，這是斜體文字italic，用i標簽</i>
<small>文本格式化，這是小號字small，用small標簽</small>
//預格式文本用pre標簽
<pre>
這是
預格式文本。
它保留了 空格
和換行。
</pre>
//鏈接到同一頁面的某位置，用name屬性命名“錨”
<a href="#C4">查看 Chapter 4。</a>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
//表格用table，border為邊框寬度,tr-th-td
<table border="1">
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
結果：
//橫跨兩列的單元格：
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
結果：
//橫跨兩行的單元格：
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
結果：
//帶有 單元格邊距cellpadding：
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
結果：
//表格中元素的位置
<table width="400" border="1">
<tr>
<th align="center">消費項目</th>
<th align="center">一月</th>
<th align="center">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
</table>
//一個無序列表：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
//一個有序列表，start為開始序號：
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol> <hr />
//Disc 項目符號列表：
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
//Circle 項目符號列表：
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
//Square 項目符號列表：
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
//數字列表：
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
//字母列表：
<ol type="A">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
//小寫字母列表：
<ol type="a">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
//羅馬字母列表：
<ol type="I">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
//小寫羅馬字母列表：
<ol type="i">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
//一個嵌套列表：
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
//表單：form-input
文本域 text fields
密碼域 password，密碼在輸入時顯示*號
覆選框 checkbox，是個小方框，checked可指定選項是否預設選定，可以通過點擊選擇或取消
單選按鈕：radio，checked指定預設選項，點擊其中一個按鈕時，該按鈕變為選中狀態，其他所有按鈕都變為非選中。
下拉列表：select-option，用selected可指定預設選定的選項。
文本域 textarea,rows高,cols寬
按鈕 button
提交 submits
fieldset 周邊帶邊框的效果
<form action="xxxx"> <!--如果省略 action 屬性，則 action 會被設置為當前頁面。method規定在提交表單時所用的 HTTP 方法GET或POST-->
<!--預設用GET方法。如果表單提交是被動的，沒有敏感信息，比如搜索引擎查詢。用GET時，表單數據在頁面地址欄中是可見的。
如果表單正在更新數據，或者包含敏感信息（例如密碼）。POST安全性好，因為頁面地址欄中被提交數據是不可見的。-->
姓：<input type="text" name="firstname" /><br />
名：<input type="text" name="lastname"/> <br />
密碼：<input type="password" name="password" /><br />
愛好 ：籃球<input type="checkbox" name="aihao" value="basketball" />足球<input type="checkbox" name="aihao" value="football" /><br />
性別 ：男<input type="radio" checked="checked" name="Sex" value="male" />女<input type="radio" name="Sex" value="female" /> <br />
請選擇出生地：
<select name="place">
<option value="anhui">安徽</option>
<option value="jiangsu">江蘇</option>
<option value="hubei" selected="selected">湖北</option>
<option value="jiangxi">江西</option>
</select>
簡介：
<textarea name="jianjie" rows="2" cols="25">
這個人很懶，什麼都沒有留下！
</textarea>
<input type="button" value="Hello world!">
<input type="submit" value="提交"> <!--點擊提交按鈕後，會將數據提交到action中的頁面。如果省略 action 屬性，則 action 會被設置為當前頁面。-->
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>
//排列圖片：設置對齊方式的圖像
<p>圖像 <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" align="bottom"> 在文本中，文字據下，為預設方式</p>
<p>圖像 <img src ="https://www.baidu.com/img/baidu_jgylogo3.gif" align="middle"> 在文本中，文字居中</p>
<p>圖像 <img src ="https://www.baidu.com/img/baidu_jgylogo3.gif" align="top"> 在文本中，文字局上</p> <hr />
<p>
<img src ="https://www.baidu.com/img/baidu_jgylogo3.gif" align ="left">
帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的最左側。
</p><hr />
<p>
<img src ="https://www.baidu.com/img/baidu_jgylogo3.gif" align ="right">
帶有圖像的一個段落。圖像的 align 屬性設置為 "right"。圖像將浮動到文本的最右側。
</p>
