XHTML是The Extensible HyperText Markup Language(可擴展超文本標識語言)的縮寫
結合了HTML 和 XML
二<!DOCTYPE>:文檔類型聲明
HTML從HTML1.0開始到現在HTML5.0，有了很多版本，這就出現了瀏覽器對於HTML規範兼容的問題。
瀏覽器有2種模式：標準模式（Standards Mode）， 怪癖模式（Quirks Mode）
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。<!DOCTYPE> 標籤沒有結束標籤！
比如CSDN的文檔類型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我主要是想記錄關於XHTML元素部分，所以關於DOCTYPE這裏不多說了
三XHTML sample
<!DOCTYPE html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!!</p>
<input type="submit" name="submit" value="提交">提交表單</input>
</body>
</html>XHTML：1 所有元素標籤及屬性都小寫；2 閉合元素標籤 3 正確嵌套標籤
4 參數值必須有雙引號“”
<select id="selectSample">
<option value = "100"> right</option>
<option value = 100> wrong</option>
</select>1 <head></head>包含
title 必須唯一（HTML5除外）
<script></script> <style><style> <link/> .....
2 <body></body>
• <element-name attribute = ”value”>content</element-name>
四 文檔流佈局
Block ——垂直佈局 ——div，P，table
InLine——水平佈局——Span(之前 我一直以爲這貨是Block的)，strong,em,img,a,input ,select
Block cannot be inside inline
五 語義化標籤
1 列表元素
dl>dt,dd;ul,ol>li
以上元素區別
❀ ol ：有序列表。
<ol>
<li>……</li>
<li>……</li>
</ol>
表現爲：
1……
2……
❀ ul ：
<ul>
<li>……</li>
<li>……</li>
</ul>
無序列表，表現爲li前面是大圓點而不是123
❀ dl 內容塊
dt 內容塊的標題
dd 內容
例子：
<dl>
<dt>標題</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
2 表格
table > thead,tfoot ,tbody >tr >th,td
eg：
<table border="1px;" summary="1年1班名單">
<caption>1年1班名單</caption>
<thead><tr><th>姓名</th><th>出生年月日</th><th>出生地</th></tr></thead>
<tbody>
<tr><td>王小明</td><td>1990.10.10</td><td>臺北</td></tr>
<tr><td>張小明</td><td>1990.1.1</td><td>臺北</td></tr>
<tr><td>陳小明</td><td>1990.12.20</td><td>新竹</td></tr>
</tbody>
<tfoot><tr><th>姓名</th><th>出生年月日</th><th>出生地</th></tr></tfoot>
</table>h1,h2,h3,h4,h5,h6,p
五 標籤的使用 ——例子
用到標籤 table，thead,tr,,fieldset,legend,select 等常用標籤
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="utf-8"/>
<title>XHTML-02</title>
</head>
<body>
<table border="1">
<caption>表格的標題</caption>
<thead>
<tr>
<th>時間</th>
<th>事件</th>
<th>人物</th>
<th>花費</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><ins>小貓吃魚</ins></td>
<td><em>花花</em></td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td><ins>動物園</ins></td>
<td><em>老虎</em></td>
<td>3000</td>
</tr>
<tr>
<td colspan="4">欲購買商品信息
<fieldset>
<legend>商品信息</legend>
<table>
<tr>
<td>產品型號:</td>
<td>G832</td>
</tr>
<tr>
<td>庫存情況:</td>
<td>
<select>
<option>上海倉有貨</option>
<option>北京倉有貨</option>
</select>
</td>
</tr>
<tr>
<td>市場價：</td>
<td><del>￥99.00</del></td>
</tr>
<tr>
<td>搶購價：</td>
<td>
<ul>
<li>
<div>通過此方程式計算你買到的價格：</div>
<div>X<sub>2</sub>*Y<sub>1</sub>=10</div>
<div>2Y<sub>1</sub>+X<sub>2</sub>=8</div>
</li>
</ul>
<div> </div>
</td>
</tr>
<tr><td>購買組合類型：</td><td><input type="checkbox"/>單買貨物 <input type="checkbox"/>單貨+物品一 <input type="checkbox"/>單貨+物品二<input type="checkbox"/>單貨+物品三 </td>
</tr>
<tr>
<td><input type="image" src="" alt="Submit"/>
<input type="button" value="取消"/></td>
</tr>
</table>
</fieldset>
</td>
</tr>
</tbody>
</table>
</body>
</html>