基础

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

# 标签速查表

标签 描述 版本 属性
<!--...--> 定义注释 4/5 none
<!DOCTYPE> 定义文档类型 4/5 none
<a> 定义超链接,用于从一个页面链接到另一个页面。 4/5 href | hreflang | media | ping | rel | target | type
<abbr> 定义缩写 4/5 全局属性
<acronym> 定义首字母缩写 4 -
<address> 定义文档作者或拥有者的联系信息 . 4/5 全局属性
<applet> 定义嵌入的 applet 4 -
<area> 定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。 4/5 alt | coords | href | hreflang | media | ping | rel | shape | target | type
<article> 定义独立的内容 5 全局属性
<aside> 定义页面内容之外的内容 5 全局属性
<audio> 定义声音,比如音乐或其他音频流。 5 autobuffer | autoplay | controls | loop | src
<b> 定义粗体文本 , 用于强调某些文本 4/5 全局属性
<base> 定义页面上的所有链接规定默认地址或默认目标 4/5 href | target
<basefont> 定义文档中所有文本的默认颜色、大小和字体 4 -
<bb> 定义文本的文本方向,使其脱离其周围文本的方向设置。 5 type
<bdi> 指的是 bidi 隔离, 允许您设置一段文本,使其脱离其父元素的文本方向设置 . 5 dir
<bdo> 定义文本显示的方向。 4/5 dir
<big> 定义大号文本。 4 -
<blockquote> 定义摘自另一个源的块引用 。 4/5 cite
<body> 定义文档的主体 。 5 全局属性
<br> 插入换行符。 4/5 全局属性
<button> 定义按钮。 4/5 autofocus | disabled | form | formaction | formenctype | formme-thod | formnovalidate | formtarget | name | type | value
<canvas> 定义图形,比如图表和其他图像 5 height | width
<caption> 定义表格标题。 4/5 全局属性
<center> 定义居中的文本。 4 -
<cite> 定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。 4/5 全局属性
<code> 定义计算机代码文本。 4/5 全局属性
<col> 定义为表格中的一个或多个列定义属性值。 。 4/5 span
<colgroup> 定义对表格中的列进行组合,以便对其进行格式化。 4/5 span
<command> 定义命令按钮。 5 checked | default | disabled | hidden | icon | label | radiogroup | type
<datagrid> 定义可选数据的列表。 datagrid 作为树列表来显示。 5 disabled | multipe
<datalist> 定义下拉列表。 请与 input 元素配合使用该元素,来定义 input 可能的值。 5 全局属性
<dd> 定义一个定义列表中对项目的描述 。 4/5 全局属性
<del> 定义删除文本。 4/5 cite | datetime
<details> 定义描述文档或文档某个部分的细节。 5 open
<dialog> 定义对话,比如交谈 5 全局属性
<dir> 定义目录列表。 4 -
<div> 定义文档中的一个部分。 4/5 全局属性
<dfn> 定义一个定义项目。 4/5 title
<dl> 定义一个定义列表 . 4/5 全局属性
<dt> 定义一个定义列表中的一个项目。 4/5 全局属性
<em> 呈现为被强调的文本。 4/5 全局属性
<embed> 定义嵌入的内容,比如插件 5 height | src | type | width
<fieldset> 定义用于从逻辑上将表单中的元素组合起来。 4/5 disabled | form | name
标签 描述 版本 属性
<figcaption> 定义 fiqure 元素的标题(caption)。 5 全局属性
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。 5 全局属性
<font> 规定文本的字体、大小和颜色。 4 -
<footer> 定义 section 或 document 的页脚。 5 全局属性
<form> 用于创建供用户输入的 HTML 表单 4/5 action | date | replace | accept | accept-charset | enctype | method | target
<frame> 定义子窗口(框架) 4 -
<frameset> 定义框架集。 4 -
<h1> to <h6> 定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题 4/5 全局属性
<head> 所有头部元素的容器。位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息,等等。 4/5
<header> 定义文档的页眉(介绍信息)。 5 全局属性
<hgroup> 用于对网页或区段(section)的标题进行组合。 4/5 全局属性
<hr> 水平线,它应该定义内容中的主题变化 4/5 全局属性
<html> 告知浏览器这是一个 HTML 文档。 4/5 manifest
<i> 呈现斜体的文本。 4/5 全局属性
<iframe> 创建包含另一个文档的行内框架。 4/5 src | name | sandbox | seamless | width | height
<img> 定义 HTML 页面中的图像。 4/5 alt | src | height | ismap | usemap | width
<input> 规定用户可输入数据的输入字段。 4/5 accept | alt | auto-complete | autofocus | checked | disabled | from | formaction | formenctype | formme-thod | formnovalidate | formtarget | height | list | max | maxiength | min | multipe | name | pattern | placeholder | readonly | required | size | src | step | type | value | width
<ins> 定义文档的其余部分之外的插入文本。 4/5 cite | datetime
<isindex> 定义单行的输入域。 4 -
<keygen> 规定用于表单的密钥对生成器字段。 5 autofocus | challenge | disabled | form | keytype | name
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 4/5 全局属性
<label> 为 input 元素定义标签(label) 4/5 for | form
<legend> 为以下元素定义标题(caption):<fieldset><figure><details> 4/5 全局属性
<li> 定义列表项,有序列表和无序列表中都使用 <li> 标签。 4/5 value
<link> 定义文档与外部资源之间的关系。 大多数时候都用来连接样式表。 4/5 href | rel | media | hreflang | type | sizes
<mark> 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签 5 全局属性
<map> 定义客户端图像映射。图像映射指的是带有可点击区域的图像。 4/5 label | type
<menu> 定义菜单列表。当希望列出表单控件时使用该标签。 5 autosubmit | compact | label | type
<meta> 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 5 charset | content | http-equiv | name | scheme
<meter> 定义度量衡。仅用于已知最大和最小值的度量。 5 high | low | max | min | optimum | value
<nav> 定义导航链接的部分。 5 全局属性
<noframes> 向浏览器显示无法处理框架的提示文本。 4 -
<noscript> 定义在脚本未被执行时的替代内容(文本)。 4/5
标签 描述 版本 属性
<object> 定义一个嵌入的对象。 4/5 data | height | type | usemap | width | object
<ol> 定义有序列表。 4/5 compact | start | reversed
<optgroup> 定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。 4/5 disabled | label
<option> 定义下拉列表中的一个选项。 4/5 disabled | label | selected | value
<output> 定义不同类型的输出,比如脚本的输出。 5 form | for | name
<p> 定义段落 4/5 全局属性
<param> 允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 <object> 标签提供参数。 4/5 name | value | type | valuetype
<pre> 定义预格式化文本。 4/5 全局属性
<progress> 定义运行中的进度(进程)。 5 max | value
<q> 定义一个短的引用。 4/5 cite
<ruby> 定义 ruby 注释。 5 全局属性
<rp> 定义若浏览器不支持 ruby 元素显示的内容。 5 全局属性
<rt> 义 ruby 注释的解释。 5 全局属性
<s> 定义加删除线的文本 4 -
<samp> 定义样本计算机代码。 4/5 全局属性
<script> 定义脚本。 4/5 async | type | defer | src | charset
<section> 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分 5 cite
<select> 创建下拉列表 4/5 autofocus | data | disabled | form | multiple | name
<small> 将旁注 (side comments) 呈现为小型文本。 4/5 全局属性
<source> 为媒介元素(比如 <video><audio>)定义媒介资源。 5 media | src | type
<span> 用于对文档中的行内元素进行组合 4/5 全局属性
<strike> 定义加删除线的文本。 4 -
<strong> 定义重要的文本 . 4/5 全局属性
<style> 定义 HTML 文档的样式信息。 4/5 media | type | scoped
<sub> 定义下标文本 4/5 全局属性
<sup> 定义上标文本。 4/5 全局属性
<summary> 包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。 4/5 全局属性
<table> 定义 HTML 表格 4/5 全局属性
<tbody> 定义表格的主体。 4/5 全局属性
<td> 定义表格单元 4/5 colspan | rowspan | headers
<textarea> 定义一个文本区域 (text-area) (一个多行的文本输入区域)。 4/5 autofocus | cols | disabled | form | name | feadonly | required | required | rows | maxlength | placeholder | wrap
<tfoot> 定义表格的页脚(脚注) 4/5 全局属性
<th> 定义 HTML 表格中的表头单元格。 4/5 colspan | rowspan | scope
<thead> 定义表格的表头。 4/5 全局属性
<time> 定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。 5 datetime
<title> 定义文档的标题 4
<tr> 定义表格中的行。 4/5 全局属性
<track> 为诸如 video 元素之类的媒介规定外部文本轨道。 5 default | kind | label | src | srclang
<tt> 定义打字机文本。 4 -
<u> 定义下划线文本 。 4 -
<ul> 定义无序列表。 4/5 全局属性
<var> 定义变量。 4/5 全局属性
<video> 定义视频,比如电影片段或其他视频流。 5 src | poster | autobuffer | autoplay | loop | controls | width | height
<xmp> 定义预格式文本。 4 -
上次更新: 2021/6/1下午3:42:02