HTML标签参考（一）

hi，小哥哥小姐姐们，我们今天要说的是前端的入门，却也是十分重要的意识的培养哦！

• html中的标签数量是很多的，据人统计大概有300个左右，并且每年都会以20-30个的速度增加着，但是这么多的标签我们不必都去记住，因为很多标签都是不常用的或者可以用基础的标签搭配组合，实际上我们需要掌握的大概在30个左右。

• 在前端开发中我们要知道，并不是你用的技术多么先进就显得多么厉害，我们要考虑到代码的可读性以及后期的可维护性，用常见的标签来写才会让其他人都能读懂你的代码。

• 代码中还有一点很重要的就是要勤写注释哟~ 顺便一提在html中的注释形式是<! – – your code – – >

好了前言说完了，我们正式开始介绍一些标签吧！

（这里的标签都是属于html4中的内容，html5会有新的标签和新的内容，我在后面的文章中再介绍。）

几个基础的标签

• p标签

<p></p>是段落标签，在<p></p>中间写的内容会当做一个段落来处理。

p标签的特点是独占一行，并且段落上下都会有一定的间隔距离。

• 标题标签 h1-h6

标题标签的作用是着重显示文字，一般用在标题上，它会将里面的文字加粗放大并且独占一行。其中h4的默认大小是正常的文字大小，不过是加粗的。

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

• strong标签

<strong></strong>标签的作用是将里面的文字加粗处理。

• em标签

<em></em>的作用是将里面的文字变成斜体。

• del标签

<del></del>是删除标签，它会在里面的文字的中间画一条横线，一般在打折的时候使用。

• address 标签

<address></address>是地址标签，它会将里面的内容变成斜体并且独占一行。

这六个是很基础很简单的标签，作用也是显而易见，还有另外一种结构化标签，它们没有特殊的效果，而是用来当做容器来盛放其他的标签，这有点类似于每个家庭中都会单独分出来厨房卧室大厅等区域，然后每个区域中还有各种各样的设备，这里的家庭中的区域就是我们的结构化标签的作用。

结构化标签还有另外一个作用就是用来为里面的子元素设置样式。一般的元素如果某一条属性没有被开发者设置样式的话，它会自动继承父级元素的相应属性的样式。

比如我们现在有三个p标签，我们想让三个p标签里面的文字都变成红色，给三个p标签都写上color:red 是非常麻烦的，最简单的方法是将三个p标签都放到一个结构化标签里面，给这个结构化标签一个color:red的样式，这样里面的三个p标签就都会有这个样式了。

这两点作用是最常见的，因此我们在写一个页面之前，最先考虑的就是结构问题，因此一般先写结构化标签。

下面我们就介绍最常见的两个结构化标签。

• div

<div></div>标签可以说是我们在前端开发中用的最多的标签了。

• span

<span></span>标签里面多数情况下盛放文字或者小icon之类的小物件。

我们现在为div标签设置一下样式，并且在中间加一些文字。

<div style=”width: 100px; height:100px; 这是一个实例的结构化标签，一切正常</div>

我们发现文字会在这个div标签的边界处自动换行，也就是说这个div标签圈定了一个范围，里面的文字或者其他标签都默认在这个范围里面显示。

但是当我们在中间书写的不是中文而是一串英文字符的时候，我们会发现这一串英文字符在div的边界处并没有换行，而是一直显示下去，这是为什么呢？

文字分隔符与编码集

• 这是因为我们的每一个汉字，计算机都会认出来是一个单独的单词，每一个汉字都会默认地和其他汉字分隔开，但是英文字母却不会默认地分隔开，因为计算机不知道多少个英文字母才算是一个单词，因此我们需要手动为其添加分隔符。

而这个分隔符我们也不陌生，就是我们常用的空格，只要我们在这一串字符中间加几个空格，那么被空格隔开的字符就会被当做是一个单词从而与其他的单词分隔开。

那么现在问题来了，空格的作用是当做分隔符来使用，并不是我们所想的那种空白的一个格，那么我们怎么在html中写空白格呢？

• 这里我们就要提到一个名词叫做编码集了。我们在书写html的时候，很多特殊的符号是无法写出来的，这个时候我们只能用编码来让浏览器识别我们所想的符号。编码的格式是&编码; 千万不能忘记后面的分号哟~

• 空格的编码就是&nbsp; 当我们写多个&nbsp;的时候，在页面中我们也就可以看到多个空白格了。

• 其次，用来当做标签的尖括号<>也是无法正常通过符号来显示出来的，我们同样需要用编码集让浏览器识别出来。< 小于号的编码是&lt; less than的意思，同理，> 大于号的编码时&gt; great than的意思。我们只要在html中写这两个编码，那么大于号和小于号就可以正常显示出来了哟~我记得有一个表情是 &gt;_&lt;~

• 同样的，回车也是属于分隔符，在html中回车是没有作用的，我们想要在网页上让文字显示出回车换行的效果的话，编码同样也是没有办法实现的，我们需要一个标签叫做<br>标签，这个标签的作用就是换行。w3c标准中提到：<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 xhtml 中，把结束标签放在开始标签中，也就是 <br />。

下一篇我们会继续教给大家html里更多的标签