前端成长之路：HTML（1）

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

基本结构标签（骨架标签）

<html></html>标签是HTML标签，是页面中最大的标签，被称为根标签。

<head></head>标签是文档头部标签，在head标签中必须要设置的标签是<title></title>。

<title></title>标签是文档的标题，作用是让页面拥有一个属于自己的网页标题。

<body></body>标签是文档的主题，文档中所有的内容，页面内容，几乎都是放置在body标签中的。

HTML文档的的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。

文档中的特殊标签

<!DOCTYPE>标签

<!DOCTYPE>标签，这个标签是用于文档类型声明，其作用是告诉浏览器使用的哪个版本的HTML显示网页。比如说<!DOCTYPE html>，这个代码的意思是：当前页面采取的是 HTML5 版本来显示网页。特别注意：1.<!DOCTYPE>标签声明必须位于整个HTML文档的最前面的位置（必须位于第一行），其位于<html>标签之前。2.<!DOCTYPE>标签并不是HTML中的标签，只是文档类型声明的标签。

lang语言种类

通过html标签中的lang属性，可以定义当前HTML文档的默认显示语言，其默认是en（也就是英文），可以将其修改为zh-CN（简体中文）。但其实这并不影响文档显示：定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。但是这个属性对于浏览器和搜索引擎还是有影响的。

字符集

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在标签内，可以通过<meta>标签的charset属性来规定当前HTML文档应该使用哪种字符编码。比如:

<meta charset="UTF-8">

这个属性就是将这个文档的字符集设置为“UTF-8”。需要特别注意的是：一般情况下，统一使用“UTF-8”编码，必须统一写成标准的 "UTF-8"，不要写成"utf8"或 "UTF8"。并且，指定字符集这个meta标签是必须写的。

HTML中常用的标签

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，分别是<h1>-<h6>。在标题标签中定义的文字会加大加粗，字号也会变大，并且一个标题独占一行。并且，标题的文字加大加粗效果从h1-h6依次递减，重要性也是依次降低，这就实现了多级标题的需求。

段落和换行标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。p标签是单词paragraph（段落）的缩写。顾名思义，其作用就是像人们平时阅读分段一样，将HTML文档分割为若干段落，便于阅读。 文本在p标签（也就是在一个段落中）中会根据浏览器窗口的大小自动换行，并且段落之间会保持空隙，这很大程度上符合人们的阅读习惯。

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br>，br是单词break的缩写。这个标签的作用就是强制换行。 br标签还是一个单标签（单标签只需要一个标签就可以，它是自闭合的。）；br标签只是简单的开启新的一行，和段落标签的换行不一样，段落p标签的换行会插入一些垂直的间距。

可以明显的看出段落之间的换行是有明显的间距的。

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。文本格式化标签的作用是：突出当前文字的重要性。

加粗

文字想要加粗可以使用<strong></strong>标签或者使用<b></b>标签，但是一般推荐使用strong标签，使用strong标签的语义更加强烈。

倾斜

文字想要倾斜可以使用<em></em>标签或者使用<i></i>标签，但是一般推荐使用em标签，使用em标签的语义更加强烈。

删除线

文字想要添加删除线效果可以使用<del></del>标签或者使用<s></s>标签，但是一般推荐使用del标签，使用del标签的语义更加强烈。

下划线

文字想要添加下划线效果可以使用<ins></ins>标签或者使用<u></u>标签，但是一般推荐使用ins标签，使用ins标签的语义更加强烈。

div和span标签

div和span标签是本身是没有任何语义的，它们两个就像是一个盒子，可以用来装内容。div是division的缩写，division的意思是分割、分区；span的意思是跨度、跨距。可以将div标签理解为一个大盒子，是用来布局的（后面的盒子模型会用到），一行只能放一个div标签；span可以理解为一个小盒子，也是用于布局，但是一行可以放多个span。

图像标签

在HTML中，用<img>标签定义页面中的图像。src是img标签的必须属性，其用于指定图像文件的路径和文件名。 除了src这个必须属性之外，img标签还具有一些其他属性：alt属性的作用是替换文本：提供一段文本，若图像加载失败，那么就会显示alt中的文本；title属性的作用是提示文本：提供一段文本，当鼠标放置于图像上，就会显示title中的文字；width和height属性是设置图片的宽高（一般宽高只会设置一个，另外一个会自动调整）；border属性可以设置图像的边框粗细（单位是像素px）…… 这些属性都是根据需要自己设置。

需要注意的是：

1.图像标签可以拥有多个属性，必须写在标签名的后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。（这里尤其注意：属性之间不是用“,”分隔的，直接使用空格分隔即可！）

3.属性采取键值对的格式，即key=“value"的格式，属性=“属性值”。

img标签的属性有很多（HTML的有些标签也具有很多属性，但是并非每一个属性都是必须的。），但是必须要写的属性只有src（并且src中的路径必须写相对路径，必须！），其他属性是根据需求使用的。

超链接

在HTML标签中，<a></a>标签用于定义一个超链接，其作用就是超链接的作用：从一个页面连接到另外一个页面。a是anchor（锚）的缩写。a标签有两个常见的属性：href和target：href是连接目标的URL，这是必须属性；target是指定连接页面的打开方式，默认是_self，就是在当前页面打开；可以通过target指定打开方式为_blank，在新窗口中打开。