admin 管理员组文章数量: 1087829
2024年4月19日发(作者：swiper使用方法)
html基础面试题
1、内元素和块级元素的区别？
行内元素：不会独立出现在一行，单独使用的时候后面不会有换行符的元素。eg：
span, strong, img, a等。这些元素，默认的高宽，总是其内容的高宽。并且，margin
和padding值，只有左右有效。
块级元素：独立在一行的元素，他们后面会自动带有换行符。eg：div, p,form, ul,
li, ol, dl等。它们的出现，往往独自占领一行。在没有设置宽度的情况下，默认
宽度总是其父元素的宽度。
行内元素转换成块元素，只要设置其display属性为block即可，display:block;。
块元素转换成行内元素，只要将其display属性设置为inline即可，display:inline;。
（1）行内元素有：a b span img input select
（2）块级元素有：div p ul ol li dl dt dd h1-h6
（3）常见的空元素：br-换行，hr-水平分割线
2、Doctype作用？标准模式与混杂模式如何区分？
!DOCTYPE告诉浏览器使用哪个版本的html规范来渲染文档。DOCTYPE不存在或
形式不正确会导致html文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks
mode）中页面是一种比较宽松的向后兼容的方式显示。
3、引入样式时，link和@import的区别？
链接样式时，link只能在HTML页面中引入外部样式
导入样式表时，@import既可以在HTML页面中导入外部样式，也可以在css样
式文件中导入外部css样式。
4、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;
IE8/IE7/IE6支持通过Element方法产生的标签，可以利用这一特
性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默
认的样式。当然也可以直接使用成熟的框架、比如html5shim
移除的元素：
纯表现的元素：basefont big center font s strike tt u
性能较差元素：frame frameset noframes
区分：
DOCTYPE声明的方式是区分重要因素
根据新增加的结构、功能来区分
5、介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和js引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如
加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览
器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
js引擎：解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核
就倾向于只指渲染引擎。
6、常见的浏览器内核有哪些？
Trident( MSHTML )：IE MaxThon TT The World 360搜狗浏览器
Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
Webkit：Safari Chrome
7、简述一下你对HTML语义化的理解？
去掉或丢失样式的时候能够让页面呈现出清晰的结构。
有利于seo和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于
标签来确定上下文和各个关键字的权重。
方便其它设备解析。
便于团队开发和维护，语义化根据可读性。
8、label标签的作用是什么?是怎么用的?
去掉或丢失样式的时候能够让页面呈现出清晰的结构。
label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦
点转到和标签相关的表单控件上。label中有两个属性是非常有用的, FOR和
ACCESSKEY。
FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，
所绑定的元素将获取焦点。例如
Label FOR="InputBox"姓名/Labelinput ID="InputBox" type="text"
9、HTML5的form如何关闭自动完成功能？
TML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器
会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这
样就不用全部输入进去了，直接选择列表中的项目就可以了。
但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我
们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。
方法：
在IE的internet选项菜单中里的自动完成里面设置
设置form输入框的autocomplete为on或者off来来开启输入框的自动完成
功能
11、title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的
抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code
12、元素的alt和title有什么异同？
在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释
文字.
13、浏览器页面有哪三层构成，分别是什么，作用是什么?
浏览器页面构成：结构层、表示层、行为层
分别是：HTML、CSS、JavaScript
作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一
些客户端的功能与业务。
14、div+css的布局有什么优点？
（1）改版的时候更方便只要改css文件。
（2）页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
（3）易于优化（seo）搜索引擎更友好，排名更容易靠前。
15、网页制作会用到的图片格式有哪些？
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格
式。
并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经
开始测试并使用WebP格式。
Apng：是PNG的位图动画扩展，可以实现png格式的动态图片效果，有望
代替GIF成为下一代动态图标准。
16、简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系
17、从浏览器地址栏输入url到显示页面的步骤
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象
等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数
据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。
18、HTML全局属性(global attribute)有哪些
class:为元素设置类标识
版权声明：本文标题：html基础面试题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1713491488a637348.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论