前端面试题之HTML

如何理解HTML语义化

HTML语义化就是使用正确的标签做正确的事;比如段落就用p标签,页眉就用header标签,页脚用footer标签,导航用nav标签,文章就用article标签,视频用video标签等等。

语义化HTML的好处有:

  1. 易于用户阅读:在没有CSS情况下,页面也能够更好的呈现内容结构与代码结构;
  2. 便于团队的开发和维护:更具有可读性,让代码更好的维护;
  3. 有利于SEO:搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重;
  4. 利于其他设备的解析:如屏幕阅读器、盲人阅读器,提高可访问性。

meta viewport是做什么用的,怎么写

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
参数 含义
width 设置layout viewport 的宽度,为一个正整数,或字符串"device-width"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性对我们并不重要(很少使用)
user-scalable 是否允许用户进行缩放

MDN - <meta>

博客园 - 移动前端开发之viewport的深入理解


img标签中的alt和title有什么区别

  • alt是当图片加载失败时,显示在网页上的替代图片的文字
  • title是鼠标放在图片上时显示的文字,来更加清楚的表达链接的目的。
  • alt只适用于img标签,而title适用于很多标签。

你用过哪些HTML5标签

MDN - HTML5标签列表


HTML5有哪些新特性?废除了哪些元素?如何让低版本的IE支持 HTML5新标签?

新特性

  1. 语义:新增加了<section><article><nav><header><footer>等标签。
  2. 连通性:增加Web Sockets、Server-sent events特性,帮助我们实现服务器将数据推送到客户端的功能。
  3. 离线 & 存储:对本地离线存储的更好的支持;localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除。
  4. 多媒体:<audio><video>元素嵌入并支持新的多媒体内容的操作。
  5. 2D/3D 绘图 & 效果:增加用于绘制图像的canvas,SVG矢量图像格式。
  6. 性能 & 集成:HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。
  7. 设备访问 Device Access:能够处理各种输入和输出设备。

废除的元素

  1. 表现元素:basefont、big、center、font、s、strike、tt、u。
  2. 部分浏览器支持的元素:applet、bgsound、blink、marquee。
  3. 对可用性产生负面影响的元素:frameset、frame、noframes,在html5中不支持frame框架,只支持iframe框架。

让低版本的IE支持HTML5新标签

使用html5shiv可以解决IE低版本不兼容的问题,只需要在head中加入当版本低于IE9时,浏览器会加载html5.js脚本,使得支持HTML5的新功能,也可以将脚本文件下载到本地。

<head>
  <!--[if lt IE 9]>
  <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>
  </script>
  <![endif]-->
</head>

MDN - HTML5


H5是什么

首先H5 != HTML5
H5是指在手机这类无法播放Flash的移动端上呈现的,可以达到Flash效果的网页,也可称移动端PPT。


@import与link的区别

  1. @import是CSS提供的语法规则,只有导入样式表的作用;link是HTML的标签,不仅可以加载CSS,还可以定义RSS、rel连接属性等。
  2. 页面被加载时,@import引入的CSS将在页面加载完毕后被加载;link标签引入的CSS被同时加载。
  3. @import在IE5+才能被识别;link不存在兼容问题。
  4. @import不支持使用JS控制DOM改变样式;而link支持。

常见的浏览器内核

浏览器的内核分成两部分:渲染引擎JS引擎

渲染引擎:负责取得网页的内容(HTML、XML、图像等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。

JS引擎:解析JavaScript语言,执行JavaScript语言来实现网页的动态效果。

常见的浏览器内核如下:

  • Trident内核(又称MSHTML):IE、猎豹安全浏览器、360安全浏览器、搜狗浏览器、百度浏览器、UC浏览器等等;
  • Gecko内核:Netscape6及以上版本、FireFox等;
  • Webkit内核:Chrome、Safari等;
  • Presto内核(现为Blink):Opera7及以上。

什么是重绘和重排

传送门 - 重绘和重排(回流)


什么是DOCTYPE

<!DOCTYPE>必须声明在文档中的最前面的位置

<!DOCTYPE>声明不是一个HTML标签,它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

注意:总是给您的 HTML 文档添加 <!DOCTYPE> 声明,确保浏览器能够预先知道文档类型。


什么是优雅降级和渐进增强

优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

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

// 渐进增强写法
.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;
}

HTML全局属性有哪些

属性 描述
accesskey 规定激活元素的快捷键
class 规定元素的一个或多个类名(引用样式表中的类)
contenteditable 规定元素内容是否可编辑
data-* 用于存储页面或应用程序的私有定制数据
dir 规定元素中内容的文本方向
draggable 规定元素是否可拖动
hidden 样式上会导致元素不显示,但是不能用这个属性实现样式
id 规定元素的唯一id
lang 规定元素内容的语言
style 规定元素的CSS行内元素
title 规定有关元素的额外信息

其他链接

<head>部分相关的标签清单:

  1. 英文版
  2. 中文版
posted @ 2020-08-22 00:39  LqZww  阅读(84)  评论(0编辑  收藏