基础

2021/03/10

# 语义化

什么是语义化?就是用合理、正确的标签来展示内容,比如 h1~h6 定义标题。

好处:

  • 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构
  • 有利于 SEO,搜索引擎根据标签来确定上下文和各个关键字的权重
  • 方便其他设备解析,如盲人阅读器根据语义渲染网页
  • 有利于开发和维护,语义化更具可读性,代码更好维护,与 CSS3 关系更和谐

# Html5 新标签新特性

语义标签:

  • <hrader></header>: 定义了文档的头部区域
  • <footer></footer>: 定义了文档的尾部区域
  • <nav></nav> 定义文档的导航
  • <section></section>:定义文档中的节(section、区段)
  • <article></article>:定义页面独立的内容区域
  • <aside></aside>:定义页面的侧边栏内容
  • <detailes></detailes>:用于描述文档或文档某个部分的细节
  • <summary></summary>:标签包含 details 元素的标题
  • <dialog></dialog>:定义对话框,比如提示框
  • ...

增强型表单:

  1. 新增的 type 属性值

    • email: <input type="email"> 输入邮箱格式
    • tel: <input type="tel"> 输入手机号码格式
    • url: <input type="url"> 输入url格式
    • number: <input type="number"> 输入数字格式
    • search: <input type="search"> 搜索框(体现语义化)
    • range: <input type="range"> 自由拖动滑块
    • time: <input type="time"> 选择一个时间
    • date: <input type="date"> 从一个日期选择器选择一个日期
    • month: <input type="month"> 选择一个月份
    • week: <input type="week"> 选择周和年
  2. 新增的表单属性

    • placehoder:占位符,提供可描述输入字段预期值的提示信息
    • required:是一个 boolean 属性,要求填写的输入域不能为空
    • pattern:描述了一个正则表达式用于验证 <input> 元素的值
    • min, max:设置元素最小值与最大值
    • multiple:多文件上传
    • autofocus:是一个 boolean 属性,规定在页面加载时,域自动地获得焦点
    • autocomplete:规定表单是否应该启用自动完成功能
    • accesskey:规定激活(使元素获得焦点)元素的快捷键

多媒体标签:

  • embed:定义嵌入的内容
  • audio:播放音频
  • video:播放视频

Canvas 绘图:

基本使用方法:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

SVG 绘图:

SVG 是指可伸缩的矢量图形。

与 Canvas 的区别:

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

地理定位 API:

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}

拖拽 API

Web Worker

Web Storage

WebSocket

# input 和 textarea 的区别

input:

  • 要表现为文本框,需设置 type="text"
  • 单行文本框
  • 通过 size 属性指定文本框中能够显示的字符数
  • 通过 value 特性,可以设置文本框的初始值
  • 通过 maxlength 特性指定文本框可以接收的最大字符数

textarea:

  • 始终呈现为一个多行文本框
  • 可以使用 rows, cols 设置文本框大小(rows 指定的是文本框的字符行数;cols 指定文本框的字符列数)
  • <textarea> 的初始值必须要放在 <textarea></textarea> 之间
  • <textarea>maxlength 属性

无论这两种文本框在标记中有什么区别,但它们都回将用户输入的内容保存在 value 属性中。可以通过这个属性读取和设置文本框的值,如下面的例子所示:

var textbox = documnet.getElementsByTagName("textarea").value;
textbox.value = "some new value";

# 用一个 div 模拟 textarea 的实现

<textarea> 标签定义一个多行的文本输入控件。但是它不能像 div 一样随着内容增加而自动增加,一言不合就出现滚动条,于是为了更好的交互,部分业务场景下可能需要我们使用 div 来模拟 textarea 的实现:

<div contenteditable="true">
    <!-- 此处省略 -->
</div>
div {
    width: 400px;
    min-height: 100px;
    max-height: 300px;
    padding: 3px;
    outline: 0;
    border: 1px solid #a0b3d6;
    font-size: 12px;
    word-wrap: break-word;
    overflow-y: auto; /* 超过最大高度就出现滚动条 */
}

利用这一方法,我们还可以实现很多 textarea 无法实现的功能,比如在 textarea 里设置局部字体的颜色、字体大小等等,可以说我们实现了一个能够识别 html 代码的 textarea

# 移动设备忽略将页面中的数字识别为电话号码的方法

<meta name="format-detection" content="telephone=no" />

<link> 放在 <head> 中:

<link> 标签放在 <head></head> 之间是规范要求的内容。此外,这种做法可以让页面逐步呈现,提高了用户体验。将样式表放在文档底部附近,会使许多浏览器(包括 Internet Explorer)不能逐步呈现页面。一些浏览器会阻止渲染,以避免在页面样式发生变化时,重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

<script> 标签恰好放在 </body> 之前:

脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部,保证 HTML 首先完成解析,将页面尽早呈现给用户。

例外情况是当你的脚本里包含 document.write() 时。但是现在,document.write() 不推荐使用。同时,将 <script> 标签放在底部,意味着浏览器不能开始下载脚本,直到整个文档(document)被解析。也许,对此比较好的做法是,<script> 使用 defer 属性,放在 <head> 中。

# 什么是渐进式渲染(progressive rendering)?

渐进式渲染是用于提高网页性能(尤其是提高用户感知的加载速度),以尽快呈现页面的技术。

在以前互联网带宽较小的时期,这种技术更为普遍。如今,移动终端的盛行,而移动网络往往不稳定,渐进式渲染在现代前端开发中仍然有用武之地。

一些举例:

  • 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时,JavaScript 将加载并显示图像
  • 确定显示内容的优先级(分层次渲染)——为了尽快将页面呈现给用户,页面只包含基本的最少量的 CSS、脚本和内容,然后可以使用延迟加载脚本或监听 DOMContentLoaded/load 事件加载其他资源和内容
  • 异步加载 HTML 片段 —— 当页面通过后台渲染时,把 HTML 拆分,通过异步请求,分块发送给浏览器

# iframe 框架有那些优缺点

优点:

  • iframe 能够原封不动的把嵌入的网页展现出来
  • 如果有多个网页引用 iframe,那么你只需要修改 iframe 的内容,就可以实现调用的每一个页面内容的更改,方便快捷
  • 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用 iframe 来嵌套,可以增加代码的可重用
  • 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由 iframe 来解决

缺点:

  • 搜索引擎的爬虫程序无法解读这种页面
  • 框架结构中出现各种滚动条
  • 使用框架结构时,保证设置正确的导航链接
  • iframe 页面会增加服务器的 http 请求

# DOM 和 BOM 有什么区别

DOM

  • Document Object Model,文档对象模型
  • DOM 是为了操作文档出现的 API,document 是其的一个对象
  • DOM 和文档有关,这里的文档指的是网页,也就是 html 文档。DOM 和浏览器无关,他关注的是网页本身的内容

BOM

  • Browser Object Model,浏览器对象模型
  • BOM 是为了操作浏览器出现的 API,window 是其的一个对象
  • window 对象既为 javascript 访问浏览器提供 API,同时在 ECMAScript 中充当 Global 对象

# Doctype 有什么作用

doctype 是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档。

声明是用来指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。声明必须是 HTML 文档的第一行,位于 html 标签之前。

浏览器本身分为两种模式,一种是标准模式,一种是怪异模式,浏览器通过 doctype 来区分这两种模式,doctype 在 html 中的作用就是触发浏览器的标准模式,如果 html 中省略了 doctype,浏览器就会进入到 Quirks 模式的怪异状态,在这种模式下,有些样式会和标准模式存在差异,而 html 标准和 dom 标准值规定了标准模式下的行为,没有对怪异模式做出规定,因此不同浏览器在怪异模式下的处理也是不同的,所以一定要在 html 开头使用 doctype。

# href 和 src 区别

href:

href 标识超文本引用,用在 linka 等元素上,href 是引用和页面关联,是在当前元素和引用资源之间建立联系。

若在文档中添加 href ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式。

src:

src 表示引用资源,替换当前元素,用在 img, script, iframe 上,src 是页面内容不可缺少的一部分。

当浏览器解析到 src,会暂停其他资源的下载和处理(图片不会暂停其他资源下载),直到将该资源加载、编译、执行完毕,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

# addEventListener 第三个参数是什么?

  • useCapture
  • option:
    • capture: true 表示在捕获阶段触发
    • once: true 表示只调用一次
    • passive: true 表示 listener 永远不会调用 preventDefault()

# Element 和 Node 的区别?

Node 是一个基类,DOM 中的 Element, TextComment 都继承于它。

换句话说,ElementTextComment 是三种特殊的 Node,它们分别叫做ELEMENT_NODE, TEXT_NODECOMMENT_NODE

上次更新: 2021/5/6 下午4:08:15