HTML 面试题

转载自：帅地博客

1、src 和 href 的区别

src 和 href 都是用来引用外部的资源，它们的区别如下：

• src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应?到?档内。例如请求js脚本，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执?完毕，所以?般js脚本会放在页面底部。
• href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的?件时，就会并行下载资源，不会停?对当前?档的处理。 常用在a、link等标签上。

2、对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。

语义化的优点如下：

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息

• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护

3、img 的 srcset 属性的作用

srcset 属性用于设置不同屏幕密度下，img 会自动加载不同的图片。常用于响应式页面

4、行内元素、块级元素、空(void)元素有哪些

行内元素：img（图片）、input（文本框）、a（链接）

块级元素：div（盒子）、ul（列表）、p（段落）、h（标题）

空元素，即没有内容的HTML元素，没有闭合标签：br（换行）、hr（水平线）

5、浏览器乱码

产生乱码的原因：

• 网页源代码是 gbk 的编码，而内容中的中文字是 utf-8 编码的，反之也会出现乱码；
• 网页编码是 gbk，而程序从数据库中调出呈现是 utf-8 编码的内容也会造成编码乱码；
• 浏览器不能自动检测网页编码，造成网页乱码

解决办法：

• 使用软件编辑 HTML 网页内容；

• 如果网页设置编码是 gbk，而数据库储存数据编码格式是 UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
• 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换

6、HTML5 与 HTML

 

 

 

7、浮动的方式

8、script 标签为什么要放在 body 标签的底部

原因：

因为浏览器在渲染 html 的时候，从上到下依次执行，遇到 js 文件就会停止当前页面的渲染，转而去下载 js 文件，如果将 script 标签放在头部，如果文件又很大的情况下，首屏时间就会延长，影响用户体验。

解决方法：

• 将 script 标签放到 body 的底部
• 通过 defer\async 属性将 js 文件转为异步下载

9、defer\async 的区别

都是让 js 文件能够异步下载，不阻塞页面的渲染，它们的区别如下：

• async：边渲染 html，边下载 js，下载完成后暂停 html 的解析，先执行 js，再继续渲染页面
• defer ：边渲染 html，边下载 js，然后等待整个文档渲染完成后执行 js

下载的处理二者是相同的，主要是执行的时间不同如果两个属性同时设置，以 async 为准

10、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验

• 图片懒加载：使图片仅在浏览器当前视窗内出现时才加载该图片。在网页源码中，在 img 标签中首先会使用一个“伪属性”（通常使用src2，original......）去存放真正的图片链接，而并非是直接存放在 src 属性中。当图片出现到页面的可视化区域中，会动态将伪属性替换成 src 属性，完成图片的加载
• 图片预加载：如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
• CSSsprite，SVGsprite，Iconfont、Base64：如果图片为css图片
• 特殊编码的图片：如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

11、HTML和XHTML的区别是什么

XHTML 可以理解为 html+xml，就是用 xml 的语法来规范 html

XHTML 元素必须被正确地嵌套

XHTML 元素必须被关闭

12、对于 WEB 标准以及 W3C 的理解与认识问题

web 标准：将这三部分独立分开，使其更具有模块化

• 结构：HTML 标签，即页面 body 里写入的标签
• 表现：css 样式表，使页面的结构标签更具美感
• 行为：js ，页面和用户具有一定的交互，同时是页面结构或表现发生变化，主要由 js 组成

W3C 标准：对 web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范

• 对结构的要求：

a. 标签字母要小写

b. 标签要闭合

c. 标签不允许随意嵌套

• 对 css 和 js 的要求：

a. 尽量使用外链 css 样式表和 js 脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

b. 样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

13、div+css 的布局较 table 布局有什么优点

结构、表现分离。改版的时候更方便，只要改 css 文件。

页面加载速度更快、页面显示简洁

易于优化（seo），搜索引擎更友好

14、html 常见兼容性问题

15、js 放在html的不同位置有什么区别吗

如果使用 window. 函数，将 js 代码放在其中，则放在哪里都是一样的，因为都是在body加载完再执行的

如果不使用window.函数，

16、移动html5开发流行的框架有哪些

• jQueryMobile 是 jQuery 在手机上和平板设备上的版本。jQueryMobile 不仅会给主流移动平台带来 jQuery 核心库，而且会发布一个完整统一的 jQuery 移动UI框架。支持全球主流的移动平台。
• jQTouch是一个jQuery的插件，主要用于手机上的Webkit浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的Java库。支持包括iPhone、Android等手机。

17、HTML5 中如何嵌入视频

和音频类似，HTML5 支持 MP4、WebM 和 Ogg 式的视频

<video width=”450″ height=”340″ controls>

<source src=”jamshed.mp4″ type=”video/mp4″>

Your browser does’nt support video embedding feature.

video>

18、Typeof的作用

• 对于数字类型， typeof 返回的值是 number。比如：typeof(1)，返回的值就是 number
• 对于字符串类型， typeof 返回的值是 string。比如：typeof(“123”)返回的值是 string
• 对于布尔类型， typeof 返回的值是 boolean 。比如：typeof(true) 返回的值是 boolean
• 对于对象、数组、null 返回的值是 object 。比如 typeof(window)，typeof(document)，typeof(null) 返回的值都是 object
• 对于函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date) 返回的值都是 function
• 如果运算数是没有定义的（比如说不存在的变量、函数或者undefined），将返回undefined

19、label的作用是什么 是怎么用的

label 标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label 中有两个属性是非常有用的, FOR和ACCESSKEY。

FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点，例如：

<Label FOR="InputBox">姓名Label><input ID="InputBox" type="text"> 

ACCESSKEY属性功能：表示访问 label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。例如：

<Label FOR="InputBox" ACCESSKEY＝"N">姓名Label><input ID="InputBox" type="text">

20、写出几种IE6 BUG的解决方法

双边距BUG float引起的 使用display

超链接hover后点击失效，使用正确的书写顺序 link visited hover active

png 透明使用js代码改　　

select 在 ie6下遮盖 使用 iframe 嵌套

21、浏览器如何对 HTML5 的离线储存资源进行管理和加载

在线的情况下：浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件

• 如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储
• 如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储

离线的情况下：浏览器会直接使用离线存储的资源。

22、说一下 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建 web worker：

1. 检测浏览器对于 web worker 的支持性
2. 创建 web worker 文件（js，回传函数等）
3. 创建 web worker 对象

23、iframe 有那些优点和缺点

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

优点：

• 用来加载速度较慢的内容（如广告）
• 可以使脚本可以并行下载
• 可以实现跨子域通信

缺点：

• iframe 会阻塞主页面的 onload 事件
• 无法被一些搜索引擎索识别
• 会产生很多页面，不容易管理

24、DOCTYPE(文档类型) 的作用

DOCTYPE 是 HTML5 的文档类型声明，为了告诉浏览器（解析器）应该以什么（html或xhtml）文档类型定义来解析文档；

不同的渲染模式会影响浏览器对 CSS 代码甚? JavaScript 脚本的解析；

它必须声明在HTML文档的第一行；

浏览器渲染页面的两种模式：

• CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。

• BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

25、meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。