请用中文并且通俗易懂的解释下面每行代码的作用：!DOCTYPE htmlhtmlhead meta charset=UTF-8 title查询手机号归属地title style body font-family Arial sans-serif; background-color #f2f2f2; container margin 0 auto; padding 20p

这段代码实现了一个查询手机号归属地的功能。具体来说：

第1行：声明文档类型为HTML。

第2-22行：HTML文件的结构和样式。包括一个查询框和一个结果框。

第24-45行：JavaScript代码。首先获取查询按钮和结果框的DOM元素，然后为查询按钮添加一个点击事件。当用户点击查询按钮时，首先获取输入的QQ号码，然后通过XMLHttpRequest向一个API发送请求，API会返回该QQ号码对应的手机号码和归属地信息。最后将返回的信息填充到结果框中显示出来。其中，第29行的API URL是固定的，第34-38行的代码将返回的JSON格式数据转换为JavaScript对象。