众号【传智播客博学谷】回复关键词：前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料！

一、HTML

1、<image>标签上title属性与alt属性的区别是什么？

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》

2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体

加粗：<b>、<strong>

下标：<sub>

居中：<center>

字体：<font>、<basefont>、参考《HTML标签列表》

3、请写出至少5个html5新增的标签，并说明其语义和应用场景

section：定义文档中的一个章节

nav：定义只包含导航链接的章节

header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

参考《HTML5 标签列表》

4、请说说你对标签语义化的理解？

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。

在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

6、你知道多少种Doctype文档类型？

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，

Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

7、HTML与XHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被关闭。

c. 标签名必须用小写字母。

d. XHTML 文档必须拥有根元素。

参考《XHTML 与 HTML 之间的差异》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签（header,nav,footer,aside,article,section）

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件，calendar、date、time、email、url、search

j. 新的技术webworker, websocket等

移除的元素：

a. 纯表现的元素：basefont，big，center, s，strike，tt，u；

b. 对可用性产生负面影响的元素：frame，frameset，noframes；

9、iframe的优缺点？

优点：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点：

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面，不容易管理。

参考《iframe的一些记录》

10、Quirks模式是什么？它和Standards模式有什么区别？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：总体会有布局、样式解析和脚本执行三个方面的区别。

a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用

d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

11、请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

参考《为什么说table表格布局不好？》

12、简述一下src与href的区别

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

公众号【传智播客博学谷】回复关键词：前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料！

读：

什么是对话UI？

如何建立一个对话网站

为什么会话界面更好

为什么会话界面是未来的

在我们迈向未来之前，让我们先回到历史。

你有没有想过世界上第一个网站是什么样的？是谁创造了它？嗯，世界上第一个网站是由Tim Berners Lee爵士在1991年推出的。这是一个简单的网页，里面有一些文字和超链接。您可以点击此链接查看它。

从1991年的那个温和的开始，我们已经走了27年，在网页设计领域发生了一些非凡的转变。无论是微软1996年推出的第一款浏览器，还是1996年推出的CSS和Flash（以及最近几年），响应式设计的需求，都在网页设计的演变中发挥了作用。

现在，我们正在进入网页设计的未来，会话界面将成为现代移动第一网站的关键。

什么是对话UI？

对话界面被正确地称为“未来的用户界面”。谷歌，亚马逊和苹果等全球领导者已经开发了智能网站，可以使用对话界面处理客户查询。

事实上，几年前谷歌开发了一个可以与用户讨论生活意义的聊天机器人 - 它的开发人员并没有通过代码构建它，而是使用机器学习算法来研究现有的对话 - 即电影对话以教会它回应来自考虑生命更深层含义的用户的询问。

会话界面是能够模仿与真人交谈的平台。这意味着，用户可以使用相同语言与机器进行交互，就好像他们正在与人通信一样。这在自然语言处理的帮助下发生，其允许计算机从用户输入或说出的单词理解，分析和创建意义。

使用键盘开始的UI的演变使用像DOS这样的命令级语言来输入可以被计算机轻易理解的命令。从那时起，我们已经从用于输入数据的基本输入设备转变为更加强大的平台，不需要数据输入，而是通过语音，手势等输入可以满足用户命令。现在，随着Apple的Siri和亚马逊的Echo的推出，计算机能够轻松理解用户的语言，无论是像Siri这样简单的需求，告诉我温度在外，更复杂的请求，比如Google可以预约我预约在女士美发沙龙。

在看到现代网站的世界存在之后，您可以忘记按钮，因为彩色按钮的时代即将结束。相反，聊天机器人和语音助理等对话界面将为未来的网站注入活力。

但是不要相信我的话。以下是一些使用Chatbots大幅提高生产力的现代品牌：

• 受欢迎的乘车欢呼服务Lyft让您通过打字/ lyft home通过Slack等工具预订游乐设施。
• Sephora是一个知名的个人护理品牌，可让您与其KIK机器人VIA平台互动，以获取产品信息，观看教程等。
• 1-800花。着名的花卉和美食食品企业有一个非常对话的网站，通过花卉安排场景，您可以选择您喜欢的订单。

这里的观点是，很多流行品牌已经在很长一段时间内尝试了对话网站的概念，随着在线服务性的提升，品牌有望建立全方位的数字体验。

越来越多的品牌看到机器人驱动的网站，应用程序等不仅仅是棘手的技术，而是作为必不可少的客户管理资产，可以帮助他们降低成本并提高在线流量。

如何建立一个对话网站

会话网站是一个简单的网站，它使用聊天机器人（语音或文本）与用户进行交互。关键在于创建一个与访客真正交谈的网站。坚持设计网站的基本规则，然后添加互动功能。他或她应该感觉他们正在与一个真正的人而不是机器人进行交互。

只需将聊天机器人添加到现有站点，即可将无聊的网站转换为未来的网站。聊天机器人可以是两种类型，即文本聊天机器人和语音聊天机器人。让我们来了解这些。

• 基于文本的聊天机器人 - 文本聊天机器人以文本形式收集数据，处理它们并以文本形式返回结果。您可以使用名为Python的语言创建文本聊天机器人。这是一个用Python编写机器人的交互式指南。
• 基于语音的聊天机器人 - 语音聊天机器人以语音形式收集数据，处理它们并以语音形式返回结果。您可以使用本教程创建支持语音的Android聊天机器人。

如果您不想将头脑撞到代码中，那么您可以选择更方便的选项。您可以在chatbot构建器的帮助下轻松创建聊天机器人。

Amazon Lex是为您的网站构建会话界面的顶级解决方案。它使用与Alexa相同的技术，使您能够快速轻松地构建复杂的自然语言聊天机器人。

除了亚马逊Lex之外，还有像Collect.chat这样的其他建设者可以帮助您为您的企业构建自定义的聊天机器人。通过后端的强大算法，聊天机器人可以与访问者互动，了解他们的要求并向他们推荐最好的产品或服务。

为什么会话界面更好

与传统界面相比，会话界面总是更好，因为它们有助于减少沟通中的摩擦，人们可以用最舒适的语言轻松沟通，从而带来更好的用户体验和更高的销售额。

• 据估计，大约83％的购物者在网上购物时需要帮助。因此，聊天机器人可以帮助他们在最短的时间内选择最好的产品。
• 聊天机器人可以一次处理多个请求，因此等待时间减少到NIL。因此，企业可以扩大业务规模，从而提高收入。
• 会话界面有助于产生更好的潜在客户，并有助于领导培育。
• 聊天机器人为每个用户增加了个性化体验，从而提高了客户满意度。这样可以提高投资回报率并增加口碑推荐。
• 客户可以使用可为您的业务带来可观收入的同一平台轻松付款。
• 聊天机器人从不睡觉，因此您可以期待客户互动全天候进行。这有助于提高品牌价值和增加客户保留率。

为什么会话界面是未来的

会话界面越来越受欢迎，并且没有回归。未来的网站将拥有由语音助理和聊天机器人提供支持的简单界面。能够建立网站，为客户提供更好的体验，让他们打字或说少，获得即时但准确的建议的企业必将获胜。

TML 5.2<dialog>为本机模态对话框引入了一个新元素。乍一看，它看起来相当简单（而且确实如此），但是当我一直在玩它时，我发现它有一些很容易错过的好功能。

在本文末尾提供了一个完整的工作演示，

这是基本对话框的标记：

该open属性表示该对话框可见。没有它，对话框将被隐藏，直到您使用JavaScript来显示它。在添加任何样式之前，对话框呈现如下：

它绝对位于页面上，因此它会像您期望的那样出现在其他内容的前面，并且水平居中。默认情况下，它与内容中的内容一样宽。

基本操作

JavaScript有一些方法和属性可以轻松地使用<dialog>元素。你可能最需要的两种方法是showModal()和close()。

当您使用showModal()打开对话框时，会向页面添加背景，阻止用户与模态外部的内容进行交互。默认情况下，此背景是完全透明的，但您可以使用CSS显示它（更多信息如下）。

按Esc将关闭对话框，您可以提供关闭按钮来触发该close()方法。

还有第三种方法，show()也可以使模态出现，但没有伴随的背景。用户仍然可以与对话框外可见的元素进行交互。

浏览器支持和Polyfill

目前，<dialog>Chrome只支持行为。Firefox提供默认样式，但JavaScript API仅在标志后面启用。我怀疑Firefox很快会默认启用它。

值得庆幸的是，有既提供JavaScript行为，又提供具有默认样式的样式表。dialog-polyfill在npm中安装以使用它 - 或使用常规旧<script>标签。它适用于IE9及以上版本。

使用polyfill时，页面上的每个对话框都需要初始化：

这不会取代拥有它的浏览器的本机行为。

对话框样式

打开和关闭模态很不错，但最初它看起来不太专业。添加样式就像设置任何其他元素一样简单。可以使用新的::backdrop伪元素设置背景样式。

对于使用polyfill的旧浏览器，此伪元素选择器将不起作用。在其位置，polyfill会.backdrop在对话框后立即添加元素。您可以使用CSS来定位它：

添加一点标记以提供样式挂钩。对话框的常用方法是将其分解为标题，正文和页脚：

为此添加一些CSS，您可以根据需要制作模态外观：

更多控制

通常，我们希望从对话框中获得某种用户反馈。关闭对话框时，可以将字符串值传递给close()方法。此值分配给returnValue对话框DOM元素的属性，因此可以在以后读取：

还有一些你可以听的活动。两个有用的是close（当模态关闭cancel时触发）和（当用户按下Esc以关闭模态时触发）。

似乎缺少的一件事是在单击背景时关闭模态的能力，但有一种解决方法。单击背景会触发具有<dialog>事件目标的单击事件。如果构造模态以使子元素填充对话框的整个空间，那么这些子元素将成为对话框内任何单击的目标。这样，您可以侦听对话框上的单击，并在对话框本身是click事件的目标时关闭它：

这并不完美，但它确实有效。如果您找到更好的方法来检测背景上的点击次数，请与我们联系。

完整的工作演示

下面是演示地址：http://www.ikinsoft.com/demo/dialog/dialog.html