前端重拾（简单标签（一））

一些最简单的html标签

（浏览器解析代码换行问题）

今天重新从最基础的前端代码学了一遍，感受颇深，很多细节的东西都没有注意到。哪怕是最简单的p标签也有了新的认识，对于以后的css布局有了很大的帮助。

标题标签（h1~h6）：作为标题标签，字体自动加粗，占据网页的整行并且自动换行，上下具有边框，也就是字体的高度为10px，那么它在网页中就可能是10+2+2px。

div标签：作为最重要的分块标签，div默认情况下也会占据一整行，自动换行，上下无边框，两个div上下紧紧相连。

段落标签（p）：作为一个段落，自然而然会自动换行，同样占据一整行，上下具有边框。

文字标签（span）:作为文字标签可以插到p标签中，作为段落的一部分。不具备自动换行的能力，上下无边框。

涉及到代码换行问题。

下面我们来实际看看（为了更好地看清我加了背景颜色）

123

456

自动解析了代码中的换行 将代码中的回车字符浏览器翻译成了空格字符

123456

两个span标签之间无换行，自动就连接在了一起。

其中这个第一种情况不是我们前端UI设计师想要的，由于代码的换行导致了解析html的空格字符，可能会影响我们的布局细节。我查阅了相关资料其中input标签也有同样的问题，下面我们分享一些解决方案。

1.写代码的时候不要换行，input，span等在一行输写，那么将解决该问题。但是代码就变得不再那么容易好看。

2.利用css，设置父级块的格式，即font-size=0。

3.设置外边框为负值。即margin-right或者margin-left=-3px。（可能浏览器不同，像素距离也不同）。

外加一些常用不常见标签

sup 上标签 sub下标签

dbo的（dir属性）rtl 从右往左输出显示，ltr从左往右正常显示。