HTML 标签默认样式对比表参考文献-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，HTML 是最基础的技术之一，HTML 标签的默认样式也对页面展示有很大的影响。本文将对 HTML 标签的默认样式进行对比，并结合实例代码来进行详细讲解，帮助读者更好地掌握 HTML 标签的默认样式特点，从而在前端开发中能够更好地应用。

HTML 中常见标签默认样式对比

以下是 HTML 中常见标签的默认样式对比表：

标签	默认字体	默认文字颜色	默认背景色
`<h1>` ~ `<h6>`	2em ~ 1.2em	由浅到深的灰色	无
`<p>`	1em	由浅到深的灰色	无
`<a>`	1em	蓝色/紫色	无
`<img>`	无	无	无
`<ul>`	1em	由浅到深的灰色	无
`<li>`	1em	由浅到深的灰色	无
`<div>`	无	无	无
`<span>`	无	无	无

值得注意的是，默认的样式是由浅到深的灰色，这种颜色会随着标题的级数而变深。具体来说，<h1>的颜色最浅，而<h6>的颜色最深。

HTML 的样式默认至少有 2 个级别：用户代理级别和作者级别。在按照 HTML 标准的情况下，可以使用 CSS 来覆盖这些默认样式从而实现我们所需的样式效果。

内联样式是直接将样式写在 HTML 元素的 style 属性中的方法。以下是一个使用内联样式的例子：

<h1 style="color:red;font-size:2em;">Hello World!</h1>

样式表可以在 HTML 文档中使用多种方法来引用，但它们通常使用 CSS 文件或内容标记。以下是一个使用样式表的例子：

HTML 文件头部引入样式表：

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

mystyle.css 文件内容：

h1 {
  color: red;
  font-size: 2em;
}

在实际开发中，只有知道 HTML 标签的默认样式，才能在需要时更好地进行覆盖和修改。如下例：

<ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
</ul>

若想将这个无序列表的每个链接都以横线划分，只需为 <a> 元素添加 text-decoration 样式：

ul li a {
  text-decoration: underline;
}

这样每个链接就会显示为带有下划线的文本链接了。

在本文中，我们对 HTML 标签的默认样式进行了详细的介绍，并结合实例代码进行了演示。希望本文能够为读者更好地理解和应用 HTML 标签的默认样式提供帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6595377ceb4cecbf2d96c1c9