HTML中级指南(HTML教程)

2006年12月18日 22:23 5180

鉴于HTML初级指南的目的只是教授HTML的骨架元素,这个中级教程增加一些骨肉,它们不应该特别的难,但可以进一步增进我们对HTML的理解,使我们能多做一些更有用的事情。

HTML中级和高级指南的各部分并没有特别的顺序,每页都是独立的,你可以按你的需要、意愿学习不同的部分。

一、span和div──“无意义”的元素,用于CSS。

HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而spandiv标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。

它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS中级指南的类和id选择符。

spandiv的不同之处在于span是内联的,用在一小块的内联HTML中,而div(想想division是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。

<div id="scissors">
<p>This is <span class="paper">crazy</span></p>
</div>


在实践中,div,特别是span不应该滥用,尽管有其他相左的意见。比如,你要强调单词“crazy”和加粗类“paper”,可能会用这样的代码:

<div id="scissors">
<p>This is <strong class="paper">crazy</strong></p>
</div>

这是做法比再加一个span比较好。

对于类class和标识id没有线索?别担心,在CSS中级指南中会接触到它们。你所需要记住的是,span和div 是“无意义”的标签。


二、元标签──运用页面的额外信息。

曾经,很久以前,当因特网还是用线串起少量薄纸片的时候,元标签就是因特网的街头公告员……嗯……街头。

元标签对浏览器窗口中的内容不做任何事情,它们用在关于页面的像搜索引擎的归类目录信息中。

元标签meta可以使用尽可能多次如你所需,包括内容属性content(必须的)、名称属性namehttp-equiv属性。

名称name属性可以是你喜欢的任何东西,通常使用的是作者author,关键词keywords和描述description。描述常被搜索引擎(比如Google,百度)用来在搜索结果中描述页面,而它本身也可能是元标签中最有用的应用。

http-equiv属性取替名称name属性会产生HTTP数据头,它将会发送页面拥有的信息给服务器。随后内容属性content可以是content-type(类型)、expires(时效)、refresh(刷新,多长时间页面会自动刷新一次)以及set-cookie(设置cookie)。

<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="This is my bloody exciting web page about air conditioners" />
...


注意:元标签之所以重要,是因为它们为搜索引擎所依赖和为页面建立概况。比如关键词keywords元数据就被广泛运用。如今,大部分的搜索引擎使用页面本身的内容,使大部分元数据对于阅读这个HTML的用户来说是没有什么作用的,除了转换信息以外。

三、 表格──HTML初级指南的表格教程的扩展,关于表头和单元格的合并。

表格在HTML初级指南中看起来够复杂的了。也是,在一维的代码中表现二维的格确实有些困难。

嗯,它需要技巧。感谢rowspan和colspan属性。这两个臭杂种。

下面的代码跟HTML初级指南中的表格教程类似。


<table border="1">

<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>

</tr>
<tr>
<td>Row 2, cell 1</td>
<td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>

</tr>
<tr>
<td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
<td>Row 3, cell 2</td>

<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>

</tr>
</table>

首先,我们在第一行中用td标签取代了th标签。td是标准的数据单元格,th是单元格表头。像td标签一样,这些th标签也要用在tr标签里边。

在一些td标签中,我们用到了colspanrowspan属性。在浏览器中查看,你会发现,在第二行中两个单元格代替了三个,第二个单元格横跨了两列。colspan属性,意即“列跨越”,将会跨越指定数目的单元格。就是说,在这个例子中不再需要第三个td标签──两个单元格个已经合并成一个。

rowspan属性跟colspan属性类似,显而易见,它将跨越行。又,它跨越的单元格应该被删除。在这个例子中,因为它跨越了四行,这一行只有两个单元格。

与那个简单的3x4,12个单元格的表格,我们也来算一下这些有合并单元格的表格数目。尽管只有10个单元格,但里面包含了2个跨越。

 


四、 定义列表──被忽略的列表。

在HTML初级指南中我们教授了无序列表和有序列表,很不幸,很像Peter Cushing的博士Who,自定义列表很容易被忽略。可能是因为自定义列表需要比无序列表和有序列表更多的设置和似乎更少用。当遭遇一系列术语与解释的列表(比如术语表)时,自定义列表就会很有用了。

dl元素像ul元素和ol元素一样确立列表。不同的是,自定义列表用dt(definition term,定义术语)元素来代替li元素,其后跟随dd(definition description,定义描述)元素。

不局限于一个dt跟着一个dd,而是任意的。比如有很多同义词,就可能一个dt跟着许多dd。如果有一个有许多不同意义的词,就可能许多dd后只有一个dt。

<h1>Some random glossary thing</h1>
<dl>
<dt>HTML</dt>
<dd>Abbreviation for HyperText Markup Language - a language used to make web pages.</dd>

<dt>Dog</dt>
<dd>Any carnivorous animal belonging to the family Canidae.</dd>
<dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd>

<dt>Moo juice</dt>
<dt>Cat beer</dt>
<dt>Milk</dt>
<dd>A white liquid produced by cows and used for human consumption.</dd>

</dl>

五、 Javascript──如何在你的HTML中使用Javascript。

Javascript是一种与HTML一起工作的客户端脚本语言,然而这不是一个Javsscript指南,我们着眼于在HTML如何使用Javascript。

Javascript事件像HTML标签的属性一样使用。事件是发生在HTML元素上的某些行为,如什么时候被点击了或者什么时候失去焦点。

<a href="#top" onclick="alert ('wow. Javascript.')">Click me</a>


可以使用的事件有:

* onblur(使用在表单元素中,当元素失去焦点的时候执行)
* onchange(使用在表单元素中,当某些东西改变是执行)
* onclick(鼠标点击一个元素时执行)
* ondblclick(鼠标双击一个元素时执行)
* onfocus(使用在表单元素中,当元素获得焦点时执行)
* onkeydown (按下某个按键时执行)
* onkeypress(按下和释放某个按键时执行)
* onkeyup(释放某个按键时执行)
* onload(在body标签中使用,载入页面的时候执行)
* onmousedown(按下鼠标按键时执行)
* onmousemove(鼠标光标在元素上移动时执行)
* onmouseout(鼠标光标移开元素时执行)
* onmouseover(鼠标光标移到元素上时执行)
* onmouseup(当释放鼠标按键时执行)
* onreset(用在表单元素中,当表单重置时执行)
* onselect(用在表单元素中,当元素被选择时执行)
* onsubmit(用在表单元素中,当表单提交时执行)
* onunload(用在body标签中,当关闭页面时执行)
呼,说完了……

注意:别对Javascript失去自制力。最好是少用。一个使用Javascript的网页存在严重降低易用性的风险,而很多东西可以代替它,比如服务器端脚本语言PHP或ASP等。


六、 不良标签──你应该避免的HTML元素和属性。

这次着眼于一些童话世界和史前时代的HTML标签。它们是被HTML标准抛弃的不良、肮脏、十足丑陋的,胡乱荒谬的属性,只能部分地工作在一个次版本的浏览器上或者可以被新标签取代的标签。

有人建议我们不要歌颂标准尽管我们教授基于标准的HTML和CSS,但如果这样的话,用户(特别是初学者)会遭遇不良的入门方法和不良练习,同时他们并不知道哪里出错了。所以我们的答案是:一份拒绝不良标签的指南

HTML已经尝试去除表现和朝向内容发展,导致这样一个基本原理:从表现(CSS)中分离出内容意义(HTML)。这将会给网页减肥,因为一个表现指令集合(以外部CSS文档的形式)可以应用到多个页面。这也会使网站更易于管理因为全局变动可以从修改一个单独的文件得到。

部分不良标签基本上是表现标签(比如small),它们可以用更有意义和更简单的CSS规则取代。其他的不仅用于表现,而且还是不必要的庞大(比如font标签)或者对可用性有害的可恶的(比如blink)。


标签

下面这些是你可能会经常碰到的可以有更好选择的标签:

* b 可以用来产生粗体元素。使用strong(意味着强烈强调)代替更有意义,或者用CSS来完成这项工作,增加font-weight: bold的规则,用来表明粗体元素。
* i可以用来产生斜体元素。使用em(表示强调),这也更有意义。或者可以用CSS来表现斜体:font-style: italic
* big可以产生更大字体。使用标题(如h1,h2等,当文本本来就是一个标题时)代替,增加了意义,或简单地在CSS中使用font-size属性,获取更多的控制权。
* small 可以产生小字体。CSS(font-size)再一次取得更多的控制权。
* hr 可用用来展现一条水平线。在CSS中用hr设计很少见,CSS的border-top,border-bottom属性或者朴素的图像做这个效果会更好。

上述的标签与最新的HTML标准尽管都兼容,但对内容却没有任何好标签应有的意义。They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.

* u可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。
* center可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center,还有left、right和justify。
* menu用来创建菜单列表。它并没有ul做的完美,在因为无序列表更通用,ul高高地站在menu的尸体上。
* layer和div元素相似,都由CSS绝顶位置。这仅仅能在老版本的Netscape中工作,所以再也没有什么用。
* blink或者marquee。大声说不!它们应该像本身意义一样被期待,但有着十分有限的支持,和,只会产生非常,非常恶心的笑话。
* font,可以用来定义元素的字体名称,尺寸和颜色,在标签世界中理所当然地获得了臭名昭著标签之王荣誉称号。旧的网站(甚至新的也有)像满世界的瘟疫之蚁一样布满整个页面。大部分的font标签激增是从网页制作软件带来的,把font标签包括颜色和尺寸用在每一个元素。font标签被滥用到出现在当前的每一个重复元素的(如,每次你使用p元素),而CSS,则可以用一条简短的代码来应用重复元素,甚至控制整个网站。使用CSS方法,不仅可以使页面比被大量font标签寄生的更苗条,而且更容易维护因为你所需要做得只是改变CSS文件中的一行,而不是逐一修改每一个font标签。这也增加了维护一个一直保持设计风格一致的网站的可能性。font标签和不恰当的表格使用是两个产生网页不必要臃肿的主要原因。


属性

可能你认为你正在使用良好的标签,但还是有一些麻烦的寄生虫属性潜伏,它们随时会冒出来。
* name用来为一个元素指定一个名字,它在如input的表单元素中完全被接受,但在其它地方,name的工作已经被id属性取代。
* textbgcolor可以在body起始标签中定义页面的基本文本颜色和背景颜色。CSS的colorbackground-color属性在应用到body选择符时也可以做到。
* background可以在body标签中指定一个背景图画。CSS会做得更好,用如background-image的属性来处理背景图片。
* link、alink、vlinkbody标签中用来指定连接(未访问,激活和已访问)。CSS宝贝── :link、:active和:visited会做这项工作。
* align可以用来对齐某个元素的内容(比如 <div align="center">Stuff</div>),但是,像center标签,CSS的text-align属性是新的老板。
* target可以用不同的方式打开一个连接,最常用的是打开新窗口(比如<a href="wherever.html" target="_blank">Help me</a>)。看起来不错,但你不要对你的网站这样做。用户并不预期不可思议的东西(比如新窗口)出现,而且最常用的浏览工具是浏览器的后退按钮,如果你打开新窗口,这将不可用。它是非法和不易用的。

注意保留标签的表现属性如图像的widthheight,表格的cellpaddingcellspacing,是由于这些元素经常使用不同的值。这不是完美的解决方案,但如果你的网页有大量的图像和表格,你没有其他的明智选择,只好使用它们。最让人难以理解的表现属性是textarea标签,它仅有colsrows两个合法属性,在最新的HTML版本中也是必须的。


良好标签,不良使用

要进入你的卧室你可以弯腰通过一个狗洞,但等等,还有一扇有把手的为人类准备的门!哇,看——刚好适合一个进入。

使用HTML标签(好标签),无论相信与否(相信它!),有一个很好的的理由:你使用它们有一个好前提,你就会有一个更好的结果。

网页本身对用户来说,比起HTML标签语法语义更易用,屏幕阅读器常会在遇到一个ul标签或者有着h1或h2的标题标签时强调突出它们。

在HTML标签世界中最被滥用的就是表格了。表格常常用来布局,但表格应该仅仅只用来展示表格式数据,就如它们本身的设计意图。不用表格的布局方法不是追求开悟的某种禅,它不仅可以显著地为网页减肥,而且更易于维护和重新设计。

注意有时侯设计者还会用在这里提到的这些标签和属性(特别是用表格来布局)来做过渡型的设计──既可以工作在老版本的浏览器上(尤其是Netscape4),也可以工作在现代浏览器上。表格确实可以在CSS不称职的Netscape4上有更强的表现控制。很不幸,这些用户很少而且越来越少了,而展现表格布局的缺点一览无遗的移动设备用户越来越多。上述的无表格设计可以预防这些缺点,尽管对一小部分的用户有些许的表现改变,但还能在所有的浏览其中保持着完全的功堋p; $float1 = 1.732 ;
  $float2 = 1.4E+2 ;
  $MyArray1 = array( "子" , "丑" , "寅" , "卯" );

  这里引出两个问题,首先PHP变量以$开头,第二PHP语句以;结尾,可能ASP程序员会不适应。这两个遗漏也是程序上大多错误所在。

  5、运算符号:

  数学运算: 符号 意义 
  +  加法运算 
  -  减法运算 
  *  乘法运算 
  /  除法运算 
  %  取余数 
  ++  累加 
  --  递减 

  字符串运算:

  运算符号只有一个,就是英文的句号。它可以将字符串连接起来,变成合并的新字符串。类似ASP中的&
  <?

  $a = "PHP 4" ;
  $b = "功能强大" ;
  echo $a.$b;
  ?>
  这里也引出两个问题,首先PHP中输出语句是echo,第二类似ASP中的<%=变量%>,PHP中也可以<?=变量?    >。

  逻辑运算:

  符号 意义 
  <  小于 
  >  大于 
  <=  小于或等于 
  >=  大于或等于 
  ==  等于 
  !=  不等于 
  &&  而且 (And) 
  and  而且 (And) 
  ||  或者 (Or) 
  or  或者 (Or) 
  xor  异或 (Xor) 
  !  不 (Not) 

  今天就说到这里,明天说一下流程控制

编辑: 风未起时