Javascript学习笔录13（标签用法总结）
一首先XHTML是神马？
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
XHTML：1 所有元素标签及属性都小写；2 闭合元素标签 3 正确嵌套标签
4 参数值必须有双引号“”
1 <head></head>包含
title 必须唯一（HTML5除外）
<script></script> <style><style> <link/> .....
2 <body></body>
有序列表。
<ol>
<li>……</li>
<li>……</li>
</ol>
表现为：
1……
2……
❀ ul ：
<ul>
<li>……</li>
<li>……</li>
</ul>
无序列表，表现为li前面是大圆点而不是123
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>3 标题 段落
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>