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

最新推荐文章于 2012-07-25 15:49:56 发布

壁橱里的老王

最新推荐文章于 2012-07-25 15:49:56 发布

阅读量711

点赞数

分类专栏： javascript Web DOM CSS XHTML 文章标签： javascript xhtml html input standards 文档

本文链接：https://blog.csdn.net/Jessie_J_Wang/article/details/7251144

版权

Web 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

25 篇文章 0 订阅

订阅专栏

DOM

16 篇文章 0 订阅

订阅专栏

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

壁橱里的老王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript学习笔录13（标签用法总结）

一首先XHTML是神马？XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写结合了HTML 和 XML二:文档类型声明HTML从HTML1.0开始到现在HTML5.0，有了很多版本，这就出现了浏览器对于HTML规范兼容的问题。浏览器有2种模式：标准模式（Standards Mode），怪
复制链接

扫一扫