使用link标签引入CSS遇Trailing solidus错误及HTML元素不显示求助

1. 解决“Trailing solidus not allowed on element link”错误 #

这个错误是因为你在HTML5中给link标签加了自闭合斜杠（/>），而HTML5规范里，link这类**空元素（void element）**不需要添加结尾斜杠，添加后会触发语法校验警告。

修正方法： #

把原来的link标签：

<link rel="stylesheet" href="你的样式文件.css" />

改成：

<link rel="stylesheet" href="你的样式文件.css">

2. 解决body手动添加段落不显示的问题 #

手动添加的段落仅JS创建元素可见，大概率是以下几种情况之一，逐一排查：

情况1：CSS样式导致段落被隐藏或不可见 #

• 检查你的外部CSS文件，看是否有针对p标签的样式：
  • 比如设置了p { display: none; }直接隐藏段落；
  • 或者p { color: #ffffff; }而页面背景也是白色，导致文字和背景融合；
  • 或者p { position: absolute; z-index: -1; }被其他元素覆盖。
• 临时注释掉link标签（移除CSS引入），如果段落能显示，就说明是CSS的问题，针对性修改样式即可。

情况2：JS代码覆盖了body原有内容 #

如果你的JS代码里使用了document.body.innerHTML = '内容'，这个方法会直接替换body内的所有原有内容（包括你手动写的段落），只保留JS生成的元素。

修正方法： #

把替换内容的代码改成追加内容：

// 错误写法：会覆盖原有内容
// document.body.innerHTML = '<div>JS创建的元素</div>';

// 正确写法：追加元素
const newDiv = document.createElement('div');
newDiv.textContent = 'JS创建的元素';
document.body.appendChild(newDiv);

// 或者用insertAdjacentHTML追加HTML字符串
document.body.insertAdjacentHTML('beforeend', '<div>JS创建的元素</div>');

情况3：HTML结构错误 #

• 确保你的段落标签<p>没有写错（比如写成<p/>或者嵌套在<script>、<style>等无效容器内）；
• 检查段落是否被放在了某个设置了display: none的父容器里。

内容的提问来源于stack exchange，提问作者cat