2. HTML常用标签

相信大家常常会打开浏览器搜索一些内容或者浏览一些网站，在浏览器的页面上会呈现很多内容，但是具体的形式无非就是图片、文字以及链接（可以点击进入另一个页面的特殊文字），其中文字承载着巨大的作用，传递着各种各样的信息，同时网页的问题可能作为标题、作为段落而存在，而且我们还可以为这些问题添加一些效果比如加粗、倾斜等等，这些都可以通过HTML实现，实际也就是因为这些内容采用了不同的标签，在本节中我们就来学习这些内容。

文本标签

 1 <!-- 标题标签 -->
 2 <h1>标题1</h1>
 3 <h2>标题2</h2>
 4 <h3>标题3</h3>
 5 <h4>标题4</h4>
 6 <h5>标题5</h5>
 7 <h6>标题6</h6>
 8 <!-- 标题注意事项 -->
 9 <h7>标题7</h7>
10 <h8>标题8</h8>
11 
12 <!-- 段落标签 -->
13 <p>有情不必终老，暗香浮动恰好，无情未必就是决绝，我只要记着：初见时彼此的微笑。</p>
14 <p>
15     <p>有情不必终老，暗香浮动恰好,</p>
16     <p>无情未必就是决绝，我只要记着：</p>
17     初见时彼此的微笑。
18 </p>
19 
20 <!-- 字体加粗或倾斜 -->
21 <p>人<strong>最宝贵</strong>的是生命，生命对人来说只有一次。人的一生应当这样度过：当他回首往事时，<em>不会因为碌碌无为，虚度年华而悔恨，也不会因为为人卑劣，生活庸俗而愧疚。</em></p>
22 <p>人<b>最宝贵</b>的是生命，生命对人来说只有一次。人的一生应当这样度过：当他回首往事时，<i>不会因为碌碌无为，虚度年华而悔恨，也不会因为为人卑劣，生活庸俗而愧疚。</i></p>

View Code

标题标签

HTML中针对标题提供了 <h1>~<h6>六种形式的标签，而且从<h1>到<h6>字体都有加粗，字号逐渐变小，这就是标题标签的一些特征。另外需要我们注意的是并不存在这六种标签之外的标题标签，不要试图设置<h7>之类的标签，这种形式的标签浏览器会当作普通的文本对待，这点需要我们特别注意。

段落标签

HTML中段落标签是<p>，表示一段文字，是否换行取决于视图窗口的大小。在使用段落标签时注意不存在在段落标签中嵌套段落标签的形式，因为这种操作没有实际的意义，浏览器对于这种情况会在嵌套标签的开始和结尾添加一个结束标签，纠正我们的错误，但是这种处理操作会影响页面的响应速度。

字体装饰

加粗字体建议使用<strong>，不要使用<b>标签，同样倾斜字体应该使用<em>标签而不建议使用<i>标签，之所以这样做主要是为了保证代码的语义良好。

链接标签

 1 <!-- 超链接 -->
 2 <a href="http://www.baidu.com/">百度</a>
 3 <a href="http://www.baidu.com/" target="_self">百度</a>
 4 <a href="http://www.baidu.com/" target="_blank">百度</a>
 5 <!-- 锚链接 -->
 6 <a href="#good">优秀段落</a>
 7 <h2>优秀段落1</h2>
 8 <p>
 9     我不能想像这样一个人，他认为开棋的时候先走马而不是先走卒对他来说是英勇的壮举，而在象棋指南的某个犄角里占上一席可怜的位置就意味着声名不朽，我不能想像，一个聪明人竟然能够在10年、20年、30年、40年之中一而再、再而三地把他全部的思维能力都献给一种荒诞的事情——想尽一切办法把木头棋子王赶到木板棋盘的角落里，而自己却没有发狂成为疯子。
10 </p>
11 <h2>优秀段落2</h2>
12 <p>
13     我不能想像这样一个人，他认为开棋的时候先走马而不是先走卒对他来说是英勇的壮举，而在象棋指南的某个犄角里占上一席可怜的位置就意味着声名不朽，我不能想像，一个聪明人竟然能够在10年、20年、30年、40年之中一而再、再而三地把他全部的思维能力都献给一种荒诞的事情——想尽一切办法把木头棋子王赶到木板棋盘的角落里，而自己却没有发狂成为疯子。
14 </p>
15 <!-- 锚点 -->
16 <a name="good">优秀段落</a>

View Code

链接就是在网页中可以点击之后跳转到其他页面的文字或者图片，这些功能的实现需要借助HTML中的<a>标签实现，在这里我们需要注意锚链接的实现方式。所谓锚链接就是点击当前页面的某个位置可以跳转到当前页面的另一个位置，这种操作我们称之为锚链接，其实现过程如下：

首先，在目标位置设置锚点 <a name="锚点名称">内容描述</a>;

最后，在操作位置设置链接 <a href="#锚点名称">描述文本</a>；

另外和链接密切相关的就是链接所指向的地址，而地址相关的内容又有相对路径和绝对路径的分别，关于它们的内容总结如下：

绝对路径，对路径的完整描述，常常指向站外的某个地址；

相对路径，相对当前路径的描述，一般指向的是站内的某个地址；

图片标签

<img src=”图片地址” alt=”图像替代文字” title=”鼠标悬停提示文字” 
width =”图片宽度” height=”图片高度”/>

 

如上所示就会在网页中插入一张图片，这里我们需要注意的是要尽可能的设置图片标签的 title、alt属性，这样可以增强用户的操作体验，但是不建议设置width、height相关的额属性，这种样式需要CPU进行相应的处理。