提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

高频前端面试题之HTML篇（四）

浏览器 HTML 试题 代码
2023-04-18 14:25:23 时间

14. 知道什么是微格式吗？谈谈理解，在前端构建中应该考虑微格式吗？

所谓的微格式是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。

具体表现是把语义嵌入到HTML中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾HTML文档的人机可读性，相当于对web网页进行语义注解。

采用微格式的web页面，在HTML文档中给一些标签增加一些属性，这些属性对信息的语义结构进行注解，有助于处理HTML文档的软件，更好的理解HTML文档。当爬取web内容时，能够更为准确地识别内容块的语义，微格式可以对网站进行SEO优化。

15. HTML5为什么只需要写<!DOCTYPE html>?

为什么HTML5只需要写一段：

<!DOCTYPE html>
复制代码

而HTML4却需要写很长的一段

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
复制代码

其实主要是因为HTML5不基于SGML，所以不需要引用DTD。在HTML4中，<!DOCTYPE>声明引用DTD，因为HTML4基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。

16. HTML5新增了哪些新特性？移除了哪些元素？

HTML5主要是关于图像、位置、存储、多任务等功能的增加：

  • 语义化标签，如：article、footer、header、nav等
  • 视频video、音频audio
  • 画布canvas
  • 表单控件，calemdar、date、time、email
  • 地理
  • 本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
  • 拖拽释放

移除的元素：

  • 纯表现的元素：basefont、font、s、strike、tt、u、big、center
  • 对可选用性产生负面影响的元素：frame、frameset、noframes

17. 怎么处理HTML5新标签兼容问题？

主要有两种方式：

  1. 实现标签被识别：通过document.createElement(tagName)方法可以让浏览器识别新的标签，浏览器支持新标签后。还可以为新标签添加CSS样式
  2. 用JavaScript解决：使用HTML5的shim框架，在head标签中调用以下代码：
<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
复制代码

18. 如何实现在一张图片上的某个区域做到点击事件

我们可以通过图片热区技术：

  1. 插入一张图片，并设置好图像的有关参数，在<img>标记中设置参数usemap="#Map"，以表示对图像地图的引用。
  2. 用<map>标记设定图像地图的作用区域，并取名：Map；
  3. 分别用<area>标记针对相应位置互粉出多个矩形作用区域，并设定好链接参数href

例：

<body>
 <img src="./image.jpg" alt="" usemap="#Map" />
 　　<map name="Map" id="Map">
     <area alt="" title="" href="#" shape="poly"
         coords="65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,82,131,159,117" />
     <area alt="" title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" />
 </map>
</body>
复制代码

19. a元素除了用于导航外，还有什么作用？

href属性中的url可以是浏览器支持的任何协议，所以a标签可以用来手机拨号<a href="tel:110">110</a>，也可以用来发送短信<a href="sms:110">110</a>，还有邮件等等

当然，a元素最常见的就是用来做锚点和 下载文件。

锚点可以在点击时快速定位到一个页面的某个位置，而下载的原理在于a标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。

20. 你知道SEO中的TDK吗？

在SEO中，TDK其实就是title、description、keywords这三个标签，title表示标题标签，description是描述标签，keywords是关键词标签

相关文章