简介

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

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

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

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

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

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

github地址: 链接地址

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

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

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

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

2.1、什么是语义化？

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

2.2、语义化的优点有

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

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

article | aside | nav | section | header | footer

3、HTML5元素分类

结构性元素
- section：在web页面应用中，该元素也可以用于区域章节表述；
- header：页面主题上的头部，注意区别于head元素；
- footer：页面的底部（页脚）；
- nav：是专门用于菜单导航、链接导航的元素，是navigator的缩写；
- article：用于表示一篇文章的主题部分，一般为文字集中显示的区域；
级块性元素
- aside：用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容；
- figure：是对多个元素进行组合并展示的元素，通常与figcaption联合使用；
- code：表示一段代码块；
- dialog：用于表达人与人之间的对话，该元素还包括dt和dd这两个组合元素，他们常常同时使用。dt用于表示说话者，而dd用来表示说话者的内容。
行内语义性元素
- meter：表示特定范围内的数值，可用于工资、数量、百分比等；
- time：表示时间值；
- progress：用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视；
- video：视频元素，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式；
- audio：音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式；
交互性元素
- 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标签的作用

搜索引擎优化（SEO）
定义页面使用语言
自动刷新并指向新的页面
实现网页转换时的动态效果
控制页面缓冲
网页定级评价
控制网页显示的窗口