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

来源：互联网发布：做网站用java 还是php 编辑：程序博客网时间：2024/06/08 12:16

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