前端开发实习面试题(HTML篇)(持续更新)

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.Html5有哪些新特性

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

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

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

常见的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%,而内联元素则是根据其自身的内容或子元素来决定其宽度。

8.<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>则没有。

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

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

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

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

10.jpg格式和png格式和jpeg格式有什么区别?

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

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

猜你喜欢

转载自blog.csdn.net/weixin_43804496/article/details/108046767