本系列会将html5相关规范及涉及到的技术逐一解读,以完善我们的知识体系,其分为三期,分别是
前言
本文对html5的定义参考MDN和WHATWG
Standards,即狭义上说html5就是最新的html标准,即HTML
Living Standard,广义上说还包括其他和现代浏览器相关的技术。
我们这里把HTML5相关规范定义为和前端三件套直接相关的规范,除了前面文章详细讲过的ecma262(参考ES2021特性全集)和CSS SPECIFICATIONS(参考2020版w3c css specifications全解)两个规范,本文会补充最新的html规范和其他webapi相关的规范。注意webapi指的是没在es262规范定义但是需要浏览器提供的接口,比如XMLHttpRequest
。
这些规范主要是w3c和whatwg维护,关于两个组织的职责划分请参考W3C AND WHATWG TO WORK TOGETHER TO ADVANCE THE OPEN WEB PLATFORM,总的还说就是whatwg维护大部分的html5规范(具体见WHATWG Standards),w3c会做一定补充(具体见ALL W3C WEB API STANDARDS)。
这里继续读规范学技术,相关规范及必要的介绍如下:
- HTML html相关规范,会和其他规范有交集
- Infra 其他标准相关的基本概念
- DOM 文档对象模型,提供了一些api用来使用js操作web页面
- Compatibility 描述了web浏览器需要支持的非标准(通常带有供应商前缀)CSS属性和domapi来和实际的web兼容。
- Console debug用的console
- Encoding 编码相关
- Fetch
- Fullscreen API 全屏相关
- MIME Sniffing 一种内容嗅探标准
- Notifications API 通知
- Quirks Mode Quirks模式
- Storage 本地存储
- Streams 流
- URL
- XMLHttpRequest
w3c补充的相关规范,这里只会讨论MDN推荐且值得现在了解的api。
- File API 文件处理
- Geolocation API 地理
- Canvas API
- WebGL 图形库
- HTML Drag and Drop API 拖拽
- IndexedDB indexDB
- Clipboard API 剪切板
- Permissions API 权限
- Page Visibility 页面可见性
- Service Worker API service worker
- Push API 接受服务器推送
- Resize Observer API
- WebRTC 实时通信
- Progressive web apps (PWAs)
- Cooperative Scheduling of Background Tasks 后台任务
- Long Tasks API 获取耗时超过50ms的任务
- Media Source Extensions 媒体资源扩展
其他,剩下这些仅作了解,暂时不讨论
- Performance API 性能
- MediaStream Image Capture API 截图
- Media Capabilities API 媒体功能
- Media Capture and Streams API 媒体流
- Media Session API 媒体会话
- MediaStream Recording 媒体记录
- Web Crypto API 加密
- Encrypted Media Extensions API 控制加密内容的回放
- Network Information API 网络信息
- Picture-in-Picture API 画中画
- Pointer events 指针事件
- Screen Capture API 截屏
- Screen Wake Lock API 避免锁屏
- Touch events 触摸事件
- Vibration API 震动
- Visual Viewport API 获取或修改视口
- Web Animations API web动画
- Web Audio 音频
- Web Authentication API 身份验证
- WebVTT 视频文本轨格式
- WebXR Device 用于vr
下面依次介绍,由于部分章节会忽略,因此为了和原规范大章节保持一致,最终可能不连贯
HTML
1 Introduction
html是万维网的核心标记语言,最初是作为一种语义化的科学文档设计的语言,后来用来描述其他类型的文件甚至程序。
历史
在最开始的5年(1900-1995),html先后由CERN和IETF维护。后来w3c创建并做了接力,分别在1995年和1997年发布了3.0和4.0版本。
再往后w3c成员决定停止发展html,取而代之的是以xml为基础的xhtml,后来发布的xhtml2不与早期的html相兼容。不过从1998年到2004年依然陆续发布了DOM Level 1、DOM Level 2 Core和DOM Level 2 HTML和DOM Level 3等html相关api的规范。
在2004年,Mozilla和Opera控制的w3c拒绝了继续重新发展html的提案,Apple,Mozilla和Opera随后自立门户创建了WHATWG发展html5,其内容包括了之前的HTML4,XHTML1和DOM2 HTML并且更加详细。w3c在2006年又表示愿意参与html5的开发,并成立了工作小组和whatwg共同维护,但是由于理念的不同(w3c希望发布最终版的html5,并向后迭代,whatwg希望将html5作为Living Standard不断更新)双方在各自网站发布的规范有所不同,于是这个世界上出现了两种html5规范,
最终在2019年w3c认怂,两个组织签署了一个协议决定一起推动在whatwg发布的版本,也就是现在讨论的这个版本。
规范结构
本规范分成了以下部分,其中某些部分会在给定的其他规范中讨论
- 介绍(Introduction),就是现在看的这部分
- 通用基础(Common infrastructure),主要讲了一些术语帮助理解其他章节
- 语义、结构和html文档的api(Semantics, structure, and APIs of HTML documents)
- html元素(The elements of HTML),这里会介绍各种html元素
- 微数据(Microdata),引入了一种机制用来向文档添加可机读的注释,以使工具可以从文档中提取键值对组成的树
- 用户交互(User interaction),为用户交互和修改内容提供了一种机制,比如拖拽,在DOM部分讨论
- 加载web页面(Loading web pages),这部分定义了影响多页面的环境,在DOM部分讨论
- web api(Web application APIs),介绍html中脚本的基本特性
- Web workers,定义了后台线程的api
- 通信api(The communication APIs),应用之间通信
- Web storage,基于键值对的客户端存储
html简介
一个基本的html文档是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>
html文档包含一个元素和文本组成的树,每个元素都有一个起始标签(比如<body>)和结束标签(比如</body>)。标签必须彼此嵌套,而不能重叠。
元素可以有属性来控制元素怎么工作,属性被放置在起始标签,包含一个name一个value,两者用=
连接。如果一个属性值不包含空格或者 " ' = < >`就可以不加引号。如果值是一个空字符串就可以省略
<!-- empty attributes -->
<input name=address disabled>
<input name=address disabled="">
<!-- attributes with a value -->
<input name=address maxlength=200>
<input name=address maxlength='200'>
<input name=address maxlength="200">
html用户代理会解析标记为dom树,一个dom树是文档在内存中的表示。dom树可以被script操作,脚本(特别是js)可以用script元素嵌入或者使用事件处理器属性。每个元素由一个对象表示,这些对象有对应api用来被操作。
html文档的内容独立于媒介,可以渲染在屏幕上,也可以通过打印机,为了准确影响每一种渲染可以使用一种样式语言,比如css。
2 Common infrastructure
CORS settings attributes
一些可以嵌入内容的元素可以跨域引入资源,比如 <audio>、<img>、<link>、<script> 和 <video>,它们都有一个跨域相关的属性crossOrigin
,可取以下值
- anonymous 对cors请求不添加凭证
- use-credentials 提供凭证
- '',和anonymous效果一样
当没指定这个属性时默认不会采用cors,可以用来开启cors,比如用canvas编辑跨域的图片,参考mdn
3 Semantics, structure, and APIs of HTML documents
3.1. document
html用户代理中的每个xml和html文档都用document对象表示。DOM定义了相关的Document和DocumentOrShadowRoot接口
资源元数据管理
- referrer 表示导航到当前页面的url,默认空字符串
- cookie 应用于当前文档的cookie,默认空字符串
- lastModified 文档资源文件上次修改的时间
- readyState 文档准备状态
dom树访问器
通过document访问各种dom元素,比如使用document.documentElement访问文档元素,即html,还还可以访问其他元素
3.2. element
3.2.1 语义
html中的元素、属性和属性值都有特定的语义,比如ol
表示有序列表(ordered list)
3.2.2 dom元素
dom中表示html元素的节点一定要实现并对script暴露本规范相关章节列出的接口。 基本接口,所有html元素都要继承的接口是HTMLELement接口。
3.2.3 html元素构造器
为了支持自定义元素的特性,所有的html元素都有特定的构造器行为。
3.2.4 元素定义
在具体讨论每个元素时可能包含以下信息
- 分类(categories)
- 使用场景(Contexts in which this element can be used)
- 内容(content modal),哪些内容可以作为一个元素的children和后代
- 标签省略(Tag omission in text/html)
- 属性(content attributes),在元素上指定的属性
- 可访问性,指的是aria等
- 接口(DOM interface),默认暴露在window下
3.2.5 内容模型
本规范中的每个元素都有一个内容模型(content model),即元素预期的内容,其中ascii空格总是允许。
3.2.5.1 nothing
当一个元素的内容模型是nothing,则不允许有任何文本节点和元素节点
3.2.5.2 content categories(参考mdn)
规范按照元素的相同表现和规则将元素分类 包括以下
- Metadata content,用来设置其余内容的表现和行为,或者文档和其他文档之间的关系等
<base>, <link>, <meta>, <noscript>, <script>, <style> and <title>.
- Flow content,用在body中的大部分元素都可以包含在内
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text.
还有以下特定条件的元素
- 有map子元素的area
- 有itemprop属性的link
- 有itemprop属性的meta
- Sectioning content,这类元素的内容会在当前的outline创建一个section,在这些区域中使用header、footer和Heading content
<article>, <aside>, <nav> and <section>
- Heading content,定义了section的标题
h1,h2,h3,h4,h5,h6,hgroup
- Phrasing content,定义了包含的文本和标记,它们组成了段落
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
还有以下特定条件的元素
- 只包含phrasing content的a,del,ins,map
- 带有map子元素的area
- 带有itemprop属性的link,meta
- Embedded content,嵌套内容用来引入其他资源
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>
- Interactive content,交互内容是特意设计用来交互的
<a>, <button>, <details>, <embed>, <iframe>, <label>, <select>, and <textarea>.
还有以下特定条件的元素
- 包含controls属性的audio,video
- 包含usemap属性的img,object
- 包含type属性的input和menu
- Palpable content 表示既不是空也不是hidden的元素,其内容被渲染出来。
- Script-supporting elements 本身不表示任何东西(比如不会被渲染),是用来支持脚本的
script,template
3.2.5.3 Transparent content models
一个透明元素的内容是从父元素获取的,比如 ins,如果没有父元素则被当做flow content.
3.2.5.4 Paragraphs
段落,一些phrasing content组成段落
3.2.6 全局属性
下面的属性是所有元素共有的
- accesskey 用于生成快捷键
- autocapitalize 是不是自动大写,包括不自动大写,句子的首字母大写,单词的首字母大写,或全部大写
- autofocus 布尔值,是不是元素一加载就自动focus
- contenteditable 布尔值,是否可编辑
- data-* 非标准,用于自定义属性,使用
HTMLElement.dataset
访问 - dir 文本顺序
- draggable 是否可拖拽
- enterkeyhint 指定在虚拟键盘的enter键上显式什么标签或icon
- hidden 布尔值,表示是否隐藏
- inputmode 当编辑元素内容时,用来指示虚拟键盘类型
- is 自定义元素相关,用在Web Components
- itemid 以下item开头的属性用于微数据
- itemprop
- itemref
- itemscope
- itemtype
- lang 语言
- nonce 即number used once,表示一个加密的nonce,比如用在
Content Security Policy
来决定是不是允许fetch - spellcheck 布尔值,是否要检查拼写错误
- style 包含应用到该元素上的样式声明,建议将样式写在单独的文件,这里只用作测试等目的
- tabindex 一个整数属性,表示元素是否可以获取焦点以及是否参与顺序键盘导航,可以取以下值
- 负值,可获取焦点,但是不参与顺序键盘导航
- 0,可以获取焦点和参与顺序键盘导航,具体顺序按平台而定
- 正值,可以获取焦点和参与顺序键盘导航,顺序从小到大。如果多个元素的值相同,则按文档内的布局顺序。
- title 鼠标浮在元素上的提示信息
- translate 用于指定页面在本地化时,属性值和文本内容要不要被翻译
- id 定义了唯一标识符,用在hash链接、脚本或样式
- class 一个空格分隔的class列表
- slot 插槽有关,用在Web Components 另外还可能有以下事件处理器属性
- onabort
- onauxclick
- onblur*
- oncancel
- oncanplay
- oncanplaythrough
- onchange
- onclick
- onclose
- oncontextmenu
- oncopy
- oncuechange
- oncut
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror*
- onfocus*
- onformdata
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload*
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmouseenter
- onmouseleave
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onpaste
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreset
- onresize*
- onscroll*
- onsecuritypolicyviolation
- onseeked
- onseeking
- onselect
- onslotchange
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onvolumechange
- onwaiting
- onwheel
其中带星号的对于body有特殊的含义,会作为window上的事件处理器
这些事件虽然能用在所有元素上,但是不一定都有效
3.2.7 innerText的设置和获取
通过HTMLElement.innerText直接赋值和读取
4 The elements of HTML
4.1. The document element
html
- 分类:None
- 使用场景:作为文档的document element
- 内容:一个head元素后面跟着一个body元素
- 属性:全局属性
- 接口:HTMLHtmlElement 表示文档的根元素,需要指定一个lang属性帮助语音合成工具决定怎么发音和帮助翻译软件决定怎么翻译
4.2. Document metadata
head
- 分类:none
- 使用场景:html元素的第一个子元素
- 属性:全局属性
- 接口:HTMLHeadElement 包含各种提供关于文档元数据的子元素
title
- 分类:Metadata content
- 使用场景:包含在没有其他title子元素的head元素中
- 内容:文本
- 属性:全局属性
- HTMLTitleElement 表示文档的标题或者名字,可以用在历史记录、书签或者搜索结果。一个文档最多只能有一个title。
base
- 分类:Metadata content
- 使用场景:包含在没有其他base元素的head元素中
- 内容:没有
- 属性:全局属性
- href 表示文档的base url,默认document.location.href
- target 用于超链接导航和表单提交的默认浏览上下文,可以取以下值
- _self 默认值,当前浏览上下文
- _blank: 载入结果到一个新的未命名的浏览上下文
- _parent: 载入结果到父级浏览上下文(如果当前页是内联框)。如果没有父级结构,该选项的行为和_self一样
- _top: 载入结果到顶级浏览上下文(该浏览上下文是当前上下文的最顶级上下文)。如果没有父级,该选项的行为和_self一样
- 接口 HTMLBaseElement base元素用来指定document base url,用来解析url以及默认浏览上下文,只能有一个base元素
link
- 分类:Metadata content,如果这个元素用在body则是flow content和phrasing content
- 内容:无
- 属性:全局属性,其中title在这里有特殊的语义,即link的标题和样式表的名字
- href 超链接地址
- crossorigin 如何处理跨域请求
- rel 当前文档和被链接资源的关系(relationship),见下面
- media 应用媒介
- integrity 用于整体性检查的整体元数据
- hreflang 被链接资源的语言
- type 引用资源的类型
- referrerpolicy Referrer policy
- sizes icon的尺寸
- imagesrcset 不同场景下用的图片,比如高分辨率和低分辨率(用于 rel="preload")
- imagesizes 不同页面布局下的图片尺寸(用于 rel="preload")
- as 预加载请求的potential destination(用于 rel="preload" and rel="modulepreload")
- color 自定义icon时使用的颜色(用于rel="mask-icon")
- disabled 链接是不是禁用
- 接口:HTMLLinkElement 允许将文档链接其他资源,链接的地址用href指定。 href and imagesrcset属性至少出现一个
根据resource-hints 规范和preload 规范,link的rel属性可取以下值
- dns-prefetch 提前解析dns
- preconnect 提前建立连接(包括dns查询、tcp连接和tls协商)
- prefetch 下次导航时可能需要,应该提前获取
- prerender 下个导航可能需要,应该提前执行,比如渲染一个html
- preload 相对于prefetch优先级高,且是当前导航中需要的资源
meta
- 分类:Metadata content,如果有itemprop属性则是flow content和phrasing content.
- 内容:无
- 属性:全局属性
- name 元数据名字,标准的元数据名字包括以下,也可以自定义元数据名字
- application-name 应用名
- author 作者
- description 描述
- generator 生成器
- keywords 一系列逗号分隔的关键字
- referrer 值应该是一个referrer policy
- theme-color 值是一个css颜色,用来自定义页面的展示,比如用来高亮tab bar
- color-scheme
- http-equiv 编译指令(Pragma directive),其是一个枚举属性,包括
- content-language 不推荐使用,用lang属性代替
- content-type 声明文档的mine-type和字符编码,如果指定了一定要是"text/html; charset=utf-8"
- default-style 设置默认的样式表名字
- refresh 指定了
- 如果是正整数,表示到页面重新加载的秒数
- 如果正整数后面跟着
;url=
和一个有效url表示到跳转到另外页面的秒数
- set-cookie 非标准,用户代理会忽略
- x-ua-compatible 如果指定了,值一定要是IE=edge,用户代理要忽略这个指定
- content-security-policy 指定当前页面的content policy
- content 元素的内容
- charset 编码声明 utf-8是html5唯一有效的编码
- name 元数据名字,标准的元数据名字包括以下,也可以自定义元数据名字
- 接口:HTMLMetaElement
表示不能被其他元素表示的各种元数据, name, http-equiv, charset, and itemprop至少要指定一个,除了charset外,其他都要用content属性表示对应内容
style
- 分类:Metadata content
- 内容:表示样式表的文本
- 属性:全局属性,其中title有特殊的语义,表示样式表的名字
- media 应用的媒介,默认all
- 接口:HTMLStyleElement 用来在文档内嵌样式表
4.3. section
body
- 分类:Sectioning root
- 使用场景:作为html的第二个子元素
- 内容:Flow content
- 属性:全局属性
- onafterprint
- onbeforeprint
- onbeforeunload
- onhashchange
- onlanguagechange
- onmessage
- onmessageerror
- onoffline
- ononline
- onpagehide
- onpageshow
- onpopstate
- onrejectionhandled
- onstorage
- onunhandledrejection
- onunload
- 接口:HTMLBodyElement,还实现了WindowEventHandlers接口,因此具有以上事件处理器属性
表示文档内容,可以用
document.body
直接访问
window对象上的众多事件处理器暴露在了body元素上,而不是html元素,因此一个事件正常的冒泡是当前元素、body、html、document、window,但是body上处理的window上的事件,因此实际上顺序会是先html后body。如果想正常监听body上的事件要用addEventListener()
article
- 分类:Flow content、Sectioning content、Palpable content
- 内容:Flow content
- 属性:全局属性
- 接口:HTMLElement 注:后面若干元素分类、内容、属性和接口与article相同的不再重复
表示文档、页面、应用或网站中的一个独立组成,用来分发和复用,可以是一篇论坛、报纸或杂志文档,可以在其中使用header、header和h[n]等元素表示个部分
section
表示一个文档或应用的通用部分
nav
一个带有导航链接的片段
aside
表示一个和页面其他部分几乎无关的部分,可以单独拆出来而不使整体受影响,通常表现为侧边栏或标注框。
The h1, h2, h3, h4, h5, and h6 elements
- 分类:Flow content、Heading content、Palpable content
- 使用场景:作为hgroup的子元素或者其他使用heading content的地方
- 内容:Phrasing content
- 属性:全局属性
- 接口:HTMLHeadingElement 表示其他section的heading
hgroup
- 分类:Flow content、Heading content、Palpable content
- 内容:h1, h2, h3, h4, h5, h6
- 属性:全局属性
- 接口:HTMLElement
表示一个section的heading,用来为h1-h6分组
header
- 分类:Flow content、Palpable content
- 内容:Flow content,后代不能有header or footer
- 属性:全局属性
- 接口:HTMLElement
表示一组介绍或导航,可以用来包含heading、搜索框或相关logo
footer
- 分类:Flow content、Palpable content
- 内容:Flow content,后代不能有header or footer
- 属性:全局属性
- 接口:HTMLElement
表示最近祖先的footer,可以包含作者、相关链接和copyright等
address
- 分类:Flow content、Palpable content
- 内容:Flow content,后代不能有heading content,sectioning content, header, footer, or address
- 属性:全局属性
- 接口:HTMLElement
表示最近的article或body祖先元素的联系方式
4.4. Grouping content
p
- 分类:Flow content、Palpable content
- 内容:Phrasing content
- 属性:全局属性
- 接口:HTMLParagraphElement 表示一个段落
hr
- 分类:Flow content
- 内容:无
- 属性:全局属性
- 接口:HTMLHRElement 表示一个段落级别的主题分割,比如换了个故事场景
pre
- 分类:Flow content、Palpable content.
- 内容:Phrasing content.
- 属性:全局属性
- 接口:HTMLPreElement 表示一个预定义格式文本的块,紧跟在其开始标签后的换行符会被省略
blockquote
- 分类:Flow content、Palpable content、Sectioning root
- 内容:Flow content
- 属性:全局属性
- cite:引用资源的链接或者关于编辑的更多信息
- 接口:HTMLQuoteElement(和q元素一样) 表示一个从其他资源的引用
ol
- 分类:Flow content,如果包含至少一个li子元素则是Palpable content
- 内容:li或script-supporting元素
- 属性:全局属性
- reversed 列表数字反序
- start 列表的开始值
- type 标记符号的类型,可选关键字包括
- a
- A
- i
- I
- 1 默认
- 接口:HTMLOListElement 表示一个有序列表
ul
- 分类:Flow content,如果包含至少一个li子元素则是Palpable content
- 内容:li或script-supporting元素
- 属性:全局属性
- 接口:HTMLUListElement 表示一个顺序不重要的列表
menu
- 分类:Flow content,如果包含至少一个li子元素则是Palpable content
- 内容:li或script-supporting元素
- 属性:全局属性
- 接口:HTMLMenuElement 表示一个toolbar,子元素是表示各种命令的li元素
li
- 分类:无
- 使用场景:用在ul,ol,menu中
- 内容:flow content
- 属性:全局属性
- 如果父元素是ol的话,有个整数类型的属性value,表示序号
- 接口:HTMLLIElement 表示列表项目元素
dl
- 分类:flow content,如果子元素包含至少一个键值分组,就可以是Palpable content
- 内容:包含一个或多个dt,dd元素的分组以及script-supporting元素
- 属性:全局属性
- 接口:HTMLDListElement 表示0个或多个键值分组(描述列表),每个分组包含一个或多个dt和dd。
dt
- 分类:无
- 使用场景:直接在dl元素中或者在dl元素中的div元素中
- 内容:flow content,但是不能有header, footer, sectioning content, or heading content后代
- 属性:全局属性
- 接口:HTMLElement 表示一个术语、名字,是dl中一个术语解释分组的一部分
dd
- 分类:无
- 使用场景:直接在dl元素中或者在dl元素中的div元素中
- 内容:flow content
- 属性:全局属性
- 接口:HTMLElement 表示一个解释、定义或值,是dl中一个术语解释分组的一部分
<article>
<h1>FAQ</h1>
<dl>
<dt>What do we want?</dt>
<dd>Our data.</dd>
<dt>When do we want it?</dt>
<dd>Now.</dd>
<dt>Where is it?</dt>
<dd>We are not sure.</dd>
</dl>
</article>
figure
- 分类:Flow content、Sectioning root、Palpable content
- 内容:flow content或可选的figcaption
- 属性:全局属性
- 接口:HTMLElement 表示一些flow content,可以带一个表示caption的figcaption元素
figcaption
- 分类:无
- 内容:Flow content
- 属性:全局属性
- 接口:HTMLElement 用在figure元素中,为其中其他内容作为caption或legend
main
- 分类:Flow content、Palpable content
- 内容:Flow content
- 属性:全局属性
- 接口:HTMLElement 表示文档的主要部分,一个文档不要有1个以上不带有hidden属性的main元素
div
- 分类:Flow content、Palpable content
- 内容:如果是dl的子元素,则可以包含dd和dt以及以及script-supporting,否则可以是任意flow content
- 属性:全局属性
- 接口:HTMLDivElement 没有特别的意思
4.5. Text-level semantics
a
- 分类:Flow content、Phrasing content、Palpable content,如果有href属性,则还是Interactive content
- 内容:Transparent,不能有interactive content、a或带有tabindex属性的后代
- 属性:全局属性
- href 超链接地址
- target 超链接导航的上下文
- download 指定下载而不是导航
- ping 对url执行ping操作
- ref 当前文档和超链接的关系
- hreflang 链接资源的语言
- referrerpolicy Referrer policy
- 接口:HTMLAnchorElement,包含HTMLHyperlinkElementUtils
如果含有href属性,表示一个超链接
如果没有hred属性,这个元素是一个其他链接放置的占位符,此时其他a上的非全局属性会被忽略
em
- 分类:Flow content、Phrasing content、Palpable content
- 内容:Phrasing content
- 属性:全局属性
- 接口:HTMLElement
以下元素默认与此相同
表示一个内容强调,可以嵌套,越深越重要
strong
表示很重要(比如标题)、严肃(比如警告)和紧急(比如比其他内容更早看到),一般用粗体表示
small
表示旁注或注释,将字体变小一号
s
表示不再准确或不再相关,当用于文档编辑时表示移除要用del元素
cite
表示一个作品(比如书、论文或诗歌)的标题,用作引用
q
- 分类:Flow content、Phrasing content、Palpable content
- 内容:Phrasing content
- 属性:全局属性
- cite 一个引用或更多信息的链接
- 接口:HTMLQuoteElement 表示引用
dfn
- 分类:Flow content、Phrasing content、Palpable content
- 内容:Phrasing content,但是不能有dfn后代
- 属性:全局属性,其中title在这里表示缩写的全称
- 接口: HTMLElement 表示一个术语的定义,如果title属性,和一个可选的abbr子元素,定义的准确值就是这个属性值,否则其文本内容就是该术语的值
<abbr title="World-Wide Web">WWW</abbr>
<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>
abbr
- 分类:Flow content、Phrasing content、Palpable content
- 内容:Phrasing content
- 属性:全局属性,其中title在这里表示缩写的全称
- 接口: HTMLElement 用于展示缩写,并且可以通过可选的 title 属性提供完整的描述
<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
ruby
- 分类:Flow content、Phrasing content、Palpable content
- 属性:全局属性
- 接口: HTMLElement 用来注音,相关元素包括以下,后面不单独讨论
- ruby 用来展示东亚文字注音或注释
- rt 包含发音
- rp 用于不支持ruby的情况,通常是圆括号
- rb 用于分隔被注音的单元
- rtc 包含注音元素
<ruby>
汉 <rt>Hàn</rt>
字 <rt>Zì</rt>
</ruby>
<ruby>
漢 <rp>(</rp><rt>han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
data
- 分类:Flow content、Phrasing content、Palpable content
- 内容:Phrasing content
- 属性:全局属性
- value: 机读值
- 接口: HTMLDataElement 将一个指定内容和一个机读值关联起来,如果内容和时间或日期有关,要用time元素
time
- 分类:Flow content、Phrasing content、Palpable content
- 内容:如果有datetime属性,就是Phrasing content否则就是Text
- 属性:全局属性
- datetime 机读值
- 接口:HTMLTimeElement 将一个时间和机读值关联起来
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
code
表示一个代码片段
var
表示一个变量
samp
表示一个计算机输出,通常是等宽字体
kbd
表示键盘输入,等宽字体
sub和sup
分别表示下标和上标
i
表示一些不同的声音或心理活动,用斜体
b
粗体,没有其他意思
u
表示一些不清晰(unarticulated)的文本,带有下划线,比如用作注释拼写错误
mark
表示一个被做记号或者高亮的引用
bdi
- 分类:Flow content、Phrasing content、Palpable content
- 内容:Phrasing content
- 属性:全局属性,其中dir有特殊语义,不会继承父元素,默认值auto
- 接口: HTMLElement 表示一段独立于周围环境的文字,用来bidirectional text formatting
span
没特别的意思
br
- 分类:Flow content、Phrasing content
- 内容:无
- 属性:全局属性
- 接口:HTMLBRElement 表示一个回车符
wbr
- 分类:Flow content、Phrasing content
- 内容:无
- 属性:全局属性
- 接口:HTMLBRElement 一个可以用来换行的地方
4.6. Links
链接是用a, area, form, and link元素创建的,表示当前文档和另一个资源的连接。可分为两种
- 链接到外部资源,加载到当前文档使用
- 超链接,用来访问或者下载
4.7. Edits
ins and del表示编辑文档
ins
- 类别:Flow content、Phrasing content、Palpable content
- 内容:Transparent
- 属性:全局属性
- cite 引用或者更多信息的链接
- datetime 修改的时间
- 接口:HTMLModElement 表示新插入文档的文本
del
和ins用法一样,表示删除的文本
4.8. Embedded content
picture
- 类别:Flow content、Phrasing content、Embedded content
- 内容:可选的source元素后面跟着img元素,还有可选的 script-supporting元素
- 属性:全局属性
- 接口:HTMLPictureElement 为img子元素提供不同的图片版本
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
source
- 类别:无
- 使用场景:在img元素前作为picture元素的子元素,在任何flow content or track elements前作为media element的子元素
- 内容:无
- 属性:全局属性
- src:资源地址
- type:资源类型
- srcset:不同场景用的图片,比如高分辨率和低分辨率
- sizes:不同布局下的图片尺寸
- media:应用媒介
- 接口:HTMLSourceElement 为picture,audio,video指定多个媒体资源
img
- 类别:Flow content,Phrasing content,Embedded content,Form-associated element,If the element has a usemap attribute: Interactive content,Palpable content.
- 内容:无
- 属性:全局属性
- alt 当图片不可用时显示的文本
- src 资源地址
- srcset
- sizes
- crossorigin
- usemap 使用的image map名字
- ismap 是不是服务端map的一部分
- width
- height
- referrerpolicy
- decoding 解码方式
- loading 立刻加载还是延迟加载
- 接口:HTMLImageElement 表示一个图片,不同场景可以加载不同图片并且以不同的方式处理,参考using images
iframe
- 类别:Flow content,Phrasing content,Embedded content,Interactive content,Palpable content
- 内容:无
- 属性:全局属性
- src 被嵌入的页面地址
- srcdoc 一段html代码
- name 嵌入浏览上下文的名字
- sandbox 内嵌内容的安全规则
- allow 应用于iframe的 Permissions policy
- allowfullscreen 是否允许iframe全屏
- width
- height
- referrerpolicy
- loading 是否延迟加载
- 接口:HTMLIFrameElement 表示一个内嵌的浏览上下文
object
- 类别:Flow content,Phrasing content,Embedded content,If the element has a usemap attribute: Interactive content,Listed and submittable form-associated element,Palpable content
- 内容:可选的param元素,以及transparent.
- 属性:全局属性
- data 资源地址
- type 资源类型
- name 内嵌浏览上下文的name
- usemap
- form 相关form元素
- width
- height
- 接口:HTMLObjectElement 可以表示一个外部资源,可以作为一个图片、子浏览上下文或插件,具体取决于类型
<figure>
<object data="clock.html"></object>
<figcaption>My HTML Clock</figcaption>
</figure>
param
- 类别:无
- 内容:无
- 属性:全局属性
- name 参数名字
- value 参数值
- 接口:HTMLParamElement 为object元素定义参数,本身不表示任何东西
video
- 类别:Flow content,Phrasing content,Embedded content,If the element has a controls attribute: Interactive content,Palpable content.
- 内容:如果有src属性,则会包含可选的track元素、transparent,不能有media元素,如果没有drc属性,则有可选的source元素、transparent,不能有media元素
- 属性:全局属性
- src
- crossorigin
- poster 一个海报帧,在用户播放前使用
- preload 预加载选项
- autoplay 自动播放
- playsinline 在元素的播放区域
- loop 是否循环播放
- muted 是否默认静音
- controls 显式用户代理控制条
- width
- height
- 接口:HTMLVideoElement 用来播放视频
audio
- 类别:Flow content,Phrasing content,Embedded content,如果有controls 属性,则还是Interactive content,Palpable content
- 内容:可video一样
- 属性:除了没有长宽,其余和video一样
- 接口:HTMLAudioElemen 用来播放音频
track
- 类别:无
- 使用场景:在flow content之前作为media元素的子元素
- 属性:全局属性
- kind 文本字幕的类型
- src
- srclang 资源语言
- label 用户可见的标签
- default 设为默认
- 接口:HTMLTrackElement 为media 元素指定字幕
media element
HTMLMediaElement对象,video和audio元素对应接口都继承了这个对象
map
- 类别:Flow content,Phrasing content,Palpable content.
- 内容:Transparent.
- 属性:全局属性
- name: image map的名字
- 接口:HTMLMapElement map元素,通过和img元素结合以及子元素area,定义了image map(就是图片中各个部分的映射,例子)。name属性给map一个名字用来可以被引用,且两个map的name不能相同,如果也制定了id,两个属性值要一样。
area
- 类别:Flow content、Phrasing content.
- 使用场景:在map元素内
- 内容:无
- 属性:全局属性
- alt 图片加载失败时显式的文本
- coords 在image map创建的形状坐标(Coordinates)
- shape 在image map中创建的shape类型
- href 超链接地址
- target 超链接的浏览上下文
- download 是下载还是导航
- ping
- rel
- referrerpolicy
- 接口:HTMLAreaElement 表示image map中一个区域
MathML
用于描写数学公式,具体参考MathML
SVG
Scalable Vector Graphics (SVG) ,可缩放矢量图形,参考svg
4.9. Tabular data
table
- 类别:Flow content、Palpable content
- 内容:按顺序,可选的一个caption,0个或多个colgroup,可选的thead元素,0或多个tbody或tr,可选的一个tfoot,还有可选的script-supporting。
- 属性:全局属性
- 接口:HTMLTableElement 以一个表格的形式表示超过一维的数据,有行、列和单元格的后代
caption
- 类别:none
- 使用场景:作为table的第一个子元素
- 内容:Flow content,后代不能有table
- 属性:全局属性
- 接口:HTMLTableCaptionElement 表示table的标题
colgroup
- 类别:none
- 使用场景:作为table子元素,在caption之后,其他之前
- 内容:如果有span属性就是nothing,否则是0或多个col或template 元素
- 属性:全局属性
- span 跨越的columns数目,非负整数,不大于1000
- 接口:HTMLTableColElement 表示一组中一个或多个column,如果不包含col元素,可能会指定span属性
col
- 类别:无
- 使用场景:作为没有span属性的colspan的子元素
- 内容:无
- 属性:全局属性
- span 跨越的column数目
- HTMLTableColElement 在colgroup中表示一column或多column
thead
- 分类:无
- 使用场景:在 caption, and colgroup之后的table元素内
- 包含0个或多个tr,script-supporting
- 属性:全局属性
- 接口:HTMLTableSectionElement 表示一系列行,是table的header
tbody
- 类别:无
- 使用场景:在caption, colgroup, and thead 之后的table元素内
- 内容:0个或多个tr和script-supporting
- 属性:全局属性
- 接口:HTMLTableSectionElement 包含table的主体,代表一系列rows
tfoot
- 类别:无
- 使用场景:table最后一个子元素
- 内容:0个或多个tr和script-supporting
- 属性:全局属性
- 接口:HTMLTableSectionElement 表示一系列rows,是table的footer
tr
- 类别:无
- 使用场景:作为thead、tbody、tfoot的子元素,如果没有tbody,可以直接做table的子元素
- 内容:td,th,和script-supporting
- 属性:全局属性
- 接口:HTMLTableRowElement 表示一行单元格
td
- 类型:Sectioning root
- 使用场景:tr的子元素
- 内容:flow content
- 属性:全局属性
- colspan 跨column数
- rowspan 跨row数
- headers header单元格
- 接口:HTMLTableCellElement 表示table中一个单元格
th
- 类别:无
- 使用场景:作为tr的子元素
- 内容:flow content,但不含header, footer, sectioning content, or heading content
- 属性:全局属性
- colspan
- rowspan
- headers
- scope 指定做哪些单元格的header
- abbr 内容的简介
- 接口:HTMLTableCellElement 表示header cell,
4.10. Forms
form
- 类别:Flow content、Palpable content
- 内容:flow content,但是不能有form
- 属性:全局属性
- accept-charset 用于提交的字符编码
- action 用于提交的url
- autocomplete 自动填充
- enctype 提交之前怎么编码,用于post提交
- application/x-www-form-urlencoded 默认
- multipart/form-data 如果input元素有type=file属性
- text/plain 用于debug
- method http方法,包括
- post form data作为请求体提交
- get form data加载url后面
- dialog 当表单在dialog中时,关闭dialog提交
- name form的name
- novalidate 是否绕过提交时的验证
- target 提交的浏览上下文
- rel
- 接口:HTMLFormElement 通过使用form-associated elements来提交数据
label
- 类别:Flow content,Phrasing content,Interactive content,Palpable content.
- 内容:Phrasing content,但是没有label后代
- 属性:全局属性
- for 相关控件
- 接口:HTMLLabelElement 表示一个caption,可以关联一个控件
input
- 内容:无
- 属性:全局属性,下面是另外属性和适用的type,默认all
- accept:表示接受的文件类型,用于file
- alt 用于image
- autoconmplete 自动填充
- checked 是否默认checked状态,用于radio和checked
- dirname 文本方向,用于text和search
- disabled 是否可用
- form 相关的form
- formaction 提交的url,用于image和submit,以下form开头的类似
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 用于image
- list 自动填充的列表
- max 最大值,用于数字类型
- maxlength 最大的长度,用于password, search, tel, text, url
- min
- minlength
- multiple 是否多选,用于email, file
- name 作为form data中键值对的键名
- pattern 验证模式,用于password, text, tel
- placeholder
- readonly
- required
- size 尺寸,用于email, password, tel, text
- src 用于image
- step 用于数字类型
- type 类型,具体参考mdn
- value
- width 用于image
- 接口:HTMLInputElement 表单控件
button
- 属性:全局属性
- disabled 是否不可用
- form
- form*
- name
- type
- submit
- reset
- button
- value
- 接口:HTMLButtonElement
select
- 内容:0个或多个option,optgroup
- 属性:全局属性
- autocomplete
- disable
- form
- mutiple
- name
- required
- size
- 接口:HTMLSelectElement 选择框
datalist
- 内容:要么phrasing content,要么option
- 属性:全局属性
- 接口:HTMLDataListElement 可以配合input,作为其可能的值
<label>
Animal:
<input name=animal list=animals>
<datalist id=animals>
<option value="Cat">
<option value="Dog">
</datalist>
</label>
optgroup
- 使用场景:作为select的子元素
- 内容:option
- 属性:全局属性
- disabled
- label
- 接口:HTMLOptGroupElement 表示带标签的一组option
option
- 使用场景:作为select、datalist和optgroup的子元素
- 属性:全局属性
- disabled
- label
- selected
- value
- 接口:HTMLOptionElement 表示选项
textarea
- 内容:text
- 属性:全局属性
- autocomplete
- cols 每行最大字符数
- dirname
- disabled
- form
- maxlength 最大长度
- minleng
- name
- placeholder
- readonly
- required
- rows 行数
- wrap 怎么换行
- 接口:HTMLTextAreaElement 用来表示多行的文本编辑
output
- 属性 全局属性
- for 影响计算结果的id,可以包含多个
- form
- name
- 接口:HTMLOutputElement 表示计算结果
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
progress
- 内容:全局属性
- max 上界
- value 当前值
- 接口:HTMLProgressElement 表示进度条
<progress id="file" max="100" value="70"> 70% </progress>
meter
- 属性:全局属性
- value
- min 最小值
- low 低值
- high
- max
- optimum 最优值
- HTMLMeterElement 表示已知范围的计量器
fieldset
- 内容:可选的legend元素,后面有flow content
- 属性:全局属性
- disabled
- form
- name
- 接口:HTMLFieldSetElement 表示一个控件分组
legend
- 使用场景:fieldset的第一个子元素
- 属性:全局属性
- 接口:HTMLLegendElement 表示fieldset的caption
4.11 Interactive elements
details
- 内容:一个summary元素,后面跟着flow content
- 属性:全局属性
- open 详情是不是可见
- 接口: HTMLDetailsElement 表示一个挂件,打开时展示详情
summary
- 使用场景:detail的第一个子元素
- 属性:全局属性
- 接口: HTMLElement 和details组成挂件,用来显示caption或legend
dialog
- 内容:flow content
- 属性:全局属性
- open 对话框是不是显示
- 接口:HTMLDialogElement 表示一个对话框
Scripting
我们可以使用script为文档添加交互
script
- 内容:如果没有src属性,内容取决于type,如果有src,要么为空要么只包含script documentation
- 属性:全局属性
- src 外部脚本的url
- type 脚本类型,包括以下三类
- 省略或js minetype:表示脚本是js,这时候就不要提供这个属性了
- module 会将脚本作为module,此时不受charset and defer影响
- 其他,作为数据块不被浏览器处理
- nomodule 不应在支持module的浏览器执行
- async
- defer
- crossorigin
- integrity
- referrerpolicy
- 接口:HTMLScriptElement
用来动态引入脚本(脚本分为classic script和module script)和数据块,该元素不会显示。
这里讨论一下async和defer属性,均为布尔值,指定脚本怎么执行,其中defer对module script无效,具体是这样的: - 对于classic script
- 如果只提供了async,会并行fetch,然后立刻执行
- 如果只提供了defer,会并行fetch,然后等解析完执行
- 如果都没提供,会立刻fetch和执行,阻塞解析
- 对于module script
- 如果只提供了async,会和依赖并行fetch,然后立即执行
- 如果没提供,会和依赖并行fetch,然后等解析完后执行
noscript
用于script不可用时,不展开
template和slot
用在web component,在本文web component相关章节讨论
canvas
- 属性:全局属性
- width
- height
- 接口:HTMLCanvasElement 用来通过脚本绘制图形,具体参考本文canvas api相关章节
5 Microdata
微数据是指的机读的数据,比如用于爬虫和搜索引擎,具体使用参考mdn
6 User interaction
6.1. hidden属性
是一个全局属性,表示一个元素被隐藏
6.2. Inert subtrees
惰性子树,当一个节点是惰性时,当处理用户交互时会将其忽略,就像不存在。注意这只是一个概念,还没有具体实现。
6.3. Tracking user activation
为了避免那些打扰用户的api( 比如震动和弹窗)被滥用,用户代理需要只有用户主动和页面交互或者交互过一次才能允许这些api。
6.4. Activation behavior of elements
html中某些元素有激活行为(activation behavior),即用户可以用click事件来激活它们。也可以调用element.click()
就像被clicked一样
5. focus
获取焦点
6.6. 键盘快捷键
使用accesskey属性为当前元素生成快捷键,其必须包含一个可打印字符。使用快捷键可以用来激活元素,使用快捷键时不同浏览器需要同时按下其他按键组合。
6.7. Editing
- 使用contenteditable属性可以使文档区域(当前元素)可编辑,布尔值
- 修改document.designMode 可以使整个文档可编辑
- 使用spellcheck对拼写检查
- 使用autocapitalize自动大写
- 使用inputmode指定虚拟键盘类型
- 使用enterkeyhint指定虚拟键盘的enter键的标签和icon
6.8. 页内查找
定义了在页面查找的机制,但是目前只有一个window.find()
非标准实现
6.9. 拖拽
具体见拖拽api部分
7 Loading web pages
7.1. Browsing contexts
一个浏览上下文(browsing context)是document对象展示的环境,浏览器中的一个tab或window或者iframe都包含一个浏览上下文。
每个浏览上下文有一个特定的origin,这个origin的激活文档和历史保存了所有展示过得文档、
浏览上下文之间通信很严格,对于同源的浏览上下文可以使用BroadcastChannel
7.2. window对象
window接口代表一个包含文档的容器,document属性指定加载的文档,一个文档可以通过document.defaultView
属性对应的window。
全局变量,window,表示script正在运行的window,在该对象上挂载了各种函数、命名空间、对象和构造函数。
在浏览器的每一个tab,frame,或者iframe都有自己的window。
7.2.1 构造函数
除了dom相关构造函数外,还有
- DOMParser 将保存在html代码解析为dom文档
- Image 用于创建HTMLImageElement
- Option 用来创建HTMLOptionElement
- StaticRange 用来创建一个StaticRange对象
- Worker 用来创建web worker
- XMLSerializer 将dom树转译成html源码
7.2.2 属性
从EventTarget接口继承了属性且实现了WindowOrWorkerGlobalScope和WindowEventHandlers两个mixin
- Window.closed 表示当前窗口有没有关闭
- Window.console
- Window.customElements 返回CustomElementRegistry,用来自定义对象
- Window.crypto 和加密相关
- Window.devicePixelRatio 物理像素和css像素之比
- Window.document 包含的文档
- Window.DOMMatrix 代表4*4矩阵对象,适合二维和三维操作
- Window.event 返回当前的事件,非标准
- Window.frameElement 嵌入的元素,比如iframe,object
- Window.fullScreen 有没有全屏
- Window.history 历史对象
- Window.innerHeight 浏览器窗口的内容区域高度,包括滚动条
- Window.innerWidth
- Window.isSecureContext 判断一个上下文是不是安全上下文
- Window.length 表示Window.frameElement数目的多少
- Window.location 读写location对象
- Window.locationbar 通过其visible属性查看地址栏是否可见
- Window.localStorage
- Window.menubar 菜单栏
- Window.name 读写window的name
- Window.navigator 和用户代理信息有关
- Window.opener 打开当前window的window对象
- Window.outerHeight 返回整个窗口的高度,包括浏览器的各种工具栏
- Window.outerWidth
- Window.pageXOffset/window.scrollX 页面的水平滚动距离
- Window.pageYOffset/window.scrollY 页面的垂直滚动距离 其中前者是后者的别名
- Window.parent 返回父窗口,如果没有就返回自己
- Window.performance 和性能有关
- Window.personalbar
- Window.screen 屏幕对象
- Window.screenX/Window.screenLeft 浏览器左边界到操作系统桌面左边界的水平距离,后者一开始由ie引入,后来作为前者的别名被普遍引入
- Window.screenY/Window.screenTop
- Window.scrollbars 滚动条可见性
- Window.self/Window.window 本身
- Window.sessionStorage
- Window.status 状态栏上的文本
- Window.statusbar 状态栏可见性
- Window.toolbar 工具栏可见性
- Window.top 上一层window对象
其他对象获得的
- WindowOrWorkerGlobalScope.caches
- WindowOrWorkerGlobalScope.indexedDB
- WindowOrWorkerGlobalScope.isSecureContext
- WindowOrWorkerGlobalScope.origin
7.2.3 方法
包括从EventTarget继承,以及实现的 WindowOrWorkerGlobalScope和EventTarget的方法
- Window.alert()
- Window.blur()
- Window.cancelAnimationFrame()
- Window.cancelIdleCallback()
- Window.clearImmediate()
- Window.close()
- Window.confirm()
- Window.find()
- Window.focus()
- Window.getComputedStyle() 获得特定元素的计算样式
- Window.getSelection()
- Window.matchMedia()
- Window.moveBy() 移动指定距离
- Window.moveTo() 移动到指定坐标
- Window.open() 打开一个新窗口
- Window.postMessage() 用于window间通信
- Window.print()
- Window.prompt()
- Window.requestAnimationFrame()
- Window.requestIdleCallback()
- Window.resizeBy()
- Window.resizeTo()
- Window.scroll()/Window.scrollTo()
- Window.scrollBy()
- Window.showOpenFilePicker()
- Window.showSaveFilePicker()
- Window.showDirectoryPicker()
- Window.stop()
- EventTarget.addEventListener()
- EventTarget.dispatchEvent() 触发事件
- WindowOrWorkerGlobalScope.atob() 对base64解码
- WindowOrWorkerGlobalScope.btoa() 编码成base64
- WindowOrWorkerGlobalScope.clearInterval()
- WindowOrWorkerGlobalScope.clearTimeout()
- WindowOrWorkerGlobalScope.createImageBitmap() 接受各种图片资源,返回一个带ImageBitmap的promise
- WindowOrWorkerGlobalScope.fetch()
- EventTarget.removeEventListener
- WindowOrWorkerGlobalScope.setInterval()
- WindowOrWorkerGlobalScope.setTimeout()
7.2.4 事件
包括从EventTarget 继承和实现的WindowEventHandlers
- Window.onbeforeinstallprompt
- Window.ondevicelight 亮度调节
- Window.ondevicemotion 设备移动
- Window.ondeviceorientation 转屏幕
- Window.ongamepadconnected 游戏手柄连接
- Window.ongamepaddisconnected
- Window.onpaint
- Window.onrejectionhandled
- Window.onvrdisplayconnect/其他vr事件
- GlobalEventHandlers.onabort 取消加载
- WindowEventHandlers.onafterprint
- WindowEventHandlers.onbeforeprint
- WindowEventHandlers.onbeforeunload
- GlobalEventHandlers.onblur
- GlobalEventHandlers.onchange 页面改变
- GlobalEventHandlers.onclick
- GlobalEventHandlers.ondblclick
- GlobalEventHandlers.onclose
- GlobalEventHandlers.oncontextmenu 右键点击
- GlobalEventHandlers.onerror
- GlobalEventHandlers.onfocus
- WindowEventHandlers.onhashchange
- GlobalEventHandlers.oninput
- GlobalEventHandlers.onkeydown
- GlobalEventHandlers.onkeypress
- GlobalEventHandlers.onkeyup
- WindowEventHandlers.onlanguagechange
- GlobalEventHandlers.onload 在dom和资源加载完成
- WindowEventHandlers.onmessage
- GlobalEventHandlers.onmouseout
- GlobalEventHandlers.onmouseover
- GlobalEventHandlers.onmouseup
- WindowEventHandlers.onoffline
- WindowEventHandlers.ononline
- WindowEventHandlers.onpagehide
- WindowEventHandlers.onpageshow
- WindowEventHandlers.onpopstate
- GlobalEventHandlers.onreset 表单重置
- GlobalEventHandlers.onresize
- GlobalEventHandlers.onscroll
- GlobalEventHandlers.onwheel
- GlobalEventHandlers.onselect
- GlobalEventHandlers.onselectionchange
- WindowEventHandlers.onstorage
- GlobalEventHandlers.onsubmit
- WindowEventHandlers.onunload
7.3. WindowProxy
包装了一个window对象,大部分window相关操作都是操作的这个对象
7.4. Origin
origin是web安全模型的基础,同一个web平台上的两个相同origin的两者具有相同的权限,不同origin的被认为有潜在的风险因此会互相独立,这就是指的同源安全策略(Same-origin policy) 一个origin包括三部分,其中host可以是domain和ip address
Origin: <scheme> "://" <host> [ ":" <port> ]
一个about:blank
或javascript:
url的origin继承所在文档的url
同源策略由一些例外
- Embed cross-origin iframes
- Include cross-origin resources such as images or script等元素,比如
<script src="..."></script>
,还有video之类的,有个相关属性crossOrigin
,可以通过检查referrer设置防盗链,避免其他网站使用本服务器的图片等资源。 - Open cross-origin popup windows with a DOM reference
这里说一下crossOrigin,当不指定这个属性时不会检查跨域,但外部script的详细错误不会被window.onerror
捕获,cookie等会根据指定的域名决定是否发送。如果指定了属性就会根据内容来判断是否能跨域和携带信息。
cors时如果要发送cookie,要满足两个条件
-
在服务端设置1.Access-Control-Allow-Credentials为true,2.Access-Control-Allow-Origin and Access-Control-Allow-Headers不能是*,3.set-cookie时设置SameSite=None; Secure
-
前端ajax设置
withCredentials
属性为true
跨域处理
- 两个父域相同的页面可以通过
document.domain
设置为相同的父域通过同源检测,注意要同时修改使端口设为null - cors,参考http相关内容
- 文档之间可以通过iframe.contentWindow、 window.parent、window.open 和 window.opener等互相引用,此时可以通过window.postMessage进行跨域通信
- 也可以通过cookie为父域设置来通信
7.5. Sandboxing
沙箱限制潜在不可信任资源的能力,比如iframe的一个sandbox属性,参考mdn
7.6. Cross-origin opener policies/Cross-origin embedder policies
和跨域隔离策略有关,参考Why you need "cross-origin isolated" for powerful features。
就像上面说的同源策略由于历史原因有一些例外情况,对于这种松散的同源策略有两个补丁,一个是引入了新协议跨源资源共享(cors),可以使服务器允许特定origin访问资源,另一个是隐式移除了script对跨域资源的访问权限,这种资源被称为透明(opaque)资源,比如通过CanvasRenderingContext2D
编辑跨域资源会失败。
这样的补丁一直有效,直到en.wikipedia.org/wiki/Spectr…出现,它可以使透明资源无效,于是有了这里讲的跨域隔离策略,除非显式授权否则无法加载到有隐患的浏览上下文。
7.7. Session history and navigation
7.7.1 Browsing sessions
一个浏览会话可以类比为一个顶级浏览上下文
7.7.2 The session history of browsing contexts
同一个浏览上下文一系列文档就是会话历史,其中包含一系列会话历史记录。
7.7.3 History接口
用来操作浏览器会话历史,即当前tab或frame加载的页面历史。
7.7.3.1 属性
- length 记录个数
- scrollRestoration 用来显式设置页面通过历史导航的restoration behavior
- state 历史栈顶部状态的值
7.7.3.2 方法
- back()
- forward()
- go([delta]) 参数表示当前页面和目标页面在历史记录中的插值,如果是0表示reload
- pushState(state, title [, url]) 在会话历史中添加一条数据,但不会立即跳转,其中state表示和新的历史记录关联的数据对象,url表示任何一个同源的url
- replaceState(stateObj, title, [url]) 修改当前的state或url,但不会真的去请求这个url
7.7.4 Location接口
表示对应的url,在document和window上都有location属性,具体介绍之前先看例子,方便对相关概念进行理解
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org:8080
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // 8080
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org:8080
7.7.4.1 属性
- Location.ancestorOrigins 列出所有祖先浏览上下文的origin
- Location.href 整个url
- Location.protocol 协议,包含冒号
- Location.host 主机,包含hostname、冒号和端口号
- Location.hostname 域名或ip
- Location.port 端口号
- Location.pathname 第一个斜线及以后的url,不包含hash和search
- Location.search
- Location.hash
- Location.origin
7.7.4.2 方法
- Location.assign() 进入新的url,比window.open少了一些选项
- Location.reload()
- Location.replace()
8. Web application APIs
8.1 Scripting
这里的内容会和es262的规范有直接关联,参考ES2021
8.1.1 介绍
有很多方法将我们写的可执行代码运行起来,包括但不限于
- script元素
javascript:URLS
导航- dom中的事件处理器
- svg等技术处理
8.1.2 agent和agent cluster
这两个概念是从es262定义的
8.1.3 realms及其相关
es262介绍了realm的概念,表示js运行的全局环境。
对于web标准,将值或算法与realm/global对象关联起来通常很有用,比如Window or WorkerGlobalScope接口上定义了一些值,当一个值跨多个realm时,我们就会使用环境设置对象(environment settings object)的概念
- 环境,是一个对象决定了执行环境的设置,比如含有以下字段
- id
- 顶级origin
- target浏览环境
- 激活的service worker
- 环境设置对象(environment settings objects),也是一个环境,带有以下另外的算法,比如
- realm执行上下文,一个js执行上下文被所有当前设置环境的script(包括classic和module)共用
- module map 用于引入模块
- global object,是realm的[[Globalobject]]对象,在当前规范所有全局对象要么在Window上,要么在WorkerGlobalScope上,其中realm和global object和环境设置对象(在realm的[[HostDefined]]字段)是一对一对一的关系。
8.1.4 host hooks
es262包含一些实现定义的抽象操作,具体取决于宿主环境,这部分就是定义的用户代理作为宿主的对应部分。比如
- HostEnqueuePromiseJob(job, realm) 用来调度promise相关的操作,html将它们作为微任务调度
8.1.5 Event loop
这里在es2021这篇文章有详细介绍
8.2 WindowOrWorkerGlobalScope mixin
Window and WorkerGlobalScope两个对象实现的mixin
8.3 base64工具方法
atob() and btoa()方法可以进行base64解码和编码
8.4 Dynamic markup insertion
8.4.1 打开输入流
Document.open()为Document.write()
打开文档,这个动作有一些副作用
- 所有事件监听器会被移除
- 所有存在的节点会被移除
带参数的open方法是window.open的别名
8.4.2 关闭输入流
Document.close()完成写入文档
8.4.3 document.write()
向使用document.open
打开的文档流写入文本字符串,当文档加载完成后调用该方法会自动调用document.open
<html>
<head>
<title>Write example</title>
<script>
function newContent() {
document.open();
document.write("<h1>Out with the old, in with the new!</h1>");
document.close();
}
</script>
</head>
<body onload="newContent();">
<p>Some original document content.</p>
</body>
</html>
8.4.4 document.writeln()
和document.write类似,但是会自动在末尾添加一个换行符。
8.5 DOM parsing
DOMParser接口用来通过解析字符串来创建document对象
const domparser = new DOMParser()
const doc = domparser.parseFromString(string, mimeType)
8.6 Timers
setTimeout() and setInterval()方法允许开发者调度一个基于定时器的回调
8.7 Microtask queuing
queueMicrotask(callback)用来创建一个微任务队列来触发回调,以使相关代码在当前task运行完成,执行上下文栈变空但是没有将控制权交回event loop前执行。
注意调度大量的微任务就像执行大量的异步代码,它们都会阻止浏览器做自己的事情,比如渲染和滚动。大多数情况,使用requestAnimationFrame()
or requestIdleCallback()
可能更合适,特别是目标是在下次渲染周期前运行代码,这就是requestAnimationFrame()
要做的事情
8.8 User prompts
- 简单对话框
- window.alert(message)
- window.confirm(message)
- window.prompt(message [, default] )
- 打印 window . print()
8.9 System state and capabilities
8.9.1 Navigator object
window.navigator要返回一个Navigator接口的实例来表示用户代理的标识和状态
8.10 Images
这里主要讲ImageBitmap,表示一种位图图像,可以绘制到canvas元素而没有延迟。可以通过createImageBitmap()
工厂方法创建,接受各种图源,返回一个resolve后为ImageBitmap的promise,图象被裁减为一个矩形位图数据
const imageBitmapPromise = createImageBitmap(image[, options]);
const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
ImageBitmap对象包括width和height两个属性,和一个方法ImageBitmap.close()释放相关图像资源。
8.11 Animation frames
这里主要讲window.requestAnimationFrame()
,可以告诉浏览器希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画,若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用
const element = document.getElementById('some-element-you-want-to-animate');
let start;
function step(timestamp) {
if (start === undefined)
start = timestamp;
const elapsed = timestamp - start;
//这里使用`Math.min()`确保元素刚好停在200px的位置。
element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
if (elapsed < 2000) { // 在两秒后停止动画
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
9 Communication
9.1 MessageEvent接口
server-sent events, web sockets, cross-document messaging, channel messaging, and broadcast channels的通信都为它们的message事件使用MessageEvent接口。 包括以下属性
- data 发送的数据
- origin 数据发送者的origin
- lastEventId 事件id
- source 表示一个事件emitter
- ports MessagePort数组
9.2 Server-sent events
可以用来使服务器随时向web页面推送数据,参考mdn。 使用步骤可以分为
- 实例化EventSource,指定接收事件的url
- 添加事件监听
- 服务端发送text/event-stream类型的事件流
具体实现可以参考sse.js
9.3 Web sockets
可以用来服务端和客户端相互发送信息,参考mdn。
当前规范只规定了客户端的用法,即创建一个WebSocket实例,然后调用对应方法向服务器发送事件,并监听事件,服务端可以搭配ws。
Socket.IO也可以实现双向通信,但是不是websocket的实现,因此不能通过websocket客户端连接。
9.4 Cross-document messaging
通常不同源的脚本由于同源策略无法通信,通过postmessage可以在获得另一个页面window对象(比如一个是另一个的iframe或者一个是由另一个通过window.open打开的)的情况下实现跨文档通信,参考Window.postMessage()。
消息发送方使用postmessage发送消息,接收方监听message事件,实现通信。
9.5 Channel messaging
在不同浏览上下文的代码通信可以使用channel messaging,比如两个iframe、一个是另一个的iframe、两个workers、通过SharedWorker连接的两个文档。参考mdn。
一方通过实例化MessageChannel建立通道,并使用port1,另一方使用port2,双方使用MessagePort.postMessage
和MessagePort.onmessage
进行消息发送和接收。demo
9.6 Broadcasting to other browsing contexts
用来在同源的不同浏览上下文(windows, tabs, frames, or iframes)和workers之间通信,参考mdn。
不同上下文下的脚本用同一个参数实例化一个BroadcastChannel建立一个广播通道,然后就可以通过BroadcastChannel.postMessage()
和BroadcastChannel.onmessage
发送和接收信息。
10 Web workers
这里定义了一种在后台执行script而不依赖ui的api,从而使耗时长的任务不影响页面交互,这种api被称为workers,会生成一个操作系统级别的线程。参考mdn。
workers分为两种,一种是专用workers(dicated workers),即通过Worker实例化生成的,一种是共享wokers(Shared workers),通过实例化SharedWorker生成。
其中专用worker仅仅被生成它的脚本使用,双方通过postmessage和onmessage事件通信。
共享worker被多个脚本使用,即使在不同windows, iframes or even workers(需要同源)。
最后注意在worker中有些变量不能用。
11 Worklets
是一种轻量级的workers,主要用于高性能的 graphics rendering or audio processing,参考mdn 只能应用于特定场景,不能用于任何计算。
12 Web storage
这里介绍两种机制用来在客户端保存键值对(值只能是字符串),即
- sessionStorage 为每个给定的origin单独保存,在会话期间可用(只要浏览器开着,包括reload和restores),当打开一个新标签时会复制一份顶级会话的数据作为新会话的数据,不同tab中的相同url会维护各自的数据。
- localStorage 作用和上面一样,但是会持久化保存,即使浏览器被关闭,没有过期时间。
调用以上两种时都会实例化Storage对象,这里对相关概念做一些介绍
12.1 Storage inteface
注意前文介绍的两种都是Storage的实例,这里介绍的东西都可以套上使用
12.1.1 属性
- length 保存的数据条目数量
12.1.2 方法
- Storage.key() 参数为数字,返回对应保存的值
- Storage.getItem()
- Storage.setItem()
- Storage.removeItem()
- Storage.clear()
12.2 StorageEvent
当storage一块存储区域被同一个上下文的其他document修改了就会触发,包含的属性有
- key 修改值的key,如果是clear则返回null
- newValue 新值,如果删除则为null
- oldValue 旧值
- storageArea 当前storage对象
- url
本期撒花完结