您的位置：首页 > Web前端 > JavaScript

Javascript学习笔录13（标签用法总结）

2012-03-09 09:45 441 查看

一首先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

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript xhtml html input standards 文档

相关文章推荐

新的分享

章节导航