HTML按钮不显示问题求助：新手开发测试页面按钮未渲染如何解决

你不需要额外导入JavaScript依赖，原生HTML的<button>标签以及行内onclick事件都是浏览器原生支持的，按钮不显示完全是你的HTML结构写错导致的。

具体错误点 #

• <select>标签未闭合：你写完所有<option>选项后没有添加闭合标签</select>，浏览器会误将后续的<button>识别为<select>的内部内容，不会正常渲染。
• 元素位置不符合语义规范：<h1>是页面内容级标题，不能放在<head>标签中，<head>仅用于存放页面元数据（如页面标题、编码声明等），需要把<h1>移到<body>内部。
• 换行标签<br>放置位置错误：<br>不能放在<head>与<body>之间，也不能放在<select>标签内部，这些位置的<br>会干扰浏览器对页面结构的解析。

修正后的完整代码 #

<!doctype html>
<html> 
<head>
<!-- head里可以放页面标题等元信息 -->
<title>菠萝披萨调查</title>
<meta charset="utf-8">
</head>
<body> 
<h1>Do you like pineapple on pizza?</h1>
<label for="pizza-select">Tell the truth. C'mon...</label>
<select id="pizza-select">
<option value= "">Pick one goddamn it.</option>
<option value= "yes">Yes, I feel special for having an unpopular opinion</option>
<option value= "no">No, I am close minded and hate having fun</option>
</select>
<br>
<button onclick="alert('eh idc')">Done</button>
</body> 
</html>

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