前端面试汇总-html篇

打倒菠萝菠萝蜜
170 阅读4分钟

一. 什么是 DOCTYPE， 有何作用？

1、DOCTYPE是什么？

DOCTYPE（DocumentTypeDeclaration）是HTML文档中的一个重要声明，用于指定当前文档所采用的HTML版本。

2、在代码执行时，起到什么作用？

规范浏览器行为：DOCTYPE声明可以帮助浏览器正确解析和渲染HTML文档。不同的HTML版本有不同的规范和特性，通过指定正确的DOCTYPE，可以确保浏览器按照相应版本的规范来解析页面。

避免混杂模式：在早期的HTML标准中，如果没有提供DOCTYPE声明或者提供了错误的声明，浏览器会进入混杂模式（Quirks Mode），这意味着浏览器会尝试向后兼容旧版本的HTML，但也可能导致页面显示不一致或出现兼容性问题。通过明确指定正确的DOCTYPE，可以避免进入混杂模式。

支持新特性：随着HTML标准不断更新和演进，新版本中引入了许多新特性和语法规则。通过使用适当的DOCTYPE声明，可以告诉浏览器当前页面采用了哪个HTML版本，并使其能够理解并支持该版本中新增加的功能和语法。

3、如何使用？

声明必须位于HTML文档的第一行，位于 标签之前.

html5

<!DOCTYPE html>

html4

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

4、区别

为什么html5只要写一小段，但是html4却要写一长段？

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

二. src 和 href 的异同

相同：都是HTML中特定元素的属性，都可以用来引入外部的资源

不同：

1、用途不同，src用于嵌入到文档中的资源，href用于链接到文档之外的资源；

2、适用范围不同，src适用于图片、音频、视频和脚本等资源的引用，href适用于css样式表、字体文件和网页链接。

3、引用方式不同，src引用的资源是必需的，href引用的资源是可选的；

4、对文档的影响不同，src会直接影响文档的加载和显示，href只会影响到引用的资源的使用；

三. H5和HTML5区别

  • H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
  • HTML5是一个技术名词，指的就是第五代HTML

四. iframe的作用以及优缺点

iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。

优点：

  • 可以用来处理加载缓慢的内容，比如：广告

缺点：

  • iframe会阻塞主页面的Onload事件
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题
  • 会产生很多页面，不易管理
  • 浏览器的后退按钮没有作用
  • 无法被一些搜索引擎识别

五. 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

六. 怎么处理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]-->

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

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

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

例：

html
复制代码
<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>

avatar
文章
阅读
粉丝