HTML 面试题
DOCTYPE的作用?
DOCTYPE即Dcoument Type,网页文件的文档类型标准
声明于html文档的最前面。告知浏览器的解析器,使用哪种HTML规范或XHTML规范来解析页面
HTML5为什么只需要写<!DOCTYPE HTML>
<!DOCTYPE HTML>是文档类型声明,声明了文档类型为HTML5,告知浏览器使用的是HTML5标准
html5 新增哪些新特性?相比html4
新增api
- 本地存储:localStorage、sessionStorage
- 地理定位:Geolocation
- Canvas绘图
- 即时通信WebSocket
新增标签
- aside:定义页面主区域之外的内容,比如侧边栏
- article:定义页面中的独立结构
- video:多媒体
- canvas:画布
- footer:定义文档的底部区域
- header:定义文档头部区域
- nav:定义导航链接的部分
- section:定义文档中的独立内容,比如章节、页眉、页脚
新增全局属性
- 新增contenteditable属性(任何dom节点只要加上contenteditable = 'true',就变得可编辑)
- draggable 推拽
- hidden
input增加一些新属性:date、email、url等
什么是标签语义化?
定义:更直观的表现出每个标签的含义和作用
优点:
- 代码结构清晰,易于阅读,利于开发和维护
- 方便其他设备解析(如屏幕阅读器)根据语义渲染页面,自动生成不同的目录
- 有利于seo(搜索引擎)搜索引擎会根据不同的标签来赋予不同的权重
在script标签上使用 defer 和 async 的区别是什么?
不使用
没有使用 defer 和 async 属性,浏览器读到脚本就会立即开始加载和执行,不会等待后续文档元素的加载,会造成阻塞
async
有了async属性:后续文档和js脚本是并行加载,异步执行
defer
有了defer属性:后续文档和js脚本是并行加载的,此时js脚本仅加载不执行,等到文档所有元素解析完成之后,DOMContentLoaded事件触发之前执行
img标签上的title和alt属性?
- title:鼠标划入提供描述信息
- alt:当图片不显示时,显示在网页上的替代文字
- alt是必要属性,title非必要
img底边距去除?
- display: block;
- float: left;
- vertical-align: bottom;
img标签的srcset的作用是什么?
srcset响应式图片,通过使用img标签的srcset属性,定义一组额外的图片集合,让浏览器根据不同的屏幕状况选取合适的图片来显示
meta标签有哪些常用用法?
<meta>标签的具体功能一般由name / http-equiv 和 content两部分属性来定义
- 如果设置name属性。则描述的是网页文档的信息(例如:网页描述、关键词、作者、日期、事件)
- 如果设置http-equiv属性,则描述的相当于是HTTP响应头信息(例如:网页内容信息、网页缓存等)
name:description、keywords、auther
<meta name="keywords" content="电商,好货,便宜" />
http-equiv:no-cache、Set-Cookie
<meta http-equiv="Pragma" contect="no-cache">
canvas 和 svg 有什么区别?
- canvas:html5新增元素,通过js来绘制2D图形
- svg:可伸缩矢量图,使用xml描述2D图形,不是html5新增
input属性readonly和disabled,有什么区别?
- readonly:不可编辑,可以选择和复制,值可以传递到后台
- disabled:不可编辑,不可以选择和复制,值不可以传递到后台
块级元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级有什么区别?
- 块级元素:div、ul、li、p、article、main、header、table、tr、h1-h6
- 行级元素:span、a、img、input、select、stron
- 空元素:br、img、input、link、meta
区别:
- 块级元素:独占一行,margin上下左右均有效,可以设置宽高
- 行级元素:不独占一行,margin只对左右有效,不可以设置宽高
什么是FOUC,如何避免?
fouc:css放在页面底部,使得css在html之后加载,当加载到此样式表时,页面会停止之前的渲染,样式表被下载和解析后,会重新渲染页面,也就会出现短暂的花屏现象。
解决:使用link加载css文件,放在head里面
CSS中link和@import的区别是什么
- link属于html标签,无兼容问题,而@import是CSS提供的,只能在IE5以上才能识别
- 页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载
- link方式的权重高于@import
- 当使用JavaScript控制DOM去改变样式的时候,只能使用link方式,因为@import只有CSS才能识别,无法控
HTML全局属性(global attribute)有哪些
- class:为元素设置类标识
- id:文档唯一
- data-*:为元素增加自定义属性
- lang:元素内容的语言
- style:行内css样式
- title:元素相关的建议信息
- dir:规定元素中内容的文本方式(ltr:从左到右,rtl:从右到左)
- contenteditable:设置true,可编辑元素
渐进增强与优雅降级的区别
渐进增强:一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后在针对高级浏览器进行效果,交互,追加功能达到更好的体验
优雅降级:一开始就构建站点的完整功能,然后针对浏览器测试和修复,
.transition { /*渐进增强写法*/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .transition { /*优雅降级写法*/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; }
iframe的优越点?有什么替代方法?
优点:
- iframe能够原封不动的把嵌入的网页展示出来
- 提高页面代码的复用性
- 避免页面整体刷新
- iframe解决部分跨域问题
- 解决加载缓慢的第三方内容,如图标、广告等的加载问题
缺点
- 阻塞onload,window的onload事件会等页面中iframe的所有内容加载完成,才会运行
- 会产生很对页面,不便于管理
- 移动端无法完全显示框架,设备兼容性差
- 创建iframe比其他dom元素更耗费性能创建iframe耗费的性能比其他DOM元素(包括style或script)多10-100倍
- 无法被一些搜索引擎索引到
- 页面会增加服务器的http请求
- 会出现区域的上下、左右滚动条,挤占页面控件
解决办法:可以使用ajax来代替
- 块级元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级有什么区别?
- 什么是FOUC,如何避免?
- CSS中link和@import的区别是什么
- HTML全局属性(global attribute)有哪些
- 渐进增强与优雅降级的区别
- iframe的优越点?有什么替代方法?
本文来自博客园,作者:时光凉忆,转载请注明原文链接:https://www.cnblogs.com/naturl/p/11122068.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)