2019 HTML 面试题

HTML

• img标记属于什么类型元素？
  答：属于行内(inline)元素

• 结构标记有哪些？他们与div有什么相同之处，又有什么不同之处？
  答：header，nav，section，aside，footer，article
  都是用来做布局的，但结构标记提高了语义性和可读性

• 行内元素，块元素，空元素有哪些？
  答：（1）行内元素：
  a， span，i，img，b ,s,u，sup,sub,label
  （2）块元素：
  div ，dl，dt，dd，ul，li，ol，p，h1，h2，h3，h4，h5，结构标记
  （3）空元素：
  br-换行，hr-水平分割线

• 什么是前端？
  答：用HTML/CSS/JavaScript以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口，也可以独立工作完成强用户交互的各类应用。

• HTML、CSS、JavaScript的作用是什么，为什么会产生这三种语言？
  答：这三种语言都是用来编写网页的，HTML用于搭建网页结构展示内容，CSS用于修饰HTML元素，JavaScript用于添加网页的交互验证。

• 说说 HTML5 的新特性，平时使用过哪些？
  答：H5新特性：
  结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。

• 说说 CSS3 的新特性，平时使用过哪些？
  答：CSS3新特性：
  复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。

• Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
  答：（1） 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
  （2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
  （3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  （4）DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

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

• iframe 有那些缺点
  答：iframe 会阻塞主页面的 Onload 事件；
  iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的
  并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是
  通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。

• 对 WEB 标准以及 W3C 的理解与认识
  答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构与行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

• XHTML 和 HTML 有什么区别？
  答：HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言最主要的不同：
  XHTML 元素必须被正确地嵌套。
  XHTML 元素必须被关闭。标签名必须用小写字母。
  XHTML 文档必须拥有根元素。

• img 标签上 title 与 alt 属性的区别是什么?
  答：alt ,当图片不显示时，在图片位置所显示的文字。
  title,鼠标移入到元素上时，为该元素添加提示信息。

• 你如何对网站的文件和资源进行优化?
  答：解决方案包括：文件合并、文件最小化/文件压缩、使用 CDN 托管、缓存的使用