HTML篇
1.什么是DOCTYPE,有何作用?
DOCTYPE是用来声明HTML文档应当使用哪种版本来进行解析- 如果不使用
DOCTYPE告知浏览器应当使用哪种版本解析文档,那么浏览器将会开启最大兼容模式来解析文档,一般称为怪异模式.在怪异模式下,可能会产生一些预想不到的bug
2.说说对HTML语义化的理解?
HTML的语义化指的是在合适的地方使用合适的标签,让人能够根据标签进而大致知晓标签内容- 语义化使得在没有
CSS的情况下也能够展现出清晰的结构 - 语义化有利于
SEO,与搜索引擎建立良好的沟通 - 有利于爬虫抓取更多的有效信息
- 方便团队的开发与维护,减少差异化
3.标签属性src与href有什么区别?
- 两者都用于指向一个外部资源链接
src属性指向的外部资源会下载到本地并嵌入到当前位置,当浏览器解析到该元素时,会暂停其他资源的下载,知道该资源被执行完毕
- 常用于
img,script,video,audio等元素中
href用来指向一个外部链接,当浏览器识别到该属性时,会并行下载该资源,不会停止对当前文件的处理
4.title与h1,b与strong,i与em元素分别有什么区别?
title元素是head元素中一个必不可少的元素,用来指定当前页面的标题h1元素是一级标题b元素会实现一个加粗效果strong元素也会实现一个加粗效果,但是在使用语音朗读时会重读i元素会实现一个倾斜效果em元素也会实现一个倾斜效果,有强调效果
5.什么是严格模式与混杂模式?
- 严格模式指的是以浏览器支持的最高标准运行(
W3C标准) - 混杂模式指的是浏览器以向下兼容的方式显示内容,模拟老式浏览器的行为
- 严格模式,直接书写正确的
DOCTYPE,不声明或者声明不完整的DOCTYPE页面会转换为怪异模式
6.前端页面由哪三层构成?
- 分别由
html,css与js构成 html结构层
css表示层
js行为层
7.ifram的作用以及优缺点?
iframe被称为嵌入式框架,可以实现在html页面中嵌套html页面- 优点
- 缺点
- 会阻塞主页的
onload事件 - 产生较多页面,不利于管理
- 浏览器的导航按钮无法实现效果
- 无法被搜索引擎识别
8.img元素中的title与alt属性有什么作用?
title属性用来实现当用户的鼠标悬停在图片上时显示的额外信息alt属性用来实现当图片加载失败时,在原图片位置处预留的文本描述信息
9.H5与HTML5的区别是什么?
H5是一个统称,一个产品名词,包含了HTML5,CSS3与ES6等新技术HTML5是一个技术名词,指第五代HTML技术
10.行内元素与块级元素有哪些?有什么区别?如何转换?
- 行内元素指的是元素默认排列在同一行,设置元素的
width与height属性无效,只能够设置padding-left/right或margin-left/right,可以设置line-height,只能嵌套行内元素
a,b,em,i,span,strong,sub,sup等
- 块级元素指的是元素默认占据一整行,多个元素从上至下依次排列,可以设置元素的
width与height属性,并且也可以设置元素的内外边距,块级元素中可以嵌套块级元素或行内元素
h1~h6,div,p,ul,ol,li,form,table,textarea等
- 使用
display属性可以实现元素类型的转换
block转换为块级元素inline转换为行内元素inline-block转换为行内块元素
11.label的作用是什么?如何使用?
label标签用来为提高用户的操作体验- 通常在表单元素中使用,绑定
input元素,利用label标签的for属性绑定input标签的id属性,在label元素中使用文字描述,当用户点击文字时,光标会自动聚焦到绑定的input元素中
12.对于Web标准以及W3C的理解?
Web标准是一套规范,用来约定Web中的各项内容,是一套用来构建高质量,可持续与可访问Web内容的基础- 简单来说可以分为结构,表现与行为三个标准
- 结构标准约定
HTML的标签规范 - 表现标准约定
CSS的样式规范 - 行为标准约定
JS的操作逻辑
W3C是一个国际性的非盈利组织,用来制定各类标准,制定标准之后可以:
- 降低学习成本,降低代码的维护成本
- 共用统一的开发流程与工具
- 方便跨平台进行迁移
13.怪异模式是什么意思?它与标准模式有什么区别?
- 怪异模式指的是在编写
html代码时,没有写DTD,浏览器将会按照最大兼容模式进行页面渲染 - 常见区别
- 在怪异模式下,设置元素的
width与height会包含padding与border - 在怪异模式下,设置行内元素的
width与height会生效 - 在怪异模式下,设置元素的样式
margin:0 auto的居中效果会失效
14.什么是微格式?构建前端页面需要使用微格式吗?
- 微格式是建立在已有的标准基础之上的一组数据格式
- 具体表现是把语义嵌入到
HTML中,有助于实现分离式开发,相当于对Web页面进行语义注释
- 采用微格式的页面,通常会在标签中加入解释性的注释,有助于让处理
HTML的软件更易于理解文档,当使用爬虫爬取Web内容时,也能够更好地识别内容块的语义,可以优化网页的SEO
15.为什么HTML5只需要写!DOCTYPE html?
HTML5与HTML4不同,并不遵循SGML(标准通用标记语言),DTD规定了标记语言的规则,这样浏览器才能够正确识别文档内容,采用正确的方式呈现页面
16.HTML5新增了哪些特性?移除了哪些元素?
HTML5的新特性主要是关于图像,位置,存储,多任务等方面
- 新增标签:
video,audio,article,main,footer,aside,nav,section,canvas等 input新类型:date,time,color,email等- 表单新属性:
autofocus,placeholder,required等 - 地理定位技术:
Geolocation API - 拖拽:
Drag and Drop API - 本地存储:
sessionStorage与localStorage
- 移除元素
- 纯表现元素:
font,center,big等 - 可能会产生副作用的元素:
frame,frameset,noframes等
17.如何处理HTML5新标签兼容问题?
<head>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
- 使用
document.createElement("tagName")动态创建标签
18.如何实现在一张图片的不同区域链接不同的地址?
- 在
img标签中添加属性usemap="#yourMapTagName" - 结合
map标签与area标签共同实现
<img alt="" src="" usermap="#my-map"/>
<map name="my-map">
<area shape="rect" coords="" alt="" href=""/>
<area shape="circle" coords="" alt="" href=""/>
<area shape="poly" coords="" alt="" href=""/>
</map>
19.a元素除了用于导航,还能够用于什么?
href属性中的url链接可以是浏览器支持的任何协议
- 用于拨号
<a href="tel:110">110</a> - 用于发送短信
<a href="sms:message">sendMsg</a> - 用于发送邮件
<a href="mailto:example@exp.com"></a> - 用于下载文件
<a download href="targeturl"></a> - 用于锚点
<a href="#id"></a>
20.SEO中的TDK是什么?
T指的是title标题标签D指的是description描述标签K指的是keyword关键词标签
21.script标签中的defer属性与async属性的区别是什么?
- 两者都可以实现
script脚本的异步加载,使之不会阻塞页面的解析
defer | async |
|---|
多个defer标签,按照标签顺序执行 | 多个async标签,不一定按照标签顺序执行 |
会在HTML文档解析完成之后再执行js | 会在js加载完成之后立即执行 |
适用于需要依赖Dom的脚本 | 适用于不需要依赖Dom的脚本 |
22.常用的meta标签有哪些?
meta标签定义了网页的元信息,可以用来设置网页的作者,网页描述,关键词等信息
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
<meta name="robot" content="index,follow">
<meta http-equiv="refresh" content="0;url=">
23.img元素中srcset有什么作用?
- 如果要实现响应式布局,那么在不同的屏幕密度之下设置不同的图片,可以使用
srcset属性
<img src="default.jpg" srcset="another1.jpg 2x,another2.jpg 3x,another3.jpg 4x" />
24.描述什么是Web worker?
- 传统的
js代码在运行时,会阻塞页面的响应,直到js执行完毕后,页面才会响应 Web worker用来将js代码放在后台运行,独立于其他js,不会影响页面的性能,通过postMessage将结果回传至主线程,不会阻塞主线程
25.什么是离线存储?如何使用HTML的离线存储功能?工作原理是什么?
- 离线存储指的是当用户未连接到网络时,仍然可以实现页面的访问,并且在恢复网络后,会自动更新离线页面的数据
- 工作原理
- 离线缓存是基于一个新建的
.appcahce文件的缓存机制,通过这个文件上的解析清单离线缓存网页中的数据,这些数据就会像cookie一样被保存,当用户网络断开后,浏览器会按照之前缓存的数据来加载网页 - 创建一个与
.appcache文件,并且在根标签中添加manifest="filename.appcahce"
CACHE MANIFEST
CACHE:
/filename.js
/filename.css
NETWORK:*
FALLBACK:
another.html
- 使用
window.applicationCache进行缓存操作
26.浏览器是如何对HTML5的离线储存资源进行管理与加载的?
- 当网络在线时,浏览器识别到
manifest属性时,如果页面是首次加载,那么会按照该属性指向的文件中的内容进行下载,并缓存到本地;如果在加载页面时,页面已经离线存储,那么浏览器会使用离线存储的资源加载页面,然后对比新旧manifest,如果有更新,将更新后的数据重新缓存 - 当网络离线时,浏览器直接会使用离线存储的资源加载网页
27.canvas与svg有什么区别?
canvas | svg |
|---|
画布,通过js绘制的2D图像,逐像素进行渲染,位置改变时,会重新渲染 | 可伸缩矢量图形,基于XML描述的2D图形语言,SVG对象属性发生改变,会重新绘制 |
| 依赖分辨率 | 不依赖分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 适合图像密集型游戏 | 不适合用于游戏 |
| 若文本渲染能力 | 适合带有大型渲染区域的应用程序 |
能够以.png,.jpg格式保存图像 | 复杂度高会减慢渲染速度 |
28.head标签有什么作用?什么标签必不可少?
head标签用来设置网页的头部,是所有头部元素的容器head中的标签可以用来设置网页元信息,引用样式表,执行脚本等head标签中的信息可以用来描述网页的属性与信息,其中的大部分信息一般不会展示给用户
meta,style,link,base,script,title标签可用于head标签之中
title标签在head标签中必不可少,它用来显示页面的标题内容
29.如何区分浏览器的严格模式与混杂模式?有什么意义?
- 网页中设置的
DTD(Document Type Definition)文档类型定义是用来区分两种模式的标准
| 严格模式 | 混杂模式 |
|---|
文档设置了正确的DTD | 文档设置了不正确的DTD(不正确或不存在) |
文档设置了含有URI的过渡DTD | 文档设置了未包含URI的过渡DTD |
HTML5文档不存在严格模式与混杂模式- 严格模式让不同的浏览器能够按照统一的标准执行兼容,保证了旧网站的运行
30.浏览器乱码的原因是什么?
- 网页源代码是
gbk编码,内容中的中文汉字是utf-8编码,或者程序从数据库中取出的数据是utf-8编码时,两种编码不一致,必然会造成乱码 - 更改
html文档的charset=utf-8 - 使用文本编辑器,保存文档为
utf-8格式
31.渐进增强与优雅降级有什么区别?
- 渐进增强立足于实现
HTML最基础的功能,满足最低的需要,然后根据高版本的浏览器逐渐增加新特性与新功能,是一个由简单到复杂的过程 - 优雅降级立足于首先满足最高版本浏览器的需要,搭建一个成熟的且高级的网页,然后针对低版本浏览器逐渐降低用户体验,减少功能,是一个由复杂到简单的过程
32.HTML5中的drag API是什么?
drag API用来实现对元素的拖拽功能- 在元素标签中添加了
draggable=true属性后,元素将会成为一个可拖放元素,该元素通常与另一个拖放目标区域元素配合使用
dragstart事件名,事件的主体是被拖放元素,开始拖放时触发dragend事件名,事件的主体是被拖放元素,结束拖放式触发drag事件的主体是被拖放元素,拖放中触发dragenter事件主体是目标元素,进入目标元素时触发dragleave事件主体是目标元素,离开目标元素时触发dragover事件主体是目标元素,在目标元素中拖放时触发dop事件主体是目标元素,目标元素完全接受被拖放元素时触发
