HTML+CSS面试题总结

最新推荐文章于 2024-08-09 18:20:18 发布

WAXu

最新推荐文章于 2024-08-09 18:20:18 发布

阅读量289

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Asiwk/article/details/108012052

版权

文章目录

1. Doctype作用？严格模式与混杂模式如何区分？他们有何意义？

声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和JS运作模式是，以该浏览器支持的最高标准运行；
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂呈现。

2. 你知道多少种Doctype文档类型？

标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML4.01规定了三种文档类型：Strict、Transitional以及Frameset.
XHTML1.0规定了三种XML文档类型：Strict、Transitional以及、Framset。
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页。
Quriks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

3. `<image>`标签上title属性与alt属性的区别是什么？

alt属性是为了给哪些不能看到你文档中图像的浏览者提供文字说明。（且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短）
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

4. 分别写出以下几个HTML标签：

加粗：<b><strong>
下标：<sub>
居中：<center>
字体：<font><basefont>

5. 请写出至少5个html5新增的标签，并说明其语义和应用场景

section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含logo、页面标题和导航性的目录。
footer：定义页面或章节尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度比较低的内容——如果被删除，剩下的内容仍然很合理。

6. 对标签语义化的理解？

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染页面；
d. 便于团队开发和维护，语义性更具有可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

7. HTML与XHTML——二者有什么区别

	a、基础语言不同	b、语法严格程度不同	c、可混合应用不同	d、大小写敏感度不同	e、公布时间不同
XHTML	基于可扩展i标记语言（XML）。	语法比较严格，存在DTD定义规则。	可以混合各种XML应用，比如MathML、SVG。	对大小写敏感，标准的XHTML标签应该使用小写。	2000年W3C公布发行的。
HTML	基于标准通用标记语言（SGML）。	语法要求比较松散，这样对网页编写者来说，比较方便。	不能混合其它XML应用。	对大小写不敏感。	HTML4.01是1999年W3C推荐标准。

8. html5有哪些新特性，移除了哪些元素？

新特性：
a. HTML5现在已经不是SGML的子集，主要是关于图像、位置、存储、多任务等功能的增加。
b. 拖拽释放（Drag and drop）API
c. 语义化更好的内容标签（header，nav，footer，aside，section）
d. 音频、视频API（audio，video）
e. 画布（Canvas）API
f. 地理（Geolocation）API
g. 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
h. sessionStroge的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker，websocker等
移除的元素：
a. 纯表现的元素：basefont，big，center，s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，norframes；

9. iframe的优缺点？

优点：
a. 解决加载缓慢的第三方内容，如图片和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎搜索到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理

10. HTML5存储类型有什么区别？

HTML5能够本地存储数据，在之前都是使用cookies。H5提供了下面两种本地存储方案：
localStorage用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
sessionStorage同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

11. HTML5应用程序缓存和浏览器缓存有什么区别？

应用程序缓存是HTML5的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如HTML、CSS、图片以及JS。这个特性可以提高网站性能，它的实现借助于manifest文件

<!doctype html>
<html manifest="example.appcache">
</html>

与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

12. BFC

BFC是块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
如何创建BFC

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex。
overflow的值不是visible
BFC作用
a. 利用BFC避免margin重叠
b. 自适应两栏布局
c. 清除浮动
因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

13. 什么是盒模型？

网页上的每一个标签都是一个盒子，每个盒子都有四个属性。
属性：内容(content)、内边距(padding)、边框(border)、外边距(margin)
种类：标准盒子模型（content）和IE盒子模型（content+padding+border）
优点：css盒子具有弹性
特点：抗震【填充(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；】

14. 行内元素有哪些？块级元素有哪些？空（void）有哪些？行内元素和块级元素有什么区别？

行内元素

a-锚点
em-强调
img-图片
font-字体设定（不推荐）
b-粗体（不推荐）
input-输入框
i-斜体
span-内联容器

块级元素

div
dir-目录列表
ul-无序列表
ol-有序列表
dl-定义列表
table-表格
form-表单
h1 -一级标题
p-段落
pre-预格式化
address-地址

空（void）元素

<br/> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片
<link> <meta>

区别
区别一：
块级：会独占一行，默认情况下宽度自动填满其父元素宽度
行内：不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化
区别二：
块级：可以设置宽高
行内：不可以设置宽高
区别三：
块级：可以设置margin，padding
行内：行内元素水平方向的margin-left；margin-right，padding-left，paddin-right；可以生效。但竖直方向的margin-bottom，margin-top，padding-bottom，paddin-top；却不能生效
区别四：
块级：display：block；
行内：display：inline；
可以通过display属性切换块级元素和行内元素。

15. href和src的区别？

href标识超文本引用，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档，用在link和a等元素上，用于在当前文档和引用资源之间确立关系。
src用于替换当前元素，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向资源下载，并应用到文档内。例如js脚本，img图片和frame等元素。
eg：
<link href = "common.css" rel = "stylesheet"/>
当浏览器解析到这句话的时候，会识别该文档为css文件，会下载并且不会停止对当前文档的处理。
<script src="js.js"></script>
当浏览器解析到这句话时，会暂停其他资源的下载和处理，直至将资源加载，编译，执行完毕，图片和框架等元素也是如此。因此，这也是为什么要把js放在底部而不是头部的原因。

16. 什么是css Hack？

针对不同浏览器来写不同的css code的过程，就叫css Hack。
目的： 就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS Hack为不同版本的浏览器定制编写不同的CSS效果。
三种常见形式： CSS属性Hack、CSS选择符Hack以及IE条件注释Hack

17. 优雅降级和渐进增强

优雅降级： 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
渐进增强： 一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

18. px和em、rem的区别？

px： 绝对单位，页面按精确像素展示。

em： 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem： 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

19. http状态码有哪些？

分类	描述
1**	信息，服务器收到信息，需要请求者继续执行操作
2**	成功，操作成功被收到并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

http状态码详解