HTML相关面试题汇总 #

语义化的理解 #

• 用正确的标签做正确的事情。
• HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
• 在没有样式 CSS 的情况下也以一种文档格式显示，并且是容易阅读的。
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

HTML 语义化标签有哪些 #

HTML语义化标签是指在编写 HTML 页面时，使用具有结构和含义的标签来描述内容的语义化方法，使得页面结构更加清晰易读，同时也有助于搜索引擎优化以及提高网站的可访问性。

• 1. <header>：定义一个文档或者一个区域的页眉部分。
• 2. <nav>：定义一个页面导航链接的容器。
• 3. <main>：定义文章、页面主要内容的容器。
• 4. <section>：定义一个章节（section）。
• 5. <article>：定义一篇独立的文章内容块。
• 6. <aside>：定义一个辅助信息的区域。
• 7. <footer>：定义一个文档或者一个区域的页脚部分。
• 8. <address>：定义联系人信息的区域。
• 9. <time>：定义日期或者时间信息。
• 10. <figure>：定义一块嵌入式的内容，比如图片和图表，并且可以使用<figcaption>元素为这个内容添加标题。
• 11. <h1>-<h6>：定义标题级别。<h1>元素用于主标题，<h2>用于子标题，以此类推。
• 12. <p>：定义段落文本。
• 13. <ul>和<ol>：分别定义无序列表和有序列表。
• 14. <li>：定义列表项。
• 15. <div>：定义文档中的一个分区或节（section），在 HTML5 中不再是语义化标签，但它仍然是最常用的容器标签之一。
• 16. <blockquote>：定义一个长的引用块。
• 17. <cite>：定义引用的来源，通常用于书籍、电影、音乐等的标题。
• 18. <q>：定义一个短的内联引用块。
• 19. <abbr>：对缩写词或首字母缩略词进行标记，并可提供完整解释。
• 20. <dfn>：定义一个专业术语或代码段。
• 21. <em>：强调文本，将文本呈现为斜体。
• 22. <strong>：强调文本，将文本呈现为加粗。
• 23. <code>：定义计算机代码文本，通常使用等宽字体显示。
• 24. <pre>：定义预格式化文本，通常使用等宽字体显示且保留空格和换行符。
• 25. <datalist>：定义一个选项列表，提供给输入框作为自动完成提示。
• 26. <details>：定义一个可折叠的内容块，并提供一个摘要标题。
• 27. <summary>：定义一个 details 元素的摘要标题。
• 28. <fieldset>：定义一个表单内的一个组合数据的容器，可以使用 <legend> 标签添加标题。
• 29. <legend>：定义一个 fieldset 元素的标题。
• 30. <meter>：定义一个已知范围内的度量，如磁盘空间、文件下载进度等。
• 31. <progress>：定义任务的完成进度。
• 32. <output>：定义某个表单元素或按钮的输出结果。

<img> 的title 和 alt 有什么区别？ #

• title 是当鼠标滑动到元素上的时候显示
• alt 是 <img> 的特有属性， 是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片的可访问性，除了纯装饰图片外必须设置有意义的值，搜索引擎会重点分析。