html面试考点全面总结上篇

周琛
2,086 阅读11分钟

简介

拿到 字节跳动实习生offer 总结

回馈分享一波自己的知识点总结

希望读者依此构建自己的知识树（思维导图）

偷懒一下：可参考我自己总结思维导图 : 点这里

附带：高频面试题积累文档。 来自于（学长、牛客网等平台）

自己开发的博客地址：zxinc520.com

github地址: 链接地址

此篇 html 共总结 22 大知识点： 全部弄懂了，面试很容易。

1、浏览器页面由哪三层构成

  • 结构层
    • HTML
    • 构建文件结构
  • 表示层
    • css
    • 设置文档呈现效果
  • 行为层
    • JS和 DOM脚本
    • 实现文档的行为

2、语义化 | 谈谈html5语义化

2.1、什么是语义化？

HTML5的语义化指的是合理使用语义化的标签来创建页面结构，如header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。

2.2、语义化的优点有

  1. 代码结构清晰，易于阅读，利于开发和维护
  2. 提高用户体验，在样式加载失败时，页面结构清晰
  3. 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
  4. 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

2.3、常用语义化标签有哪些

article | aside | nav | section | header | footer

3、HTML5元素分类

  1. 结构性元素
    • section：在web页面应用中，该元素也可以用于区域章节表述；
    • header：页面主题上的头部，注意区别于head元素；
    • footer：页面的底部（页脚）；
    • nav：是专门用于菜单导航、链接导航的元素，是navigator的缩写；
    • article：用于表示一篇文章的主题部分，一般为文字集中显示的区域；
  2. 级块性元素
    • aside：用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容；
    • figure：是对多个元素进行组合并展示的元素，通常与figcaption联合使用；
    • code：表示一段代码块；
    • dialog：用于表达人与人之间的对话，该元素还包括dt和dd这两个组合元素，他们常常同时使用。dt用于表示说话者，而dd用来表示说话者的内容。
  3. 行内语义性元素
    • meter：表示特定范围内的数值，可用于工资、数量、百分比等；
    • time：表示时间值；
    • progress：用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视；
    • video：视频元素，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式；
    • audio：音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式；
  4. 交互性元素
    • details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与legend交互才会显示出来；
    • datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新；
    • menu：主要用于交互菜单；
    • command：用来处理命令按钮。

4、常见空元素

含义 ：没有元素内容标记的内容【也称自闭合元素】

常用的空元素：

<meta> <br> <hr> <input> <img> <link>

5、表单增强 | 新增的input类型及属性

5.1、新类型

  • color ：用于指定颜色的控件
  • number：用于输入浮点数的控件
  • tel：用于输入电话号码的控件；换行会被自动从输入的值中移除A，但不会执行其他语法。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。
  • email：用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。
  • url ：用于编辑URL的字段
  • range ：用于输入不精确值控件
  • search ：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
  • 与时间相关
    • date ： 用于输入日期的控件（年，月，日，不包括时间）
    • time ： 用于输入不含时区的时间控件
    • datatime 【已弃用】 ： 用于输入日期和时间的控件（小时，分钟， 秒，基于UTC时区的一小部分。 此功能已从WHATWG HTML中删除。
    • datetime-local ： 用于输入日期时间控件，不包含时区
    • month ： 用于输入年月的控件，不带时区
    • week ： 用于输入一个由星期-年组成的日期，日期不包括时

5.2、新属性

  • placeholder

  • required 必填项

  • list 属性规定输入域的 datalist。datalist 是输入域的选项列表

  • pattern 定义正则

  • autofocus 属性规定在页面加载时，域自动地获得焦点。

  • readonly 该字段只读，不能修改

  • autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

  • min/max / step

    • min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

      max 属性规定输入域所允许的最大值。

      min 属性规定输入域所允许的最小值。

      step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。

6、认识 SVG

含义 ：可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述基于二维的矢量图形的，基于 XML 的标记语言。

关键词：【基于 XML】【矢量】 【图像格式】

特点：

  • 矢量
    • 可以任意缩放
    • 不会破坏图像的清晰度和细节
    • 边缘清晰，适用任何分辨率
  • 文本独立 文字独立于图像
  • 文件小 下载快
  • 颜色控制

6.1、SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？

Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。 从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。 同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。 关于最后一点二者谁更有前途：从上面我们可以知道二者是有不同用途的，作为一个开发者，你应该做的是理解应用程序的具体需求并选择正确的技术来实现它。

7、浏览器内核

7.1、认识内核

  • 渲染引擎 ：渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
  • JS 引擎
    • 解析和执行 JavaScript来实现网页的动态效果
    • 引擎越来越独立，内核就倾向于只指渲染引擎

7.2、主流浏览器所用的内核

  • IE 浏览器 Trident 内核
  • 谷歌浏览器（chrome）
    • Webkit（之前使用）
    • blink 内核
  • Opera 浏览器
    • blink内核
    • Presto 内核（之前使用）
      • 渲染速度的优化达到了极致
      • 牺牲了兼容性
  • 火狐浏览器（Firefox）
    • Gecko 内核 ： 代码完全公开，可开发程度很高
  • Safari 浏览器 ：苹果公司 webkit内核
  • 国产浏览器
    • 双内核（一个负责兼容，一个负责速度）
    • 常用
      • Trident + webkit
      • Trident + blink

8、WEB标准以及W3C

8.1、web标准

分为结构、表现、行为

web标准是什么？

一系列标准的集合：

  • 结构化标准语言
  • 表现标准语言
  • 行为标准语言
web标准诞生原因？

为了解决因浏览器版本不同、软硬件设备不同导致的需多版本开发的问题。

8.2、W3C

W3C 对 web标准提出规范化要求

一：结构要求：
  • 遵循的好处
    • 提升搜索引擎对页面的抓取效率
    • 对SEO很有帮助
  • 具体
    • 标签字母要小写
    • 标签要闭合
    • 标签不允许随便嵌套
二：表现与行为要求：
  • 遵循的好处
    • 使用户浏览者更方便的阅读
    • 使网页开发者之间更好的交流
  • 具体
    • 尽量使用外链css样式表和js脚本：提高页面渲染速度
    • 页面尽量少用行间样式表 ： 使结构和表现分离
    • 标签 id 和 class等属性名要见文知义

9、Doctype（DTD）

作用 ： 声明文档的类型风格

告诉浏览器采用何种渲染模式解析页面

9.1、渲染模式

  • 怪异模式（兼容模式、混杂模式）
    • 服务于旧式规则
    • 页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
  • 标准模式（严格模式）
    • 服务于标准规则
    • 标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行
  • 近似标准模式
    • 基本是标准模型
    • 有一些是自己的调整

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

9.2、标准模式和混杂模式的区别？

  • 盒模型的处理差异：标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；

  • 行内元素的垂直对齐：很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然CSS的规范要求它们被对齐至盒内文本的基线。标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。最直接的例子就是图片的显示。在标准模式下，图片并不是与父元素的下边框对齐的，如果仔细观察，你会发现图片与父元素下边框之间存在一点小空隙。那是因为标准模式下，图片是基线对齐的。而怪异模式下，则不存在这个问题。具体请看这篇文章 CSS深入理解vertical-align和line-height的基友关系。

9.3、标准模式和严格模式的区别？

严格模式主要有以下限制：

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，否则报错
  • 不能使用with语句
  • 不能对只读属性赋值，否则报错
  • 不能使用前缀0表示八进制数，否则报错
  • 不能删除不可删除的属性，否则报错
  • 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
  • eval不会在它的外层作用域引入变量
  • eval和arguments不能被重新赋值
  • arguments不会自动反映函数参数的变化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局对象
  • 不能使用fn.caller和fn.arguments获取函数调用的堆栈

10、meta标签

<meta > 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

10.1、四个属性

  • http-equiv 【重要关键词】
    • content-type
      • 定义字符编码
      • 不推荐使用 改用charset 属性
    • refresh：指定以秒为单位，执行重载和重定向
  • name 【 重要关键词】
    • application-name：应用程序名称
    • keywords ： keywords用来告诉搜索引擎你网页的关键字是什么
    • author ： 当前页的作者名
    • viewport
      • 设置浏览器视口
      • 重要关键字
        • width ： 视口宽度
        • *-scale （initial-scale）： 缩放相关
        • user-scalable ： 是否可以手动缩放
        • 例如：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
  • description description用来告诉搜索引擎你的网站主要内容
  • content ：具体描述 、不能单独存在
  • charset（HTML5）：推荐使用 utf-8 简化了不同脚本对文件中字符的处理

10.2、meta标签的作用

  1. 搜索引擎优化（SEO）

  2. 定义页面使用语言

  3. 自动刷新并指向新的页面

  4. 实现网页转换时的动态效果

  5. 控制页面缓冲

  6. 网页定级评价

  7. 控制网页显示的窗口

avatar
文章
阅读
粉丝