HTML和CSS的面试题（1）

已于 2022-07-30 14:28:15 修改
阅读量110 收藏
点赞数
分类专栏： 面试题 文章标签： 大数据 html css
于 2022-07-16 18:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72629130/article/details/125742845
版权

1、每个HTML文件开头都有<!DOCTYPE html>，它的作用是什么？

<!DOCTYPE html>声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面）

严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

<!DOCTYPE  html>不存在或格式不正确会导致文档以混杂模式呈现

2、div+css的布局较table布局有什么优点？

（1）div+css布局的好处：

a.符合W3C标准，结构、样式和行为分离，代码结构清晰明了，带来足够好的可维护性。

b.布局精准，网站版面布局修改简单。

c.加快了页面的加载速度（最重要的）。

d.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

（2）table布局的好处

a.容易上手。

b.可以形成复杂的变化，简单快速。

c.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

3、为什么利用多个域名来存储网站资源？

（1）CDN缓存更方便（CDN主要用来使用户就近获取资源）。

（2）突破浏览器并发限制（同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。一些静态资源，如果放到不同的域名下面就能实现与其他资源的并发请求。）

（3）节约 cookie 带宽

（4）节约主域名的连接数，优化页面响应速度

（5）对于UGC的内容和主站隔离，防止不必要的安全问题。

4、主流浏览器的内核分别是什么？

IE：trident内核 [‘traidnt ]

Firefox：gecko 内核 [ˈɡekəʊ]

Safari：webkit 内核

5、img的alt属性与title属性有何异同。

alt属性：在图片无法加载的时候才会显示的其值；

title属性：在图片正常加载鼠标划上去显示的值。

6、strong标签与em标签的异同。

strong：粗体强调标签，强调，表示内容的重要性；

em：斜体强调标签，更强烈强调，表示内容的强调点。

7、网页标准和标准制定机构的意义。

网页标准的制定，使得web发展的更健康，提高网站的易用性。

a、开发者遵循统一的标准，降低了开发难度和开发成本；

b、SEO优化网页也会更加方便，不会因为滥用代码出现各种bug和安全问题。

8、网页制作会用的图片格式有哪些？

JPEG：JPEG是最常见的一种图像格式，应用广泛，特别是在网络和光盘读物上，都能找到它的身影。各类浏览器均支持JPEG这种图像格式，因为JPEG格式的文件尺寸较小，下载速度快。

BMP：一种与硬件设备无关的图像文件格式，使用非常广。它采用位映射存储格式，除了图像深度可选以外，不采用其他任何压缩，因此，BMP文件所占用的空间很大。

GIF：格式的特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。

PSD：这是Photoshop图像处理软件的专用文件格式，文件扩展名是psd，可以支持图层、通道、蒙板和不同色彩模式的各种图像特征，是一种非压缩的原始文件保存格式。

DXF：图纸交换格式，扩展名是．dxf，是AutoCAD中的图形文件格式，它以ASCII方式储存图形，在表现图形的大小方面十分精确，可被CorelDraw和3DS等大型软件调用编辑。

WEDP：谷歌开发的新的图片格式，体积小，质量好，但兼容性略差。

9、渐进增强和优雅降级之间的不同？

渐进增强（progressive enhancement）

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级( graceful degradation)

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渐进增强的观点关注内容本身；

优雅降级的观点更关注主流浏览器，一些特定的浏览器，除修复较大的错误外，其他的差异将会被直接忽略。

10、简述一下 src与 href 的区别。

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。例如：js脚本，img图片，frame等。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也是为什么将js 脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

格子衫的快乐
关注
专栏目录
html及css经典面试题
wushangnb的博客
12-15 3413
1.src与href的区别: href表示超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系，src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。 src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。 <script src=...
HTML+CSS面试题总结（附答案+视频讲解）
xm1037782843的博客
06-25 2766
前端面试题总结 面试题总结 html+css面试题 元素隐藏、盒子垂直居中
HTML 头部介绍
weixin_46004749的博客
08-31 1238
HTML 头部是网页中最重要的部分之一，它包含了一些必要的信息，如文档类型、字符编码、样式表和脚本等。正确使用 HTML 头部可以使网页更加美观、易读和易维护。建议在编写网页时，认真编写 HTML 头部，以提高网页的质量和用户体验。
#前端面试题#每个HTML文件的开头都有个很重要的东西：DOCTYPE，它的作用是什么？
老衲的少女心i~
06-18 147
1.你做过的页面在那些浏览器测试过？这些浏览器的内核分别是什么？ IE------------trident内核 Firefox-------gecko内核 Safari--------webkit内核 Opera---------以前是presto内核，现在改用Google Chrome的Blink内核 Chrome--------Blink(基于webkit，Google与Opera Software共同开发) 2.每个HTML文件的开头都有个很重要的东西：DOCTYPE，它的
HTML文档的文件头的主要作用,HTML篇(008)-每个 HTML 文件头里都有个很重要的东西，Doctype，知道这是干什么的么...
weixin_29234423的博客
06-04 562
答案：`` 声明位于文档中的最前面的位置，处于 `` 标签之前。1.告知浏览器文档使用哪种 HTML 或 XHTML 规范。2.告诉浏览器按照何种规范解析页(如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面)解析：doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的...
html，css，js面试题
zhangnx10000的博客
06-09 1680
它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常浮动就是让元素可以向左或向右移动，浮动元素会从文档的正常流中脱离，但是他还是会影响布局，当一个元素浮动时，其他内容会“环绕”该元素浮动元素会脱离标准流(脱标)浮动的元素会一行内显示并且元素顶部对齐浮动的元素会具有行内块元素的特性浮动元素不会影响它前面的元素Ajax 是一种通过后台与服务器进行少量的数据交换，使页面实现异步更新。是一种创建交互式网页应用的网页开发技术。
HTML&CSS常见面试题
FIRE的博客
09-06 3242
HTML&CSS常见面试题
前端面试题总结 — html 和 css 篇
qq_41914185的博客
08-30 889
语义化标签；display属性值；隐藏元素；元素居中；响应式布局；盒子模型；flex；z-index；重绘；回流（重排）；transform；css优化
CSS面试题整理汇总
山雀的博客
03-13 5540
CSS面试题汇总
2024 前端高频面试题之 HTML/CSS 篇
Aybuai的博客
01-18 2332
使用float布局两侧使用 margin 负值，以便和中间内容横向重叠防止中间内容被两侧覆盖，一个用padding为两侧留白 一个用margin为两侧留白。
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
html5+css3面试题答案.docx
07-02
HTML5 和 CSS3 面试题答案 HTML5 和 CSS3 是当前 Web 开发中两个非常重要的技术，以下是关于 HTML5 和 CSS3 的一些常见面试题答案： 优雅降级和渐进增强 优雅降级（Gracious Degradation）和渐进增强...
html5css3面试题及答案,前端面试题及答案-CSS篇.docx
07-05
HTML5/CSS3 面试题及答案 - CSS 篇 本文档提供了 HTML5/CSS3 面试题及答案，涵盖了 CSS 的新特性、选择符、盒模型、浮动、垂直居中等多个方面。 CSS3 的新特性 * 实现圆角（border-radius） * 阴影（box-shadow）...
2023年HTML和CSS面试题及答案.doc
11-05
HTML和CSS面试题及答案解析 在这篇文章中，我们将对 HTML 和 CSS 面试题及答案进行解析，涵盖了 HTML 和 CSS 的基本概念、标签、样式、布局、响应式设计等多方面的知识点。 1. 编程语言——HTML/CSS HTML...
消息队列介绍
weixin_38703379的博客
10-09 446
优点：性能单台（12000+），性能较好，管理界面较丰富。在互联网公司也有较多应用，有多个语言的成熟客户端。优点：性能单台（10万级），模型简单，接口易用。在阿里巴巴大规模应用。优点：性能单台（6000+）成熟，已经在很多公司得到应用。各种协议支持好，有多个语言的成熟客户端。缺点：运维难度大，对ZooKeeper强依赖。缺点：内部机制很难了解，也意味很难定制和掌控。缺点：性能较弱，缺乏大规模吞吐的场景的应用，有江河日下之感。优点：天生分布式性能最好，所以常见大数据领域。缺点：文档少，支持的语言较少。
020 elasticsearch7.10.2 elasticsearch-head kibana安装
最新发布
m0_46695127的博客
10-13 727
020 elasticsearch7.10.2 elasticsearch-head kibana安装
DAMA数据管理知识体系(第11章 数据仓库和商务智能)
没有梦想的咸鱼的博客
10-08 1896
文章将围绕数据仓库的构建与管理展开，探讨如何通过数据仓库实现历史数据的集中存储与分析
43页PPT | 大健康行业BI解决方案
数据矿工-数据化运营博客
10-08 663
大健康行业的BI解决方案在典型场景应用中，通过定制化的数据分析模块和角色仪表盘，为企业CXO、BU head、MKT及Sales Team等核心角色提供了全景式、精准化的业务洞察。从全渠道业绩监测到市场情报分析，从组织效能评估到营销互动跟踪，各核心场景下的数据分析应用实现了对企业运营细节的深度挖掘与实时监控，帮助企业决策者快速把握市场动态，精准定位问题，高效调整策略，推动企业经营目标层层拆解并有效执行，全面加速企业的数字化转型进程。随着数据量的激增，多源数据的归集和整合成为药企数据分析的难点。
pandas常用数据格式IO性能对比
lining9508的博客
10-09 787
本文对pandas支持的一些数据格式进行IO（读写）的性能测试，大数据时代以数据为基础，经常会遇到操作大量数据的情景，数据的IO性能尤为重要，本文对常见的数据格式csv、feather、hdf5、jay、parquet、pickle性能进行对比。
我给客户搭建了一个wordpress网站，现在想要更改wordpress的后台让客户能更加清晰在后台增加和更新产品，有以下这几个需求，请帮我用代码或者插件的方式去实现：1.在前端增加右下角的询盘表单弹窗，要求用代码方式实现；2.在前端的右侧增加在线悬浮窗口，要求有Jason的WhatsApp号码，号码为+8518588629881，请用代码方式实现；3.需要实现后台的排版，后台首页的内容需要可以统计关键词排名的图表，访问的流量和国家的图表，这个是否接入API，如何接入API，又如何把API的内容放在后台首页上来呈现？4.后台需要有一个询盘菜单栏，这个询盘菜单栏可以统计留下询盘的人的信息，包括邮箱，电话，IP，国家和详情内容，我该如何实现？
02-17
1. 在前端增加右下角的询盘表单弹窗： 可以使用以下代码实现，在 WordPress 主题的 functions.php 文件中添加以下代码： ```php add_action('wp_footer', 'my_custom_popup'); function my_custom_popup() { ?> <div id="popup-wrapper"> <div id="popup-content"> <h2>询盘表单</h2> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <label for="email">电子邮件：</label> <input type="email" id="email" name="email"> <label for="message">信息：</label> <textarea id="message" name="message"></textarea> <button type="submit">提交</button> </form> </div> </div> <style> #popup-wrapper { position: fixed; bottom: 0; right: 0; width: 300px; height: 300px; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); z-index: 9999; } #popup-content { padding: 20px; } </style> <?php } ``` 这段代码会在网站的底部右侧增加一个 300x300 的弹窗，内部包含一个表单。你可以根据需要更改弹窗的大小和表单的内容。 2. 在前端的右侧增加在线悬浮窗口： 可以使用以下代码实现，在 WordPress 主题的 functions.php 文件中添加以下代码： ```php add_action('wp_footer', 'my_custom_chat_widget'); function my_custom_chat_widget() { ?> <div id="chat-widget"> <a href="https://wa.me/8518588629881" target="_blank"> <img src="https://www.example.com/wp-content/uploads/whatsapp-icon.png" alt="WhatsApp Chat"> </a> </div> <style> #chat-widget { position: fixed; bottom: 20px; right: 20px; z-index: 9999; } </style> <?php } ``` 这段代码会在网站的底部右侧增加一个 WhatsApp 聊天的悬浮窗口。你需要将图片的 URL 替换为你自己的图片，也可以根据需要更改悬浮窗口的位置和样式。 3. 后台的排版： 如果你需要在后台增加一些统计数据，可以使用 WordPress 提供的 REST API 和图表插件实现。 首先需要安装一个图表插件，例如 WPForms Charts and Graphs。 然后在 functions.php 文件中添加以下代码： ```php add_action('wp_enqueue_scripts', 'my_custom_enqueue_scripts'); function my_custom_enqueue_scripts() { if (is_admin()) { wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array('jquery'), '1.0', true); } } add_action('admin_menu', 'my_custom_admin_menu'); function my_custom_admin_menu() { add_menu_page('Dashboard', 'Dashboard', 'manage_options
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值