关注我 么么哒

【前端】常见面试题——HTML篇

  • 作者:smile
  • 学无止境
  • 时间:Wed May 20 2020 18:32:38 GMT+0800 (China Standard Time)
  • 46人已阅读
简介 前端面试题 HTML 篇

1.前端需要注意哪些SEO

  • 合理的 titledescriptionkeywords:搜索对着三项的权重逐个减小,title 值强调重点即可,重要关键词不要超过2次,而且要靠前,不同页面 title 要有所不同;description 把页面内容高度概括,长度适合,不可过分堆砌关键词,不同页面的 description 有所不同;keywords 列出重要关键词即可。
  • 语义化的 HTML 代码,符合W3C 规范:语义化代码让搜索引擎理解网页
  • 重要的 HTML代码放在最前面:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引擎对抓取长度走限制,保证重要内容一定会被抓取
  • 重要内容不要用 js 输出:爬虫不会执行 js 获取内容
  • 少用 iframe :搜索引擎不会抓取 iframe 中的内容
  • 非装饰性图片必须加 alt
  • 提高网站速度:网站速度是搜索引擎排序的一个重要指标

2. HTML 语义化

HTML 与细化就是让页面内容结构化,它有如下优点:

  1. 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构
  2. 有利于 SEO ,搜索因年轻根据标签来确定上下文和各关键词的权重
  3. 方便其他设备解析,如盲人阅读器根据语义渲染网页
  4. 有利于开发和维护,语义化更具有可读性,代码更好维护,与 CSS3 关系更加和谐

如:

  • header 代表头部
  • nav 代表超链接区域(导航栏)
  • main 定义文档的主要内容
  • article 可以表示文章、博客等内容
  • footer 代表尾部

3. H5 新特性

  • canvas 绘图
  • svg 绘图
  • videoaudio
  • Web Worker :运行在后台的 js ,独立于其他脚本,不会影响页面的性能
  • Web Storage
  • Cookie 技术(兼容性不好,数据不能超4kb,操作复杂)
  • session Storage (兼容性较差,数据8MB,操作简单)
  • WebSocket:协议基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——允许服务器主动发信息给客户端
  • 语义化更好的内容元素:article footer header nav section
  • 表单控件 calendar date time email url search

移除的元素:

  • 纯表现的元素 basefont big center font s strike tt u
  • 对可用性产生负面影响的元素:frame frameset noframes

4. img  的 titlealt 有啥区别

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

5. 页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

  1. 输入域名地址
  2. 发送至 DNS 服务器并获得域名对应的 WEB 服务器 IP 地址
  3. 与 Web 服务器简历 TCP 链接
  4. 服务器永久重定向响应
  5. 浏览器跟踪重定向地址
  6. 服务器处理请求
  7. 服务器返回一个 HTTP 响应
  8. 浏览器显示 HTML
  9. 浏览器发送请求获取的资源(如图片、音频、视频、CSS、JS等)
  10. 浏览器发送异步请求

简便:

  1. 浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求
  2. 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图像等)
  3. 浏览器对加载得到的资源进行语法解析,建立对应的内部结构
  4. 载入解析到的资源文件,渲染页面,完成

6.介绍一下对浏览器内核的理解 

主要分为两个部分:渲染引擎 和 js引擎

渲染引擎:负责取得网页的内容,整理讯息,以及计算网页的显示方式,然后回输出至显示器或打印机。浏览器的内核的不同对网页的语法解释会有不同,所以渲染的效果也不同。所哟网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核

js引擎:解析和执行 javascript 来实现网页的动态效果

最开始渲染引擎和js引擎并没有区分的很明确,后来js引擎越来越独立内核就倾向于只指渲染引擎

7.请描述一下 cookies,sessionStorage 和 localStorage 的区别

  • cookie 是网站为了表示用户身份而存储在本地终端上的数据
  • cookie 数据在同源的 http 请求中携带(即使不需要),即会在浏览器和服务器之间来回传递
  • sessionStorage 和 localStorage 不会自动把数据发给服务器,仅会在本地保存

存储大小

  • cookie 数据大小不能超过 4k
  • sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大

有效时间

  • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除
  • cookie 设置的 cookie 过期时间之前一直有效,即使窗口关闭或浏览器关闭

8.浏览器同源政策

同源:

  1. 协议相同
  2. 域名相同
  3. 端口相同

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

如果非同源,共有三种行为受到限制:

  1. Cookie、LocalStorage 和 IndexDB 无法读取。
  2. DOM 无法获得。
  3. AJAX 请求不能发送。

9.静态网页和动态网页的区别

静态:网页内容任何人在任何时间访问都是不变的

动态:网页内容不同人在不同时间访问可能是不同的

10. iframe 有哪些缺点

  • iframe 会阻塞主页面的 Onload 事件。搜索页引擎检索程序无法解读这种页面,不利于 SEO
  • iframe 和 主页面共享连接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载

使用 iframe 之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe 添加 src 属性值,这样可以烧开以上两个问题

11.Web 标准以及 W3C 标准是什么

  • 标签闭合
  • 标签小写
  • 不乱嵌套
  • 使用外链 css 和 js
  • 结构 行为 表现 分离

12. xhtml 和 html 有什么区别

功能上:

主要是 XHTML 可兼容各大浏览器,手机以及PDA,并且浏览器也能快速正确地编译网页

书写习惯上:

XHTML 元素必须正确地嵌套,闭合,区分大小写,文档必须拥有根元素

13.Doctype 作用?严格模式与混杂模式如何区分?他们有何意义?

  • 页面被加载时,link 会同时被加载,而@import 引用的 CSS 会等到页面加载完再加载
  • import 只在 IE5 以上才能识别,而 link 是 XHTML 标签,无兼容问题
  • link 方式的样式权重高于 @import 的权重
  • < !DOCTYPE > 声明位于文档中的最前面,处于 <html> 标签之间。告知浏览器的解析器,用什么文档类型规范来解析这个文档
  •  严格模式的排版和 js 运作模式是:以浏览器支持的最高标准运行
  • 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  • DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现

14.行内元素有哪些?块级元素有哪些?空元素有哪些?行内元素和块级元素有什么区别?

行内元素:a b span img input select strong

块级元素:div ul ol li dl dt dd h1 h2... p

空元素 br hr img input link meta

 

行内元素:不可以设置宽高,不独占一行

块级元素:可以设置宽高,独占一行

15. HTML 全局属性有哪些

  • class
  • data-*
  • draggable
  • id
  • lang
  • style
  • title
 

上一篇:【js】闭包问题

下一篇:【前端】

文章评论