常见标签我已经在上一篇文章中提及，我们做前端设计时，主要也是用这些标签(最常用的)。
然而有一个问题，就是有的标签都有自己的默认样式。试通过如下代码来说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#">a标签（链接、下载、锚点）</a>
<img src="1.png" alt="" />
<a href="#"><img src="1.png" alt="" /></a>
<span>区分样式</span>
<strong>强调(粗体)</strong>
<em>强调(斜体)</em>
<p>段落</p>
<div>块</div>
<h1>标题1</h1>
<h6>标题6</h6>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<dl>
<dt>定义列表标题</dt>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
</dl>
</body>
</html>
我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式：
<body></body>
发现<body>标签的margin为8px。
KB_P[BXY9BKG8.png)
<p>段落</p>
发现<p>标签的上下外边距为16px。相反，<div>块</div>没有margin或padding。
<h1>标题1</h1>
发现<h1>标签的上下外边距为21.440px。
<h6>标题6</h6>
发现<h6>标签的上下外边距为27.960px。
<ol></ol>
发现<ol>标签的上下外边距为16px，左内边距为40px。
<ul></ul>
同上，发现<ul>标签的上下外边距也为16px，左内边距也为40px。
<dl></dl>
发现<dl>标签的上下外边距为16px。
<dd>定义列表项</dd>
发现<dd>标签的左外边距为40px。
至此所有有默认样式的标签，我们已分析完了。注意一点：上下外边距会叠压。
那么为了兼容性，凡是浏览默认的样式，都不要使用，所以重置默认样式，引出——默认样式重置(css reset)。css reset后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*默认样式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
margin: 0;
font-size: 12px; /* 中文字体大小的最小值 */
/* font-family: xx; 也可以设置字体 */
}
ol,ul {
list-style: none; /* 去除列表样式 */
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
img {
border: none; /* 在IE6中<a>标签包裹的<img>标签显示时有边框，故清除 */
}
/*
*代表所有页面中的标签，也可以如下重置默认样式，但一般不这样做，
依然一个一个标签重置
* {
margin: 0;
padding: 0;
}
*/
</style>
</head>
<body>
<a href="#">a标签（链接、下载、锚点）</a>
<img src="1.png" alt="" />
<a href="#"><img src="1.png" alt="" /></a>
<span>区分样式</span>
<strong>强调(粗体)</strong>
<em>强调(斜体)</em>
<p>段落</p>
<div>块</div>
<h1>标题1</h1>
<h6>标题6</h6>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<dl>
<dt>定义列表标题</dt>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
</dl>
</body>
</html>
时间： 2024-07-30 01:47:11