HTML+CSS面试题集锦（一）

最新推荐文章于 2025-04-02 17:28:06 发布

玲玲酱

最新推荐文章于 2025-04-02 17:28:06 发布

阅读量333

点赞数

分类专栏：面试题文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/110092319

版权

面试题专栏收录该内容

2 篇文章

订阅专栏

本文是HTML和CSS面试题的精选集锦，涵盖了HTML的基础知识，如DOCTYPE的作用、HTML5的新特性、语义化理解，以及CSS中的块级元素与行内元素区别、如何设置行内元素宽高、HTML5新增表单元素等。同时讨论了浏览器内核、cookie、sessionStorage和localStorage的区别，以及meta viewport的用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分

前端三要素

  html:毛胚房
  css:装修
  JavaScript:人住进去

谈谈你对B/S架构的认识

  首先B是browser浏览器，S是server服务器
  浏览器发送http请求-->服务器-->数据库
  数据库--->服务器做出响应--->浏览器

html网页的结构

doctype目的：告诉标准通用语言解析器，它应该使用什么样的文档类型定义来解析文档。如果页面没有doctype声明，那么声明文档的解析类型就是怪异模式。也就是不同的浏览器会按照自己的解析方式去解析，那么在不同的浏览器中就会有不同的样式。所以你的页面添加了<!doctype html>,那么浏览器就会按照标准模式解析然后渲染页面。
meta作用：标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
meta里的数据是供机器解读的：
1.告诉机器该如何解析这个页面，
2.可以添加服务器发送到浏览器的http头部内容
例如：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
那么浏览器的头部就会包括这些:
charset:iso-8859-1
expires:31 Dec 2008

块级元素和行内元素的区别：

块级元素：
1）独占一行
2）默认宽度为100%，默认高度由子元素或者内容决定，
撑起父元素
3）可以为其指定宽高 style =“width：；height：；”
4）容器级标签：div,h系列，li,ul,dt,dd
5）所有的容器级标签都是块级元素，P标签也是
行内元素：
1）与其他行内元素共享一行空间
2）默认高度由内容决定
3）不能为其指定宽和高，但是对行内元素设置浮动后
就可以对行内元素设置宽高
4）行内元素不可以嵌套块元素，
但块元素中可以嵌套行内元素
5）文本级标签：p,span,a,b,i,u,em，img,strong
6)p标签虽然是文本级标签，但是是一个块级元素。
除了p标签外，所有的文本级标签都是行内元素。
行内块元素：
1）兼具行内元素和块级元素的特点，
可以设置宽高，在一行内显示，没有默认宽度
2）img,input,select,textarea,button

如何给行内元素设置宽高

将行内元素设置为块级元素，脱离文档流
1)使用display
display:block/inline-block
2)使用position定位
position:absolute/fixed
3)使用float
float:left/right

HTML5新增的表单元素

表单控件：
color,calendar,date，
datetime, datetime-local,
time,mouth,week,
email,url,search,range,tel
新的表单元素:datalist ,keygen,output

空元素的定义

HTML元素的内容是开始标签与结束标签之间的内容。而某些 HTML 元素具有空内容。那些含有空内容的HTML元素，就是空元素。空元素是在开始标签中关闭的
例如：

常见的空元素：分割线 <br> <hr><img> 
<input> <link> <meta>
鲜为人知的是：<area><base><col><command>
<embed><keygen><param><source><track><wbr>

H5的新特性你了解哪些？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签：（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、 url、search
新的技术webworker, websocket, Geolocation
h5新标签兼容：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签。

简述一下你对HTML语义化的理解:

（1）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
（2）即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；
（3）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

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

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

说说name和id的区别或者理解？

id是以 #定义的CSS样式，也可以用JS获取来控制getElementById(这里是ID) 来获取
name就是给当前标签或元素指定名称，也可以用JS来控制值，form提交后获取的时候就需要获取name名称。
id一般用于css和js中引用,为元素或者标签提供唯一标识，name用于表单提交,只有加了name属性的标签元素才会提交到服务器。

浏览器的内核有哪些，你对内核的理解

IE: trident内核、Firefox：gecko内核、Safari:webkit内核、Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核、Chrome:Blink(基于webkit，Google与Opera Software共同开发)
理解：主要分成两个部分：渲染引擎(Render Engine)和JS引擎。
渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。

请描述一下cookies，sessionStorage和localStorage的区别？

相同点：
都会在浏览器端保存，有大小和同源限制。
不同点：
1）cookie会随请求发送到服务器，作为会话表示，服务器可修改cookie。web storage不会随请求发送到服务器。
2）cookie有path的概念，子路径可以访问父路径的cookie，父路径不可以访问子路径的cookie。
3）有效期： cookie在设置的有效期内有效，默认为浏览器关闭消失。
sessionStorage在会话窗口关闭后失效
localStorage长期有效，需主动删除。
4）sessionStorage不能共享，localStorage在同源文档之间可以共享，cookie在同源且符合path规则的文档之间可以共享。
5）localStorage的修改会触发其他文档的update事件。
6）cookie有secure属性要求HTTPS传输。
7）浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。webStorage可以支持5M的存储。

meta viewport是做什么的？怎么用？

1）移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
2）该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。
3）meta viewport 的6个属性：

width 设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

a标签中 active hover link visited 正确的设置顺序是什么?

a:link 、a:visited 、a:hover 、a:active

form中methods请求方式

get：参数拼接在url后面，通过?来分割传递参数较少
post：参数存放在请求体中，安全传递参数更多

SGML 、 HTML 、XML 和 XHTML 的区别？

SGML：(Standard Generalized Markup Language，标准通用标记语言)，SGML具有非常复杂的文档结构，主要用于大量高度结构化数据的访问和其他各种工业领域，在分类和索引数据中非常有用。但是它不适用于Web数据描述。
HTML：(Hyper Text Markup Language)，超文本标记语言，他继承了SGML的很多优点，但是html是一种界面技术，他只使用了SGML中很少的一部分标记，为了便于在计算机上实现，HTML规定的标记是固定的，即HTML语法是不可扩展的。html是一种标记语言，不是一种编程语言。
XML：xml是在html和sgml的基础上诞生的。XML使用一个简单而又灵活的标准格式，为基于Web的应用提供了一个描述数据和交换数据的有效手段。但是，XML并非是用来取代HTML的。
HTML着重如何描述将文件显示在浏览器中，而XML与SGML相近，它着重描述如何将数据以结构化方式表示。
XHTML：（eXtensible HyperText Markup Language），是一种标记语言，表现方式与超文本标记语言（html）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用标记语言（sgml）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言（xml），XML是sgml的一个子集。

标准模式与兼容模式各有什么区别？

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd
严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面
混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

Label 的作用是什么？是怎么用的？

label标签是用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。鼠标在点击时并没有任何渲染效果。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>```