前端面试题总结——HTML及HTML5篇

一、什么是 DOCTYPE ,有什么作用？

DOCTYPE标签是一种标准通用标记语言的文档类型声明，他的目的是要告诉浏览器使用哪种规范来解析文档。

DOCTYPE的具体作用：

• 规划浏览器行为：DOCTYPE声明通过指定文档类型，强制浏览器按照W3C标准解析和渲染页面
• 确保跨浏览器一致性：DOCTYPE确保不同浏览器以统一标准解析页面，减少因不同内核导致的渲染差异
• ‌区分严格模式与混杂模式
  • ‌严格模式‌：浏览器完全遵循HTML规范，对代码错误处理更严格，渲染结果更统一。
  • 怪异模式‌：浏览器会开启最大兼容模式来解析文档，可能导致布局和样式差异。

DOCTYPE版本：

• Html4.01
  • Strict：禁止使用表现层元素（例如 <font> 和 <center>），必须使用css进行样式控制
  • Transitional：允许使用一些被废弃的html元素和属性（例如 <font> 和 <center>）
  • Frameset：用于包含框架的页面。
• Xhtml1.0:
  • Strict：与 HTML 4.01 Strict 类似。
  • Transitional：与 HTML 4.01 Transitional 类似。
  • Frameset：与 HTML 4.01 Frameset 类似。
• Html5

二、 HTML 语义化的理解？

• html的语义化是指在合适的地方使用合适的标签，使得页面结构清晰，易于理解
• 语义化使得在没有css的情况下也能展示清晰的结构
• 语义化有利于seo，与搜索引擎建立良好的沟通
• 方便团队的开发与维护，减少差异化

三、‌ HTML 、 XML 、 XHTML 的区别是什么？‌

•  HTML ：是最常见的标记语言之一，用于创建网页的结构和内容，使用预定义的标签来定义文档的结构，HTML相对宽松，对语法和标签的使用有一定的灵活性。
  • 特点：
    • HTML用于创建网页的结构和内容
    • 允许一些不严格的语法，比如标签不闭合，不区分大小写
    • 常见的文件扩展名是 .html 和 .htm 
•  XHTML ：是HTML的一种更严格，更规范的版本，基于XML语法。他要求所有的标签必须被正确的嵌套和闭合，并且属性值要用引号括起来。XHTML的目标是使HTML更加模块化，可扩展和符合XML标准。
  • 特点：
    • XHTML是HTML的一种更严格的形式，基于XML语法
    • 所有的标签必须被正确的嵌套和闭合
    • 属性值必须用引号括起来
    • 常见的文佳扩展名是  .xhtml 
•  XML ：是一种通用的标记语言，用于描述数据的结构。与HTML和XTML不同，XML不是用于显示网页的，而是用于存储和传输数据，XML没有预定义的标签，允许用户自定义标签，灵活性高。
  • 特点：
    • XML用于描述数据的结构
    • 没有预定义的标签，允许用户自定义标签
    • 常见的文件扩展名是  .xml 

四、标签属性 src 和 href 的区别？

•  src ：指向的外部资源会下载到本地并嵌入到当前位置，当浏览器解析到该元素时，会暂停其他资源的下载，直到该资源被执行完毕
  • 常用于 img ， script ， video ， audio等元素中
•  href ：用来指向一个外部链接，当浏览器识别到该属性时，会并行下载该资源，不会停止对当前文章的处理

五、 title 与 h1 ， b 与 strong ， i 与 em 元素分别有什么区别？

• title 与 h1 的区别： 
  •  title  ：用于指定当前网页的标题，显示在浏览器的标题栏或标签页上，对seo非常重要
  •   h1  ：用于概括文章或者段落的一级标题
•  b 与 strong 的区别