搜索
首页web前端html教程你真的了解HTML吗?_html/css_WEB-ITnose

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

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

FF 32.0:

==== Margin ==== h1,21.4333px,0px,21.4333px,0pxh2,19.9167px,0px,19.9167px,0pxh3,18.7167px,0px,18.7167px,0pxh4,21.2833px,0px,21.2833px,0pxh5,22.1833px,0px,22.1833px,0pxh6,24.9667px,0px,24.9667px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,16px,0px,16px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxtextarea,1px,0px,1px,0pxtextarea,1px,0px,1px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.6px,10px,12px,10pxlegend,0px,2px,0px,2pxinput,2px,2px,2px,2pxselect,1px,1px,1px,1pxoption,0px,5px,0px,3pxoption,0px,5px,0px,3pxtextarea,2px,2px,2px,2pxbutton,0px,6px,0px,6pxselect,1px,1px,1px,1pxoption,0px,0px,0px,20pxoption,0px,0px,0px,20pxtextarea,2px,2px,2px,2px

Chrome 36.0:

==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0pxh2,19.920000076293945px,0px,19.920000076293945px,0pxh3,18.719999313354492px,0px,18.719999313354492px,0pxh4,21.280000686645508px,0px,21.280000686645508px,0pxh5,22.17759895324707px,0px,22.17759895324707px,0pxh6,27.959999084472656px,0px,27.959999084472656px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.599999904632568px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxtextarea,2px,2px,2px,2px

IE 10:

==== Margin ==== h1,21.44px,0px,21.44px,0pxh2,19.92px,0px,19.92px,0pxh3,18.73px,0px,18.73px,0pxh4,21.28px,0px,21.28px,0pxh5,22.15px,0px,22.15px,0pxh6,25px,0px,25px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13.33px,0px,13.33px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,2px,2px,3px,2pxlegend,0px,2px,0px,2pxinput,2px,1px,2px,1pxtextarea,2px,2px,2px,2pxbutton,3px,10px,3px,10pxtextarea,2px,2px,2px,2px

IE 9:

==== Margin ==== h1,21.44px,0px,21.44px,0pxh2,19.92px,0px,19.92px,0pxh3,18.73px,0px,18.73px,0pxh4,21.28px,0px,21.28px,0pxh5,22.15px,0px,22.15px,0pxh6,25px,0px,25px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13.33px,0px,13.33px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,2px,2px,3px,2pxlegend,0px,2px,0px,2pxinput,2px,1px,2px,1pxtextarea,2px,2px,2px,2pxbutton,3px,10px,3px,10pxtextarea,2px,2px,2px,2px

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

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

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

搜狗:

==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0pxh2,19.920000076293945px,0px,19.920000076293945px,0pxh3,18.719999313354492px,0px,18.719999313354492px,0pxh4,21.280000686645508px,0px,21.280000686645508px,0pxh5,22.17759895324707px,0px,22.17759895324707px,0pxh6,27.959999084472656px,0px,27.959999084472656px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.599999904632568px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxtextarea,2px,2px,2px,2px

360 安全:

==== Margin ==== h1,21.440000534057617px,0px,21.440000534057617px,0pxh2,19.920000076293945px,0px,19.920000076293945px,0pxh3,18.719999313354492px,0px,18.719999313354492px,0pxh4,21.280000686645508px,0px,21.280000686645508px,0pxh5,22.17759895324707px,0px,22.17759895324707px,0pxh6,27.959999084472656px,0px,27.959999084472656px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.599999904632568px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxtextarea,2px,2px,2px,2px

Opera 24.0:

==== Margin ==== h1,21.4400005340576px,0px,21.4400005340576px,0pxh2,19.9200000762939px,0px,19.9200000762939px,0pxh3,18.7199993133545px,0px,18.7199993133545px,0pxh4,21.2800006866455px,0px,21.2800006866455px,0pxh5,22.1775989532471px,0px,22.1775989532471px,0pxh6,27.9599990844727px,0px,27.9599990844727px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5.59999990463257px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxtextarea,2px,2px,2px,2px

Safari 5.17:

==== Margin ==== h1,21px,0px,21px,0pxh2,19px,0px,19px,0pxh3,18px,0px,18px,0pxh4,21px,0px,21px,0pxh5,22px,0px,22px,0pxh6,24px,0px,24px,0pxp,16px,0px,16px,0pxul,16px,0px,16px,0pxol,16px,0px,16px,0pxdl,16px,0px,16px,0pxdd,0px,0px,0px,40pxhr,8px,0px,8px,0pxpre,13px,0px,13px,0pxfigure,16px,40px,16px,40pxfieldset,0px,2px,0px,2pxblockquote,16px,40px,16px,40pxinput,2px,2px,2px,2pxkeygen,2px,2px,2px,2pxtextarea,2px,2px,2px,2pxbutton,2px,2px,2px,2pxselect,2px,2px,2px,2pxtextarea,2px,0px,2px,0px==== Padding ====ul,0px,0px,0px,40pxol,0px,0px,0px,40pxth,1px,1px,1px,1pxtd,1px,1px,1px,1pxtd,1px,1px,1px,1pxfieldset,5px,12px,10px,12pxlegend,0px,2px,0px,2pxinput,1px,0px,1px,0pxtextarea,2px,2px,2px,2pxbutton,1px,6px,1px,6pxselect,2px,21px,2px,4pxtextarea,2px,2px,2px,2px

常用块元素及特点:

<!-- 块元素:独占一行,宽(100%)、高、行高、padding、margin可控 --><h1 id="h">h1</h1><h2 id="h">h2</h2><h3 id="h">h3</h3><h4 id="h">h4</h4><h5 id="h">h5</h5><h6 id="h">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 class="brush:php;toolbar:false">预格式文本
标题

表单标题:
文档作者或拥有者的联系信息
块引用

常用内联元素及特点:

<!-- 内联元素:不独占一行,宽、高、行高、竖向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>

常用内联块元素及特点:

<!-- 内联块元素:不独占一行,宽、高、行高、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 src="/static/imghwm/default1.png"  data-src="no.swf"  class="lazy"  usemap="#map" alt="" /><map name="map" id="map">    <area shape="rect" coords="0, 0, 20, 20" href="" alt=""></map><embed><object>    <param name="min" value="0" /></object><!-- 预定义范围内的度量 --><meter value="3" min="0" max="10">3/10</meter><!-- progress 进度 --><progress value="30" max="100"></progress> 

事件参考:

<!-- 常用属性:类名:                    class唯一标示:                id行内样式:                style额外提示信息:            title是否可编辑:                contenteditable = true/false是否可拖拽:                draggable = true/false是否自动提示:            autocomplete = on/offtab键次序:                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                  当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本-->

 

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具