html 盒模型与新html5元素
盒模型
把元素放在显微镜下，观察其组成。
下图为一个<p>元素的组成，呈现为一个“盒子”。
从css的角度看，每个元素就是一个盒子。所有元素都被当做盒子：段落、标题、块引用、列表、列表项等。甚至内联元素（如<em>和链接）在CSS看来也是盒子。
每个盒子由一个内容区以及可选的内边框、边框和外边框组成。
内容区（content area）包含内容（例如文本或图像）。
内容区被可选的透明内边距（padding）包围。
内边距周围可能放置一个可选的边框（border）。
最后，有一个可选的透明外边距（margin）包围所有部分。
盒模型相关样式设置汇总
关于内边距：
padding：（上内边距）5px （右内边距）5px （下内边距）5px （左内边距）5px；
padding：（上下内边距）5px （左右内边距）5px；
padding-top：（上边距）5px；
padding-bottom：（下边距）5px；
padding-left：（左边距）5px；
padding-right：（右边距）5px；
关于边框：
border-color：（边框线颜色）black；
border-width：（边框线宽度）1px；【thin ；medium；thick】
border-style：（边框线分风格）solid；
【solid（实线）；dotted（虚线）；dashed（破折线）；double（双线）；groove（槽线）；outset（外凸）；inset（内凹）；ridge（脊线）】
关于外边距：
margin：（上外边距）5px （右外边距）5px （下外边距）5px （左外边距）5px；
margin：（上下外边距）5px （左右外边距）5px；
margin-top：（上外边距）5px；
margin-bottom：（下外边距）5px；
margin-left：（左外边距）5px；
margin-right：（右外边距）5px；
HTML5
要使用HTML5，在HTML文件最前方添加<!doctype html>即可
比较重要的新HTML5元素包括：
<article>：表示页面一个独立的组成部分，如一个博客帖子、用户论坛帖子或新闻报道。
<nav>：所包含的内容将作为页面的导航链接。
<header>：放在页面顶部的内容，或者放在页面某个区块的顶部。
<footer>：放在页面底部的内容，或者放在页面某个区块的底部。
<time>：可能包含一个日期或时间，也可能同时包含日期和时间。
如：<time datetime="2012-02-18">2/18/2012</time>
<aside>：包含的内容是对页面内容的补充，如插图或边栏。
<section>：一个主题性内容分组，通常包含一个首部（header），可能还有一个底部（footer）。
<video>：用来为页面添加视频媒体
如：<video controls autoplay width="512" height="288" src="video/tweetsip.mp4" poster="images/poster.png" id="video"> </video>
【video属性：controls（为视频显示增加内置的控件）；autoplay（立即开始播放）；poster（播放前显示的图片）；loop（视频结束播放后自动重新开始播放视频）；src（视频源文件）；preload（none：播放视频前不下载；metadata：下载视频元数据，但不下载视频内容；auto：浏览器自动）；width，height（视频显示区的宽度和高度）】
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogv">
<object>...</object>
【考虑多种浏览器对视频格式的要求，并以flash作为退路】
5808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
