html面试题

最新推荐文章于 2024-06-30 18:00:00 发布

蔣金澤

最新推荐文章于 2024-06-30 18:00:00 发布

阅读量174

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/jiangjin_ze/article/details/115550193

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.doctype(⽂档类型) 的作⽤是什么？✨

这三种模式的区别是什么？(接上⼀问追问)

标准模式(standards mode)：⻚⾯按照 HTML 与 CSS 的定义渲染 

怪异模式(quirks mode)模式： 会模拟更旧的浏览器的⾏为 

近乎标准(almost standards)[过渡模式]模式： 会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致）， 除此之外符合标准定义

2.HTML、XML 和 XHTML 有什么区别？

HTML(超⽂本标记语⾔): 在html4.0之前HTML先有实现再有标准，导致HTML⾮常混乱和松散 

XML(可扩展标记语⾔): 主要⽤于存储数据和结构，可扩展，⼤家熟悉的JSON也是相似的作⽤，但是更加轻量⾼ 效，所以XML现在市场越来越⼩了 

XHTML(可扩展超⽂本标记语⾔): 基于上⾯两者⽽来，W3C为了解决HTML混乱问题⽽⽣，并基于此诞⽣了 HTML5，开头加⼊ <!DOCTYPE html> 的做法因此⽽来，如果不加就是兼容混乱的HTML，加了就是标准模式。

3.什么是data-属性？

HTML的数据属性，⽤于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数据的⽬的。

4.你对HTML语义化的理解？✨

开发者友好：使⽤语义类标签增强了可读性，开发者也能够清晰地看出⽹⻚的结构，也更为便于团队的开发和维护 机器友好：带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，语义类还可以⽀持读屏软件，根据 ⽂章可以⾃动⽣成⽬录

5.HTML5与HTML4的不同之处

⽂件类型声明（<!DOCTYPE>）仅有⼀型：<!DOCTYPE HTML>。
新的解析顺序：不再基于SGML。 
新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。 
input元素的新类型：date, email, url等等。 
新的属性：ping（⽤于a与area）, charset（⽤于meta）, async（⽤于script）。
全域属性：id, tabindex, repeat。 
新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。 
移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

6.有哪些常⽤的meta标签？

meta有四大属性:
charset   http-equiv    name    content
<meta charset="UTF-8">   //不写的话HTML5默认也是UTF-8

http-equiv，顾名思义，相当于http的⽂件头作⽤,⽐如下⾯的代码就可以设置http的缓存过期⽇期
＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞

viewport，移动前端最熟悉不过，Web开发⼈员可以控制视⼝的⼤⼩和⽐例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

apple-mobile-web-app-status-bar-style,开发过PWA应⽤的开发者应该很熟悉，为了⾃定义评估⼯具栏的颜⾊。 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

7.src和href的区别？

src是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源 下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处 理，知道将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。

href是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的 ⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理

8.知道img的srcset的作⽤是什么？（追问）

可以设计响应式图⽚，我们可以使⽤两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择 正确的⼀个资源。

srcset 定义了我们允许浏览器选择的图像集，以及每个图像的⼤⼩。

sizes 定义了⼀组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图⽚尺⼨是最佳选择。 所以，有了这些属性，
浏览器会： 
			查看设备宽度 
			检查 sizes 列表中哪个媒体条件是第⼀个为真
      查看给予该媒体查询的槽⼤⼩ 
      加载 srcset 列表中引⽤的最接近所选的槽⼤⼩的图像 
//srcset提供了根据屏幕条件选取图⽚的能⼒
<img src="clock-demo-thumb-200.png"
		alt="Clock" 				      
		srcset="clock-demo-thumb-200.png 200w, 
		clock-demo-thumb-400.png 400w" 
		sizes="(min-width: 600px) 200px, 50vw"
		>

9.还有哪⼀个标签能起到跟srcset相似作⽤？（追问）

<picture> 元素通过包含零或多个 <source> 元素和⼀个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器 会选择最匹配的⼦ <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现 在 <img> 元素占据的空间中 

//picture同样可以通过不同设备来匹配不同的图像资源

<picture>
		<source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" /> </picture>

10.script标签中defer和async的区别？✨

(1)defer和async最大的区别是执行时间的不同，defer实在DOM解析完毕之后马上执行，而async是在脚本下载完毕之后马上执行。

defer：浏览器指示脚本在⽂档被解析后执⾏，script被异步加载后并不会⽴刻执⾏，⽽是等待⽂档被解析完毕后执 ⾏。
async：同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致async属性下的脚本是乱序的，对于script 有先后依赖关系的情况，并不适⽤。

如果依赖其他脚本和 DOM 结果，使用 defer
如果与 DOM 和其他脚本依赖不强时，使用 async

11.有⼏种前端储存的⽅式？✨

cookies、localstorage、sessionstorage、Web SQL、IndexedDB
cookies： 在HTML5标准前本地储存的主要⽅式，优点是兼容性好，请求头⾃带cookie⽅便，缺点是⼤⼩只有4k， ⾃动请求头加⼊cookie浪费流量，每个domain限制20个cookie，使⽤起来麻烦需要⾃⾏封装 

localStorage：HTML5加⼊的以键值对(Key-Value)为标准的⽅式，优点是操作⽅便，永久性储存（除⾮⼿动删 除），⼤⼩为5M，兼容IE8+ 

sessionStorage：与localStorage基本类似，区别是sessionStorage当⻚⾯关闭后会被清理，⽽且与cookie、 localStorage不同，他不能在所有同源窗⼝中共享，是会话级别的储存⽅式 Web SQL：2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实 现，

web sql类似于SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换， 较为繁琐。

IndexedDB： 是被正式纳⼊HTML5标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快 速读取操作，⾮常适合web场景，同时⽤JavaScript进⾏操作会⾮常⽅便。

sessionStorage
localStorage
cookie
这些⽅式的区别是什么？（追问）
①传递方式不同
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
②数据大小不同
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
③数据有效期不同
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
④作用域不同
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；(不能在所有同源窗⼝中共享，是会话级别的储存⽅式)
localStorage 在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的。

12.网站seo怎么处理

1.合理的 标题\ 描述\ 关键字
2.语义化html标签
3.图片加alt <img src="tulip.jpg" alt="上海鲜花港 - 郁金香" />规定图像的替代文本。
4.重要内容放html前面,优先加载,搜索引擎从上到下
5.每个页面出现一个h1
6.少用iframe
7.页面扁平化, 层级不易过深
8.友情链接
9.向搜索引擎提交收录
10.提高网站速度
11.做好404页面的优化,不仅仅是提高蜘蛛体验,也为了用户体验
12. sitemap提交。sitemap，顾名思义，就是网站地图
13.网站url不宜太深入

13.a标签默认事件被禁用怎么实现跳转

通过location.href 实现跳转

14.html5的新特性

https://blog.csdn.net/Gane_Cheng/article/details/52819118

15.为什么要语义化

1. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
2. 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
5. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

16.什么是语义化

 便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

17.写html代码要注意什么

1. 尽可能少的使用无语义的标签div和span；
2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3. 不要使用纯样式标签，如：b、font、u等，改用css设置。
4. 需要强调的文本，可以包含在strong或者em标签中
  （浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。
  （表头和一般单元格要区分开，表头用th，单元格用td）
6. 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性。
   在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
  （lable标签：用于绑定一个表单元素，当点击lable标签的时候，被绑定的表单元素就会获得输入焦点。）

18.新增语义标签

H5新增常用标签
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section> 
      ...
    </section>
      <aside>...</aside>   
  </article>
  <address> 标签，定义文档或文章的作者/拥有者的联系信息。 </address>
  <hgroup>标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素</hgroup>
  <footer>...</footer>
</body>

19.html5 css 3新增内容

https://juejin.cn/post/6844903829679390728

20.b标签和strong的区别?

https://juejin.cn/post/6900151751417167880
以strong和b标签为例：
b标签`仅仅只是给文字添加了加粗样式，属于UI层面的处理，除此之外没有任何意义。你甚至就可以把它看作是加了`font-size:bold`的css样式的span标签。

strong标签`则是侧重于标签语义化，它是在告诉浏览器这是一段重点强调的内容。只不过它的默认样式恰好也是加粗。
 
此外，针对SEO（搜索引擎优化），strong标签与b标签相比更被搜索引擎重视，内容更容易被抓取到。同理，em标签也是语义化标签，而i标签只是仅仅加了斜体样式，并且em标签对SEO来说也更加友好。

21.一次给你大量的dom元素怎么优化

1.缓存dom对象缓存child对象循环的时候直接取引用,不必重新查询
2.文档片段 document.createDocumentFragment 一次性替换
3.用innerHtml代替高频的appendchild
4.虚拟dom 
5.重绘操作放入requestAnimationFrame

22.减少dom的方法

1.使用伪元素, 如清除浮动\ 样式实现
2.按需加载, 减少不必要的渲染
3.结构合理, 语义化标签

蔣金澤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html面试题

1.doctype(⽂档类型) 的作⽤是什么？✨这三种模式的区别是什么？(接上⼀问追问)标准模式(standards mode)：⻚⾯按照 HTML 与 CSS 的定义渲染怪异模式(quirks mode)模式：会模拟更旧的浏览器的⾏为近乎标准(almost standards)[过渡模式]模式：会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致），除此之外符合标准定义2.HTML、XML 和 XHTML 有什么区别？HTML(超⽂本标记语⾔): 在html4.
复制链接

扫一扫