html元素的一些常用默认样式
发布时间：2023-05-06 13:49:29 所属栏目：教程 来源：
导读：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>html元素的部分常用默认样式</title> </head> <body> <div>div</div> <span>span</span> <p>p</p> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <b>b</b> <i>i</i> <strong>strong</strong> <em>em</em> <q>q</q> <cite>cite</cite> <acronym>acronym</acronym> <blockquote>blockquote</blockquote> <ins>ins</ins> <del>del</del> <sub>sub</sub> <sup>sup</sup> <big>big</big> <small>small</small> <address>address</address> <pre>pre</pre> <code>code</code> <var>var</var> <bdo>bdo</bdo> <dfn>dfn</dfn> <kbd>kbd</kbd> <samp>samp</samp> <a href="#">link</a> <img src="/uploadfiles/2009/09111605734.gif"> <ul> <li>li</li> <li>li</li> </ul> <ol> <li>li</li> <li>li</li> </ol> <dl> <dt>dt</dt> <dd>dd</dd> <dd>dd2</dd> </dl> <table> <caption>caption</caption> <colgroup></colgroup> <thead> <tr><th>th</th><th>th</th></tr> <tr><td>td</td><td>td</td></tr> </thead> <tbody> <tr><th>th</th><th>th</th></tr> <tr><td>td</td><td>td</td></tr> </tbody> <tfoot> <tr><th>th</th><th>th</th></tr> <tr><td>td</td><td>td</td></tr> </tfoot> </table> <form> <fieldset> <legend>legend</legend> <input type="text"> <input type="password"> <input type="button" value="input button"> <button>button</button> <select><option>option</option><optgroup label="group"><option>option</option></optgroup></select> <input type="checkbox" id="cb"> <label for="cb">label</label> <input type="radio"> <input type="file"> <textarea>textarea</textarea> </fieldset> </form> <script type="text/javascript"> var NORMAL_STYLE = [ 'display', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'border-left-width', 'border-right-width', 'border-top-width', 'border-bottom-width', 'border-left-style', 'border-right-style', 'border-top-style', 'border-bottom-style', 'overflow', 'font-weight', 'font-size', 'font-style', 'font-variant', 'text-decoration', 'line-height', 'border-collapse', 'vertical-align' ]; function toCamelCase(str) { return str.replace(/-D/g, function(match){ return match.charAt(1).toUpperCase(); }); } var tagMap = {}; function elementsStyles(el) { elementStyles(el); el = el.firstChild; while (el) { if (el.nodeType == 1) { elementsStyles(el); } el = el.nextSibling; } } var alterColor = false; function elementStyles(el) { var tagName = el.tagName; if (tagMap[tagName]) { return; } tagMap[tagName] = 1; html.push('<tr><td>' + el.tagName + "</td>"); alterColor = !alterColor; for (var i = 0, l = NORMAL_STYLE.length; i < l; i++) { var sty = NORMAL_STYLE[i]; html.push('<td style="width:100px;' +(alterColor ? 'background:#f5f5f5' : '') + '" title="' + tagName + '|' + sty + '">', elementStyle(el, sty), '</td>'); } html.push('</tr>'); } function elementStyle(el, sty) { var currentStyle = el.currentStyle || document.defaultView.getComputedStyle(el, null); return currentStyle[toCamelCase(sty)]; } var html = ['<table><col style="background:#eee"><tr style="background:#eee;"><td></td>']; for (var i = 0, l = NORMAL_STYLE.length; i < l; i++) { html.push('<td style="width:100px">' + NORMAL_STYLE[i] + '</td>'); } html.push('</tr>'); //elementStyles(document.documentElement); elementsStyles(document.body); html.push('</table>'); document.body.innerHTML += html.join(''); </script> </body> </html> （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
