# HTML 面试基础题 ## 1 简述一下 src 和 href 的区别 ::: details src 表示源地址，用于 img，script、iframe 等元素上，href 表示超文本引用（hypeText reference)，用于 link 和 a 标签上 ::: ## 2 img 标签中的 title 和 alt 属性的区别是什么？ ::: details title 的功能是为元素提供标题信息，以及当光标悬浮在标签上显示的信息；alt 的功能是图片的替换文案，也就是当图片不能正常显示时所显示的文字。 ::: ## 3 简述一下`` `` 和`` ``标签的区别 ::: details 从页面显示效果来看，被`` 和 ``包围的文字将会被加粗，而被 `` 和 `` 包围的文字将以斜体的形式呈现。但是 `` `` 是自然样式标签，分别表示无意义的加粗，无意义的斜体，表现样式为 `{ font-weight: bolder}`，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在 HTML4.01 中并不被推荐使用。而 `` 和`` 是语义样式标签。 `` 表示一般的强调文本，而 `` 表示比 `` 语义更强的强调文本。使用阅读设备阅读网页时：`` 会重读，而 `` 是展示强调内容。 ::: ## 4 在一个特定的框架中如何使用 HTML 中的超链接定位 ::: details 可以使用“target”属性在指定框架中打开被链接的文档 ```html newPage ``` - \_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 - \_self 这个目标的值对所有没有指定目标的``标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题`` 标签中的 target 属性一起使用。 - \_parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 \_self 等效。 - \_top 这个目标使得文档载入包含这个超链接的窗口，用 \_top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。 - frameName 在指定的框架中打开被链接文档。 ::: ## 5 iframe 的优点和缺点 ::: details 优点 - 可以解决加载缓慢的第三方资源，如图标和广告等的加载问题 - 可以实现安全沙箱（[sandbox](https://www.w3school.com.cn/tags/att_iframe_sandbox.asp)）启动一系列对 iframe 中内容的额外限制 - 可以并行加载脚本缺点 - 会阻塞主页面的 Onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况 - 搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO 。 - iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 - 浏览器的后退按钮失效。 - 小型的移动设备无法完全显示框架。 - iframe 元素没有语义 ::: ## 6 图片懒加载原理？有了解与预加载的区别吗 ::: details [**优化首屏体验——Lazy-Load 初探**](http://interview.poetries.top/docs/performance.html#%E5%B0%8F%E7%BB%93-6) 懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。预加载其实是声明式的 `fetch` ，强制浏览器请求资源，并且不会阻塞 `onload` 事件，可以使用以下代码开启预加载 ```js ``` 预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 [**前端性能优化-资源预加载**](https://www.imooc.com/article/78639) 详细资料可以参考： [《懒加载和预加载》](https://juejin.im/post/5b0c3b53f265da09253cbed0) [《网页图片加载优化方案》](https://juejin.im/entry/5a73f38cf265da4e99575be3) ::: ## 7 HTML5 的 form 的自动完成功能是什么？ ::: details autocomplete 属性规定输入字段是否应该启用自动完成功能。默认为启用，设置为 autocomplete=off 可以关闭该功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 autocomplete 属性适用于 `
`，以及下面的 `` 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。 ::: ## 8 title 与 h1 的区别？ ::: details title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响。 ::: ## 9 a 标签的作用以及先后顺序 ::: details [a 标签的作用](https://blog.csdn.net/evenzx/article/details/107723618) a:link,a:visited,a:hover,a:active 分别是什么意思? 1. link: 链接平常的状态 2. visited:链接被访问过之后 3. hover:鼠标放到链接上的时候 4. active:链接`被按下的时候` 注意： 1. active 一般不必写 2. 四种状态控制一定要按照 LVHA 的顺序写这四个伪类的优先级相同，写在后边的会覆盖前边因为前 2 者两种状态是常态，而后 2 者是即时状态，当即时状态触发时，要覆盖常态，所以 2 个即时状态要放在后边 3. link 可以省略 4. 当 ``标签的 href 属性为空或者#的时候，顺序没关系。正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active . 因为当鼠标经过未访问的链接，会同时拥有 a:link、a:hover 两种属性，a:link 离它最近，所以它优先满足 a:link，而放弃 a:hover 的重复定义。当鼠标经过已经访问过的链接，会同时拥有 a:visited、a:hover 两种属性，a:visited 离它最近，所以它优先满足 a:visited，而放弃 a:hover 的重复定义。究其原因，是 css 的就近原则“惹的祸”。其实本质还是“同等优先权的样式，写在后边的会覆盖前边”，a 标签的伪类只不过是又结合了不同的动作顺序，动作的触发顺序决定了伪类的顺序必须按 lvha 来写。 **下面结合这 4 个伪类简单说下：** 因为前 2 者两种状态是常态，而后 2 者是即时状态，当即时状态触发时，要覆盖常态，所以 2 个即时状态要放在后边；因为在常态下：如果 a 标签被访问过后，就要呈现被访问过的状态，所以 visited 要放在 link 后边；因为鼠标按下时，伴随着悬停的 a 标签上，所以要想 active 覆盖 hover，就必须把 active 放后边；。 ::: ## 10 HTML5 不再支持哪些元素 ::: details **TML5 中已经不支持以下的元素，不建议在进行开发时再使用以下的元素。** 1. acronym(建议 abbr):定义首字母缩写 2. applet(建议 object):定义 applet 3. basefont(使用 CSS 控制) 4. big(使用 CSS 控制):定义大号文本 5. center(使用 CSS 控制):定义居中文本 6. font(使用 CSS 控制) 7. strike(使用 del):定义加删除线的文本 8. tt(使用 CSS 控制):定义打印机文本 9. u(使用 CSS 控制):定义下划线文本 10. frame(建议 iframe):定义子窗口框架 11. frameset:定义框架集 12. noframes:定义 noframe 13. dir：定义目录元素 14. `