您的位置: 首页  >  文章  >  前端开发实习面试题（Html篇）（持续更新）

前端开发实习面试题（Html篇）（持续更新）

分类: 文章 • 2023-03-07 15:43:04

1.h1标签和title标签之间的区别是什么？

  • h1标签：写在文章正文的标题部分，是展示给用户看的。一个页面最好只用一个h1，h1用得太多，会稀释主题;一个网站可以有多个title，最好一个单页用一个title以便突出网站页面主题信息。从SEO角度看，title的权重高于h1，其适用性要比h1广。
  • title标签：写在网页的head部分，是展示给搜索引擎看的，搜索引擎的搜索结果中展示的标题就是这个title标签里的内容。h1与title权重的高低比较，title无疑是页面中权重最高的，其次是h1标签。一个好网站是：h1与title并存，既突出h1文章主题，又突出网站主题和关键字，达到双重优化网站的效果。

2.<img>中的title属性和alt属性的区别

alt属性是在图片无法加载的时候才会显示的替代文本，而title是关于元素的注释信息，主要是给用户解读，当鼠标放到文字或是图片上时有title文字显示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。

3.HTTP有哪些请求方法和它们的用途

1.GET方法

  • 发送一个请求来取得服务器上的某一资源

2.POST方法

  • 向URL指定的资源提交数据或附加新的数据

3.PUT方法

  • 跟POST方法很像，也是向服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有

4.HEAD方法

  • 只请求页面的首部

5.DELETE方法

  • 删除服务器上的某资源

6.OPTIONS方法

  • 它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息

7.TRACE方法

  • TRACE方法被用于激发一个远程的，应用层的请求消息回路

8.CONNECT方法

  • 把请求连接转换到透明的TCP/IP通道

4.HTTP状态码及其含义

  • 1XX：信息状态码
    • 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
  • 2XX：成功状态码
    • 200 OK 正常返回信息
    • 201 Created 请求成功并且服务器创建了新的资源
    • 202 Accepted 服务器已接受请求，但尚未处理
  • 3XX：重定向
    • 301 Moved Permanently 请求的网页已永久移动到新位置
    • 302 Found 临时性重定向
    • 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI
    • 304 Not Modified 自从上次请求后，请求的网页未修改过
  • 4XX：客户端错误
    • 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
    • 401 Unauthorized 请求未授权
    • 403 Forbidden 禁止访问
    • 404 Not Found 找不到如何与 URI 相匹配的资源（实际开发中，出现404就表示前端负责的模块出问题了）
  • 5XX: 服务器错误
    • 500 Internal Server Error 最常见的服务器端错误（实际开发中，出现500就是后台或服务器的问题，不关前端的事）
    • 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

5.你对语义化怎么理解？

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

6.介绍一下你对浏览器内核的理解？常见浏览器的内核是什么？

  • 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
  • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
  • JS引擎则：解析和执行javascript来实现网页的动态效果
  • 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。
常见的浏览器内核：前端开发实习面试题（Html篇）（持续更新）

不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。

7.Html5有哪些新特性

Html5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

  • 新增选择器document.querySelector、document.querySelectorAll
  • 拖拽释放(Drag and drop) API
  • 媒体播放的video 和audio
  • 本地存储localStorage 和sessionStorage
  • 离线应用manifest
  • 桌面通知Notifications
  • 语意化标签article、footer、header、nav、section
  • 增强表单控件calendar、date、time、email、url、search
  • 地理位置Geolocation
  • 多任务webworker
  • 全双工通信协议websocket
  • 历史管理history
  • 跨域资源共享(CORS)Access-Control-Allow-Origin
  • 页面可见性改变事件visibilitychange
  • 跨窗口通信PostMessage
  • Form Data 对象
  • 绘画canvas

8.块级元素有哪些？行内元素有哪些？它们的区别是？

常见的block块级元素：

div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

常见的inline内联元素：

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

常见的inline-block内联块元素：

img、input

inline元素、block元素、inline-block元素的区别：

  • 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
  • 块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
  • 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

9.<strong>和<b>的异同；<em>和<i>的异同

<strong>和<b>它们起的都是加粗字体的作用

b标签是一个实体标签，它所包围的字符将被设为bold(粗体)， 而strong标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold(粗体)来实现的。“强调”可以用加粗来强调，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，可以通过css来改变 strong的具体表现。

但是B标签本身不具备HTML语义，如果精通HTML的人很快就会知道这个标签在HTML代码里面只有加粗的意思。Strong标签在HTML语义为强调，表示语气上的强调、加重。从web标准上来说，不提倡使用B标签，不过Google的matt曾经说b标签更具有微小的优势，虽然后来修正为和strong标签优势一样。

就表现而言<em></em>,<i></i>表现都一样，都是表示斜体。

但是<em>标签是“含有语义”的标签，搜索引擎会了解这些语义。其在HTML中是特意被设定为表示“强调”的意思。当发现这些表示“强调”的标签时，一些屏幕阅读器可能使用不同的inflection，更利于SEO。而<i>标签表示对所包含内容显示斜体文本效果。

<strong>和<em>有语义，<b>和<i>则没有。

10.简述一下src与href的区别

  • src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
  • src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部

  • href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
  • <link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式

11.jpg格式和png格式和jpeg格式有什么区别？

  • 二者大小差距很大，png格式的图片所占存储大小明显大于jpg图片多倍以上。
  • png即可移植网络图形格式，也是一种位图文件存储格式，可以进行无损压缩。而jpg是我们最常见的图片格式了，图片占用存储较少，但是也牺牲了图片质量。
  • jpeg格式与jpg格式相似，该种图片格式是文件相对jpg大，因为里面存储了很多相机里的拍摄参数，像色相、饱和度、对比度等；在通常情况下面 jpg与jpeg是一样的，只是里面保存的数据不一样，但我们多数使用的是jpg。

以上皆是本人目前在广州找实习期间（到现在还没找到）亲身经历过的面试题中的Html问题，部分答案源于网上，如有错漏或有更好的答案欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，能够找到自己心仪的工作！

相关推荐