HTML新手小技巧：超链接自动换行+背景色设置，一步搞定
刚学HTML做网页时，超链接排版绝对是很多人的小困扰：明明写了好几个链接，打开网页却全都挤在同一行，密密麻麻乱糟糟；想给链接加个背景色区分，又不知道怎么让背景铺满整行，效果总是差强人意。
其实解决这些问题超简单，不用复杂代码，新手也能轻松学会，今天就把超链接换行排版和背景色美化的实用方法，一次性讲透。
一、超链接挤成一行？两种换行方法任选
超链接默认是行内元素，会顺着页面横向排列，想要实现每行一个链接，有两种超好用的方法，按需选择即可。
方法1：最简
`强制换行
适合纯新手，不用改CSS，只需要在每一个超链接标签末尾加上 <br> ，就能强制让链接跳到下一行，加完立刻生效，零出错率。
<!-- 基础换行示例 --><a href="#">空链接<br>
<a href="#" style="color: red;">内部链接</a><br>
<a href="#" style="color: orange;">外部链接<a href="#" style="color: green</a>
✅ 优点：上手即会，适合临时快速排版；❌ 缺点：链接多了代码稍冗余，适合少量链接使用。
方法2：规范通用法——CSS自动换行（推荐）
这是网页开发的标准写法，只需要在 里加一行CSS样式，给所有 标签设置 display: block ，把链接变成块级元素，块级元素会自动独占一行，完全不用手动<br> ，代码更整洁，后期维护也方便。
<html<head> <meta charset="UTF-8">超链接换行<style>/* 核心样式：让所有超链接自动换行 */a {display: block;margin: 5px 0; /* 给链接之间加间距，更美观 */text-decoration: none; /* 去掉默认下划线，可选 */}</head><!--<br>，自动每行一个 --><a href="#">空链接</a><a href="#">内部链接</a><a href="#">外部链接<a href</a>
</body>
</html>
✅ 优点：一劳永逸，排版规整，不管多少链接都能自动换行，还能让背景色铺满整行，是最推荐的方法。
二、超链接美化：给链接加背景色，区分更清晰
换行之后，给不同链接添加不同背景色，既能美化页面，又能快速区分链接类型，搭配上面的 display: block ，背景色会自动铺满整行，效果超好看。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>超链接背景色+自动换行</title><style>/* 全局超链接基础样式 */a {display: block; /* 块级元素，自动换行 */margin: 6px 0; /* 链接之间的上下间距 */padding: 12px; /* 背景内边距，避免文字贴边 */text-decoration: none; /* 去除下划线 */font-size: 17px; /* 统一文字大小 */}/* 自定义7种不同背景色样式类 */.link-red { background: #ff0000; color: #fff; } /* 红底白字 */.link-orange { background: #ff7f00; color: #fff; } /* 橙底白字 */.link-yellow { background: #ffff00; color: #000; } /* 黄底黑字 */.link-green { background: #00ff00; color: #000; } /* 绿底黑字 */.link-blue { background: #0000ff; color: #fff; } /* 蓝底白字 */.link-indigo { background: #4b0082; color: #fff; } /* 靛底白字 */.link-purple { background: #9400d3; color: #fff; } /* 紫底白字 */</style>
</head>
<body><!-- 调用对应class类，实现不同背景色+自动换行 --><a href="#" class="link-red">空链接</a><a href="#" class="link-orange">内部链接</a><a href="https://www.baidu.com" target="_blank" class="link-yellow">外部链接</a><a href="#bottom" class="link-green">锚记链接</a><a href="mailto:test@qq.com" class="link-blue">电子邮件链接</a><a href="test.pdf" download class="link-indigo">文件下载链接</a><a href="javascript:alert('交互触发！')" class="link-purple">JS交互链接</a>
</body>
</html>