要回家了有点按捺不住心里的躁动，来点简单轻松的话题。
这是个有趣的问题，应该有不少人搜过，我也搜过。出现这个问题主要还是滥用块级元素，或者是不会使用一些小技巧。举个例子，有时候我们想实现如下表单效果：
但有时候写着写着会变成下面的样子：
按我从以前遇到过情况来说，出现上面的情况的原因，可能有2个：
第一，就是可能在某个地方<label>被设置块级元素包住了
解决方法： 在外部样式使用 display: inline-block
第二，就是<label>的样式使用了 display: block
所以如果以后在写表单的时候，出现这个问题，可以从上面2个方向去查找原因，以及找出相应的解决方法。
（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。使用 <!Doctype>会让文档中的所有盒子模型以w3c标准盒子模型呈现。
（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式： 标准模式 和 怪异模式 。在 标准模式 下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在 怪异模式 下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。
Reference1 - h5新增标签
Reference2 - HTML元素分类
Reference3 - html标签分类及常用元素
Reference4 - HTML5常用标签分类
常用标签<html></html>创建一个HTML文档 <head></head>设置文档标题和其它在网页中不显示的信息 <title></title>设置文档的标题 <body></body>标记页面正文开始和结束，网页中要显示出来的东东，都应放在这对标签之间 <h1></h1>最大的标题<pre></pre>预先格式化文本<u></u>下划线<b></b>黑体字<i></i>斜体字<tt></tt>打字机风格的字体<cite></cite>引用，通常是斜体<em></em>强调文本（通常是斜体加黑体）<strong></strong>加重文本（通常是斜体加黑体）<font size="" color=""></font>设置字体大小从1到7，颜色使用名字或RGB的十六进制值 <BASEFONT></BASEFONT>基准字体标记<big></big>字体加大<SMALL></SMALL>字体缩小<STRIKE></STRIKE>加删除线<CODE></CODE>程式码<KBD></KBD>键盘字<SAMP></SAMP>范例<VAR></VAR>变量<BLOCKQUOTE></BLOCKQUOTE>向右缩排<DFN></DFN>述语定义<ADDRESS></ADDRESS>地址标记<sup></SUP>上标字<SUB></SUB>下标字<xmp>...</xmp>；固定宽度字体（在文件中空白、换行、定位功能有效） <plaintext>...</plaintext>；固定宽度字体（不执行标记符号）<listing>...</listing>固定宽度小字体<font color=00ff00>...</font>；字体颜色<font size=1>...</font>；最小字体<font style ='font-size:100 px'>...</font>；无限增大格式标志标签<p></p>创建一个段落<p align="">将段落按左、中、右对齐<br>换行 插入换行符<blockquote></blockquote>从两边缩进文本<dl></dl>定义列表<dt>放在每个定义术语词前<dd>放在每个定义之前<ol></ol>创建一个标有数字的列表<ul></ul>创建一个标有圆点的列表<li>放在每个列表项之前，若在<ol></ol>之间则每个列表项加上一个数字；若在<ul></ul>之间则每个列表项加上一个圆点；<div align=""></div>用来排版大块HTML段落，也用于格式化表<MENU>选项清单<DIR>目录清单<nobr></nobr>强行不换行<hr size='9' width='80%' color='ff0000'>水平线（设定宽度）<center></center>水平居中链接标志表格标志<a href="URL"></a>创建超文本链接<a href="mailtEMAIL">……</a>创建自动发送电子邮件的链接<a name="name"></a>创建位于文档内部的书签<a href="#name"></a>创建指向位于文档内部书签的链接<BASE>文档中不能被该站点辨识的其它所有链接源的URL<LINK>定义一个链接和源之间的相互关系——此答案来自百度百科1、在HTML基础中，单标签就是由一个标签组成的。例如<br>、<hr>、<img>、<input>、<param>、<meta>、<link>。
2、而双标签则是由“开始标签”和“结束标签”两部分构成（这两部分是相同的）。例如<html>、<head>、<title>、<body>、<table>、<tr>、<td>、<span>、<p>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<object>、<style>、<b>、<u>、<strong>、<i>、<div>、<a>、<script>、<center>（双标签的一部分）。
扩展资料：
1、由尖括号包围的关键词，比如 <html>
2、通常是成对出现的，比如 <div>和 </div>
3、标签对中的第一个标签是开始标签，第二个标签是结束标签；
4、开始和结束标签也被称为开放标签和闭合标签。
5、也有单独呈现的标签，如：<img src="百度百科.jpg" />等。
6、一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" />。
7、网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。
参考资料来源：百度百科-html标签
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）