2.2 HTML结构(2)


2.2 HTML结构(2)


HTML





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >


<head><title>HTML结构</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
<link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
<link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />
<![endif]-->
</head>

HTML结构(续)



<body>
<noscript>当脚本不能运行时,显示此文本。</noscript>
<div>
<h1>HTML结构</h1>
<p>段落</p>


<ol> <li>有序列表项</li>    <li>有序列表项</li>   </ol>
<ul> <li>无序列表项</li>  <li>无序列表项</li> </ul>
<dl> <dt>定义词汇</dt>      <dt>定义词汇</dt>    
<dd>定义数据</dd>      <dd>定义数据</dd>     </dl>



<table><caption>表格标题</caption>
<colgroup> <col /> <col /> </colgroup>
<thead><tr><td>第一列第一行</td> <td>第二列第一行</td></tr></thead>
<tfoot><tr><td>第一列第三行</td> <td>第二列第三行</td></tr></tfoot>
<tbody><tr><td>第一列第二行</td> <td>第二列第二行</td></tr></tbody></table>



<form id="form1" method="post" action="http://www.tipjar.com/cgi-bin/test" >
<input type="hidden" title="input hidden" name="hidden" value="Secret" />



<input  id="radio1" name="radios" type="radio" value="radio1" checked="checked" />
<label for="radio1">单选框1</label>



<input  id="radio2" name="radios" type="radio" value="radio2-pushed" />
<label for="radio2">单选框2</label>



<input  id="xbox1" name="xbox1" type="checkbox" value="xbox1" checked="checked" />
<label for="xbox1">复选框</label>



<label for="inputtext">输入框</label>
<input  id="inputtext" name="inputtext" type="text" value="Type here" size="14" />



<label    for="select1">选择框</label>
<select   id="select1" name="select" size="2" >
<option selected="selected" value="item1" >选项1</option>
<option                     value="item2" >选项2</option>  </select>



<label   for="textarea" >文本域</label>
<textarea id="textarea" name="textarea" rows="2" cols="10" >文本域</textarea>



<input  type="submit" id="submit1" name="submit1" value="提交" />
<input  type="reset"  id="reset1"  name="reset1"  value="重置"  />
<button type="submit" id="button1" name="button1" value="Button1" >按钮</button>
</form>

HTML结构(续)



<div>在DIV中的<a id="link1" href="left.html">链接</a>
<img src="left-right.gif" width="20"
height="20" usemap="#map1" alt="alt text" />
<map id="map1" name="map1">
<area href="left.html"  alt="left" 
shape="rect" coords="0,0,10,20" />
<area href="right.html" alt="right"
shape="rect" coords="10,0,20,20" /></map>


<span>span</span>
<em>em</em>
<strong>strong</strong>
<cite>cite</cite>
<code>code</code>
<kbd>kbd</kbd>
<samp>samp</samp>
<var>var</var>
<acronym>acronym</acronym>
<abbr>abbr</abbr>
<dfn>dfn</dfn>
<sub>sub</sub>
<sup>sup</sup>
<bdo dir="rtl">backwards</bdo>
<br />



<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/å
swflash.cab#version=7,0,0,0"
width="400" height="50" id="cssdesignpatterns" align="middle">
<param name="movie"   value="cssdesignpatterns.swf" />



<object type="application/x-shockwave-flash" data="cssdesignpatterns.swf"
width="400" height="50"> <param name="movie" value="movie.swf" />
<img src="cssdesignpatterns.gif" alt="cssdesignpatterns.com" />
</object> 
</object>
</div>
<address>地址</address>
</div>



</body>
</html>
CSS
/* 此文档没有绑定任何CSS样式 */



HTML结构(续)



















问题


需要知道HTML元素如何组成文档。


解决方案


HTML是严格的元素层次嵌套结构。元素可以互相嵌套,但是却不能重叠。HTML把元素划分为3个主要类:结构化元素、块状元素和内联元素。


核心的结构化元素有:<html><head><body><head>中放的是关于文档的信息,文档内容放在<body>中。在头部元素设计模式中我们会讨论头部元素。


块状元素还分为3种:结构化的、多目标的和终端的。这些内容将在以下几个部分进行讨论:结构化块状元素、终端块状元素和多目标块状元素。


内联元素也有3种主要的类型:语义化、排列顺序、内联块状。我们将会在内联元素设计模式的讨论部分对它们进行阐述。


模式


HTML核心结构


<!DOCTYPE DOCUMENT_TYPE_DEFINITION_USED_FOR_VALIDATION >


<html>


  <head> METADATA </head>


  <body> CONTENT </body>


</html>


实例


这个例子包含了每个常见HTML元素的最简单的表达方式。


<object>背后的思想为,它的内容(除了它的<param>元素)都是在对象本身不能解析的时候才进行处理。实例中这个对象元素是一个嵌入式的Flash对象。在它里面,我又嵌套了一个Flash对象,以防外面的Flash失效。父对象在Firefox 2Netscape浏览器中都是不起作用的,因为这些浏览器都不支持IE中所必需的classid属性。既然父对象不能够被解析,Firefox只能解析子对象。在子对象中,我插入了一张图片,它会在这个子对象不能正常运行的情况下显示出来。最后,如果看不到图片,浏览器会显示它的alt文本。后备内容(fallback content)是替换元素(replaced elements,例如<object><img>)使用的一种设计原则,所以当浏览器不能解析某个元素的时候,也会显示出某些内容。


<object>元素的属性和<param>元素的语法会因为不同类型的对象而有所不同。每一种浏览器都会为它的对象定义自己的语法。


Elizabeth CastroA List Apart发表的“Bye Bye Embed”这篇文章(www. alistapart.com/articles/byebyeembed)阐述了如何在文档中只使用<object>元素就能嵌入视频。如果使用这种方法有问题,可以采用传统的解决方法,使用<embed>对象作为<object>的一个后备。<embed>Firefox和其他基于Gecko的浏览器中都可正常运行,但它不是一个规范的HTML


相关


头部元素、结构化块状元素、终端块状元素、多目标块状元素、内联元素,结构含义、可视结构(第13章)。



标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2