master

分支 (1)

管理

管理

master

interview
/
2.html面试.txt


html部分
1.前端三要素：
	html：毛坯房
	css：装修
	javascript：人住进去

2.谈谈你对B/S架构的认识？
	首先B是browser浏览器，S是server服务器
	浏览器 -http请求-> 服务器 -> 数据库
	数据库 -> 服务器 -响应-> 浏览器

3.html网页的结构
	doctype目的：告诉标准通用语言解析器，它应该使用什么样的文档类型定义来解析文档
	如果页面没有doctype声明，那么声明文档的解析类型就是怪异模式，也就是不同的浏览器会按照自己的解析方式去解析，
	那么在不同的浏览器中就会有不同的样式。所以你的页面添加了<!doctype html>,那么浏览器就会按照标准模式解析然后渲染页面

	meta作用：<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。
	可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
	meta里的数据是供机器解读的：1.告诉机器该如何解析这个页面，2.可以添加服务器发送到浏览器的http头部内容
	例如：
		<meta http-equiv="charset" content="iso-8859-1">
		<meta http-equiv="expires" content="31 Dec 2008">
		那么浏览器的头部就会包括这些:
			charset:iso-8859-1
			expires:31 Dec 2008

4.列出常见的标签，并简单介绍这些标签用在什么场景？（块级元素与行内元素的区别）
	块元素
		1) 独占一行空间
		2) 默认宽度为100%，默认高度由子元素或者内容决定
		3) 可以为其指定宽高 style="width:;height:;"
		举例：
			div 无意义的块级标签用于页面框架搭建
			h1~h6、p、html、body、
			ol > li 无序列表……
			ul > li 有序列表…
			dl > dt/dd 标题列表…
	行内元素
		1) 与其他行内元素共享一行空间
		2) 默认宽高由内容决定
		3) 不能为其指定宽和高
		4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素
		举例：
			a 超链接
			span 无意义行内元素
			i 可用于字体图标的引入
			em、img、strong……
	行内块元素
		兼具行内元素和块级元素的特点，可以设置宽高，在一行内显示，没有默认宽度
		img、input、select、textarea、button

5.HTML5 有哪些新增的表单元素？
	HTML5 新增了很多表单元素让开发者构建更优秀的 Web 应用程序。 datalist datetime output keygen date month week time color number range email url。

	答：1）进度条：<progress value="已完成工作量0-1小数" max="工作量 默认为1"></progress>进度条
        2）用户动作产生的结果：<output name="元素的名称" for=""></output>
        3）磁盘使用量：<meter value="实际值，默认为1" min="默认为0" max="默认为1"
                    low="下限" high="上限" optimum="最佳值"></meter>
        4）其他控件可用的值：<datalist><option value="XXX"></datalist>

6.HTML5 应用程序缓存和浏览器缓存有什么区别？
	应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，
	例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能，它的实现借助于 manifest 文件。

	答：应用程序缓存是会预加载的，保证齐全地供应和保存。
        浏览器缓存没有这些控制，不能作为程序缓存使用。
        不幸地，应用程序缓存过於简单，导致效率不彰，预期将会被 Service Worker 取代。

7.说说name和id的区别或者理解？
	ID 是 以 #定义的CSS样式，也可以用JS获取来控制 getElementById(这里是ID) 来获取
	name很多了，就是给当前标签或元素指定名称，也可以用JS来控制值，form提交后获取的时候就需要获取name名称。
	id 一般用于css和js中引用,name用于表单提交,只有加了name属性的标签元素才会提交到服务器。

8.浏览器的内核有哪些，你对内核的理解（你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么? ）
	IE: trident内核，俗称IE内核
	Firefox：gecko内核，俗称firefox内核
	Safari:webkit内核
	Opera:Presto内核 -> Webkit内核 -> Blink内核  //以前是presto内核，Opera现已改用Google Chrome的Blink内核
	Google Chrome   Webkti内核 -> Blink内核，统称Chrome内核 //Chrome:Blink(基于webkit，Google与Opera Software共同开发)

　　谈谈你对内核的理解：
	内核主要分成两个部分：渲染引擎(Render Engine)和JS引擎。
　　　　渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
　　　　JS引擎：解析和执行JavaScript来实现网页的动态效果。
	　　注意：最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。
		参考：https://www.jianshu.com/p/f4bf35898719
	答：
    1）Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器
    2）Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
    3）Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
    4）Webkit：Safari Chrome

    主要分成两部分：
    渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
    渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，
    然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

    JS引擎：解析和执行javascript来实现网页的动态效果。
    最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

9.H5的新特性你了解哪些？
	HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
　　拖拽释放(Drag and drop) API
　　语义化更好的内容标签（header,nav,footer,aside,article,section）
　　音频、视频API(audio,video)
　　画布(Canvas) API
　　地理(Geolocation) API
　　本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
　　表单控件，calendar、date、time、email、url、search
　　新的技术webworker, websocket, Geolocation

　　h5新标签兼容：
　　IE8/IE7/IE6支持通过document.createElement方法产生的标签，
　　可以利用这一特性让这些浏览器支持HTML5新标签。

	答：1）画布（Canvas)
	画布是网页中的一块区域，可所以用JavaScript在上面绘图。
	2）丰富强大的表单
	HTML5提供了表单增强特性，这些功能是由复杂的JavaScript编写的，以便能在所有浏览器上工作.
	3）本地存储
	HTML5本地存储类似于cookies，但它支持存储的数据量更大，并且提供了一个本地数据库引擎，从而使保持和获取数据更加容易。
	这个特点可以很好的将数据分发给用户缓解与服务器的连接压力。
	另外可以使用JavaScript从本地Web页面中访问本地数据库，这意味着你可以将网页保存到你本地从公司回到家里不用连接互联网就能打开。
	4）媒体
	HTML5规范中最具亮点的部分也许就是HTML5浏览器内置的多媒体播放功能，不需要Flash、Microsoft Media Player等插件。
	5）语音搜索功能
	大家现在可以在好多网站上看到语音搜素功能，HTML5提供了强大的语音搜素功能属性，只需要添加一个属性就可以实现。
	注意：x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。
	实现过程大概是捕捉到语音后，数据发送到google的服务器进行语音识别，然后返回结果。所以没有足够强大大的研发能力和服务器资源，真没法支持这个服务。
	作为普通话不标准经常被别人吐槽的人，使用语音搜索还是能十分准确地返回关键词，我顿时感动得一塌糊涂。

10.简述一下你对HTML语义化的理解（语义化标签好处）
	1.HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
	2.即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；
	3.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
	4.使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

	1、有意义的标签使得页面结构化，即使去掉css样式页面也能以一种清晰的结构展现。
	2、根据文档显示结构更易于后期的维护。
	3、除了人容易理解外，程序和其他设备也可以理解有意义的标签。

11.请描述一下cookies，sessionStorage和localStorage的区别？
	相同点：都会在浏览器端保存，有大小和同源限制。
　　不同点：
　　　　1、cookie会随请求发送到服务器，作为会话表示，服务器可修改cookie。web storage不会随请求发送到服务器。
　　　　2、cookie有path的概念，子路径可以访问父路径的cookie，父路径不可以访问子路径的cookie。
　　　　3、有效期： cookie在设置的有效期内有效，默认为浏览器关闭消失。sessionStorage在会话窗口关闭后失效，localStorage长期有效，需主动删除。
　　　　4、sessionStorage不能共享，localStorage在同源文档之间可以共享，cookie在同源且符合path规则的文档之间可以共享。
　　　　5、localStorage的修改会触发其他文档的update事件。
　　　　6、cookie有secure属性要求HTTPS传输。
　　　　7、浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。webStorage可以支持5M的存储。

	答：共同点：都是保存在浏览器端，且是同源的。
        区别：
        1、cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，
           即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
        2、存储大小的限制不同。
            cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
        3、数据的有效期不同。
            cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。
            sessionstorage仅在浏览器窗口关闭之前有效。
            localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
        4、作用域不同。
            cookie在所有的同源窗口都是共享。
            sessionstorage不在不同的浏览器共享，即使同一页面。
            localstorage在所有同源窗口都是共享。

	 localStorage：
		1）localStorage会永久存储会话数据，除非removeItem,否则会话数据一直存在
		2）将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用
		3）localStorage的存储大小一般为5MB
		4）localStorage为永久保存
	sessionStorage：
		1）sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭
		2）将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据
		3）sessionStorage的存储大小一般为5MB
		4）sessionStorage为临时保存
	cookie：
		HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储
		1）cookie的构成：
			名称：name(不区分大小写,但最好认为它是区分的)
			值:value(通过URL编码:encodeURIComponent)
			域
			路径
			失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间
			安全标志:设置安全标志后只有SSL连接的时候才发送到服务器
		2）cookie的作用:主要用于保存登录信息
		3）cookie的存储大小一般为4k
		4）生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
	区别：
		1）cookie在浏览器与服务器之间来回传递
			sessionStorage和localStorage不会把数据发给服务器，仅在本地保存
		2）数据有效期不同
			cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
			sessionStorage：仅在当前浏览器窗口关闭前有效
			localStorage 始终有效，长期保存
		3）cookie数据还有路径的概念，可以限制cookie只属于某个路径下
			存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
		4）作用域不同
			sessionStorage不在不同的浏览器窗口中共享
			localStorage在所有同源窗口中都是共享的
			cookie也是在所有同源窗口中都是共享的

12.meta viewport是做什么的？怎么用？
    1）移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，
	目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。
	我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	2）该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
	当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，
	但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。

	3）meta viewport 的6个属性：
		width 	设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
		initial-scale 	设置页面的初始缩放值，为一个数字，可以带小数
		minimum-scale 	允许用户的最小缩放值，为一个数字，可以带小数
		maximum-scale 	允许用户的最大缩放值，为一个数字，可以带小数
		height 	设置layout viewport 的高度，这个属性并不重要，很少使用
		user-scalable 	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

13. a标签中 active hover link visited 正确的设置顺序是什么?
	正确顺序：a:link 、a:visited 、a:hover 、a:active
	a:link 选择器设置指向普通的、未被访问页面的链接的样式
	a:visited 选择器用于设置指向已被访问的页面的链接
	a:active 选择器用于活动链接
	a:hover 选择器用于选择鼠标指针浮动在上面的元素。

14.form中methods请求方式
	get
		参数拼接在url后面，通过?来分割
		传递参数较少
	post
		参数存放在请求体中，安全
		传递参数更多

15.空元素定义
	HTML元素的内容是开始标签与结束标签之间的内容。
	而某些 HTML 元素具有空内容。那些含有空内容的HTML元素，就是空元素。空元素是在开始标签中关闭的
	例如：
		常见的空元素：<br> <hr>分割线 <img> <input> <link> <meta>
		鲜为人知的是：<area>，<base><col><command><embed><keygen><param><source><track><wbr>

16.SGML 、 HTML 、XML 和 XHTML 的区别？
	SGML：(Standard Generalized Markup Language，标准通用标记语言)，SGML具有非常复杂的文档结构，
	主要用于大量高度结构化数据的访问和其他各种工业领域，在分类和索引数据中非常有用。但是它不适用于Web数据描述。

	HTML：(Hyper Text Markup Language)，超文本标记语言，他继承了SGML的很多优点，但是html是一种界面技术，
	他只使用了SGML中很少的一部分标记，为了便于在计算机上实现，HTML规定的标记是固定的，即HTML语法是不可扩展的。
	html是一种标记语言，不是一种编程语言。

	XML：xml是在html和sgml的基础上诞生的。XML使用一个简单而又灵活的标准格式，为基于Web的应用提供了一个描述数据和交换数据的有效手段。但是，XML并非是用来取代HTML的。
	HTML着重如何描述将文件显示在浏览器中，而XML与SGML相近，它着重描述如何将数据以结构化方式表示。

	XHTML：（eXtensible HyperText Markup Language），是一种标记语言，表现方式与超文本标记语言（html）类似，不过语法上更加严格。
	从继承关系上讲，HTML是一种基于标准通用标记语言（sgml）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言（xml），
	XML是sgml的一个子集。

17.表单如何重置？
	reset

18.H5新增的块元素（语义化标签）
	header(头)
	nav
	article（主体）
	section (部分)
	footer（脚）
    video
    audio

10.form中methods请求方式
	get
		参数拼接在url后面，通过?来分割
		传递参数较少
	post
		参数存放在请求体中，安全
		传递参数更多

19.html核心属性有哪些？
	id class title style

20.placeholder 属性有什么作用？
	提示语，可用在输入框中提示用户信息输入

21.DOCTYPE 的作用是什么？
    告诉浏览器它应该用哪种文档类型定义来解析文档。如果没有doctype声明，那么声明文档的解析类型就是怪异模式，也就是浏览器会按照自己的解析方式去解析，那么在不同的浏览器中就会有不同的样式。所以你的页面添加<!doctype html>,让浏览器按照标准模式解析然后渲染页面。

22.img标签中的alt和title有何异同？
    alt是图片加载失败后，代替图片显示的文字
    title是鼠标划上去显示的内容，其实质是对图片的一种备注或注释

23.简述一下 src 与 href 的区别
    src用于替换当前元素，href用于在当前文档和引用资源间建立联系。
    src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在
    位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片
    和 frame 等元素。
    <script src =”js.js”></script>
    当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行
    完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
    href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）
    或当前文档（链接）之间的链接，如果我们在文档中添加
    <link href=”common.css” rel=”stylesheet”/>
    那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。

24.简述网页制作会用到的图片格式
    png，jpeg，jpg，gif，svg以及webp
    （面试官可能最想听到webp这个结果）
    如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 为了改变现状开辟新局面， Google 给了我们一个新选择：WebP
    webp优势：它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

25.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
    图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
    1.如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
    2.如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
    3.如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
    4.如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

26.HTML5 中的新特性？移除了哪些？如何处理HTML5新标签的浏览器兼容问题
	语义化标签：header、nav、section、article、aside、footer
    表单控件：type取值  number、date、time、email、url、search
    音视频：video、audio
    画布：canvas
    本地离线存储：localStorage、sessionStorage 、cookie

	移除了哪些？
		<basefont> 默认字体，不设置字体，以此渲染
		<font> 字体标签
		<center> 水平居中
		<u> 下划线
		<big> 大字体
		<strike> 中横线
		<tt> 文本等宽
		<frameset>
		<noframes>
		<frame>

	如何处理HTML5新标签的浏览器兼容问题？
		法一：
			1) 使用静态资源html5shiv包
				<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
			2）载入后，初始化新标签的css
				header,footer,nav,aside,article,section{display:block}
		法二：
			IE6及以上版本支持通过document.createElement方法产生新的标签，利用这一特性，让浏览器支持h5新标签

27.


1.Html5与Html4主要区别在哪里？
①	定义
HTML5是应用超文本标记语言(HTML)的第五次修改，HTML4是应用超文本标记语言(HTML)的第四次修改，他们分别是html语言第5和第4版本，HTML4是为了适应时代产生的，HTML5是为了适应移动互联网时代产生的。他们都是w3c（World Wide Web）推荐的标准语言。
②	标签
HTML5相比HTML4代码更加简洁，HTML5的一些新元素、新属性等可以使web开发变的容易简单，比如说HTML5提高了API。HTML5之前有很多功能必须依靠javascript实现，现在使用HTML5元素的标签属性就可以。
由于HTML5在web页面这种大量可代替脚本（javascript）属性使语言变的简单易懂，而仅靠html4需要和javascript配合才能做到。
③	元素
HTML5增加了canvas 元素（绘画）、video 元素（媒体回放）、audio 元素、新的特殊内容元素（article、footer、header、nav、section）、表单控件（calendar、date、time、email、url、search），比如之前用div现在可以用HTML5结构化标签代替，这样使整个页面更加直观，容易理解。
④	标记方法
HTML5语法主要是DOCTYPE（DOCTYPE声明方法：<!DOCTYPE html>）和指定字符编码(对mate元素追加charset属性指定编码：<mate charset="UTF-8">)和html4有所区别。

扩展资料
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。
HTML5技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并且将劣势转化为优势，整体推动整个移动端网页方面的发展。
HTML5最大特色之一就是支持音频视频，在通过增加了<audio>、<video>两个标签来实现对多媒体中的音频、视频使用的支持，只要在Web网页中嵌入这两个标签，而无需第三方插件（如Flash）就可以实现音视频的播放功能。
HTML5对音频、视频文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。


2.Html5新增的标签有哪些？
①<header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。
②<nav>是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
③<article>代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其 他任和独立的内容。
④<section>作为Html文档独立的功能。
⑤<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。
⑥<footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其 相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似， 一个页面中也未限定footer元素的个数。
⑦<address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他 们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
⑧figure& figcaption
⑨details details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。 details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供 的详细数据表格。
⑩summary元素从属于details，用鼠标单击summary元素中的内容文字时，details 元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元 素，浏览器会提供默认文字(详细信息)以供单击。