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作为退路】