每日五道前端面试题--day18

以下题目来自掘金等其它博客，但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

第18天要刷的面试题如下：

html文档中的注释有几种，分别应该怎么写
img标签的title和alt属性的区别
前端应该注意哪些SEO的知识
type=hidden的作用是什么
说一说svg中的use该如何使用

下面是我的一些理解：

1. html文档中的注释有几种，分别应该怎么写？

html中的注释分为单行的和多行的：

html 复制代码

<!-- 

-->

而style标签中的注释也分为单行和多行：

css 复制代码

/* */

/*


*/

script标签中的注释分也可以分成单行和多行：

js 复制代码

//
console.log(/* print 1 */, 1);

/*

*/

在react中注释可以写成：{/* */}

vue中则写成：

2. img标签的title和alt属性的区别

回答思路：从作用、触发方式、和必要性这些角度回答：

title: 用于提供图像额外的提示信息。当用户鼠标悬停在图像上的时候，浏览器会显示title属性值，title属性不是必要的。
alt: 是图像的替代文本，在图像无法加载的时候，或者用户使用辅助技术时起作用，alt属性是必须的！

3. 前端应该注意哪些SEO的知识

前端工程师可以从下面的几个方面入手改善网页的可访问性/可见性：

使用语义化的标签
使用具有吸引力的标题
设置description或者keywords这样的元信息
优化URL的结构，尽量在其中带上关键词
图像标签上设置带有语义的alt属性
做好网站速度优化
保持对移动端的友好
在网站内部增加关键词的曝光量
做好网站的内部链接和外部链接

4. type=hidden的作用是什么

回答思路：从定义、作用和场景三个角度回答这个问题。定义：hidden是input表单控件的一个隐藏属性，定义了一种隐藏的输入字段类型，使其在页面中不可见。但是在提交表单的时候对表单可见。作用：在表单中包含一些额外的数据，这些数据在用户界面中不需要显示给用户，但在提交表单时需要发送给服务器场景：需要传送额外的数据的时候、需要保持状态信息的时候

5. 说一说svg中的use该怎么使用

在实际的开发过程中，svg通常会先使用symbol注册，然后再通过use使用：

html 复制代码

<svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;"><symbol id="icon-password" viewBox="0 0 1024 1024"><path d="M530.368 64.512a279.04 279.04 0 0 1 278.592 262.976l86.272-0.064c20.736 0 37.568 16.832 37.568 37.568v557.952a37.568 37.568 0 0 1-37.568 37.568H165.568A37.568 37.568 0 0 1 128 922.944V364.992c0-20.736 16.832-37.568 37.568-37.568h86.272a279.04 279.04 0 0 1 278.592-262.912z m327.296 338.048H203.136v482.816H857.6V402.56zM527.168 477.632a166.336 166.336 0 1 1 0 332.672 166.336 166.336 0 0 1 0-332.672z m0 75.136a91.2 91.2 0 1 0 0 182.4 91.2 91.2 0 0 0 0-182.4z m3.2-413.12a203.904 203.904 0 0 0-203.2 187.776h406.464a203.904 203.904 0 0 0-203.264-187.776z"></path></symbol></svg>

使用：

html 复制代码

<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-password"></use></svg>