HTML---html面试题

这篇具有很好参考价值的文章主要介绍了HTML---html面试题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.src与href的区别

1使用元素不同src表示源地址,用在img、script、iframe等元素上。href表示超文本引用,用在link和a等元素上。

2src的内容是页面必不可少的一部分,表示引入。href的内容与该页面有关联,表示引用。简单来说,区别就是引入和引用href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

2.静态网页和动态网页

静态网页是指没有数据交互(没有数据库参与,没有服务器数据的加载)的网页,

动态网页指有后台数据参与的网页,比如JSP、ASP页面等

3.DOCTYPE有什么作用

<!DOCTYPE>声明位于文档中的最前面,位于<html>标签之前,即告知浏览器的解析器,用什么文档类型规范来解析这个文档。DOCTYPE不存在或格式不正确都会导致文档以混杂模式呈现。​​​​​​​

4.HTML语义化的理解

主要目的用正确的标签做正确的事,语义化标签如<header><section><footer>等。

  • 页面结构化,使阅读网站源代码的人能够快速理清HTML文档的结构,便于学习和后期维护
  • 可读性好,即使在没有样式的情况下也以一种文档的格式在用户面前展示,用户容易理解阅读
  • 有利于SEO,因为搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重

5.锚点的作用及如何创建锚点

锚点是文档中某行的一个记号,类似于书签,用于链接到文档中的某个位置。当定义锚点后,可以创建直接跳转至该锚点的链接,这样无须通过滚动页面来寻找

<a name="info">个人信息</a>

<a href="#info">跳转个人信息</a>

<h1 id="info">个人信息</h1>

<a href="#info">跳转个人信息</a>

6.html5新特性

HTML5 现在已经不是 SGML 的子集,主要是关于图像画布,音频视频,存储,语义化标签,表单控件,多任务,位置等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

(4)sessionStorage 的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素,比如 article、footer、header、nav、section;

(6)表单控件,calendar、date、time、email、url、search;

(7)新的技术webworker, websocket, Geolocation;

7.如何处理HTML5新标签的浏览器兼容问题?

IE6/IE7/IE8支持通过document.createElement方法产生的标签,

可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。

也可以直接使用成熟的框架、比如html5 shim;

< !--[if lt IE 9]> < script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> < ![endif]-->

8.如何区分 HTML 和 HTML5?

在文档声明上,HTML代码很长,而HTML5只有简简单单的声明。

HTML4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5.0

<!DOCTYPE html>

在结构语义上,HTML4.0:没有体现结构语义化的标签,HTML5:在语义上却有很大的优势。提供了一些新的HTML5标签比如:<header> 、<nav>、<article>、<aside>、<footer>等

9.对SSR有了解吗,它主要解决什么问题?

Server-Side Rendering 我们称其为SSR,意为服务端渲染指由服务侧完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可交互页面的过程;解决了以下两个问题:

seo:搜索引擎优先爬取页面HTML结构,使用ssr时,服务端已经生成了和业务想关联的HTML,有利于seo

首屏呈现渲染:用户无需等待页面所有js加载完成就可以看到页面视图(压力来到了服务器,所以需要权衡哪些用服务端渲染,哪些交给客户端)

10.服务端和客户端渲染的区别

  • 二者本质的区别:是谁来完成了html的完整拼接,服务端渲染是在服务端生成DOM树,客户端渲染是在客户端生成DOM树。
  • 响应速度:服务端渲染会加快页面的响应速度,首屏渲染快,客户端渲染页面的响应速度慢。
  • SEO优化:服务端渲染因为是多个页面,更有利于爬虫爬取信息,客户端渲染不利于SEO优化。
  • 开发效率:服务端渲染逻辑分离的不好,不利于前后端分离,开发效率低,客户端渲染是采用前后端分离的方式开发,效率更高,也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染:

源码里如果能找到前端页面中的内容文字,那就是在服务端构建的DOM,就是服务端渲染,反之是客户端渲染。

应该使用服务端渲染还是客户端渲染:

我们要根据业务场景去选择渲染的方式。

如果是企业级网站,主要功能是页面展示,它没有复杂的交互,并且需要良好的SEO,那我们应该使用服务端渲染。

如果是后台管理页面,交互性很强,它不需要考虑到SEO,那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的,现在很多网站使用服务端渲染和客户端渲染结合的方式:首屏使用服务端渲染,其他页面使用客户端渲染。这样可以保证首屏的加载速度,也完成了前后端分离。文章来源地址https://www.toymoban.com/news/detail-836807.html

到了这里,关于HTML---html面试题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 高频前端面试题汇总之HTML篇

    1. src和href的区别 src和href都是 用来引用外部的资源 ,它们的区别如下: src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内,如请求js脚本。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源

    2024年04月26日
    浏览(25)
  • 前端面试:【HTML】语义化标签、表单、媒体元素

    HTML(超文本标记语言)是构建网页内容的基础,它通过一系列标签来描述页面的结构和内容。在这篇文章中,我们将探讨HTML的基础知识,包括语义化标签、表单和媒体元素。 语义化标签:赋予内容更多意义 语义化标签是指在编写HTML代码时,使用具有实际含义的标签,以便

    2024年02月12日
    浏览(47)
  • 前端面试题-HTML、、web综合问题(四)

    1 css sprite是什么,有什么优缺点 概念:将多个⼩图⽚拼接到⼀个图⽚中。通过 background-position 和元素尺⼨调节需要显示的背景图案。 优点: 减少 HTTP 请求数,极⼤地提⾼⻚⾯加载速度 增加图⽚信息重复度,提⾼压缩⽐,减少图⽚⼤⼩ 更换⻛格⽅便,只需在⼀张或⼏张图⽚上

    2024年02月13日
    浏览(42)
  • 前端基础面试题(HTML,CSS,JS)

    前后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库  web前端面试题库 VS java后端面试题库大全 代码结构:  使页面在没有css的情况下,也能够呈现出好的内容结构 有利于SEO:  爬虫根据标签来分配的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓

    2024年02月09日
    浏览(39)
  • 前端面试题-HTML、HTTP、web综合问题(二)

    14 WEB标准以及W3C标准是什么? 标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离 15 xhtml和html有什么区别? ⼀个是功能上的差别 主要是 XHTML 可兼容各⼤浏览器、⼿机以及 PDA ,并且浏览器也能快速正确地编译⽹⻚ 另外是书写习惯的差别 XHTML 元素必须被

    2024年02月12日
    浏览(37)
  • 前端面试题-HTML、HTTP、web综合问题(三)

    26 你做的⻚⾯在哪些流览器测试过?这些浏览器的内核分别是什么? IE : trident 内核 Firefox : gecko 内核 Safari : webkit 内核 Opera :以前是 presto 内核, Opera 现已改⽤Google - Chrome 的 Blink 内核 Chrome:Blink (基于 webkit ,Google与Opera Software共同开发) 27 div+css的布局较table布局有什么优点?

    2024年02月13日
    浏览(45)
  • 常见前端基础面试题(HTML,CSS,JS)(三)

      类型转换可以分为两种, 隐性转换 和 显性转换 主要分为三大类:数值类型、字符串类型、布尔类型 三大类的原始类型值的转换规则我就不一一列举了 数值类型(引用类型转换) 字符串类型(引用类型转换) 类型 转换前 转换后 number 4 4 string \\\"1\\\" 1 string \\\"\\\" 0 boolean true 1 b

    2024年02月12日
    浏览(43)
  • 前端面试题-HTML、HTTP、web综合问题(一)

    1 前端需要注意哪些SEO 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减⼩, title值强调重点即可,重要出现不要超过2次,⽽且要靠前,不同⻚⾯ title 要有所不同; description 把⻚⾯内容⾼度概括,⻓度合适,不可过分堆砌,不同⻚⾯description 有所

    2024年02月12日
    浏览(35)
  • ChatGPT给出的前端面试考点(html+css+JS)

    HTML HTML是什么,它的主要作用是什么? 什么是DOCTYPE,为什么在HTML文档中使用它? HTML5相对于之前的HTML版本有哪些主要的新特性? 解释语义化HTML的概念。为什么要使用语义化标签? 如何在HTML中嵌入JavaScript和CSS? 什么是表单,如何在HTML中创建一个表单? 什么是响应式图片

    2024年01月21日
    浏览(45)
  • 前端面试:常见的HTML、CSS和JavaScript问题解答

    前端开发面试中,HTML、CSS和JavaScript是必考点。以下是常见的HTML、CSS和JavaScript问题的解答,希望能对前端开发者的面试有所帮助。 文档类型(doctype)的作用是什么? 文档类型用来告诉浏览器当前页面使用哪种HTML标准进行渲染。不同的HTML标准支持的标签和属性有所差异,因

    2024年02月08日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包