江苏龙网

  1. 主页 > 生活百科 > >

web前端HTML高频面试题

html


web前端HTML高频面试题

文章插图
 
html5语义化与新特性什么是HTML语义化？表示选择合适的标签（语义化标签）便于开发者阅读和写出更优雅的代码
为什么要使用语义化标签？1). 在没有css样式的情况下 ， 页面整体也会呈现很好的结构效果
2). 更有利于用户体验
3). 更有利于搜索引擎优化
4). 代码结构清晰 ， 方便团队开发与维护
HTML5新特性有哪些？1). 语义化标签
2). 音视频处理
3). Canvas / WebGL
4). history API
5). requestAnimationFrame
【web前端HTML高频面试题】6). 地理位置
7). WebSocket
8). Webworks
什么是DOCTYPE及作用？DOCTYPE是用来声明文档类型和DTD规范的 ， 一个主要的用途便是文件的合法性验证 。如果文件代码不合法 ， 那么浏览器解析时会出一些错误 。（DOCTYPE告诉浏览器当前是哪个文档类型）
行内元素与块级元素1. 行内元素的特点？
1). 元素排在一行
2). 只能包含文本或者其他内联元素
3). 宽高就是内容宽高、设置宽高无效
2. 块级元素的特点？
1). 元素单独占一行
2). 元素的宽高都可以设置
3). 可以包含内联元素和其他块元素
4). 为设置宽度时 ， 默认宽度是它容器的100%
3. 常见行内元素标签
a、br、code、em、img、input…
4. 常见块级元素标签：
div、p、dl、dt、form、h1~h6…
简述一下src与href的区别1. src是指向外部资源的位置 ， 指向的内容会嵌入到文档中当前标签所在的位置 ， 在请求src资源时会将其指向的资源下载并应用到文档内 ， 如js脚本 ， img图片和frame等元素 。当浏览器解析到该元素时 ， 会暂停其他资源的下载和处理 ， 知道将该资源加载、编译、执行完毕 ， 所以一般js脚本会放在底部而不是头部 。
2. href是指向网络资源所在位置（的超链接） ， 用来建立和当前元素或文档之间的连接 ， 当浏览器识别到它他指向的文件时 ， 就会并行下载资源 ， 不会停止对当前文档的处理 。
div+css的布局较table布局有什么优点？1. 正常场景一般都适用div+CSS布局 ， 
2. 优点：
1). 结构与样式分离
2). 代码语义性好
3). 更符合HTML标准规范
4). seo友好
3. Table布局的适用场景：
某种原因不方便加载外部CSS的场景 ， 例如邮件正文 ， 此时用table布局可以在无css情况下保持页面布局正常 。
一个页面上有大量的图片（大型电商网站） ， 加载很慢,你有哪些方法优化这些图片的加载 ， 给用户更好的体验1. 图片懒加载 ， 在页面上的未可视区域可以添加一个滚动条事件 ， 判断图片位置与浏览器顶端的距离与页面的距离 ， 如果前者小于后者 ， 优先加载 。
2. 如果为幻灯片、相册等 ， 可以使用图片预加载技术 ， 将当前展示图片的前一张和后一张优先下载 。
3. 如果图片为css图片 ， 可以使用CSSsprite ， SVGsprite ， Iconfont、Base64等技术 。
4. 如果图片过大 ， 可以使用特殊编码的图片 ， 加载时会先加载一张压缩的特别厉害的缩略图 ， 以提高用户体验 。
5. 如果图片展示区域小于图片的真实大小 ， 则因在服务器端根据业务需要先行进行图片压缩 ， 图片压缩后大小与展示一致
meta有哪些属性 ， 作用是什么meta标签用于描述网页的元信息 ， 如网站作者、描述、关键词 ， meta通过name=xxx和content=xxx的形式来定义信息 ， 常用设置如下：
1. charset：定义HTML文档的字符集
<meta charset="UTF-8" >2. http-equiv：可用于模拟http请求头 ， 可设置过期时间、缓存、刷新
＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞3. viewport：视口 ， 用于控制页面宽高及缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">viewport有哪些参数 ， 作用是什么1. width/height ， 宽高 ， 默认宽度980px
2. initial-scale ， 初始缩放比例 ， 1~10


推荐阅读


上一篇：乾隆的墓里为什么空一个棺材?乾隆的坟墓什么时候被盗

下一篇：软件是怎样控制硬件的？