HTML页面第二个select元素浏览器不显示问题求助

你的代码存在几个核心错误，直接导致select元素之后的内容无法正常渲染：

• <select> 不属于HTML规范定义的空元素（自闭合元素），你使用的<select ... />自闭合写法会被浏览器判定为标签未闭合，后续所有DOM节点都会被解析为select标签的内部内容，而select标签只识别内部的option元素，其他内容全部不会正常显示，这就是第一个select之后所有内容消失的直接原因。
• 标签用法错误：list属性是给普通<input>标签绑定<datalist>候选列表用的，<select>本身就需要直接内嵌<option>子元素，不需要搭配datalist使用，现有写法不符合select的使用规范。
• HTML基础结构缺失：<head>标签结束后没有编写<body>标签，直接放置页面内容，不符合HTML解析规则，会加剧渲染异常。
• 额外细节错误：Group分组下的Laura选项多写了一个多余的>符号，会导致选项文本显示异常。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
</head>
<body>
    <p align="center" style="color:red">
        Open Store
    </p>

    <div class="OpenStore">
        <form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">

            <div class="row">
                <div class="form-group form-group-sm col-sm-6 col-md-13">
                    <div class="row col-md-13">
                        <label class="col-form-label col-md-6">Store # :</label>
                        <div class="col-sm-3">
                            <input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group form-group-sm col-sm-6 col-md-13">
                    <div class="row">
                        <label class="col-form-label col-md-6">Store Name :</label>
                        <div class="col-sm-3">
                            <input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group form-group-sm col-sm-6 col-md-13">
                    <div class="row">
                        <label class="col-form-label col-md-6">Language :</label>
                        <div class="col-sm-3">
                            <select asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px">
                                <option data-value="English">English</option>
                                <option data-value="Fr">French</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="form-group form-group-sm col-sm-6 col-md-13">
                    <div class="row">
                        <label class="col-form-label col-md-6">Group :</label>
                        <div class="col-sm-3">
                            <select asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px">
                                <option data-value="2">Laura</option>
                                <option data-value="3">Melanie Lyne</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</body>
</html>

• 所有<select>标签改为成对闭合写法，把原datalist内的option直接移到select标签内部，删除多余的datalist节点和select上无效的list属性
• 补全缺失的<body>标签，将所有页面展示内容放到body内部
• 删除Laura选项前多余的>符号

内容的提问来源于stack exchange，提问作者Félix Montreuil