HTML面试题一

127 阅读3分钟

1. HTML 文件中的 DOCTYPE 是什么作用?

HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准

DOCTYPE 即 Document Type,网页文件的文档类型标准。

主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。

DOCTYPE 需要放置在 HTML 文件的 标签之前,如:

<html>

...

</html> (目前主流)
"http://www.w3.org/TR/html4/strict.dtd">

<html>

...

</html> (早期)

2. HTML、XML、XHTML 之间有什么区别?

它们都属于标记语言。

图片.png

XML的要求会比较严格:

  1. 有且只能有一个根元素

  2. 大小写敏感

  3. 正确嵌套

  4. 必须双引号

  5. 必须闭合标签

<root>

<father id='box'>

<child>小张</child>

<child>小王</child>

</father>

</root>

XHTML 和 HTML5 的历史延展: www.cnblogs.com/my-freedom/…

番外: 所以 HTML5 是HTML的新一代标准, 所谓的 H5 工程师这一词, 其实是国产词, 泛指新一代的web开发工程师, 具体H5工程师, 做什么工作方向, 还是要看需求 (比如: 移动端开发, PC端网页开发, H5小游戏开发....)

3. 前缀为 data- 开头的元素属性是什么?

这是一种为 HTML 元素添加额外数据信息的方式,被称为 自定义属性。 我们可以直接在元素标签上声明这样的数据属性:

<div id="mydiv" data-message="Hello,world" data-num="123"></div>

也可以使用 JavaScript 来操作元素的数据属性:

let mydiv = document.getElementById('mydiv')
// 读取
console.log(mydiv.dataset.message)
// 写入
mydiv.dataset.foo = "bar!!!"

注意:在各种现代前端框架出现后,这种原生的自定义属性已经变得不太常用了, 以前的使用频率非常高, 所以我们知 道即可

例如: vue实现删除功能时需要 id, 可以直接传值

<tr v-for="item in list" :key="item.id">
 <td>张三</td>
 <td>18</td>
 <td>体育好</td>
 <td>
  <button @click="del(item.id)">删除</button>
  <button>编辑</button>
 </td>
</tr>

4. 谈谈你对 HTML 语义化的理解?

考察核心点: 语义化的好处 (利于SEO, 可阅读性更好)

语义化之前: 在提倡语义化之前,你可能会使用各种各样的标签去实现同样的功能,比如:

  • 使用 span、div、p、a 等做文字, 做按钮
  • 使用 div 做一切 从功能方面来说,这确实是不存在什么问题的,完全可以达到功能效果。 但这不符合直觉,非常不友好:
  • 对人不友好:阅读代码的人不能一眼看出代码的功能
  • 对机器不友好:解析代码的程序不能很好的对这些元素进行分类处理

语义化之后: 为了解决上面说的问题,HTML5 规范提倡语义化标签,即使⽤恰当语义的 HTML 标签让⻚⾯具有良好的结构与含 义,⽐如:

  • p 标签就代表段落
  • article 代表正⽂内容
  • button 代表按钮
  • header 代表头部
  • 等等...

语义化的好处: 图片.png

语义化的适用性: 语义化适合内容型的网站来使用(如简书、知乎),对其⽹站内容的传播有很⼤帮助。

5. HTML5 对比 HTML4 有哪些不同之处?

考察点: 是否了解 html5 新增的一些新特性

图片.png

获取地理定位: navigator.geolocation.getCurrentPosition(successCallback, errorCallback) (为了安全, 需要在 https 网站使用)

记忆角度: 更标准, 新增标签, 新增type表单属性, 新增全域属性, 新增API...