该页面仅以HTML格式保存_web前端面试题HTML基础篇（四）

问题1：浏览器页面由哪三层构成，分别是什么？作用是什么？

答案：

构成：结构层、表示层、行为层

分别是：HTML、CSS、JavaScript

作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

问题2：请你描述下cookies、sessionStorage和localStorage的区别？

答案：

区别：

Cookie：

• 每个域名存储量比较小(各浏览器不同，大致4K)

• 所有域名的存储量有限制(各浏览器不同，大致4K)

• 有个数限制(各浏览器不同)

• 会跟随请求发送到服务器

LocalStorage：

• 永久存储

• 单个域名存储量比较大(推荐5MB，各浏览器不同)

• 总体数量无限制

SessionStorage：

• 只有Session内有效

• 存储量更大(推荐没有限制，但是实际上各浏览器也不同)

扩展知识：

sessionStorage和localStorage是HTML5 Web Storage API提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要的来回传递。

sessionStorage、localStorage、cookies都是在浏览器端存储的数据，其中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 )和等号。

问题3：对WEB标准以及W3C的理解与认识？

答案：

对于结构要求(标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助)

• 标签要闭合

• 标签字母要小写

• 标签不允许随意嵌套

对于css与js来讲

• 尽量使用外链css样式表和js脚本，使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户体验

• 样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

• 不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性

问题4：link和@import的区别？

答案：

1

以上代码两者都是外部引用CSS的方式，但是存在一定的区别：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物；@import属于CSS范畴，只能加载CSS

• link引用CSS时，在页面载入时同时加载；@import需要等页面网页完全载入以后加载

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持

• link支持使用JavaScript控制DOM改变样式；而@import不支持

问题5：谈谈你对SVG的理解？

答案：

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG于2003年1月14日成为W3C推荐标准。

特点：

1.任意放缩

用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等

2.文本独立

SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面

3.较小文件

总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因此下载也很快

4.超强显示效果

SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率

5.超级颜色控制

SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线性填充、渐变和蒙版

6.交互性和智能化

SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个就是SVG的本地运行环境下的厂家支持程度

浏览器支持：

IE9、火狐、谷歌浏览器、Opera和Safari都支持SVG。IE8和早期版本需要一个插件，例如Adobe SVG浏览器，是免费提供的

问题6：`data-*`属性的作用是什么？

答案：

`data-*`为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的“dataset”属性获取，不支持该属性的浏览器可以通过“getAttribute”方法获取。

需要注意的是：`data-`之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持data-*属性，即：当没有合适的属性和元素时，自定义的data属性是能够存储页面或App的私有的自定义数据。

问题7：label的作用是什么，是怎么用的？

答案：

label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

1

注意：label的for属性值要与后面对应的input标签id属性值相同

1<label for='Name'>Number:label>2<input type=“ text “ name='Name' id='Name'/>

问题8：如何在页面上实现一个圆形的可点击区域？

答案：

方式一：定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像

1<img src="task6.jpg" width="1366" height="768" border="0" usemap="#Map" />  2<map name="Map" id="Map">  3 <area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />  4map>  

方式二：border-radius

1<style>   2 .disc{   3     width:100px;   4     height:100px;   5     background-color:dimgray;   6     border-radius: 50%;   7     cursor: pointer;   8     position: absolute;   9     left:50px;  10     top:50px;    11     line-height: 100px;  12     text-align: center;  13     color: white;  14 }  15style>1617<div class="disc">点击区域div>  

方式三：纯js实现，需要求一个点在不在圆上简单算法、获取鼠标坐标等

1