html5面试题
# 一、如何区分html和html5?
1:文档类型声明上,HTML没有语义化的标签。
2:HTML 有语义化的标签 nav hearder等
3:<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
4:在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
5:HTML5 不基于 SGML,所以不需要引用 DTD。
# 二、简述一下你对html语义化的理解?
1:利于团队发开项目。 增强可读性。 提高效率
2:有利于seo,有利于爬虫引擎
# 三、HTML5有哪些新特性以及理解
(1)语义化标签,让人和计算机更容易理解
1:header 头部 2:nav 导航 3:main 主要内容 4:section 主题内容 5:footer 底部 6:strong 表示内容重要性 seo 粗体强调标签,强调,表示内容的重要性 7:em 强调的唯一元素 seo 斜体强调标签,更强烈强调,表示内容的强调点
新增的input 1:email 定义用于 e-mail 地址的字段 2:number 定义用于输入数字的字段 3:date 定义 date 控件(包括年、月、日,不包括时间 4:search 定义用于输入搜索字符串的文本字段 5:image 定义图像作为提交按钮 6:url 定义用于输入 URL 的字段
(2)削弱对第三方插件的依赖,以往播放音频或视频需要借助 Flash,现在HTML5 已原生支持多媒体。:audio,video;
(3)更丰富的应用,涵盖各方面。包括以下几种:
- 1)新增绘图元素
canvas
画布svg
可伸缩矢量图形,可直接操纵图片、制作游戏和动态广告特效等。 - 2)扩展JavaScript API,例如Web存储、地理定位、拖放、操纵历史浏览记录和读取文件等。
- 3)创建离线Web程序,解决无网络时无法使用Web应用的情况。
- 4)引入Web Workers规范,解决Web应用越来越复杂的计算。
- 1)新增绘图元素
(4)引进多种类型的新元素,例如构建文档的元素article、figure、header等,标识文本的元素mark、wbr等。
定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
},function(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
break;
}
});
}else{
alert("浏览器不支持地理定位。");
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 四、sessionStorage 和 localStorage 和 cookie
- sessionStorage主要用户本地会话存在数据 当会话结束和页面关闭 数据也会被销毁
- localStorage 永久本地储存 除非自己手动删除
- cookie 存储空间小 不能跨域 需要指定作用域 Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在
# 五、这些浏览器的内核分别是什么?
IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与Opera Software共同开发)
# 六、div+css的布局较table布局有什么优点?
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化(seo)搜索引擎更友好,排名更容易靠前。
# 七、 property 和 attribute 区别
①property
指的是属性:DOM 节点本质是 JS 对象,因此 property 可以理解成 JS 对象上的属性。而 property 改变,就是直接改变 JS 对象的属性。
比如<p>
上有 style、className、nodeName 和 nodeType 等属性。
let p = $("p");
console.log(p.style.width, p.className);
console.log(p.nodeName, p.nodeType);
2
3
②attribute
attribute 是指 HTML 的属性,改变 attribute 就是针对 HTML 属性的 set 和 get,和 JS 对象无关。
常用的 API 就是:getAttribute
和setAttribute
。常见的用法是setAttribute()
来设置元素的style
。
let p = $("p");
p.setAttribute("data-name", "yuanxin");
console.log(p.getAttribute("data-name"));
2
3
# 八、iframe的优缺点?
- 优点:
- 1、解决加载缓慢的第三方内容如图标和广告等的加载问题
- 2、并行加载脚本
- 缺点:
- 1、iframe会阻塞主页面的onload事件
- 2、即时内容为空,加载也需要时间,因为需要http请求
- 3、不便于SEO
- 4、内外网页维护麻烦
# 九、谈谈以前端角度出发做好SEO需要考虑什么?
- Meta标签优化:主要包括主题(Title),网站描述(Description),和关键词(Keywords)。还有一些其它的隐藏文字比如Author(作者),Category(目录),Language(编码语种)
- 控制页面的大小 - 减少http请求,提高网站的加载速度。当速度很慢时,用户体验不好,留不住访客,并且一旦超时搜索引擎抓取缓慢。
- 控制首页链接数量 :网站首页是权重最高的地方,如果首页链接太少,搜索引擎不能继续往下爬到内页,直接影响网站收录数量。但是首页链接也不能太多,一旦太多,没有实质性的链接,很容易影响用户体验,也会降低网站首页的权重,收录效果也不好。注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。
- 网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。
- 维护网站:提高内容质量,保持更新
如何进行外部优化
- 外部链接类别:博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性。
- 外链选择:与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。