前端面试之HTML篇

左手的ㄟ右手 2022-06-14 06:18 202阅读 0赞

**1、<!DOCTYPE html>的作用？**

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义([DTD][])来解析文档。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

**2、HTML5新增了哪些内容或API，使用过哪些**

**（1）HTML5的新结构标签**

在之前的HTML页面中，大家基本上都是用了Div+CSS的布局方式。整个HTML文档结构定义不清晰，HTML5中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

**（2）、HTML5新增的input类型：**

(1)email

(2)search

(3)url

(4)tel 在PC浏览器中无效果，只在手机中有效

(5)number 只允许输入数字，且可以限定范围和步长

(6)range 在指定范围内选择，可以限定范围和步长

(7)color  颜色选择输入框

(8)date 日期选择输入框

(9)week 周选择输入框

**（3）视频播放**

HTML5提供了 <video>和<audio> 两个新元素，可以直接在浏览器播放视频和音频，不再依赖于Flash播放器了。

a、视频播放

**<video src="x.mp4">您的浏览器不支持VIDEO标签</video>**

VIDEO标签的常用属性：

(1) src="xx.mp4" 必需属性，指定播放的视频源

(2) width="800" 视频播放区域(行内块)的宽度

(3) height="600" 视频播放区域(行内块)的宽度

(4) controls 显示播放控件

(5) autoplay 自动播放

(6) loop 循环播放

(7) poster="yy.jpg" 视频尚未播放之前显示的海报

b、音频播放

您的浏览器不支持AUDIO标签

</audio>

**（4）Canvas绘图**

Canvas：画布，可以实现在HTML页面中绘制图形和图像，例如：绘制统计图、图标、动画游戏等——所有的绘图内容都是使用js来控制的。

**（5）SVG绘图技术**

SVG：是矢量图技术，可以无限缩放，不适合丰富的色彩/线条细节

SVG（HTML技术，不依赖于任何播放器）的竞争对手：Flash（私有技术，依赖于播放器）。

（6）**Geolocation**

地理定位，使用浏览器获得客户端所在的地理坐标，如维度(latitude)、经度(longitude)、海拔高度(altitude)、速度(speed)。进而实现LBS（Location Based Service）。

**navigator.geolocation**，它共有三个方法：

(1)**getCurrentPosition(succ\_fn, err\_fn)** 得到浏览器当前所在位置数据

(2)watchPosition(function(position)\{\}) 不停的监视当前浏览器所在位置数据的变化

(3)clearWatch() 清除位置监视

**（7）拖放API（Drag & Drop）**

拖放API：在HTML页面中实现GUI（Graphic User Interface）程序中的“拖”和“放”操作。共提供了七个新事件。

**被拖动的对象（源对象）可以产生的事件：**

(1)ondragstart：开始拖动

(2)ondrag：拖动中

(3)ondragend：拖动结束

**被放置的对象（目标对象）可以产生的事件：**

(4)ondragenter：源对象被拖动进入目标对象

(5)ondragover：源对象被拖动着在目标对象的上方

(6)ondrop：源对象被拖动着在目标对象上方松开

(7)ondragleave：源对象被拖动移出目标对象

**（8）Web Worker——在浏览器中创建新线程**

在HTML中需要运行一些JS代码，由于算法很耗时，若直接在HTML中加入，会导致“主渲染线程”阻塞，此时页面中动画、事件、后续元素的渲染都会无法进行。HTML5新特性——Worker 对象，就相当于其他语言中的Thread对象，每个Worker对象都对应一个独立的执行线程。

**（9）客户端本地存储**

HTML5 Web Storage技术 —— 以键值对形式保存数据在客户端，大小不能超过8MB

(1) window.sessionStorage —— 会话级客户端存储

访问某个站点后，在不关闭浏览器的情况下，不停的请求\-响应的多个页面，共同组成了一个共同的“会话”。浏览器的关闭，意味着一次会话的结束。

sessionStorage中存储的数据，是可以在同一会话中的多个页面中共同使用的。

sessionStorage.setItem( k, v ); //在会话中保存数据

sessionStorage.getItem( k ); //取出会话中的数据

sessionStorage.removeItem( k ); //删除会话中的某个数据

sessionStrorage.clear( ); //清空会话中的所有键值对

sessionStorage是一个类数组对象，所以还可以：

sessionStorage.length //获取键值对的个数

sessionStorage\[ k \] = value; //等价于setItem

var v = sessionoStorage\[ k \]; //等价于getItem

(2) window.localStorage —— 跨会话级客户端存储

浏览器会为浏览器访问过的每个网站分配一个localStorage对象，在其中保存的数据即使浏览器关闭，甚至操作系统重启仍然存在——数据是保存在磁盘中的。使用方法：

localStorage.setItem( k, v ); //在会话中保存数据

localStorage.getItem( k ); //取出会话中的数据

localStorage.removeItem( k ); //删除会话中的某个数据

localStorage.clear( ); //清空会话中的所有键值对

localStorage是一个类数组对象，所以还可以：

localStorage.length //获取键值对的个数

localStorage\[ k \] = value; //等价于setItem

var v = localStorage\[ k \]; //等价于getItem

**2、input和textarea的区别**

（1） Input标签填写格式是单独出现的，

textarea 可设置多行文本，带滚动条的。

（2）  input标签 编写代码时大多用来放置字数较少的单行文字内容

textarea 一般让用户可以输入多行文字,输入的文字信息量相比较大。

（3）input标签的 value值 放在里面.

textarea标签的 value值 是放在标签中间.

3、**用一个div模拟textarea的实现**

Div元素上加个contenteditable="true"。HTML5增加了内容可编辑属性contenteditable，顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。应用了此属性后，普通的div标签也会像文本域一样可以获得焦点，同时有一个光标在那里。

[DTD]: https://baike.so.com/doc/850272-899073.html

前端面试之HTML篇

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端面试知识 - HTML、CSS篇

相关前端开发实习面试题（HTML篇）

相关前端面试总结——HTML

相关《前端面试之道-JS篇》（上）

相关前端面试之HTML篇

相关前端之HTML相关面试题。

相关前端面试总结——http、html和浏览器篇

相关前端开发面试题之综合篇

相关前端面试之-----html+css(21-60)

相关前端面试之-----html+css(1-20)