CSS 默认值参考手册
css3基础 2022-05-23 12:13:35小码哥的IT人生shichen
CSS 默认值参考手册
HTML 元素的 CSS 默认值
下表显示了所有 HTML 元素的默认 CSS 浏览器值。
| 元素 | 默认的 CSS 值 | TIY |
|---|---|---|
| a:link |
|
试一试 |
| a:visited |
|
试一试 |
| a:link:active | color: (internal value); | 试一试 |
| a:visited:active | color: (internal value); | 试一试 |
| abbr | None. | |
| address |
|
试一试 |
| area | display: none; | |
| article | display: block; | |
| aside | display: block; | |
| audio | None. | |
| b | font-weight: bold; | 试一试 |
| base | None. | |
| bdi | None. | |
| bdo | unicode-bidi: bidi-override; | |
| blockquote |
|
试一试 |
| body |
|
试一试 |
| body:focus | outline: none; | 试一试 |
| br | None. | |
| button | None | |
| canvas | None. | |
| caption |
|
试一试 |
| cite | font-style: italic; | 试一试 |
| code | font-family: monospace; | 试一试 |
| col | display: table-column; | 试一试 |
| colgroup | display: table-column-group | 试一试 |
| datalist | display: none; | |
| dd |
|
试一试 |
| del | text-decoration: line-through; | 试一试 |
| details | display: block; | |
| dfn | font-style: italic; | 试一试 |
| dialog | None. | |
| div | display: block; | 试一试 |
| dl |
|
试一试 |
| dt | display: block; | 试一试 |
| em | font-style: italic; | 试一试 |
| embed:focus | outline: none; | |
| fieldset |
|
试一试 |
| figcaption | display: block; | |
| figure |
|
试一试 |
| footer | display: block; | |
| form |
|
试一试 |
| h1 |
|
试一试 |
| h2 |
|
试一试 |
| h3 |
|
试一试 |
| h4 |
|
试一试 |
| h5 |
|
试一试 |
| h6 |
|
试一试 |
| head | display: none; | |
| header | display: block; | |
| hr |
|
试一试 |
| html |
|
|
| i | font-style: italic; | 试一试 |
| iframe:focus | outline: none; | |
| iframe[seamless] | display: block; | |
| img | display: inline-block; | 试一试 |
| input | None. | |
| ins | text-decoration: underline; | 试一试 |
| kbd | font-family: monospace; | 试一试 |
| label | cursor: default; | 试一试 |
| legend |
|
试一试 |
| li | display: list-item; | |
| link | display: none; | |
| main | None. | |
| map | display: inline; | |
| mark |
|
试一试 |
| menu |
|
|
| menuitem | None. | |
| meta | None. | |
| meter | None. | |
| nav | display: block; | |
| noscript | None. | |
| object:focus | outline: none; | |
| ol |
|
试一试 |
| optgroup | None. | |
| option | None. | |
| output | display: inline; | |
| p |
|
试一试 |
| param | display: none; | |
| picture | None. | |
| pre |
|
试一试 |
| progress | None. | |
| q | display: inline; | 试一试 |
| q::before | content: open-quote; | 试一试 |
| q::after | content: close-quote; | 试一试 |
| rp | None. | |
| rt | line-height: normal; | |
| ruby | None. | |
| s | text-decoration: line-through; | 试一试 |
| samp | font-family: monospace; | |
| script | display: none; | |
| section | display: block; | 试一试 |
| select | None. | |
| small | font-size: smaller; | 试一试 |
| source | None. | |
| span | None. | |
| strike | text-decoration: line-through; | 试一试 |
| strong | font-weight: bold; | 试一试 |
| style | display: none; | |
| sub |
|
试一试 |
| summary | display: block; | |
| sup |
|
试一试 |
| table |
|
试一试 |
| tbody |
|
|
| td |
|
|
| template | None. | |
| textarea | None. | |
| tfoot |
|
|
| th |
|
|
| thead |
|
|
| time | None. | |
| title | display: none; | |
| tr |
|
|
| track | None. | |
| u | text-decoration: underline; | 试一试 |
| ul |
|
试一试 |
| var | font-style: italic; | 试一试 |
| video | None. | |
| wbr | None. |
完整实例1：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
a:link, a:visited {
color: /* browser's internal value */;
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: /* browser's internal value */;
}
</style>
</head>
<body>
<p>默认情况下，a 元素会这样显示：</p>
<a href="https://www.phpcodeweb.com">访问 phpcodeweb.com!</a>
<p>自定义的 a 元素（更改 text-decoration 和 color）：</p>
<a style="text-decoration:none;color:red;" href="https://www.phpcodeweb.com">访问 phpcodeweb.com!</a>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例2：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
a:link, a:visited {
color: /* browser's internal value */;
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: /* browser's internal value */;
}
</style>
</head>
<body>
<p>默认情况下，a 元素会这样显示：</p>
<a href="https://www.phpcodeweb.com">访问 phpcodeweb.com!</a>
<p>自定义的 a 元素（更改 text-decoration 和 color）：</p>
<a style="text-decoration:none;color:red;" href="https://www.phpcodeweb.com">访问 phpcodeweb.com!</a>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例3：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
a:link, a:visited {
color: /* browser's internal value */;
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: /* browser's internal value */;
}
</style>
</head>
<body>
<p>默认情况下，a 元素会这样显示：</p>
<a href="https://www.phpcodeweb.com">访问 phpcodeweb.com!</a>
<p>自定义的 a 元素（更改 text-decoration 和 color）：</p>
<a style="text-decoration:none;color:red;" href="https://www.phpcodeweb.com">访问 phpcodeweb.com!</a>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例4：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
a:link, a:visited {
color: /* browser's internal value */;
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: /* browser's internal value */;
}
</style>
</head>
<body>
<p>默认情况下，a 元素会这样显示：</p>
<a href="https://www.phpcodeweb.com">访问 phpcodeweb.com!</a>
<p>自定义的 a 元素（更改 text-decoration 和 color）：</p>
<a style="text-decoration:none;color:red;" href="https://www.phpcodeweb.com">访问 phpcodeweb.com!</a>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例5：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
address {
display: block;
font-style: italic;
}
</style>
</head>
<body>
<p>默认情况下，address 元素会这样显示：</p>
<address>
Written by <a href="mailto:webmaster@example.com">Bill Gates</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<p>自定义的 address 元素（更改 font-style）：</p>
<address style="font-style:normal;">
Written by <a href="mailto:webmaster@example.com">Bill Gates</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例6：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
b {
font-weight: bold;
}
</style>
</head>
<body>
<p>默认情况下，b 元素会这样显示：</p>
<p><b>This is bold text.</b></p>
<p>自定义的 b 元素（更改 font-weight）：</p>
<p><b style="font-weight:normal;">Some normal text.</b></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例7：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<p>默认情况下，blockquote 元素会这样显示：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<p>自定义的 blockquote 元素（更改 margin）：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html" style="margin:100px;">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例8：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
</style>
</head>
<body>
文档的内容 ......
<p>请更改默认的 CSS 设置来查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例9：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
</style>
</head>
<body>
文档的内容 ......
<p>请更改默认的 CSS 设置来查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例10：
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
/* 默认的 CSS 值 */
caption {
display: table-caption;
text-align: center;
}
</style>
</head>
<body>
<p>默认情况下，caption 元素会这样显示：</p>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
<p>自定义的 caption 元素（更改 text-align）：</p>
<table>
<caption style="text-align:left;">Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例11：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
cite {
font-style: italic;
}
</style>
</head>
<body>
<p>默认情况下，cite 元素会这样显示：</p>
<p><cite>The Scream</cite> by Edward Munch.</p>
<p>自定义的 cite 元素：</p>
<p><cite style="font-style:normal;">The Scream</cite> by Edward Munch. </p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例12：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
code {
font-family: monospace;
}
</style>
</head>
<body>
<p>默认情况下，code 元素会这样显示：</p>
<code>A piece of computer code</code>
<p>自定义的 code 元素（更改 font-family）：</p>
<code style="font-family:Impact;">A piece of computer code</code>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例13：
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
/* 默认的 CSS 值 */
col {
display: table-column;
}
</style>
</head>
<body>
<p>请看下面的 col 元素如何显示：</p>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
<p>请更改默认 CSS 设置，来查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例14：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
table, th, td {
border: 1px solid black;
}
colgroup {
display: table-column-group;
}
</style>
</head>
<body>
<p>请看下面的 colgroup 元素如何显示：</p>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
<p>请更改默认 CSS 设置，来查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例15：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
dd {
display: block;
margin-left: 40px;
}
</style>
</head>
<body>
<p>默认情况下，dd 元素会这样显示：</p>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<p>自定义的 dd 元素（更改 margin-left）：</p>
<dl>
<dt>Coffee</dt>
<dd style="margin-left:80px;">Black hot drink</dd>
<dt>Milk</dt>
<dd style="margin-left:80px;">White cold drink</dd>
</dl>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例16：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
del {
text-decoration: line-through;
}
</style>
</head>
<body>
<p>默认情况下，del 元素会这样显示：</p>
<p><del>Some deleted text.</del></p>
<p>自定义的 del 元素（更改 text-decoration）：</p>
<p><del style="text-decoration:underline;">Some deleted text.</del></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例17：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
dfn {
font-style: italic;
}
</style>
</head>
<body>
<p>默认情况下，dfn 元素会这样显示：</p>
<p>A dfn element is displayed like this:</p>
<dfn>Definition term</dfn>
<p>自定义的 dfn 元素（更改 font-style）：</p>
<dfn style="font-style:normal;">Definition term</dfn>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例18：
<!DOCTYPE html>
<html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
div {
display: block;
}
</style>
</head>
<body>
随机文本。
<div>默认情况下，div 元素就是这样显示的。</div>
随机文本。
<div style="display:inline;">这是自定义的 div 元素（更改 display）。</div>
随机文本。
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例19：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
</style>
</head>
<body>
<p>默认情况下，dl 元素会这样显示：</p>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<p>自定义的 dl 元素（更改 margin-left）：</p>
<dl style="margin-left:50px;">
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例20：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
dt {
display: block;
}
</style>
</head>
<body>
<p>默认情况下，dt 元素会这样显示：</p>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<p>自定义的 dt 元素（更改 display）：</p>
<dl>
<dt style="display:none;">Coffee</dt>
<dd>Black hot drink</dd>
<dt style="display:none;">Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例21：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
em {
font-style: italic;
}
</style>
</head>
<body>
<p>默认情况下，em 元素会这样显示：</p>
<em>Some emphasized text</em>
<p>自定义的 em 元素（更改 display）：</p>
<em style="font-style:normal;">Some normal text</em>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例22：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}
</style>
</head>
<body>
<p>默认情况下，fieldset 元素会这样显示：</p>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
<p>自定义的 fieldset 元素（更改 padding-left 和 border）：</p>
<fieldset style="padding-left:75px;border:5px solid green">
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例23：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<p>默认情况下，figure 元素会这样显示：</p>
<figure>
<img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
</figure>
<p>自定义的 figure 元素（更改 margin-left）：</p>
<figure style="margin-left:100px;">
<img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
</figure>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例24：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
form {
display: block;
margin-top: 0em;
}
</style>
</head>
<body>
<p>默认情况下，form 元素会这样显示：</p>
<form action="demo_form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
<p>自定义的 form 元素（更改 margin-top）：</p>
<form action="demo_form.php" style="margin-top:50px;">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例25：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p>默认情况下，h1 元素会这样显示：</p>
<h1>This is heading 1</h1>
<p>自定义的 h1 元素（更改 font-weight）：</p>
<h1 style="font-weight:normal;">This is heading 1</h1>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例26：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p>默认情况下，h2 元素会这样显示：</p>
<h2>This is heading 2</h2>
<p>自定义的 h2 元素（更改 font-weight）：</p>
<h2 style="font-weight:normal;">This is heading 2</h2>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例27：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p>默认情况下，h3 元素会这样显示：</p>
<h3>This is heading 3</h3>
<p>自定义的 h3 元素（更改 font-weight）：</p>
<h3 style="font-weight:normal;">This is heading 3</h3>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例28：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
h4 {
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p>默认情况下，h4 元素会这样显示：</p>
<h4>This is heading 4</h4>
<p>自定义的 h4 元素（更改 font-weight）：</p>
<h4 style="font-weight:normal;">This is heading 4</h4>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例29：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p>默认情况下，h5 元素会这样显示：</p>
<h5>This is heading 5</h5>
<p>自定义的 h5 元素（更改 font-weight）：</p>
<h5 style="font-weight:normal;">This is heading 5</h5>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例30：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<p>默认情况下，h6 元素会这样显示：</p>
<h6>This is heading 6</h6>
<p>自定义的 h6 元素（更改 font-weight）：</p>
<h6 style="font-weight:normal;">This is heading 6</h6>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例31：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
</style>
</head>
<body>
<p>默认情况下，hr 元素会这样显示：</p>
<hr>
<p>自定义的 hr 元素（更改 border-width）：</p>
<hr style="border-width:10px;">
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例32：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
i {
font-style: italic;
}
</style>
</head>
<body>
<p>默认情况下，i 元素会这样显示：</p>
<i>Some italic text</i>
<p>自定义的 i 元素（更改 display）：</p>
<i style="font-style:normal;">Some normal text</i>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例33：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
img {
display: inline-block;
}
</style>
</head>
<body>
<p>默认情况下，img 元素会这样显示：</p>
<p>Some text <img src="smiley.gif" alt="Smiley face" width="42" height="42"> some text.</p>
<p>自定义的 img 元素（更改 display）：</p>
<p>Some text <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="display:block;"> some text.</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例34：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
ins {
text-decoration: underline;
}
</style>
</head>
<body>
<p>默认情况下，ins 元素会这样显示：</p>
<p><ins>Some inserted text.</ins></p>
<p>自定义的 ins 元素（更改 text-decoration）：</p>
<p><ins style="text-decoration:line-through;">Some inserted text.</ins></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例35：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
kbd {
font-family: monospace;
}
</style>
</head>
<body>
<p>默认情况下，kbd 元素会这样显示：</p>
<p>A kbd element is displayed like this:</p>
<kbd>Keyboard input</kbd>
<p>自定义的 kbd 元素（更改 font-family）：</p>
<kbd style="font-family:Impact;">Keyboard input</kbd>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例36：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
label {
cursor: default;
}
</style>
</head>
<body>
<p>默认情况下，label 元素会这样显示：</p>
<label for="yes">Yes</label>
<input type="radio" name="question" id="yes" value="yes"><br>
<label for="no">No</label>
<input type="radio" name="question" id="no" value="no"><br>
<p>自定义的 label 元素（更改 cursor）：</p>
<label for="yes" style="cursor:wait;">Yes</label>
<input type="radio" name="question" id="yes" value="yes"><br>
<label for="no" style="cursor:wait;">No</label>
<input type="radio" name="question" id="no" value="no"><br>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例37：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
</head>
<body>
<p>默认情况下，legend 元素会这样显示：</p>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
<p>自定义的 legend 元素（更改 padding-left）：</p>
<fieldset style="padding-left:60px;">
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例38：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
mark {
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<p>默认情况下，mark 元素会这样显示：</p>
<mark>Highlighted text!!</mark>
<p>自定义的 mark 元素（更改 background-color）：</p>
<mark style="background-color:pink;">Highlighted text!!</mark>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例39：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>
</head>
<body>
<p>默认情况下，ol 元素会这样显示：</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>自定义的 ol 元素（更改 list-style-type）：</p>
<ol style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例40：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
</style>
</head>
<body>
<p>这是一个 p 元素（默认显示方式）。</p>
<p style="margin-left:50px;">这是一个自定义的p元素（更改 margin-left）。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例41：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
</style>
</head>
<body>
<p>默认情况下，pre 元素会这样显示：</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<p>自定义的 pre 元素（更改 white-space）：</p>
<pre style="white-space:nowrap;">
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例42：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
q.customized:before {
content: "- ";
}
</style>
</head>
<body>
<p>默认情况下，q 元素会这样显示：</p>
<q>Build a future where people live in harmony with nature.</q>
<p>自定义的 q 元素（更改 content）：</p>
<q class="customized">Build a future where people live in harmony with nature.</q>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例43：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
q.customized:before {
content: "- ";
}
</style>
</head>
<body>
<p>默认情况下，q 元素会这样显示：</p>
<q>Build a future where people live in harmony with nature.</q>
<p>自定义的 q 元素（更改 content）：</p>
<q class="customized">Build a future where people live in harmony with nature.</q>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例44：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
q.customized:before {
content: "- ";
}
</style>
</head>
<body>
<p>默认情况下，q 元素会这样显示：</p>
<q>Build a future where people live in harmony with nature.</q>
<p>自定义的 q 元素（更改 content）：</p>
<q class="customized">Build a future where people live in harmony with nature.</q>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例45：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
s {
text-decoration: line-through;
}
</style>
</head>
<body>
<p>默认情况下，s 元素会这样显示：</p>
<p><s>Some no-longer correct text.</s></p>
<p>自定义的 s 元素（更改 text-decoration）：</p>
<p><s style="text-decoration:underline;">Some no-longer correct text.</s></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例46：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
section {
display: block;
}
</style>
</head>
<body>
<p>默认情况下，section 元素会这样显示：</p>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<p>自定义的 section 元素（添加 background-color）：</p>
<section style="background-color:yellow;">
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例47：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
small {
font-size: smaller;
}
</style>
</head>
<body>
<p>默认情况下，small 元素会这样显示：</p>
<small>Some smaller text</small>
<p>自定义的 small 元素（更改 font-size）：</p>
<small style="font-size:8px;">Some smaller text</small>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例48：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
strike {
text-decoration: line-through;
}
</style>
</head>
<body>
<p>默认情况下，strike 元素会这样显示：</p>
<p><strike>Some no-longer correct text.</strike></p>
<p>自定义的 strike 元素（更改 text-decoration）：</p>
<p><strike style="text-decoration:underline;">Some no-longer correct text.</strike></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例49：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
strong {
font-weight: bold;
}
</style>
</head>
<body>
<p>默认情况下，strong 元素会这样显示：</p>
<strong>Some important text.</strong>
<p>自定义的 strong 元素（更改 font-weight）：</p>
<strong style="font-weight:normal;">Some important text.</strong>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例50：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
sub {
vertical-align: sub;
font-size: smaller;
}
</style>
</head>
<body>
<p>默认情况下，sub 元素会这样显示：</p>
<p>This text contains <sub>subscript text</sub></p>
<p>自定义的 sub 元素（更改 font-size）：</p>
<p>This text contains <sub style="font-size:25px;">subscript text</sub></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例51：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
sup {
vertical-align: super;
font-size: smaller;
}
</style>
</head>
<body>
<p>默认情况下，sup 元素会这样显示：</p>
<p>This text contains <sup>superscript text</sup></p>
<p>自定义的 sup 元素（更改 font-size）：</p>
<p>This text contains <sup style="font-size:25px;">superscript text</sup></p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例52：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
</style>
</head>
<body>
<p>默认情况下，table 元素会这样显示：</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<p>自定义的 table 元素：</p>
<table style="border:1px solid red">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例53：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
u {
text-decoration: underline;
}
</style>
</head>
<body>
<p>默认情况下，u 元素会这样显示：</p>
<u>Some underlined text</u>
<p>请更改默认 CSS 设置，来查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例54：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>
</head>
<body>
<p>默认情况下，ul 元素会这样显示：</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>请更改默认 CSS 设置，来查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例55：
<!DOCTYPE html>
<html>
<head>
<style>
/* 默认的 CSS 值 */
var {
font-style: italic;
}
</style>
</head>
<body>
<p>默认情况下，var 元素会这样显示：</p>
<var>Variable</var>
<p>请更改默认 CSS 设置，来查看效果。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
