主要围绕你了解的HTML5表单,前端面试必备基本知识点--HTML5篇

HTML篇

HTML5新增的标签有那些

答案解析:

内容元素:header、footer、section、aside、nav、section

表单控件:datalist、color、date、time、email、search

多媒体元素:audio、video、embed

控件元素:websoket、webworker

怎么理解语义化标签,有什么好处

答案解析:

语义化的html就是让正确的标签做正确的事情,能够便于开发者阅读和写出更加有效的代码,以及有利于SEO优化,让网络爬虫更好的解析。

在没有css的时候也能够清晰的看出网页的结构,增强可读性

有利于SEO,有利于搜索引擎爬虫更好理解我们页面,从而获取到更多有效信息,提示网页的权重

便以团队之间的开发维护,语义化的html更加易于阅读

html文件在不同的浏览器的差异

答案解析:

相同的代码在不同的浏览器可能表现出来的样式有差异的原因就是:浏览器的渲染引擎,(浏览器内核包括两个部分:渲染引擎和JS引擎),去负责解析网页语法、渲染绘制页面。常见的差异有:

不同浏览器的标签默认的margin、padding不同

有些浏览器图片的默认有间距

在有些浏览器中块级属性标签float后,又有横向margin情况下,ie6的margin更大

设置最小高度min-height(小于10px),在ie6、ie7、遨游高度会超出设置的高度

web worker是什么?适用在什么场景

答案解析:

当我们使用 web worker 去new出的一个对象相当于是在页面上的一个子线程,它可以用来去执行一些容易阻塞进程、消耗时间的复杂运算的代码。其产生的原因是因为 我们都知道浏览器js的执行是单线程,页面上的js的执行会阻塞到浏览器的响应,非常影响到用户的体验,由此我们就提出js的事件循环机制,异步请求数据等解决方案,但是在实质上也没有改变单线程执行本质,而web woker的出现就解决了这个·问题,但是也不是等同于后台意义的多线程,本质是让我们将数据刷新和页面渲染两个动作拆开执行。

使用场景

需要大量数据计算时,可以解决js在处理数据导致UI渲染阻塞的问题

onmessage() 属性 //来绑定开始工作需要执行的函数

postMessage() //来停止工作

canvas和svg的区别

答案解析

两者都是用于浏览器绘制图形的,但是两者的本质不同。

canvas

由js所绘制的2D图形,是逐像素进行渲染的,所以也十分依赖分辨率

一旦位置发生变化、则引发重绘

不支持事件处理器

能够以.png 或者.jpg的格式保存图像

svg

由xml所绘制而成的2D图形,svm的dom中的每个元素都是可以附加js事件处理器

每个svm图形都是可以看做是对象,某些属性发生变化也能重现图形

不支持分辨率

什么是

答案解析:

DOCTYPE是HTML网页的一个标准,必须处在HTML文档的第一行,告知浏览器的解析器用什么文档标准解析;

怪异模式:浏览器按照自己的模式进行解析渲染页面

标准模式:浏览器按照w3c的标准进行解析渲染

meta标签

答案解析:

提供页面一些元信息(名称/值对),添加一些核心关键词, 有利于seo搜索引擎优化。提供的属性有name、content、http-equiv、scheme.其中name可以取的值有:autor、description、keywords,对应内容在content填充;http-equiv可以取到的值有:set-cookie、content-type、expirse、refresh

src和href的区别

答案解析:

src:是指外部资源的位置,指向的内容会嵌入到文档标签所在的位置,请求src指向的资源会将其下载并应用到文档内,例如js文件、img等,浏览器在加载的过程中也会暂停执行其他资源的下载和处理。直到将该资源加载、编译、执行完成。

href:是指向网络资源所在位置,一般用于锚点和链接之间的连接,一般使用在超链接

defer和async的区别

答案解析:

defer:表示后续文档的加载和渲染与js脚本的加载是并行进行的(异步),js的脚本执行是需要等到文档所有元素解析完成之后,DOMContentLoaded之前。(加载异步,执行同步)

async: 表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行。 (加载与执行都异步)

window.load 和DOMContentLoaded的区别

DOM完整的解析过程

1、 解析HTML结构

2、 加载外部脚本和样式表文件

3、 解析并且执行脚本代码 //js文件

4、 DOM树构建完成 //DOMContentLoaded

5、 加载图片等外部文件

6、 页面加载完毕 //load

触发情况:

当onload 事件触发,页面上的dom、样式表、脚本、图片都以及加载完

当DOWContentLoaded 事件触发时,仅当dom加载完成。

对WEB标准以及W3C的理解与认识?

web标准简单来说可以分为结构、表现、行为。其中结构由HTML标签组成;表现则是由css样式表组成;行为则是指页面和用户具有一定的交互,同时使得页面结构或者b表现发生变化,即为js组成。

web标准将三部分独立分开,使其模块化。但是有结构或者表现变化则使得三者界限不清晰,所以这个时候就提出了W3C,对web标准提出了规范化的要求:

标签闭合、标签字母小写、不乱嵌套,提高搜索机器人搜索机率。

使用外链css和js脚本。是结构、表现、行为分为三块,符合规范,同时也能提高页面渲染速度,提升用户体验。

样式也要尽量少用行间样式,使得结构与表现分离,标签id和class的命名尽量见文知义,使得代码维护更加简单。

用过到的浏览器内核讲一下

浏览器内核分为两部分:渲染引擎和JS引擎

渲染引擎:负责获取网页内容,以及计算网页显示方式,浏览器内核不同对于网页的语法解释也是不同,所以渲染结果会有差异。

JS引擎:解析和执行js来实现网页的动态效果。

浏览器对应的内核

IE: trident内核

Firefox : gecko内核

Safari : webkit内核

Chrome : Blink(基于webkit)

iframe的优缺点以及应用场景

iframe标签是框架的一种形式,创建包含另一个文档的内联框架,用来包含别的页面的。

优点:

iframe可以把嵌入网页原样展现出来

实现模块分离,便于更改,并且提高代码的可重用性

重载页面时不会重载整个页面

缺点:

样本和脚本需要额外链入,增加页面额外请求次数

代码复杂,会不利于搜索引擎解读,影响到搜索引擎优化,不利于网站排名

多数小型移动设备无法完全显示框架,设备兼容性较差

iframe阻塞页面加载,影响网页加载速度

应用:

跨域通信:document.domain + iframe 的设置

使用HTML5的postMessage,然后在目标窗口接收数据

targetWindow.postMessage(data, targetOrigin) //data为需要传递的数据

window.addEventListener('message',function(evt.data){

// doing

}, false) //evt.data 为传递过来的数据

了解过websocket吗

答案解析:

websocket协议为web应用客户端和服务端之间提供全双工通信 持久化协议,和http都协议同属于应用层

特点如下:

服务端可以主动向客户端推送信息,客户端也可以向服务端发送信息,实现真正的平等对话,属于服务器推送的一种

没有同源限制

数据格式比较小,性能开销小,通信十分高效

与http协议有着很好兼容性,在握手阶段也是采用http协议,默认端口也是80和443

协议标识符是ws

说下判断链表是否有环的思路

可使用哈希表存储每一个遍历过的链表的结点,每次遍历判断是否已经存过该的结点(hash存是因为查询速度比较快)

使用快慢指针,使用快指针走两步,慢指针走一步,如果存在环则一定会相遇

2、圣杯布局和双飞翼布局是什么?怎么实现的?

都是用来解决两边顶宽,中间自适应的三栏布局,中间栏放在文档流中并且优先渲染。

圣杯布局: 中间div设置padding,左右两边div使用浮动float:left 结合相对定位

.middle {

float: left;

height: 300px;

width: 100%;

padding: 0px 200px;

}

.left {

float: left;

height: 300px;

width: 300px;

position: relative;

margin-left: -100%;

left: -300px;

}

.right {

float: left;

height: 300px;

width: 300px;

position: relative;

margin-right: -300px;

right: -300px;

}

我是中间部分
我是左侧部分
我是右侧部分

双飞翼布局: 中间div设置margin,并且创建子div用于放置内容

.center {

float: left;

width: 100%;

height: 300px;

}

.middle{

margin:0px 300px;

height: 300px;

}

.left {

float: left;

height: 300px;

width: 300px;

margin-left: -100%;

}

.right {

float: left;

height: 300px;

width: 300px;

margin-right: -300px;

}

我是中间部分
我是左侧部分
我是右侧部分

form表单详解

form表单属性

属性

描述

accept

MIME_type

规定通过文件上传来提交的文件类型

target

_blank/_parent/_self/_top

打开url的方式

enctype

表单发送到服务器前的编码方式

method

get/post

表单发送请求的方式

action

url

表单发送的url

enctype的三个选项

multipart/form-data 默认不对字符编码,以二进制的方式发送数据,可用于文件上传

application/x-www-form-urlencoded 在发送前编码所有字符

text/plain 空格转换为'+',不对特殊字符编码

form表单常用控件

input的type类型

button、checkout、file、submit、hidden、reset、image

其中hidden是隐藏作用域,在用户页面是没有展示的,在表单中插入隐藏域目的是在于收集或者发送信息,在用户点击提交表单时,隐藏域的信息也被一起发送到服务器。

innerHTML 和 outerHTM区别

innerHTML会获取从对象的初始位置到终止位置的全部内容,不包括html标签。

outerHTML除了包括innerHTML之外的全部内容,还会包括对象标签本身

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值