前端面试-HTML5篇

链接：https://www.nowcoder.com/questionTerminal
来源：牛客网

Question 6 描述一下 cookies，sessionStorage 和 localStorage 的区别

• cookit是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。数据大小有限制在4k以下，数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递，浏览器关闭，数据不会被删除。
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
• sessionStorage:数据在5M左右或以上，浏览器关闭，数据就会被销毁。
• localStorage:数据在5M左右，数据可永久存储，可主动删除之

Question 7 说说你对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:用来在页面中表示一套结构完整且独立的内容部分

<aslde></aside> SM:主题的附属信息 ( 用途很广，主要就是一个附属内容 ) ，如果 article 里面为一篇文章的话，那么文章的作者以及信息内容就是这篇文章的附属内容了

<figure></figure>SM:媒体元素，比如一些视频，图片啊等等

<datalist></datalist>

SM:选项列表，与 input 元素配合使用，来定义 input 可能的值

<details></details>

SM:用于描述文档或者文档某个部分的细节 ~ 默认属性为 open~

ps:配合 summary 一起使用

Question 8 说说link和@import的区别

XML/HTML代码

<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />

XML/HTML代码

<style type='text/css' media='screen'>

@import url('CSS文件 ');

</style>

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

 

Question 9 说说你对SVG理解? 

• 区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
• 区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
• 区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
• 区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

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

特点：

(1)任意放缩

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

(2)文本独立

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

(3)较小文件

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

(4)超强显示效果

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

(5)超级颜色控制

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

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

浏览器支持：

Internet Explorer9，火狐，谷歌 Chrome ， Opera 和 Safari 都支持 SVG 。

IE8和早期版本都需要一个插件 - 如 Adobe SVG 浏览器，这是免费提供的。

Question 10 HTML中全局属性（global attribute） 有哪些？

• accesskey 规定激活元素的快捷键；
• class 规定元素的一个或多个类名（引用样式表中的类）；
• contenteditable 规定元素内容是否可编辑；
• contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
• data-* 用于存储页面或应用程序的私有定制数据。
• dir 规定元素中内容的文本方向。
• draggable 规定元素是否可拖动。
• dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
• hidden  样式上会导致元素不显示，但是不能用这个属性实现样式。
• id 规定元素的唯一 id。
• lang 规定元素内容的语言。
• spellcheck 规定是否对元素进行拼写和语法检查。
• style 规定元素的CSS行内元素。
• tabindex 规定元素的tab键次序。
• title 规定有关元素的额外信息。
• translate 规定是否应该翻译元素内容。

Question 11 说说超链接target属性的取值和作用？

• _blank：在新窗口中打开链接文档
• _self：默认。在相同的框架中打开链接文档
• _top：在整个窗口中打开链接文档,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
• _parent：在父级框架中集中打开
• _framename:在指定的框架中打开链接文档

Question 12 data-`属性的作用是什么？

data- 属性是 HTML5 中的新属性，用于存储页面或应用程序的私有自定义数据。data-赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
data-* 属性包括两部分：
1.属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
2.属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

1 2 3 4 5

<ul> <li data-animal-type="鸟类">喜鹊</li> <li data-animal-type="鱼类">金枪鱼</li> <li data-animal-type="蜘蛛">蝇虎</li> </ul>

Question 13 iframe有那些缺点？

1. 会产生很多页面，不容易管理。
2. iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3. 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4. 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5. iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发

Question 14 Label的作用是什么，是怎么用的？

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

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

<label>Date:<input type='text' name='B'/></label>

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

<label for='Name'>Number:</label>

<input type=“ text “ name='Name' id='Name'/>

Question 15 如何实现浏览器内多个标签页之间的通信?

WebSocket、 SharedWorker ；

也可以调用localstorage、 cookies 等本地存储方式；

localstorage另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，

我们通过监听事件，控制它的值来进行页面信息通信；

注意quirks： Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

Question16 如何在页面上实现一个圆形的可点击区域？

//第一种 使用image map
<img id="blue" class="click-area" src="blue.gif" usemap="#Map" /> 
<map name="Map" id="Map" class="click-area">  <area shape="circle" coords="50,50,50"/>
</map>
#blue{
 cursor:pointer;
 width:100px;
 height:100px;
}

//第二种 使用CSS border-radius
<div id="red" class="click-area" ></div>

#red{  
 cursor:pointer;
 background:red;  
 width:100px;  
 height:100px;  
 border-radius:50%;  
} 

//第三种 使用js检测鼠标位置
<div id="yellow" class="click-area" ></div>

$("#yellow").on('click',function(e) {    
  var r = 50; 
  var x1 = $(this).offset().left+$(this).width()/2;            
  var y1 = $(this).offset().top+$(this).height()/2;   
  var x2= e.clientX;  
  var y2= e.clientY;    
  var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));    
  if (distance <= 50)  
    alert("Yes!");    
});  

Question 17 title与h3的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： <strong> 会重读，而 <B> 是展示强调内容。

i内容展示为斜体， em 表示强调的文本；

Physical Style Elements -- 自然样式标签

b, i, u, s, pre

Semantic Style Elements -- 语义样式标签

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用 , 如果不能确定时首选使用自然样式标签。

Question 18 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？

<div style="width:100%;height:1px;background-color:black"></div>

Question 19 HTML5标签的作用(用途)?

a、使Web页面的内容更加有序和规范

b、使搜索引擎更加容易按照HTML5规则识别出有效的内容 

c、使Web页面更接近于一种数据字段和表