在线DNS记录查询工具 - 免费查询域名解析记录

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