自己翻译的书（关于ASP.NET），希望对大家有帮助（六）

最新推荐文章于 2024-11-12 10:23:07 发布

mashimaro24

最新推荐文章于 2024-11-12 10:23:07 发布

阅读量422

点赞数

文章标签： asp.net 浏览器 html div 文档 html解析器

标题样式
HTML可以认出六种标题样式，从<h1>到<h6>。数字意味着一个层次化的标题内容的位置。就像大部分的文本处理器，数字越小，内容的层次越高。图2.6显示了在IE 5中的六种标题样式。

图2.6：六种HTML标题层次 (ch2-5.htm)
再说一次，标题的显示格式是浏览器相关的。在不同的浏览器中，标题层次也会显示不同。
HTML是一种创建结构化文档的方式。你通过像是大纲的标题层次来组织文档。顶层的<h1>可能是文档标题。本质上来说，文档所有的其他部分都是<h1>的低层。你可以用<h2>来组织主要的子层，用<h3>来组织比<h2>层更低的子层。例如，在这一章，结构化的HTML将会是这样的：
<h1>第二章：HTML基础</h1>
<h2>HTML就是标识和内容</h2>
<h3>HTML可以做什么</h3>
<h3>为什么HTML那么重要</h3>
<h3>HTML的局限性</h3>
<h2>语法：标签和属性</h2>
<h3>什么是标签？</h3>
<h3>什么是结束标签？</h3>
等等… …
注意这是一个相对弱的创建结构化文档的机制，因为在HTML中并没有指定包含在子层标签中的内容“属于”更高一次的标题。那也就是说，你不能选择<h2>标签并且同时获得<h3>标签以及和标签相关的文字。相反的，相关机制是依靠位置决定的。HTML解析器规则是说所有在一个标题层次的内容都属于那个标题层直到遇到下一个标题层。而且，浏览器不会对一个给定的标题层和更高层的内容有不用的格式化方法。对于标题层的唯一的可视化线索就是标题本身，渲染器并不会提供一个可视化的方法，例如缩进，来帮你区分在不同层次上的内容。
字体和颜色
你已经看过一个简单的使用<font>标签的例子。在这一部分，我们要更深入一些。字体标签本身是没用的，他们需要一个或者多个属性来完成对包含文字（叫做标签文字）的可视化表达。字体标签有以下的属性：
字体(face) 改变字体为一个指定的字体。如果在客户端计算机没有该字体，浏览器会使用默认的字体。你可以通过列出多个字体来增加浏览器选中相似字体的可能。例如，标签<font face="GreenMonster, Arial, Times New Roman">指定了你倾向于使用的字体依照顺序是GreenMonster（据我所知，这个不存在），Arial以及Times New Roman。浏览器会首先试一下GreenMonster。当失败了，它就会尝试使用Arial，这个字体是可以正常在Windows平台使用的。
大小(size) 改变字体大小到一个特定的大小。大小是一个数字，但是你可以使用数字来告诉浏览器应该怎么解析数字。默认的，浏览器会把字体大小默认为3。
颜色(Color) 指定了标签文字的颜色。网景和IE都能理解一组定义的颜色集。然而，他们理解的颜色集是不同的。但是所有的浏览器都可以理解一个叫做RGB（红，绿，蓝）的颜色集。RGB颜色包含三个16进制值，他们连到一起组成了一个6个字符的字符串。典型的，你可以附加一个数字符(#)在字符串前。例如，颜色#000000代表黑色。尽管空格没有被显示，但是你可以认为字符串是原本写成#00 00 00的。前两个0代表红色部分，在这个例子中，没有红色。第二个二元组是绿色部分，第三个二元组是蓝色部分。在这个例子中，因为每个颜色部分都是0，所以最后的值就是黑色。每个部分有256个不同的值——从0到255。不幸的是，你已经把他们写作16进制值，而不是更让人熟悉的10进制。你可以阅读下面这段信息，“16进制系统和RGB颜色值”，来获取把10进制翻译成16进制的更多信息。
16进制系统和RGB颜色值
人类倾向于使用10进制，也许是因为他们有10个手指。计算机一般是使用几种其他的进制：2 进制(Binary)，8进制(Octal)，16进制(Hexadecimal)。在计算机术语里，16进制一般被简化叫做Hex。因为两位的16进制数字就可以表达0到255所有的数字，这等价于8位的一个字节可以表达的数字。另一种方法就是你可以认为一个字节就是2的8次幂。记住，每一个位只能够是0或1，所以计算机就是最“幼稚”的2进制。
每个字节有两个半字节(Nibble)。一个半字节有4位并且可以表示16个值——从0到15。半字节很容易翻译成16进制，因为每个16进制数都可以表达为一个半字节。正如10进制有10个数字，16进制有16个。基本数字是0到9代表最初的10个值，并且我们使用字母A到F来表示剩下的5个值。正像在10进制系统中一样，每一个数字都是10的倍数，在16进制系统中，每一个数字都是16的倍数。所以数字10是A，15是F。15之后，你需要加入一个新的16进制的数字，所以16就表示为10——意思是一个16和0个1。
看一下下面列表中的一些例子：
10进制 16进制
0-9 一样
10 A
11 B
12 C
13 D
14 E
15 F
16 10
32 20
64 40
81 51
255 FF

每个RGB颜色值是一个字节，其10进制值从0-255；因此，你可以用两个16进制位来表示值，从00到FF。为了在两个系统中互相转换，使用模运算(Modulo Arithmetic)。把你的10进制值除以16来找到第一个16进制位并且使用余数作为第二个位的值。例如，16进制表达17是11（17/16=1，余数为1）。16进制表达200是C8（200/16=12，余数是8）.
考虑相反的方向，可以用最左边的位乘以16并加上最右边的10进制值。例如，B9 = ((11 * 16) + 9) = 185。
小窍门: 你并不需要学习16进制来写RGB的颜色值（尽管这会有帮助）。一个最简单的在10进制和16进制之间翻译的方法就是使用Windows的计算器附件。点击视图(View)菜单，然后点击科学计算型(Scientific)。计算器就会改变它的外表。点击10进制(Decimal)选项，然后输入一个数字并且点击16进制按钮来从10进制翻译到16进制。相反的，点击16进制按钮并且输入一个16进制值，然后点击10进制按钮可以从16进制翻译到10进制。
正如我以前提到的，<font>标签被HTML 4以及更高版本抛弃了。当可能的时候，你应该使用层叠样式表来格式化字体而不是使用<font>标签。
段落标签，Div标签以及跨距(Span)
段落标签<p>是包围在段落文字之间的块元素（Block Element）。他们可以包含“子”标签，例如文本和图片格式命令，而且他们也可以包含表格。你可以强制浏览器靠左（默认）或者靠右显示段落，或者是通过添加一个属性，例如<p align="center">，来居中显示。
Div元素，通常叫做层(Layer)，是一种把你的文档分成几个部分的方式。你可以认为<div>标签是一个在段落间的手动的分隔符，就像是标题层那样。主要的不同是<div>标签是块元素。你可以通过“问”<div>标签取得所有的与<div>相关的文本和HTML信息。默认的，<div>标签就像是一个段落标签并且拥有相同的属性。例如，你也可以通过增加align="right"属性来让<div>标签的内容靠右显示。W3C之所以增加<div>标签就是为了弥补标题层在实现上的弱点。在网景中，<div>标签最初是以<layer>标签的形式实现（<layer>不被HTML 4.x或者是网景6及更高版本支持），他们的主要目的是帮助元素在Z轴上的显示。
跨距(Span)没有默认的格式。他们的主要目的是帮助你通过样式单及脚本来增加特定的格式或者是动作到比一个段落或者一个Div小的文本段中。在清单2.3中你可以看到他们的不同：
清单2.3：Div和Span实验 (ch2-6.htm)
<HTML>
<HEAD>
<TITLE>Div和Span实验</TITLE>
</HEAD>
<BODY>
<span>这是一个 Span。</span>
<span>这也是。</span>

<p> </p>

<div>
<span>这是一个 Span。</span>
</div>
<span>这也是。</span>
</BODY>
</HTML>
这个文件包含两个同样的句子“这是一个Span。”以及“这也是。”的两个拷贝，每个句子都被Span标签围绕。唯一的不同是在第二个拷贝的第一个Span（也就是缩进的那行）是<div>标签的一部分。如果你在浏览器中看一下清单2.3，应该是如图2.7显示：

图2.7：Div和Span实验 (ch2-6.htm)
当你在操作用文档对象模型(DOM)写的页面的单个元素时，你会看到更多的<span>和<div>标签。大部分流行的HTML编辑器，例如Frontpage和Dreamweaver，大量使用<span>和<div>标签来隔离在块标签中拥有对Z轴控制的文档元素。如果你使用HTML编辑器，你会看到大量的这种标签。
<body>标签
<body>标签可以接受很多能够帮助提升你页面整体显示的属性。这一点可以通过让你控制页面背景颜色及边缘，甚至是添加背景图片才实现。为了添加背景颜色，使用bgcolor属性。例如，下面的<body>标签可以把页面的背景颜色变成粉红色：
<body bgcolor="#FC00B3">
下面是<body>标签的属性和值列表：
alink为选择的超链接准备一个RGB或者是命名颜色值。当用户把输入焦点和鼠标移到链接上时，超链接就会被选择并被激活。
background 指向一个图片的URL。
bgcolor 为页面指定一个RGB或者是命名颜色值作为背景。
bottommargin（仅限于IE）指定页面的下边际为一个特定值，该值指定像素的数目。
leftmargin（仅限于IE）页面的左边际为一个特定值，该值指定像素的数目。
link 为没有激活的超链接准备一个RGB或者是命名颜色值。
rightmargin（仅限于IE）页面的右边际为一个特定值，该值指定像素的数目。
scroll 控制页面上是否显示滚动条。
text为页面上的文字准备一个默认的RGB或者是命名颜色值。
topmargin（仅限于IE）指定页面的上边际为一个特定值，该值指定像素的数目。
vlink 为访问过的超链接准备一个RGB或者是命名颜色值。
bgsound 指向一个声音文件的URL。声音文件会被自动下载并在下载完毕之后自动播放。在浏览器可以自动播放前需要完全下载声音文件使得bgsound在现实中不是特别有用。
使用字体和颜色创建格式化的页面
没有什么像是学习一门技术这样。试着创建一个页面，该页面需要包含一个100像素的左边际以及100像素的右边际，需要使用至少三个标题层，一个列表，并且需要配合相应的字体颜色和格式化指令。对于该目的，清单2.4包含一个实例文档。
清单2.4：实例HTML页面 (ch2-7.htm)
<html>
<head>
<title>DOM简介</title>
</head>
<body bgcolor="#ffffc0" leftmargin="100" rightmargin="100">
<font size=3>
<h1 align="center">文档对象模型 (DOM)简介</h1>
<h2>在网景和IE浏览器中的不同实现

<p><font size=2 face="Verdana">
万维网联盟(W3C)把各种可以出现在HTML页面的元素当作一个<i>对象(Object)</i>。DOM的目的就是这样的使得你能用程序访问页面上的各种元素。
</font></p>

<p><font size=2 face="Verdana">
不幸的是，对于DOM，两种最常用的浏览器有不同的实现。
微软的IE浏览器有最完整的实现。从版本3开始，网景和IE浏览器把表单和输入元素都交给脚本语言。从版本4开始，IE开始处理几乎所有的标签，元素，或者是程序化控制。为了实现这个，微软增加了一些新属性到每个标签，里面最重要的就是可以指定页面中每个元素的ID。相反，网景（版本4）的实现相当有限。
</font></p>

<h2>DOM对象</h2>
<p><font size=2 face="Verdana">
在你理解DOM对象之前，你需要从大概念上理解对象。一个对象就是一个“真正”对象的计算机模拟实现。
</font></p>

<h3>对象属性和方法</h3>
<p><font size=2 face="Verdana">
球是一个好例子。球有物理属性——它（通常）是圆的，有颜色，有弹性，在某种程度上，所有的球都共享这些属性。你可以把这些属性表达为所有球的通用属性——而且你也可以用变量表达这些属性。
</font></p>

<p><font size=2 face="Verdana">
球可以是操作或者是操作主题。例如，你可以滚球，扔球，或者是让球弹起来。这些操作叫做“方法(Method)”。所有的对象都有属性和/或方法。属性是对象的内置特性，而方法是操作。在实际中，这两者间是有概念上的重叠的。例如，球的颜色很明显是个属性，但是球的速率可以被实现为一个方法或者是属性，例如"球的速率为0.&quot （属性）或者"把球的速率变成100。"，这就等价于扔球（这到底是个属性<i>还是</i>方法呢？）。
</font></p>

<p><font size=2 face="Times New Roman">
下面的列表显示了球对象的属性和方法。
</font></p>
<h3>球的属性</h3>
<font color="#0000ff">
<ul>
<li>形状</li>
<li>颜色</li>
<li>直径（两侧）</li>
<li>直径（前后）</li>
<li>直径（头脚）</li>
<li>材质</li>
<li>弹性</li>
<li>表面材质</li>
<li>位置</li>
<li>速率</li>
<li>方向</li>
<li>加速度</li>
</ul>
</font>

<h3>球的方法</h3>
<font color="#0000ff">
<ul>
<li>滚</li>
<li>谈</li>
<li>撞击</li>
<li>移动</li>
</ul>
</font></h2>
</font>
</body>
</html>
这个页面太长，所以不能在一个图像中显示，但是在www.sybex.com可以见到。为了在你的浏览器中看一下该页面，可以到CSharpASP/Ch2目录中双击ch2-7.htm文件。