前端开发实习面试题（HTML篇）

深碍√TFBOYSˉ_ 2022-11-28 05:56 181阅读 0赞

## 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.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`

## 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.和的异同；和的异同 ##

和它们起的都是加粗字体的作用

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

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

就表现而言,表现都一样，都是表示斜体。

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

**和有语义，和则没有。**

## 9.简述一下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`方式

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

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

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

[前端][Link 1]开发交流QQ群：761614159

求职[前端][Link 1]开发的小伙伴可以进群交流一下！

[Link 1]: https://www.nowcoder.com/jump/super-jump/word?word=%E5%89%8D%E7%AB%AF