zlcjc

html面试考点全面总结上篇

拿到 字节跳动实习生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、常见空元素

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

常用的空元素:



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. 控制网页显示的窗口

######

######

精彩评论:
上一页 下一页