写一个查询域名DNS记录的页面用什么前端美化一下让用户可以输入要查询的域名和要查询的类型提交后显示8888、114114114114 等dns查询的记录

这里是一个简单的代码示例，使用了Bootstrap进行前端美化：

<!DOCTYPE html>
<html>
<head>
	<title>DNS记录查询</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<h1>DNS记录查询</h1>
		<form>
			<div class="form-group">
				<label for="domain">要查询的域名：</label>
				<input type="text" class="form-control" id="domain" placeholder="例如：example.com">
			</div>
			<div class="form-group">
				<label for="type">要查询的类型：</label>
				<select class="form-control" id="type">
					<option value="A">A记录</option>
					<option value="MX">MX记录</option>
					<option value="CNAME">CNAME记录</option>
					<option value="TXT">TXT记录</option>
				</select>
			</div>
			<button type="button" class="btn btn-primary" onclick="query()">查询</button>
		</form>
		<div id="result"></div>
	</div>

	<script>
		function query() {
			var domain = $('#domain').val();
			var type = $('#type').val();
			$.get('https://dns.google.com/resolve', {name: domain, type: type}, function(data) {
				var result = '<table class="table"><thead><tr><th>记录值</th></tr></thead><tbody>';
				for (var i=0; i<data.Answer.length; i++) {
					result += '<tr><td>' + data.Answer[i].data + '</td></tr>';
				}
				result += '</tbody></table>';
				$('#result').html(result);
			});
		}
	</script>
</body>
</html>

这个页面使用了Bootstrap提供的样式，包括表单、按钮和表格等元素。用户输入要查询的域名和类型后，点击“查询”按钮，页面会使用jQuery发起一个GET请求到Google的DNS服务器，获取到对应的DNS记录，并将其以表格的形式展示在页面上。这个页面相对简单，只是一个演示，实际应用中可能需要更多的功能和处理逻辑。

写一个查询域名DNS记录的页面用什么前端美化一下让用户可以输入要查询的域名和要查询的类型提交后显示8888、114114114114 等dns查询的记录