要回家了有点按捺不住心里的躁动，来点简单轻松的话题。
这是个有趣的问题，应该有不少人搜过，我也搜过。出现这个问题主要还是滥用块级元素，或者是不会使用一些小技巧。举个例子，有时候我们想实现如下表单效果：
但有时候写着写着会变成下面的样子：
按我从以前遇到过情况来说，出现上面的情况的原因，可能有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常用标签分类
语义类标签是纯文字的补充，如标题、自然段、章节、列表等。<section>、<p>、<nav>。
现代互联网产品中，HTML描述"软件界面"多过"富文本"，而软件界面里的东西，几乎是没有语义的。在任何"软件界面的场景中"，可以直接使用div和span。
语义标签的优点：在很多工作场景里，正确地使用语义标签可以带来很多好处：
作为自然语言和纯文本的补充，用来表达一定的结构或消除歧义
<ruby>、<rt>、<rp>、
<em>
HTML应支持 文章的结构的区分。语义化的HTML能够支持自动生成目录结构。
一篇文档会有一个属性的目录结构，由各级标题组成，此树形结构可能与HTML元素的嵌套关系不一致。
<h1>~<h6>、<hgroup>
<section>
越来越多的浏览器退出的"阅读模式"，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性变得越来越重要。能让浏览器很好的支持"阅读视图功能"，提升搜索引擎的命中率，对视障用户的读屏软件更加友好。
<header>、<nav>、<aside>、<footer>、<address>
<article>
所谓 元信息 ，是指描述自身的信息，
元信息类标签就是HTML用以描述文档自身的一类标签。通常在head标签中，不会在页面中显示出来。
元信息类标签多数情况下是给浏览器、搜索引擎等机器阅读的，有时这些信息会在页面之外展示给用户。
必须是html标签中的第一个标签（若head前面有标签，浏览器解析的时候 ，head标签中的内容会被移到body中），
内容需包含一个title标签（文档作为iframe或有其他方式指定了文档标题时，可不包含title）（多个title时 只有一第一个生效），
最多只能包含一个base（页面中所有 相对 链接的基准URL）（多个base时 只有第一个生效）。
可以改变全局的相对链接地址。不建议使用哦。
meta标签是一组键值对，是一种通用的元信息表示标签。
meta标签中的name表示元信息名，content表示元信息的值
有http-equiv属性的meta标签，表示执行一个命令，不需要name属性
除了content-type， 还有以下几种命令：
没有在HTML标准中定义，却是移动端开发的事实标准
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）