html标签无默认样式,由浏览器user agent stylesheet定义;html5已废弃font、align等样式属性,必须用css控制,推荐外部css文件统一重置和设置p、h1、ul等样式。

HTML 标签本身没有“默认样式”这个概念——浏览器自带的 user agent stylesheet 才是真正决定 <p></p>、<h1></h1>、<ul></ul> 等标签长什么样的东西。直接靠 HTML 标签写样式不可控、不一致,必须用 CSS。
为什么不能只靠 HTML 标签控制样式
早期 HTML 确实支持 <font></font>、align、bgcolor 这类属性,但它们在 HTML5 中已被废弃。现代浏览器仍可能渲染,但:
-
<font></font>不再被任何规范支持,VS Code 会标黄警告,Lighthouse 审计直接报错 -
align="center"对<div> 或 <code><p></p>生效,但对<section></section>或自定义元素无效 - 所有这类属性无法响应式、无法继承、无法组合、无法用媒体查询控制
- 一旦项目变大,靠改几十个
bgcolor属性维护样式,等于手动重写 CSS - 新建
style.css,放在和 HTML 同目录下 - 在 HTML 的
里加:<link rel="stylesheet" href="style.css"> - 在
style.css中写基础重置 + 标签样式,例如:
给基础标签加样式的正确路径
必须用 CSS,且优先级建议:外部 CSS 文件 > <style></style> 内联样式块 > 行内 style 属性。不要倒着来。
/* 重置常见默认边距 */
body, h1, h2, h3, p, ul, ol, li {
margin: 0;
padding: 0;
}
/* 统一段落行高和间距 */
p {
line-height: 1.6;
margin-bottom: 1rem;
}
/* 标题字体粗细和上下空隙 */
h1 {
font-weight: 700;
margin: 1.5rem 0 0.75rem;
}
/* 列表不带默认圆点,左缩进归零 */
ul, ol {
list-style: none;
padding-left: 0;
}
这样改的是所有 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、所有 <h1></h1>,不是某个具体元素,可复用、可覆盖、可调试。
哪些 HTML 标签有强语义但弱视觉表现
这些标签几乎“看不见”,但对结构、SEO、可访问性至关重要,必须靠 CSS 显式赋予样式:
-
<article></article>、<section></section>、<aside></aside>:默认无边距、无背景、无字体变化 -
<em></em>和<strong></strong>:虽然浏览器默认斜体/加粗,但只是 UA 样式,不是语义强制;若设计要求<strong></strong>变红色而非加粗,就必须写strong { color: #d32f2f; font-weight: normal; } -
<time></time>、<address></address>、<cite></cite>:完全无默认样式,不写 CSS 就和普通文本一样
别指望靠加个 <strong></strong> 就让文字“突出”,它只是告诉浏览器“这段内容重要”,怎么突出,得你定。
容易忽略的兼容性细节
不同浏览器对 UA 样式的实现仍有微小差异,比如:
-
<hr>在 Chrome 默认是border-top: 1px solid rgba(0,0,0,.1),Firefox 是border: none; border-bottom: 1px solid gray; -
<button></button>的默认padding和font-size在 Safari 和 Edge 中略有出入 -
<input type="number">的上下箭头在 Firefox 不显示,在 Chrome 可通过::-webkit-inner-spin-button控制
所以哪怕只改一个 <p></p> 的 margin-bottom,也建议从全局重置开始,而不是等页面崩了再逐个 debug。










