1、<!DOCTYPE html>是什么,有什么作用?
<!DOCTYPE html>声明了页面使用HTML5标准。作用是让浏览器使用W3C标准解析网页,如果不加这句,会导致浏览器使用自己的解析方式。
2、HTML有哪些空元素
空元素就是自闭合标签,一般的html标签都是<div></div>这样的,自闭合标签就是类似于<br />这样的。有<area />标签,<br />换行标签,<hr />横线标签,<base>标签,base需要放在head里面,href规定了标签为页面上的所有链接规定默认地址或默认目标,,target规定了打开新网页的默认打开方式。<img>,<input>,<link>,<meta>。
<link rel="stylesheet" type="text/css" href="theme.css" />
3、meta标签是什么,有什么用?
meta标签提供各种元数据,从而提供各种文档信息。元信息就是非显示型数据,机器可读型数据。
meta标签主要用四个属性:charset用来声明页面的字符编码,这个要写在第一行,否则会出现乱码。第二个是http-equiv,下面的代码是每30秒刷新一次文档。
<head>
<meta http-equiv="refresh" content="30">
</head>
name属性:常用与解决浏览器兼容问题,要与content属性结合使用
content属性: 通常与有http-equiv或name属性结合使用,为这两种属性加以说明
4、行内元素、块级元素分别有哪些,有什么区别?
行内元素:span,a,label,input,img,strong,em
块级元素:div,p,h1,form,ul,li
区别:
• 行内元素与块级元素直观上的区别:行内元素会在一条直线上排列,都是同一行的,水平方向排列;块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
• 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
• 行内元素与块级元素属性的不同,主要是盒模型属性上
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效
行内元素特点:
1、不换行
2、高,行高,外边距和内边距不可改变。宽度和高度随着文本内容的变化而变化,但是可以设置行高。
3、宽度是文字或者图片的宽度,不可改变。(除非设置inline-block,否则改不了)
4、margin的上下无效左右有效,padding的上下无效左右有效。
块级元素特点:
1、块级元素总是会另起一行
2、块级元素会自动占据可用的全部宽度
5、用HTML5写一下文档结构
<!DOCTYPE HTML>
<html lang="zh"> //代表是中文网站,如果是en表示是英文网站,这个主要是给搜索引擎看的,与页面关系不大
<head>
<meta charset="utf-8"> //页面使用的是utf-8字符集
</head>
6、@import和link引入样式的区别
1、link是HTML提供的标签,可以加载CSS文件,还可以定义RSS、rel连接属性等等。@import是css提供的语法规则,只能导入样式表。
2、加载顺序的区别:link标签引入的CSS被同时加载,@import引入的CSS将在页面加载完毕后被加载。
3、兼容性:@import有一定的兼容问题,但是是个低版本IE,所以个人认为可以忽略
4、DOM可控性。
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于DOM方法是基于文档的,无法使用@import的方式插入样式。(但是我自己实验的是可以通过js动态导入)
7、无样式内容闪烁(Flash of Unstyle Content)
@import导入CSS样式的时候会等待文档全部加载完成后再加载,这段时间页面只有文档内容没有样式,所以如果网速太慢的话会有一个从无样式到有样式的闪烁。解决方法就是使用link标签加载CSS,这样页面就会等CSS下载完成之后再下载HTML文件。
8、HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5
HTML新特性:
- 图像Canvas
- 多媒体video、audio
- 本地存储localStorage、sessionStorage
- 语义化更好的内容元素article、header、footer、nav、section
- 表单控件date、time、canlendar、url、search
- 新的技术webworker、websocket、Geolocation
移除的元素:
- 纯表现的元素u、big、center、strike、tt、font、basefont
- 框架集frame、frameset、noframes
8.1、Canvas
HTML5新增的,可以使用js绘制图像。canvas标签只是图形容器,必须使用脚本来绘制图形。
8.2、SVG(SVG并非是HTML5新特性,但是可以和Canvas做对比)
了解:SVG是矢量图形,所以不会跟着图片放缩大小而引起图片锐利程度、清晰程度的改变。由于是画的,所以相比于PNG,GIF图片大小会小很多。
8.3Canvas和SVG的区别
SVG是基于XML的,所以SVG DOM中的每个越苏都是可用的,可以为某个元素附加js事件处理器。所以可以控制单个图形的隐藏显示等。
Canvas是通过js绘制的,像素渲染。一旦被绘制完成,浏览器就不再关注,如果位置发生变化,那么整个场景都需要重新绘制。
Canvas依赖分辨率,SVG不依赖。
Canvas不支持事件处理器,SVG支持。
Canvas适合做图像密集型游戏,其中许多对象会被频繁重绘。
SVG适合做带有大型渲染区域的应用程序比如谷歌地图。
SVG如果复杂度高会减慢渲染速度(因为过度使用dom的应用都慢)
SVG不适合做游戏应用。
8.4多媒体video,audio
video
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is
a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
video里面的内容是浏览器不支持video标签时候显示的内容。
如果不加controls
页面上不会显示videos标签自带的控制按钮,可以用js控制。
如果给video同时加width和height,会使得video窗口大小变成设置的形状,但是不会让视频的长宽比变形。如果只给设置一个,video窗口的大小会自适应。(所以设置一个就可以了)
autoplay
布尔属性。设置自动播放
…………………………细节部分暂时不谈。
本地存储localStorage、sessionStorage
顺便说下cookie
9、dataset数据集
数据集属性是HTML5新增的特性。
有时候给html标签添加一些自定义的属性是非常有用的,但是在HTML5之前没有标准方法,虽然可以自定义属性但是终究不是标准方法。
HTML5推出了dataset数据集方法。
<html>
<body>
<div id="dataset" data-name="wo">我是dataset</div>
<script>
const dataset = document.getElementById("dataset").dataset;
console..log(dataset.name); //wo。 这里的.name不需要加data前缀
dataset.name = "ni";
dataset.age = 18;
console,log(dataset.name) //ni 可以通过dataset直接修改属性。
console,log(dataset.age ) //18 可以通过dataset直接设置属性。
console.log(typeof dataset); //object 。但是输出dataset显示的是 DOMStringMap。
</script>
</body>
</html>
缺点是老式浏览器不支持。
9、http状态码
websocket的状态码是多少?
101:请求者已要求服务器切换协议,服务器已确认并准备切换。
状态码分类:
1xx(临时响应)
表示临时响应并需要请求者继续执行操作的状态代码。
代码 说明
100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。
101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。
2xx (成功)
表示成功处理了请求的状态代码。
代码 说明
200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。
201 (已创建) 请求成功并且服务器创建了新的资源。
202 (已接受) 服务器已接受请求,但尚未处理。
203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
204 (无内容) 服务器成功处理了请求,但没有返回任何内容。
205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。
206 (部分内容) 服务器成功处理了部分 GET 请求。
3xx (重定向)
表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。
代码 说明
300 (多种选择) 针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。
301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。
305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。
307 (临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
4xx(请求错误)
这些状态代码表示请求可能出错,妨碍了服务器的处理。
代码 说明
400 (错误请求) 服务器不理解请求的语法。(解决办法传参格式不正确)
401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
405 (方法禁用) 禁用请求中指定的方法。
406 (不接受) 无法使用请求的内容特性响应请求的网页。
407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
408 (请求超时) 服务器等候请求时发生超时。
409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 (已删除) 如果请求的资源已永久删除,服务器就会返回此响应。
411 (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。
412 (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。
413 (请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。
414 (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。
415 (不支持的媒体类型) 请求的格式不受请求页面的支持。
416 (请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态代码。
417 (未满足期望值) 服务器未满足"期望"请求标头字段的要求。
5xx(服务器错误)
这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。
代码 说明
500 (服务器内部错误) 服务器遇到错误,无法完成请求。(解决办法传参数不正确)
501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。
10、页面导入样式时,使用Link和@import有什么区别?
区别:
1.link是HTML标签,@import是css提供的。
2.link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题,@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式,而@import不可以。
11、浏览器页面有哪三层构成,分别是什么,作用是什么?
构成:结构层、表示层、行为层
分别是:HTML、CSS、JavaScript
作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。
12、HTML5的优点与缺点?
优点:
- 网络标准统一、HTML5本身是由W3C推荐出来的。
- 多设备、跨平台
- 即时更新。
- 提高可用性和改进用户的友好体验;
- 有几个新的标签,这将有助于开发人员定义重要的内容;
- 可以给站点带来更多的多媒体元素(视频和音频);
- 可以很好的替代Flash和Silverlight;
- 涉及到网站的抓取和索引的时候,对于SEO很友好;
- 被大量应用于移动应用程序和游戏。
缺点:
- 安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
- 完善性:许多特性各浏览器的支持程度也不一样。
- 技术门槛:HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习,像web worker、web socket、web storage 等新特性,后台甚至浏览器原理的知识,机遇的同时也是巨大的挑战
- 性能:某些平台上的引擎问题导致HTML5性能低下。
- 浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。
13、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
回答1:
- 声明位于文档中的最前面,处于标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
- 严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
- 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
- DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
回答2:
doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是W3C所发布的一个文档类型定义(DTD)中包含的规则。
- 声明位于文档中的最前面的位置,处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的HTML 文档。
- 所谓的标准模式是指,浏览器按 W3C 标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。 严格模式是浏览器根据web标准去解析页面,是一种要求严格的DTD,不允许使用任何表现层的语法。
- 严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行混杂模式则是一种向后兼容的解析方法,说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。
- 浏览器解析时到底使用标准模式还是怪异模式,与你网页中的 DTD 声明直接相关, DTD 声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略 DTD 声明 ,将使网页进入怪异模式。
14、HTML5有哪些新特性、移除了哪些元素?
Html5新增了 27 个元素,废弃了 16 个元素,根据现有的标准规范,把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
结构性元素主要负责web上下文结构的定义
-
section:在 web 页面应用中,该元素也可以用于区域的章节描述。
-
header:页面主体上的头部, header 元素往往在一对 body 元素中。
-
footer:页面的底部(页脚),通常会标出网站的相关信息。
-
nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。
-
article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分,确保内容的有效分割。
-
aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
-
figure:是对多个元素进行组合并展示的元素,通常与 figcaption 联合使用。
-
code:表示一段代码块。
-
dialog:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。
-
meter:表示特定范围内的数值,可用于工资、数量、百分比等。
-
time:表示时间值。
-
progress:用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监视。
-
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
-
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。
-
details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。
-
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。
-
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
-
command:用来处理命令按钮。
15、每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
告诉浏览器要以何种标准解析HTML页面。
16、请你描述一下 cookies,sessionStorage 和 localStorage 的区别?
sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据,其中 sessionStorage 的概念很特别,引入了一个“浏览器窗口”的概念。 sessionStorage 是在同源的同窗口(或 tab )中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后, sessionStorage 即被销毁。同时“独立”打开的不同窗口,即使是同一页面, sessionStorage 对象也是不同的
cookies会发送到服务器端。其余两个不会。
Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个,但 IE7 似乎也允许每个域名 50 个 cookie 。 Firefox 每个域名 cookie 限制为 50 个。 Opera 每个域名 cookie 限制为 30 个。 Firefox 和 Safari 允许 cookie 多达 4097 个字节,包括名( name )、值( value )和等号。 Opera 许 cookie 多达 4096 个字节,包括:名( name )、值( value )和等号。 Internet Explorer 允许 cookie 多达 4095 个字节,包括:名( name )、值( value )和等号。
区别:
-
Cookie
- 每个域名存储量比较小(各浏览器不同,大致 4K )
- 所有域名的存储量有限制(各浏览器不同,大致 4K )
- 有个数限制(各浏览器不同)
- 会随请求发送到服务器
-
LocalStorage
- 永久存储
- 单个域名存储量比较大(推荐 5MB ,各浏览器不同)
- 总体数量无限制
-
SessionStorage
- 只在 Session 内有效
- 存储量更大(推荐没有限制,但是实际上各浏览器也不同)
17、说说你对HTML语义化的理解
(1)什么是 HTML 语义化?
<基本上都是围绕着几个主要的标签,像标题( H1~H6 )、列表( li )、强调( strong em )等等 >
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
(2)为什么要语义化?
为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看;
用户体验:例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
(3) 语义化标签
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用来在页面中表示一套结构完整且独立的内容部分
<aside></aside> SM:主题的附属信息 ( 用途很广,主要就是一个附属内容 ) ,如果 article 里面为一篇文章的话,那么文章的作者以及信息内容就是这篇文章的附属内容了
<figure></figure>SM:媒体元素,比如一些视频,图片啊等等
<datalist></datalist
SM:选项列表,与 input 元素配合使用,来定义 input 可能的值
<details></details>
SM:用于描述文档或者文档某个部分的细节 ~ 默认属性为 open~
ps:配合 summary 一起使用
18、超链接 target 属性的取值和作用
target这个属性指定所链接的页面在浏览器窗口中的打开方式。
它的参数值主要有:
a、 _blank :在新浏览器窗口中打开链接文件
b、 _parent :将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象 _self 参数一。
c、 _self :在同一框架或窗口中打开所链接的文档。此参数为默认值,通常不用指定。
d、 _top :在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架。
19、data- 属性
data-
为H5新增的为前端开发者提供自定义的属性,这些属性集可以通过对象的 dataset
属性获取,不支持该属性的浏览器可以通过 getAttribute
方法获取 :
需要注意的是:data-
之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。
即:当没有合适的属性和元素时,自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。
20、如何实现浏览器内多个标签页之间的通信?
WebSocket、 SharedWorker
也可以调用localstorage、 cookies 等本地存储方式;
localstorage另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,
我们通过监听事件,控制它的值来进行页面信息通信;
21、简述一下src与href的区别?
src用于替换当前元素, href 用于在当前文档和引用资源之间确立联系。
22、WebSocket与消息推送?
传统的http协议是无法由服务端推送消息到客户端的。只能用长轮询的方式模拟实现长连接。
过去的实现方法:定时轮询、长轮询、长连接。
现在的方法:websocket。缺点:有些浏览器不支持,但是当代的库可以做到降级处理。
- 事件驱动
- 异步
- 使用ws或者wss协议实现的
- 没有跨域问题
- 能够实现真正意义上的推送功能
23、img的title和alt有什么区别?
Alt 用于图片无法加载时显示 Title 为该属性提供信息,通常当鼠标滑动到元素上的时候显示
24、表单提交中Get和Post方式的区别?
(1)、 get 是从服务器上获取数据, post 是向服务器传送数据。
(2)、 get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中,值和表单内各个字段一一对应,在 URL 中可以看到。 post 是通过 HTTP post 机制,将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
(3)、对于 get 方式,服务器端用 Request.QueryString 获取变量的值,对于 post 方式,服务器端用 Request.Form 获取提交的数据。
(4)、 get 传送的数据量较小,不能大于 2KB 。 post 传送的数据量较大,一般被默认为不受限制。但理论上, IIS4 中最大量为 80KB , IIS5 中为 100KB 。
(5)、 get 安全性低, post 安全性较高。
(6)、其实post请求也可以携带queryString。而且浏览器兼容性还不错,项目中用过
(7)、但是get请求携带请求体body的行为,如果使用postman是可以的,但是使用浏览器发送此类请求不行,服务端收不到。(已经过验证)
25、HTML5 有哪些新增的表单元素?
- datalist
- keygen
- output
后面两个用的肯定特别少,可以忽略
26、HTML5 应用程序缓存和浏览器缓存有什么区别?
应用程序缓存是 <u>HTML5</u> 的重要特性之一,提供了离线使用的功能,让应用程序可以获取本地的网站内容,例如 HTML 、 CSS 、图片以及 JavaScript 。这个特性可以提高网站性能,它的实现借助于 manifest 文件,如下:
<!doctype html>
<html manifest=”example.appcache”>
…..
</html>
与传统浏览器缓存相比,它不强制用户访问的网站内容被缓存。
优点:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
网友评论