-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTML
217 lines (179 loc) · 13.1 KB
/
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
1、阐述下html文件最前面声明的DOCTYPE是干什么的？
我们从DOCTYPE发展历史来说，
在HTML5之前DOCTYPE存在三种情况：
1、HTML4.01 strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2、HTML4.01 traditional：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
3、HTML4.01 frameset：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/strict.dtd">
因为4.01版本的html基于SGML语言，页面需要声明DTD标记语言规则才能正常被解析；
但是随着HTML5标准的发布，html不在基于SGML语言来解析，所以只需要声明<!DOCTYPE html>即可正常解析页面；所以DOCTYPE的主要作用就是告诉浏览器使用何种规范对html文档进行解析。
2、图片中title和alt的区别？
title通常在鼠标移上图片上时显示的文本内容；
alt是在图片无法加载的情况下显示的文本内容；两者都可以提升页面的可访问性，搜索引擎会重点分析，设置的话有利于seo。
3、html新特性有哪些？移除了哪些元素？
新增元素：
1、canvas：
2、video，audio：
3、cache manifest，localStorage和sessionStorage：
4、语义化更好的内容元素，比如：article，footer，nav，header，section等；
5、表单控件：<input type="email" />，date，time，url，calendar,search等；
6、新的技术：webWorker，webSocket，Geolocation等。
移除元素：
1、纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
2、对可用性产生负面影响的元素： frame 、 frameset 、 noframes；
canvas，video，audio，webSocket，webWorker，Geolocation，cache manifest等新特性实践
// 缺少链接
video:
1、controls：展示视频自带的控件
2、autoplay：自动播放
3、poster：海报帧的URL
4、height，width：高度和宽度
5、loop：视频结尾自动回到视频开始的地方
audio:
1、controls：展示视频自带的控件
2、autoplay：自动播放
4、muted：静音
5、loop：音频结尾自动回到视频开始的地方
4、浏览器怎么对html5的离线储存资源进行管理和加载的呢，工作原理是什么呢？https://blog.csdn.net/nideshijian/article/details/53065292
html5带来的cache manifest可以对离线储存资源进行管理和加载，
如何管理和加载的：
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访
问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，
那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。
具体使用方法如下：
1、页面头部加入一个manifest属性；
2、在cache.manifest文件中编写离线存储的资源；
3、离线状态下，操作window.aplicationCache进行需求实现。
原理：
HTML5的离线存储功能是基于一个新建的.appchache文件的缓存机制，通过这个文件上的解析清单离线缓存资源，这些资源就会像cookie一样被缓存下来，
之后在网络处于离线的状态下，浏览器会将被离线存储的数据在页面展示。
好处：
1、离线浏览：页面可以在离线的情况下使用资源；
2、速度：已缓存的资源加载更快；
3、减少服务器的负担：浏览器将只从服务器下载更改过的资源。
5、简单描述下渐进增强和优雅降级
渐进增强：针对低版本浏览器构建页面，保证最基本的功能，然后针对高版本的浏览器进行效果，交互等改进和追加功能以追求极致体验；
优雅降级：刚开始构建完整的功能，然后对低版本的浏览器进行兼容。
6、cookie，localStorage和sessionStorage区别？
cookie：大小相对于另外两个来说，大小受限，并且在向服务器请求的时候会携带cookie字段，cookie需要指定作用域，不可以跨域调用；
localStorage：持久化本地存储，除非手动删除缓存，否则不会被清除；
sessionStorage：会话级本地存储，当浏览器的tab页或者浏览器关闭（即会话结束的情况下），缓存就会被清除；
cookie的作用主要是和服务器交互，storage的作用主要是在本地存储数据。
7、src和href的区别
src主要是通过下载指向的资源来替代当前元素，href主要是在当前文档和链接资源之间建立联系；
src指向外部资源，指向的内容下载指定的资源，然后会嵌入到文档当前元素所在的位置，如：script，frame，img这些标签中的src，当浏览器解析到这些元素的时候，
会暂停其他资源的下载，直到这些元素加载，执行完毕，才会继续执行下面的语句，这也就是为什么js文件放在页面底部加载的原因；
href指向网络资源的位置，建立和当前元素之间的链接，比如文档中的<link href="aaa.css" />标签，会识别指向的资源为css文件，然后开启并行下载，不会阻塞后续的处理，
这也就是为什么css文件放在页面的上面加载，而不是使用@import。
8、div+css布局较table布局有什么优点？
1、改版的时候只需要修改css文件，更方便；
2、页面加载的速度更快，结构化更清晰，页面显示简洁；
3、表现和结构分离；
4、有利于seo；
9、知道的网页制作会用到的图片格式有哪些？
正常回答：png-8,png-24,jpeg,gif,svg
进阶回答：Webp：：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。
Apng：是PNG的位图动画扩展，可以实现png格式的动态图片效果。
10、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
dns缓存，cdn缓存，服务器缓存，浏览器缓存
11、HTML结构的语义化优点？
html语义化主要指的是使用合适的标签来展现页面内容的结构，
1、一个语义化的文档，能够使页面结构的呈现更加清晰，易于理解；
2、搜索引擎对我们网页进行分析时，会依赖和html标签来确定上下文和各个关键字的权重，一个语义化的文档对爬虫来说是友好的，有利于爬虫对文档内容的解读，有利于seo；
3、一个语义化的文档，能够让人很清楚的看出代码的结构，便于团队开发与维护；
4、屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页，比如strong标签和b标签他们虽然都是加粗字体，但是strong标签拥有强调的语义，
对于一般的显示来说看不出差别，但是对于机器来说就会有很大的区别，如果用户使用的是屏幕阅读器来读页面的话，strong标签就会有明显的语调变化。
12、用一个div模拟textarea的实现
通过div的contenteditable属性实现
13、meta相关标签
1、<head lang=”en”> <!--标准的 lang 属性写法-->
2、<meta charset=’utf-8′> <!--声明文档使用的字符编码-->
3、<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用指定浏览器使用特定的文档模式-->
4、<meta name=”description” content=”不超过150个字符”/> <!--页面描述-->
5、<meta name=”keywords” content=””/> <!-- 页面关键词-->
6、<meta name=”author” content=”name, [email protected]”/> <!--网页作者-->
7、<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
8、<meta name=”viewport” content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover" />
9、<meta http-equiv=”pragma” content=”no-cache”>，<meta http-equiv=”cache-control” content=”no-cache”>，<meta http-equiv=”expires” content=”0″> <!-- 页面不设置缓存 -->
10、<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
14、defer和async的区别？
defer和async都是让浏览器异步下载脚本，不会阻塞页面的渲染，但是defer是只在整个文档渲染完成之后才会执行，async在下载完成之后会暂停html的解析，转而执行js。也就是主要是执行时机的不同。
15、html页面渲染过程
1、解析html树，生成DOM树；
2、解析css，生成CSSOM，即CSS对象模型
3、dom和css合并，生成渲染树（render tree）；
4、layout布局
5、painting渲染
6、重新渲染
16、什么是渐进式渲染（progressive rendering）？
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。比如：图片懒加载，图片预加载，
17、为什么在标签中使用srcset属性？请描述浏览器遇到该属性后的处理过程。
因为需要设计响应式图片。我们可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
处理过程：查看设备宽度 检查 sizes 列表中哪个媒体条件是第一个为真 查看给予该媒体查询的槽大小 加载 srcset 列表中引用的最接近所选的槽大小的图像
18、页面导入样式时，使用link和@import有什么区别？
1、link属于XHTML标签，除了加载css之外，还能用于定义RSS，定义rel连接属性等作用，而@import是有css定义的，只能用于加载css；
2、页面被加载的同时，link会同时被加载，但是@import需要等到页面加载完毕之后才会加载；
3、@import是css2.1提出的，只能在IE5以上使用，但是link是XHTML标签，不存在兼容性问题；
4、link支持使用js控制DOM去更改样式，而@import则不支持。
19、如何实现浏览器内多个标签页之间的通信?
webSocket，SharedWorker
20、history API：可以在不刷新页面的前提下，动态改变浏览器地址栏的URL地址，动态修改页面上显示的资源；
window.history方法和属性：
方法：back(), forward(), go()
属性：length
window.history.go(1), window.history.go(-1);
window.history.back(),window.history.forward();
html5中的新方法：
pushState(state, title, url)：添加一条历史记录，不刷新页面
replaceState(state, title, url)：替换当前的历史记录，不刷新页面
state：指定网址相关的状态对象，popstate事件触发的时候，该对象会传入回调函数中，如果不需要这个对象可以置为null；
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新页面的url地址，必须和前一个页面处于同域。浏览器的地址栏将会显示这个地址。
事件：
popstate：历史记录发生改变的时候触发，pushState和replaceState不会触发；
hashchange：当页面的hash值发生改变的时候触发
21、Geolocation
API：
getCurrentPosition:
navigator.geolocation.getCurrentPosition(function (p) {
alert(p.coords.latitude + '---' + p.coords.longitude)
}, function (error) {
console.log(error)
}, {
enableHighAccuracy: false,
timeout: 1000
})
watchPosition:
const watchId = navigator.geolocation.getCurrentPosition(function (p) {
alert(p.coords.latitude + '---' + p.coords.longitude)
}, function (error) {
console.log(error)
}, {
enableHighAccuracy: false,
timeout: 1000
})
clearWatch:
cleaWatch(watchId)
22、video，audio：// 自定义的视频播放器
23、canvas：//基础的canvas api用法
24、File && FileReader：
File：
属性：name，type，size
FileReader：
事件：
onloadStart：文件开始上传
onload：文件读取完成
onprogress：文件上传中触发
onloadEnd：文件上传完成
方法：
readAsDataUrl()：读取指定Blob中的内容，一旦读取完成之后，result将会保存表示读取文件内容的data:URL格式的Base64字符串；
readAsBinaryString()：读取指定Blob中的内容，一旦读取完成之后，result将会保存读取文件的原始二进制数据；
readAsArrayBuffer()：读取指定Blob中的内容，一旦读取完成之后，result将会保存ArrayBuffer数据对象；
readAsText：读取指定Blob中的内容，一旦读取完成之后，result将会保存表示读取文件内容的字符串；
25、拖拽事件：
ondrag:
ondragstart:
ondragend:
ondragover:
ondragenter:
ondragleave:
ondrop: