web前端学习（3）：认识HTML基本标签
本章主旨：
介绍常用的文本相关标签，如<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的属性值内容，这有助于让用户得到更多你想传达的消息。
在本章，我们主要学习了与文本有关的一些简单标签，同时也学习了一些标签属性，主要的重点在于超链接的设置。今天的例子虽然有了基本的文本与结构，但是却没有图片。在接下来的章节里，我将会进行介绍。文章排版一直在变，一是自己也在找自己的风格，二是发到首页的文章因为格式之类的问题被移出了首页，所以在慢慢改，请见谅。
