我们基于HTML4和CSS2.1形成了对网页展示的一套理解。现在HTML5和CSS3也都出来了，网上一些针对各自特性的说明文章不少，但很少有联系起来讲的。即面对这些新特性，原来HTML4和css2.1之间的协作方式或者说化学反应的规律有没有变？两者有没有因为各自的强化而对语义–表现的分工有所僭越？我觉得这是一个比较重要却又被忽视的讨论。譬如内联元素，块级元素的概念是否被颠覆？这篇小文就来关注这个问题，也希望其他类似的着眼于前端体系的变化而非特性变化的讨论能多一些。
###什么是内联什么是块级
根据w3c标准，块级元素就是能直接出现在BODY元素下的元素，而其他的是内联。（这就算是定义了？）
（幸好还给出了可操作层面的）其他三个：
1.内容模型：块级可以包含块级和内联，内联只能包含内联。
2.样式方面：（通常）块级换行，内联不换行。
3.Directionality（不懂，不译）
这其中只有第二个有方法论层面的意义，所以我们不妨写几个元素，看看是否换行。类似这样的：
<dialog style='margin-top:20px;background-color:navy;'>
<dt>老师</dt>
<dd><p>你作业做了吗</p></dd>
<dt>学生</dt>
<dd><p>做完了</p></dd>
</dialog>
<time style='line-height:10px'>9:00</time> <header>header</header>
<section>section</section>
<video src="洋葱.mp3" controls='true' class='box' style='line-height:200px;'></video>
<video src="洋葱.mp3" controls='true' class='box' style='line-height:200px;'></video>
<nav>nav</nav>
<article>article</article>
<span>span2</span>
<footer>footer</footer>
<figure class="block box">
我本身是不是块级蒜素figure</figure>
<span>asdfasf</span>
<meter class="box" value="9" min="0" max="100" low="65" high="96" optimum="100">88</meter>
<span>yes</span>
<aside class='block'>goodee aside Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate velit aliquid blanditiis laboriosam nam, nisi, vel aut suscipit, accusamus culpa iusto tempore praesentium et sapiente aspernatur quod ullam, reiciendis laborum!
</aside>
<span class="block box">i;m span</span>
<progress class='box' value="44" max="100">现在已经进行了多少了</progress>
<span class="block box">i;m span</span>
###按老概念分类HTML5新元素
通过观察上面的HTML的表现，我给出利用“是否换行”这一准则判断出的新HTML5元素的分类吧：
块级：
- header
- hgroup
- section
- nav
- footer
- article
- aside
- figure
- figcaption
内联：
- time
- meter
- progress
- video
- audio
- wbr
- bdi
- mark
- canvas
- track
- output
弄不明白：dialog keygen datalist;后面两个应该是内联。
###结语
这么分类之后一看，基本上结构化的元素还是块级，一些直接描述末梢文本语义的还是内联。元素的显示效果（是否换行）和语义（表示文件结构还是表示文本含义）的对应关系还是和HTML4保持一致的。所以，HTML5没有那么神秘，熟悉4的老人完全不必怵之。