1.对HTML语义化的理解
语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下:
-
对开发者友好,使用语义类标签增强了可读性,结构更加清晰,让人更容易读懂,利于代码可读性;
-
对机器友好,带有语义的文字表现力丰富,更适合搜做引擎的爬虫爬取有效信息,利于SEO。
2.DOCTYPE(文档类型)的作用
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。
-
CSS1Compat:标准模式(Strick mode),默认模式,浏览器使用W3C的标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈现页面。
-
BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己的怪异模式解析渲染页面。在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。
3.src和href的区别
src和href都是用来引用外部的资源,它们的区别如下:
-
src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内,如请求js脚本。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执⾏完毕,所以⼀般js脚本会放在页面底部。
-
href: 表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时,就会并⾏下载资源,不会停⽌对当前⽂档的处理。 常用在a、link等标签上。
4. iframe 有那些优点和缺点?
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
优点:
-
用来加载速度较慢的内容(如广告)
-
可以使脚本可以并行下载
-
可以实现跨子域通信
缺点:
-
iframe 会阻塞主页面的 onload 事件
-
无法被一些搜索引擎索识别
-
会产生很多页面,不容易管理
-
增加http请求
5.script标签中defer和async的区别
如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。
下图可以直观的看出三者之间的区别: 其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。
defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下:
-
执行顺序: 多个带async属性的标签,不能保证加载的顺序;多个带defer属性的标签,按照加载顺序执行;
-
脚本是否并行执行:*async属性,表示*后续文档的加载和执行与js脚本的加载和执行是并行进行的,即异步执行;defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded事件触发执行之前。
6.常⽤的meta标签有哪些
meta
标签由 name
和 content
属性定义,用来描述网页文档的属性,比如网页的作者,网页描述,关键词等,除了HTTP标准固定了一些name
作为大家使用的共识,开发者还可以自定义name。
常用的meta标签:
(1)charset
,用来描述HTML文档的编码类型:
<meta charset="UTF-8" >
(2) keywords
,页面关键词:
<meta name="keywords" content="关键词" />
(3)description
,页面描述:
<meta name="description" content="页面描述内容" />
(4)refresh
,页面重定向和刷新:
<meta http-equiv="refresh" content="0;url=" />
(5)viewport
,适配移动端,可以控制视口的大小和比例:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
其中,content
参数有以下几种:
-
width viewport
:宽度(数值/device-width) -
height viewport
:高度(数值/device-height) -
initial-scale
:初始缩放比例 -
maximum-scale
:最大缩放比例 -
minimum-scale
:最小缩放比例 -
user-scalable
:是否允许用户缩放(yes/no)
(6)搜索引擎索引方式:
<meta name="robots" content="index,follow" />
其中,content
参数有以下几种:
-
all
:文件将被检索,且页面上的链接可以被查询; -
none
:文件将不被检索,且页面上的链接不可以被查询; -
index
:文件将被检索; -
follow
:页面上的链接可以被查询; -
noindex
:文件将不被检索; -
nofollow
:页面上的链接不可以被查询。
7.HTML5新增
1. 语义化标签
-
header:定义文档的页眉(头部);
-
nav:定义导航链接的部分;
-
footer:定义文档或节的页脚(底部);
-
article:定义文章内容;
-
section:定义文档中的节(section、区段);
-
aside:定义其所处内容之外的内容(侧边);
2. 媒体标签
(1) audio:音频
(2)video视频
(3)source标签
3.canvas(画布)
4.input标签新增属性
placeholder、autocomplete、autofocus、required ;
8. 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
-
行内元素有:
a b span img input select strong
; -
块级元素有:
div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
; - 空元素,即没有内容的HTML元素。空元素是在开始标签中关闭的,也就是空元素没有闭合标签:
-
常见的有:
<br>
、<hr>
、<img>
、<input>
、<link>
、<meta>
; -
鲜见的有:
<area>
、<base>
、<col>
、<colgroup>
、<command>
、<embed>
、<keygen>
、<param>
、<source>
、<track>
、<wbr>
。
9.Canvas和SVG的区别
(1)SVG: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言XML描述的2D图形的语言,SVG基于XML就意味着SVG DOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
其特点如下:
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用
(2)Canvas: Canvas是画布,通过Javascript来绘制2D图形,是逐像素进行渲染的。其位置发生改变,就会重新进行绘制。
其特点如下:
-
依赖分辨率
-
不支持事件处理器
-
弱的文本渲染能力
-
能够以 .png 或 .jpg 格式保存结果图像
-
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
注:矢量图,也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性。