本章主旨:
介绍常用的文本相关标签,如<h>,<p>,<a>;简介常见的HTML标签属性,如title属性,href属性,id/class属性等;重点掌握<a>标签。
在第二章中我们已经了解到网页可以划分为<html>部,<head>部,<body>部这三个部分,网页文档内容将写入其中的<body>部;同时,我们开始接触到了标签,也对标记语言的“标记”二字有了些许体会。学习HTML的过程,大体上来说,就是学会使用标签的过程。在实际生活中,网页最重要的目的,是展示内容,一个网页中,可能会有众多字号大小不同的标题、一个个段落,也会有常见的超链接用以“跳转页面”(比如网站的导航栏),甚至也会有图片、表格、列表等等内容。而要实现这些,少不了标签的参与。而在本章中,我主要介绍的是些简单的、与文本相关的标签,以及常见的HTML标签属性。
一、网页内容的结构必须由标签说明
网页文档内容将写入其中的<body>部,那么让我们模仿“报纸”,试着在<body>中写出一份有标题段落的文本并用浏览器打开它(注意:在html中,我们用<!--注释内容-->来进行注释,注释主要是为了让自己更好的控制网页的结构,浏览器在显示网页时会把注释的内容忽略掉)。
<html>
<head> </head> <body> <!--以下是标题--> 时习 <!--以下是两段段落--> 学而时习之,不亦说乎。学而时习之,不亦说乎。学而时习之,不亦说乎。
学而时习之,不亦说乎。学而时习之,不亦说乎。学而时习之,不亦说乎。
</body> </html>
从上图中我们可以看到,浏览器做了它的首要工作——显示文本,但是与此同时,我们设置的标题并没有标题的“特点”,设置的段落也完全忽视了两段式的格式,换句话说,浏览器完全忽略了HTML中的换行和空格。有可能你会想了,怎么样让浏览器明白哪里是标题,哪里是段落,哪里有空格,哪里要换行呢?是不是也可以做个标记让浏览器知道呢?是的,请记住——网页内容的结构必须由标签说明。如果想要实现我们想要的效果,我们就要用相应的标签去修饰文本。
二、最常用的文本修饰标签
试着为标题文本添上<h1>标签,为段落文本添上<p>标签吧!(注意:h即heading;p即paragraph;)
<head> </head> <body> <!--以下是标题--> <h1>时习</h1> <!--以下是两段段落--> <p>学而时习之,不亦说乎。学而时习之,不亦说乎。学而时习之,不亦说乎。</p> <p>学而时习之,不亦说乎。学而时习之,不亦说乎。学而时习之,不亦说乎。</p> </body> </html>
嗯,我们成功得到了一个显眼的标题和两个段落。仔细观察上图所截的网页页面,标记了<h1>,<p>标签的文本都在结束后自动换行了。不过<h1>中的'h'表示heading,那个'1'又表示什么呢?其实<h1>表示的是1级heading,也即1级标题。显然,有1级标题,就肯定有其他级别的标题。其实HTML中共有六级标题,从<h1>到<h6>依次递减,在同一个浏览器中,它们默认保持级数越大、字号越小的规则。我们可以尝试一下看看不同级别标题的差别。
<head> </head> <body> <!--以下是一级标题--> <h1>时习之</h1> <!--以下是二级标题--> <h2>时习之</h2> <!--以下是三级标题--> <h3>时习之</h3> <!--以下是四级标题--> <h4>时习之</h4> <!--以下是五级标题--> <h5>时习之</h5> <!--以下是六级标题--> <h6>时习之</h6> </body> </html>
三、超文本的主角——超链接
你是否想过,为什么当我们点击博客园上方的导航栏上的文字后,我们就能到达另一个页面呢?实现从一个网页跳到另一个网页(关于超链接连接到本文档内部的情况我们暂且不论),我们必须要经过一个连接了着陆点的“锚”,而这个“锚”上就有着“链接”,当我们点击它时,我们就可以顺着“锚”上的“链接”前往目标页面,这个“锚”,就是<a>标签,'a'就意味着anchor。由<a>修饰的文本代表着此文本是个超链接,它将连接到指定地址,对于我们来说,就是另一网页的所在地址。下面假设我们要建立一个链接到百度的超链接,首先可以肯定的是我们需要一个锚<a>,其次,我们需要知道百度的地址,但是找到地址后我们该如何把地址记录下来呢?这里就要引入<a>标签的href属性了(注意:如果<a>指向互联网上的网页,href尽量给出"http://",如果不给出有可能出现无法连接至网页的情况)。
<head> </head> <body> <!--这是一个超链接--> <a href="http://www.baidu.com">点我链接到百度</a> </body> </html>
当我们点击这段文本,浏览器就会顺着“锚”上的“链接”带我们到达指定页面:
四、简介HTML的标签属性
标签一般成对出现,分为开始标签和结束标签,如<h1>、</h1>;
HTML标签都具有属性,如id,class,title,alt等。但是并不是所有的标签都需要设置属性,只有像<a>的href这样缺少就会出问题的属性才必须要设置,因为如若不设置,就找不到目标网页的位置,这个超链接自然会失效。通常属性在开始标签设置,同时属性与标签、属性与属性之间要用空格隔开。属性会有一个属性值,通常形式为:属性=“属性值 ”。有的属性的属性值不止一个,则需用分号隔开,形式为:属性=“属性值1;属性值2;属性值3;”。让我们为上述的超链接增添新的title属性,看看会有什么新的变化。
<head> </head> <body> <!--这是一个超链接--> <a href="http://www.baidu.com" title="baidu">点我链接到百度</a> </body> </html>
在我们进一步给<a>添加了title属性后,鼠标移到超链接文本上时会出现title的属性值内容,这有助于让用户得到更多你想传达的消息。
在本章,我们主要学习了与文本有关的一些简单标签,同时也学习了一些标签属性,主要的重点在于超链接的设置。今天的例子虽然有了基本的文本与结构,但是却没有图片。在接下来的章节里,我将会进行介绍。文章排版一直在变,一是自己也在找自己的风格,二是发到首页的文章因为格式之类的问题被移出了首页,所以在慢慢改,请见谅。