你真的了解HTML吗？

浏览数：29 / 时间：2015年06月09日

很多网站都对div设置{margin:0; padding:0;}对吗？Demo戳这里 - -

心里怀着这样的疑问，抱着试一试的态度，我们去看看常用的标签那些有默认的margin/padding？

FF 32.0：

==== Margin ==== 
h1,21.4333px,0px,21.4333px,0px
h2,19.9167px,0px,19.9167px,0px
h3,18.7167px,0px,18.7167px,0px
h4,21.2833px,0px,21.2833px,0px
h5,22.1833px,0px,22.1833px,0px
h6,24.9667px,0px,24.9667px,0px
p,16px,0px,16px,0px
ul,16px,0px,16px,0px
ol,16px,0px,16px,0px
dl,16px,0px,16px,0px
dd,0px,0px,0px,40px
hr,8px,0px,8px,0px
pre,16px,0px,16px,0px
figure,16px,40px,16px,40px
fieldset,0px,2px,0px,2px
blockquote,16px,40px,16px,40px
textarea,1px,0px,1px,0px
textarea,1px,0px,1px,0px
==== Padding ====
ul,0px,0px,0px,40px
ol,0px,0px,0px,40px
th,1px,1px,1px,1px
td,1px,1px,1px,1px
td,1px,1px,1px,1px
fieldset,5.6px,10px,12px,10px
legend,0px,2px,0px,2px
input,2px,2px,2px,2px
select,1px,1px,1px,1px
option,0px,5px,0px,3px
option,0px,5px,0px,3px
textarea,2px,2px,2px,2px
button,0px,6px,0px,6px
select,1px,1px,1px,1px
option,0px,0px,0px,20px
option,0px,0px,0px,20px
textarea,2px,2px,2px,2px

View Code

Chrome 36.0：

==== Margin ==== 
h1,21.440000534057617px,0px,21.440000534057617px,0px
h2,19.920000076293945px,0px,19.920000076293945px,0px
h3,18.719999313354492px,0px,18.719999313354492px,0px
h4,21.280000686645508px,0px,21.280000686645508px,0px
h5,22.17759895324707px,0px,22.17759895324707px,0px
h6,27.959999084472656px,0px,27.959999084472656px,0px
p,16px,0px,16px,0px
ul,16px,0px,16px,0px
ol,16px,0px,16px,0px
dl,16px,0px,16px,0px
dd,0px,0px,0px,40px
hr,8px,0px,8px,0px
pre,13px,0px,13px,0px
figure,16px,40px,16px,40px
fieldset,0px,2px,0px,2px
blockquote,16px,40px,16px,40px
input,2px,2px,2px,2px
keygen,2px,2px,2px,2px
textarea,2px,2px,2px,2px
button,2px,2px,2px,2px
select,2px,2px,2px,2px
textarea,2px,0px,2px,0px
==== Padding ====
ul,0px,0px,0px,40px
ol,0px,0px,0px,40px
th,1px,1px,1px,1px
td,1px,1px,1px,1px
td,1px,1px,1px,1px
fieldset,5.599999904632568px,12px,10px,12px
legend,0px,2px,0px,2px
input,1px,0px,1px,0px
textarea,2px,2px,2px,2px
button,1px,6px,1px,6px
textarea,2px,2px,2px,2px

View Code

IE 10：

==== Margin ==== 
h1,21.44px,0px,21.44px,0px
h2,19.92px,0px,19.92px,0px
h3,18.73px,0px,18.73px,0px
h4,21.28px,0px,21.28px,0px
h5,22.15px,0px,22.15px,0px
h6,25px,0px,25px,0px
p,16px,0px,16px,0px
ul,16px,0px,16px,0px
ol,16px,0px,16px,0px
dl,16px,0px,16px,0px
dd,0px,0px,0px,40px
hr,8px,0px,8px,0px
pre,13.33px,0px,13.33px,0px
figure,16px,40px,16px,40px
fieldset,0px,2px,0px,2px
blockquote,16px,40px,16px,40px
==== Padding ====
ul,0px,0px,0px,40px
ol,0px,0px,0px,40px
th,1px,1px,1px,1px
td,1px,1px,1px,1px
td,1px,1px,1px,1px
fieldset,2px,2px,3px,2px
legend,0px,2px,0px,2px
input,2px,1px,2px,1px
textarea,2px,2px,2px,2px
button,3px,10px,3px,10px
textarea,2px,2px,2px,2px

View Code

IE 9：

==== Margin ==== 
h1,21.44px,0px,21.44px,0px
h2,19.92px,0px,19.92px,0px
h3,18.73px,0px,18.73px,0px
h4,21.28px,0px,21.28px,0px
h5,22.15px,0px,22.15px,0px
h6,25px,0px,25px,0px
p,16px,0px,16px,0px
ul,16px,0px,16px,0px
ol,16px,0px,16px,0px
dl,16px,0px,16px,0px
dd,0px,0px,0px,40px
hr,8px,0px,8px,0px
pre,13.33px,0px,13.33px,0px
figure,16px,40px,16px,40px
fieldset,0px,2px,0px,2px
blockquote,16px,40px,16px,40px
==== Padding ====
ul,0px,0px,0px,40px
ol,0px,0px,0px,40px
th,1px,1px,1px,1px
td,1px,1px,1px,1px
td,1px,1px,1px,1px
fieldset,2px,2px,3px,2px
legend,0px,2px,0px,2px
input,2px,1px,2px,1px
textarea,2px,2px,2px,2px
button,3px,10px,3px,10px
textarea,2px,2px,2px,2px

View Code

IE 8：

==== Margin ==== h3,1em,0em,1em,0em h4,1.33em,0em,1.33em,0em h5,1.67em,0em,1.67em,0em h6,2.33em,0em,2.33em,0em p,1em,0px,1em,0px ul,1em,0px,1em,0px ol,1em,0px,1em,0px dl,1em,0px,1em,0px dd,auto,auto,auto,40px hr,0.5em,auto,0.5em,auto pre,1em,0px,1em,0px fieldset,0px,2px,0px,2px blockquote,1em,40px,1em,40px ==== Padding ==== ul,0px,0px,0px,30pt ol,0px,0px,0px,30pt th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,0px,2px,3px,2px legend,0px,2px,0px,2px input,2px,1px,2px,1px textarea,2px,2px,2px,2px button,3px,10px,3px,10px textarea,2px,2px,2px,2px

View Code

IE 7：

==== Margin ==== ul,auto,auto,auto,30pt ol,auto,auto,auto,30pt dd,auto,auto,auto,30pt blockquote,auto,30pt,auto,30pt ==== Padding ==== caption,1px,300zzz,500zzz,300zzz th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,0px,2px,3px,2px legend,0px,2px,0px,2px input,2px,1px,2px,1px textarea,2px,2px,2px,2px button,1px,0.5px,1px,0.5px textarea,2px,2px,2px,2px

View Code

IE 6：

==== Margin ==== ul,auto,auto,auto,30pt ol,auto,auto,auto,30pt dd,auto,auto,auto,30pt blockquote,auto,30pt,auto,30pt ==== Padding ==== caption,1px,3px,5px,3px th,1px,1px,1px,1px td,1px,1px,1px,1px td,1px,1px,1px,1px fieldset,0px,2px,3px,2px legend,0px,2px,0px,2px input,1px,1px,1px,1px textarea,2px,2px,2px,2px textarea,2px,2px,2px,2px

View Code

搜狗：

==== Margin ==== 
h1,21.440000534057617px,0px,21.440000534057617px,0px
h2,19.920000076293945px,0px,19.920000076293945px,0px
h3,18.719999313354492px,0px,18.719999313354492px,0px
h4,21.280000686645508px,0px,21.280000686645508px,0px
h5,22.17759895324707px,0px,22.17759895324707px,0px
h6,27.959999084472656px,0px,27.959999084472656px,0px
p,16px,0px,16px,0px
ul,16px,0px,16px,0px
ol,16px,0px,16px,0px
dl,16px,0px,16px,0px
dd,0px,0px,0px,40px
hr,8px,0px,8px,0px
pre,13px,0px,13px,0px
figure,16px,40px,16px,40px
fieldset,0px,2px,0px,2px
blockquote,16px,40px,16px,40px
input,2px,2px,2px,2px
keygen,2px,2px,2px,2px
textarea,2px,2px,2px,2px
button,2px,2px,2px,2px
select,2px,2px,2px,2px
textarea,2px,0px,2px,0px
==== Padding ====
ul,0px,0px,0px,40px
ol,0px,0px,0px,40px
th,1px,1px,1px,1px
td,1px,1px,1px,1px
td,1px,1px,1px,1px
fieldset,5.599999904632568px,12px,10px,12px
legend,0px,2px,0px,2px
input,1px,0px,1px,0px
textarea,2px,2px,2px,2px
button,1px,6px,1px,6px
textarea,2px,2px,2px,2px

View Code

360 安全：

==== Margin ==== 
h1,21.440000534057617px,0px,21.440000534057617px,0px
h2,19.920000076293945px,0px,19.920000076293945px,0px
h3,18.719999313354492px,0px,18.719999313354492px,0px
h4,21.280000686645508px,0px,21.280000686645508px,0px
h5,22.17759895324707px,0px,22.17759895324707px,0px
h6,27.959999084472656px,0px,27.959999084472656px,0px
p,16px,0px,16px,0px
ul,16px,0px,16px,0px
ol,16px,0px,16px,0px
dl,16px,0px,16px,0px
dd,0px,0px,0px,40px
hr,8px,0px,8px,0px
pre,13px,0px,13px,0px
figure,16px,40px,16px,40px
fieldset,0px,2px,0px,2px
blockquote,16px,40px,16px,40px
input,2px,2px,2px,2px
keygen,2px,2px,2px,2px
textarea,2px,2px,2px,2px
button,2px,2px,2px,2px
select,2px,2px,2px,2px
textarea,2px,0px,2px,0px
==== Padding ====
ul,0px,0px,0px,40px
ol,0px,0px,0px,40px
th,1px,1px,1px,1px
td,1px,1px,1px,1px
td,1px,1px,1px,1px
fieldset,5.599999904632568px,12px,10px,12px
legend,0px,2px,0px,2px
input,1px,0px,1px,0px
textarea,2px,2px,2px,2px
button,1px,6px,1px,6px
textarea,2px,2px,2px,2px

View Code

Opera 24.0：

==== Margin ==== 
h1,21.4400005340576px,0px,21.4400005340576px,0px
h2,19.9200000762939px,0px,19.9200000762939px,0px
h3,18.7199993133545px,0px,18.7199993133545px,0px
h4,21.2800006866455px,0px,21.2800006866455px,0px
h5,22.1775989532471px,0px,22.1775989532471px,0px
h6,27.9599990844727px,0px,27.9599990844727px,0px
p,16px,0px,16px,0px
ul,16px,0px,16px,0px
ol,16px,0px,16px,0px
dl,16px,0px,16px,0px
dd,0px,0px,0px,40px
hr,8px,0px,8px,0px
pre,13px,0px,13px,0px
figure,16px,40px,16px,40px
fieldset,0px,2px,0px,2px
blockquote,16px,40px,16px,40px
input,2px,2px,2px,2px
keygen,2px,2px,2px,2px
textarea,2px,2px,2px,2px
button,2px,2px,2px,2px
select,2px,2px,2px,2px
textarea,2px,0px,2px,0px
==== Padding ====
ul,0px,0px,0px,40px
ol,0px,0px,0px,40px
th,1px,1px,1px,1px
td,1px,1px,1px,1px
td,1px,1px,1px,1px
fieldset,5.59999990463257px,12px,10px,12px
legend,0px,2px,0px,2px
input,1px,0px,1px,0px
textarea,2px,2px,2px,2px
button,1px,6px,1px,6px
textarea,2px,2px,2px,2px

View Code

Safari 5.17：

==== Margin ==== 
h1,21px,0px,21px,0px
h2,19px,0px,19px,0px
h3,18px,0px,18px,0px
h4,21px,0px,21px,0px
h5,22px,0px,22px,0px
h6,24px,0px,24px,0px
p,16px,0px,16px,0px
ul,16px,0px,16px,0px
ol,16px,0px,16px,0px
dl,16px,0px,16px,0px
dd,0px,0px,0px,40px
hr,8px,0px,8px,0px
pre,13px,0px,13px,0px
figure,16px,40px,16px,40px
fieldset,0px,2px,0px,2px
blockquote,16px,40px,16px,40px
input,2px,2px,2px,2px
keygen,2px,2px,2px,2px
textarea,2px,2px,2px,2px
button,2px,2px,2px,2px
select,2px,2px,2px,2px
textarea,2px,0px,2px,0px
==== Padding ====
ul,0px,0px,0px,40px
ol,0px,0px,0px,40px
th,1px,1px,1px,1px
td,1px,1px,1px,1px
td,1px,1px,1px,1px
fieldset,5px,12px,10px,12px
legend,0px,2px,0px,2px
input,1px,0px,1px,0px
textarea,2px,2px,2px,2px
button,1px,6px,1px,6px
select,2px,21px,2px,4px
textarea,2px,2px,2px,2px

View Code

常用块元素及特点：

<!-- 块元素：独占一行，宽(100%)、高、行高、padding、margin可控 -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
<ul>
    <li>无序列表</li>
</ul>
<ol>
    <li>有序列表</li>
</ol>
<dl>
    <dt>自定义列表项目</dt>
    <dd>自定义列表描述</dd>
</dl>
<table>
    <caption>表格标题</caption>
    <!-- 设置表格中列 -->
    <col align="right" />
    <thead>
        <tr>
            <th>表格头栏目</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表格单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <!-- 设置表格中多列 -->
        <colgroup span="1" align="left"></colgroup>
        <tr>
            <td>表格单元格</td>
        </tr>
    </tfoot>
</table>
<div>div</div>
<nav></nav>
<header>header</header>
<footer>footer</footer>
<section>section</section>
<article>article</article>
<aside>aside</aside>
<hr />
<pre>预格式文本</pre>
<canvas></canvas>
<audio>
    <source src="no.ogg" type="audio/ogg">
</audio>
<video>
    <source src="no.ogg" type="video/ogg">
</video>
<datalist>
    <option value="a">a</option>
</datalist>
<figure>
  <figcaption>标题</figcaption>
</figure>
<form action="">
    <fieldset>
        <legend>表单标题：</legend>
    </fieldset>
</form>
<address>文档作者或拥有者的联系信息</address>
<blockquote>块引用</blockquote>

View Code

常用内联元素及特点：

<!-- 内联元素：不独占一行，宽、高、行高、竖向padding、竖向margin不可控 -->
<span>span</span>
<strong>强调文本</strong>
<em>强调文本</em>
<a href=""></a>
<label>label：</label>
<b>粗体文本</b>
<var>文本中的变量</var>
<bdo dir="rtl">定义文字方向ltr/rtl</bdo>
<code>代码</code>
<del>被删除文本</del>
<i>斜体文本</i>
<ins>被插入文本</ins>
<small>小号文本</small>
<sup>上标</sup>
<sub>下标</sub>
<time datatime="2008-08-08">日期/时间</time>
<br />
<wbr>在文本中何处换行</wbr>
<q>短引用</q>

View Code

常用内联块元素及特点：

<!-- 内联块元素：不独占一行，宽、高、行高、padding、margin可控 -->
<input type="text">
<keygen name="security" />
<textarea>多行文本</textarea>
<button>按钮</button>
<select>
    <optgroup>
        <option>选项1-1</option>
    </optgroup>
    <optgroup>
        <option>选项2-1</option>
    </optgroup>    
</select>
<iframe frameborder="0" src=""></iframe>
<img usemap="#map" src="" alt="" />
<map name="map" id="map">
    <area shape="rect" coords="0, 0, 20, 20" href="" alt="">
</map>
<embed src="no.swf">
<object>
    <param name="min" value="0" />
</object>
<!-- 预定义范围内的度量 -->
<meter value="3" min="0" max="10">3/10</meter>
<!-- progress 进度 -->
<progress value="30" max="100"></progress>

View Code

事件参考：

<!-- 常用属性：
类名：                    class
唯一标示：                id
行内样式：                style
额外提示信息：            title
是否可编辑：                contenteditable = true/false
是否可拖拽：                draggable = true/false
是否自动提示：            autocomplete = on/off
tab键次序：                tabindex = number
私有数据：                data-*
-->

<!-- window：
onafterprint              文档打印之后运行的脚本
onbeforeprint              文档打印之前运行的脚本
onbeforeunload              文档卸载之前运行的脚本
onerror                  在错误发生时运行的脚本
onhaschange              当文档已改变时运行的脚本
onload                      页面结束加载之后触发
onmessage                  在消息被触发时运行的脚本
onoffline                  当文档离线时运行的脚本
ononline                  当文档上线时运行的脚本
onpagehide                  当窗口隐藏时运行的脚本
onpageshow                  当窗口成为可见时运行的脚本
onpopstate                  当窗口历史记录改变时运行的脚本
onredo                      当文档执行撤销（redo）时运行的脚本
onresize                  当浏览器窗口被调整大小时触发
onstorage                  在 Web Storage 区域更新后运行的脚本
onundo                      在文档执行 undo 时运行的脚本
onunload                  一旦页面已下载时触发（或者浏览器窗口已被关闭）
-->

<!-- form：
onblur                      元素失去焦点时运行的脚本
onchange                  在元素值被改变时运行的脚本
oncontextmenu             当上下文菜单被触发时运行的脚本
onfocus                  当元素失去焦点时运行的脚本
onformchange             在表单改变时运行的脚本
onforminput             当表单获得用户输入时运行的脚本
oninput                  当元素获得用户输入时运行的脚本
oninvalid                  当元素无效时运行的脚本
onreset                  当表单中的重置按钮被点击时触发。HTML5 中不支持
onselect                  在元素中文本被选中后触发
onsubmit                  在提交表单时触发
-->

<!-- 键盘事件：
onkeydown                  在用户按下按键时触发
onkeypress                  在用户敲击按钮时触发
onkeyup                  当用户释放按键时触发
-->

<!-- 鼠标事件：
onclick                  元素上发生鼠标点击时触发
ondblclick                  元素上发生鼠标双击时触发
ondrag                      元素被拖动时运行的脚本
ondragend                  在拖动操作末端运行的脚本
ondragenter             当元素元素已被拖动到有效拖放区域时运行的脚本
ondragleave             当元素离开有效拖放目标时运行的脚本
ondragover                  当元素在有效拖放目标上正在被拖动时运行的脚本
ondragstart             在拖动操作开端运行的脚本
ondrop                      当被拖元素正在被拖放时运行的脚本
onmousedown             当元素上按下鼠标按钮时触发
onmousemove             当鼠标指针移动到元素上时触发
onmouseout                  当鼠标指针移出元素时触发
onmouseover             当鼠标指针移动到元素上时触发
onmouseup                  当在元素上释放鼠标按钮时触发
onmousewheel             当鼠标滚轮正在被滚动时运行的脚本
onscroll                  当元素滚动条被滚动时运行的脚本
-->

<!-- 媒体事件：
onabort                  在退出时运行的脚本
oncanplay                  当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）
oncanplaythrough          当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本
ondurationchange          当媒介长度改变时运行的脚本
onemptied                  当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）
onended                  当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）
onerror                  当在文件加载期间发生错误时运行的脚本
onloadeddata              当媒介数据已加载时运行的脚本
onloadedmetadata          当元数据（比如分辨率和时长）被加载时运行的脚本
onloadstart              在文件开始加载且未实际加载任何数据前运行的脚本
onpause                  当媒介被用户或程序暂停时运行的脚本
onplay                      当媒介已就绪可以开始播放时运行的脚本
onplaying                  当媒介已开始播放时运行的脚本
onprogress                  当浏览器正在获取媒介数据时运行的脚本
onratechange              每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）
onreadystatechange          每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）
onseeked                  当 seeking 属性设置为 false（指示定位已结束）时运行的脚本
onseeking                  当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本
onstalled                  在浏览器不论何种原因未能取回媒介数据时运行的脚本
onsuspend                  在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本
ontimeupdate              当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本
onvolumechange              每当音量改变时（包括将音量设置为静音）时运行的脚本
onwaiting                  当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本
-->