导图社区前端HTML与CSS与JavaScript入门总结笔记

前端HTML与CSS与JavaScript入门总结笔记

这份思维导图归纳了一些HTML基本的元素标签、布局、表单，以及 HTML5 API 如 WebSockets、Fetch API 等内容。CSS 主要是归纳了选择器。JavaScript 主要是包含了函数与箭头函数、this 关键字、Promise 异步对象。此外还有AJAX、jQuery 与 jQuery AJAX、JSONP 等内容。导图中的注释有很多相关的详细说明与示例代码，其中后端的测试代码是用的 PHP。希望能帮到大家！

编辑于2022-10-20 13:13:51

编程
大学
css
前端
html
软件开发
软考
代码
js
JavaScript
程序
程序员
jquery
高效学习
考研考证
request
软件工程师
UI
程序设计
终身学习
校园教育
ajax
知识栏目
软件设计师
客户端
程序世界
界面
精选笔记
知识创造

ERIZEIUM

他的近期作品查看更多>>

前端HTML与CSS与JavaScript入门总结笔记

社区模板帮助中心，点此进入>>

ERIZEIUM

他的近期作品查看更多>>

相似推荐
大纲

python思维导图
- 5.1k
- 231
- 7
(*^▽^*)
Java日常技术
- 1.4k
- 106
- 3
GOGO-三杯吐然诺
java中io流图解
- 793
- 95
- 11
韵呀
Java继承与多态
- 472
- 40
- 4
半夏琉璃＆空人心
职场必看！Java编程思想思维导图
- 5.2k
- 983
- 173
彭明德
python留言网站
- 477
- 10
- 1
幸福的钟声敲响
Python入门
- 961
- 70
- 7
Jerry????
python基础知识点简单总结
- 941
- 64
- 10
排列&组合
J2EE复习大纲
- 230
- 16
- 2
顺便
《C语言程序设计》思维导图
- 3.9k
- 342
- 47
liangzhen

HTML

简介

概念

标记语言

是一套标记标签 (markup tag)

超文本标记语言

标记语言的一种

HTML

Hyper Text Markup Language

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

关于 XHTML

可扩展超文本标记语言

是以 XML 格式编写的 HTML

是更严格更纯净的 HTML 版本

用途

HTML

用来显示数据，其焦点是数据的外观

使用标记标签来描述网页

标签有被预定义

例：在 HTML 中使用的标签（以及 HTML 的结构）是预定义的。HTML 文档只使用在 HTML 标准中定义过的标签（比如 <p> 、<h1> 等等）。

具有自我描述性

HTML 文档与网页

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

Web 浏览器

读取 HTML 文档，并以网页的形式显示出它们

不会显示 HTML 标签，而是使用标签来解释页面的内容

参考

HTML 教程：https://www.w3school.com.cn/html/index.asp 字符实体手册：https://www.w3school.com.cn/charsets/ref_html_entities_4.asp 在线测试工具：https://www.w3school.com.cn/tiy/t.asp 网站主机教程：https://www.w3school.com.cn/hosting/index.asp Web 技术文档：https://developer.mozilla.org/zh-CN/

关于 URL

组成

[协议:][//][用户名:密码@][计算机主机名.子域名][:端口号][/目录路径][/文件名][?查询字符串][#片段标识符]

URL 编码

一些特殊字符或 ASCII 字符集外的字符要使用“%加两位十六进制数”序列编码

空格使用“+”替代

参考

https://www.iteye.com/blog/luanxiyuan-1910984

例：

<html> <head> <style> div { border: 1px solid rebeccapurple; } </style> <script> function encodeURITest() { var str = document.getElementById('encodeURIInput').value; var result = encodeURI(str); document.getElementById("encodeURIOuput").innerHTML = result; } function decodeURITest() { var str = document.getElementById('encodeURIOuput').innerHTML; var result = decodeURI(str); document.getElementById("decodeURIOuput").innerHTML = result; } function encodeURIComponentTest() { var str = document.getElementById('encodeURIComponentInput').value; var result = encodeURIComponent(str); document.getElementById("encodeURIComponentOuput").innerHTML = result; } function decodeURIComponentTest() { var str = document.getElementById('encodeURIComponentOuput').innerHTML; var result = decodeURIComponent(str); document.getElementById("decodeURIComponentOuput").innerHTML = result; } </script> </head> <body> <div> <h3>Javascript函数：encodeURI()</h3> <p>它着眼于对整个URL进行编码，因此除了常见的符号以外，对其他一些在网址中有特殊含义的符号“; / ? : @ & = + $ , #”不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。</p> <input type="text" id="encodeURIInput" /> <button onclick="encodeURITest()">JS encodeURI</button> <p id="encodeURIOuput"></p> <button onclick="decodeURITest()">JS decodeURI</button> <p id="decodeURIOuput"></p> </div> <div> <h3>Javascript函数：encodeURIComponent()</h3> <p>它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。因此，“; / ? : @ & = + $ , #”这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。</p> <input type="text" id="encodeURIComponentInput" /> <button onclick="encodeURIComponentTest()">JS encodeURIComponent</button> <p id="encodeURIComponentOuput"></p> <button onclick="decodeURIComponentTest()">JS decodeURIComponent</button> <p id="decodeURIComponentOuput"></p> </div> </body> </html>

开发环境

Visual Studio Code

插件

HTML Snippets Auto Rename Tag HTML CSS Support SCSS Formatter JavaScript Debugger Code Runner Quokka.js open in browser Microsoft Edge Tools for VS Code Prettify JSON XML HTML Play：（预览 Ctrl+Alt+H） Live Server：（Live后，保存文件后即自动刷新） PHP Server（Ctrl+Shift+P：PHP Server: Serve project 启动；PHP Server: Stop project 停止。建议再安装 XAMPP） Vetur

快捷键

命令面板：Ctrl+Shift+P 向上重开一行：Ctrl+Shift+Enter 向下重开一行：光标在行尾 Enter ；光标不在行尾 Ctrl+Enter 删除一行：未选中内容时，Ctrl+X 剪切一行；Ctrl+Shift+K 删除一行移动一行：向上 Alt+↑ ；向下 Alt+↓ 复制一行：向上 Shift+Alt+↑ ；向下 Shift+Alt+↓ 词：选中一个词 Ctrl+D 跳转到页头：Ctrl+Home 跳转到页尾：Ctrl+End 折叠区域代码：Ctrl+Shift+[ 展开区域代码：Ctrl+Shift+] 行注释：Ctrl+/ 块区域注释：Shift+Alt+A 切换文件：Alt+1/2/3 或 Ctrl+Tab 查找并打开文件：Ctrl+P 提示：Ctrl+I

快捷输入

创建文档框架：! + Tab 创建3个段落：p*3 + Tab

Node.js

下载： https://nodejs.org/zh-cn/ 查看是否安装成功，命令行执行 node -v 和 node -v 命令（失败的话可以将安装路径添加到用户环境变量Path中，还不行就重启电脑）。

包管理器

npm

命令

源

设置源（国内）： npm config set registry https://registry.npmmirror.com 查看源： npm config get registry

安装

安装模块到项目目录下： npm install moduleName 模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置： npm install -g moduleName 将模块安装到项目目录下，并在package文件的dependencies节点写入依赖： npm install --save moduleName 将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖： npm install --save-dev moduleName

包

yarn

使用

安装（全局）： npm install -g yarn 查看是否安装成功，执行命令 yarn -v

http-server

使用

安装(全局)： npm install -g http-server 启动：终端切换到项目目录，输入 http-server 或 http-server -p 8808 等停止：终端输入 Ctrl+C

谷歌浏览器

插件

JSONView

Vue.js devtools

PowerShell

安装： https://github.com/PowerShell/PowerShell

基本语法

HTML 文档基本组成

例：

<!DOCTYPE html>  <html lang="zh-CN">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>你好，文档标题。</title>  </head> <body>  <h1>你好，标题。</h1> <p>你好，段落。</p> </body> </html>

元素

HTML 元素由“开始标签”和“结束标签”及之间的文本内容/元素内容组成，标签对大小写不敏感

关于结束标签：（1）即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。（不建议该写法）：例： <p>This is a paragraph （2）没有关闭标签的空(元素)标签。（不建议该写法）：例： <br> （<br> 标签定义换行）建议写为在开始标签中关闭的没有内容的空标签形式 <br /> 关于大小写：万维网联盟（W3C）在 HTML 4 中推荐使用小写。

HTML 标签参考手册

https://www.w3school.com.cn/tags/index.asp

注释格式

普通注释

条件注释

例：

<body> <p>条件注释主要用于 IE 浏览器</p>  </body>

属性

HTML 元素可以拥有属性

属性提供了有关 HTML 元素的更多的信息

例：

链接

一般元素都适用的属性

例：

<html> <head> <style> h1.intro { color: blue; text-align: right; } h2.intro { color: green; text-align: left; } .important { background-color: yellow; } #myHeader { color: red; text-align: center; } </style> </head> <body> <h1 class="intro important">Header 1</h1> <h2 class="intro important">Header 2</h2> <h1 id="myHeader">W3School is the best!</h1> </body> </html>

标题

标签

字体由大到小

水平线

<hr />

例：

<p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>

说明

默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如标题、段落元素前后

段落

标签

<p>

换行

<br />

在不产生一个新段落的情况下进行换行（新行）。

例：

<p>This is<br />a para<br />graph with line breaks</p>

格式化

例：

文本格式化

<body> <b>定义粗体字 ddddd</b> <br /> <strong>定义加重语气 ddddd</strong> <br /> <big>定义大号字 ddddd</big> <br /> <em>定义着重文字 ddddd</em> <br /> <i>定义斜体字 ddddd</i> <br /> <small>定义小号字 ddddd</small> <br /> 基准字 <sup>定义上标字 ddddd</sup> <br /> 基准字 <sub>定义下标字 ddddd</sub> <br /> <ins>定义插入字(下划线) ddddd</ins> <br /> <del>定义删除字(删除线) ddddd</del> </body>

“计算机输出”

<body> <pre> 定义预格式文本。它保留了空格和换行。</pre> <code>定义计算机代码</code> <br /> <samp>定义计算机输出代码样本</samp> <br /> <var>定义变量</var> <br /> <kbd>定义键盘码</kbd> <br /> <tt>定义打字机代码</tt> <br /> </body>

引用

<body> <abbr title="完整内容 etcetera">定义缩写/简写。鼠标悬停时展示 title 属性中的完整内容。etc.</abbr> <br /> <acronym title="完整内容 World Wide Web">定义首字母缩写。鼠标悬停时展示 title 属性中的完整内容。WWW</acronym> <br /> <bdo dir="ltr">定义文本方向：dir 属性值 ltr 文本方向从左到右</bdo> <br /> <bdo dir="rtl">定义文本方向：dir 属性值 rtl 文本方向从右到左</bdo> <br /> 这是长的引用： <blockquote cite="https://www.w3school.com.cn/">定义长引用；cite 属性设置引用 URL 源。浏览器还会添加上下换行和外边距</blockquote> <br /> 这是短的引用： <q>定义短引用。浏览器还会添加引号" 但不会添加上下换行和外边距</q> <br /> <cite>定义引证</cite> <p><dfn title="定义术语含义：（1）如果设置了 dfn 元素 title 属性，则 dfn 标签内容定义术语，title 属性定义术语含义">dfn 标签</dfn>是什么</p> <p><dfn><abbr title="定义术语含义：（2）如果 dfn 元素包含了1个 abbr 元素，则 abbr 标签内容定义术语，abbr 的 title 属性定义术语含义">dfn 标签</abbr></dfn>是什么</p> <P><dfn>dfn 标签</dfn>定义术语含义：（3）否则 dfn 标签内容定义术语，外层元素内容定义术语含义</P> <address> 定义地址<br /> 由 <a href="https://www.w3school.com.cn/">W3School</a> 编写<br /> 联系我们：<br /> 宇宙代码中心 <br /> </address> </body>

扩展说明

很多标签都可以用来改变文本的外观，并为文本关联其隐藏的含义。总地来说，这些标签可以分成两类：（1）基于内容的样式（content-based style）；（2）物理样式（physical style）；基于内容的样式基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。然后浏览器就会把与该含义、上下文或者用法一致的格式应用在文本上。请注意这里面的区别。基于内容的标签赋予含义，而不是格式化。因此，它们对于自动处理来说非常重要；计算机并不关心文档的外观如何。因为字体样式是通过语义线索来指定的，因此浏览器可以为用户选择一种合适的显示样式。由于不同地点的样式各种各样，所以使用基于内容的样式可以帮助你确保自己的文档对广大范围的读者来说都是有意义的。这一点在专门供那些盲人和残疾人所使用的浏览器上显得尤其重要，因为他们的显示选项可能和我们传统的文本根本不同，或者在某方面具有非常大的局限性。当前的 HTML 和 XHTML 标准并没有为每一个基于内容的标签都定义一种格式；它们仅仅规定必须用与文档中普通文本不同的方式来显示基于内容的样式。标准甚至没有要求这些基于内容的样式彼此之间都要用不同的方式显示。在实际应用中，你可能会发现很多这样的标签和传统的印刷有着非常明显的关系，它们有着相似的含义和显示样式，而且在多数浏览器中都以相同的样式和字体来显示。使用 HTML/XHTML 基于内容的样式标签时要遵从一些规则，因为仅仅是简单地想想文本该如何显示，而不必知道这些文本的含义是什么，是十分容易的。一旦你开始使用基于内容的样式之后，文档将会更加一致，而且可以更好地帮助执行自动搜索和内容编辑。这些标签是： <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <samp> <strong> <var> 物理样式在讨论基于内容的样式标签时，我们经常用到“意图”这个词。这是因为由标签传达的含义比浏览器显示文本的方式更为重要。然而，在某些情况下，可能是出于合法性或者版权等方面的原因的考虑，你希望文本以某种特殊的方式来显示（例如斜体或加粗）。在这种情况下，就可以对文本使用物理样式。虽然其他文字处理系统的趋势是精确地控制样式和外观，但是在使用 HTML 或 XHTML 时，除非极少情况下，都应该避免使用物理标签。应当尽可能地向浏览器提供上下文信息，并使用基于内容的样式。尽管现在浏览器不过是以斜体或者粗体字来显示这些文本，但是将来的浏览器和各种文档生成工具可能会以非常有创建的方式来利用这些基于内容的样式。当前的 HTML/XHTML 标准一共提供了 9 种物理样式，包括粗体（bold）、斜体（italic）、等宽（monospaced）、下划线（underlined）、删除线（strikethrough）、放大（larger）、缩小（smaller）、上标（superscripted）和下标（subscripted）文本。这些标签是： <b> <i> <s> <strike> <big> <small> <sup> <sub> <tt> 提示：请记住这些物理样式标签对紧接的文本产生的强烈效果。要实现在整个文档范围内对文本显示的全面控制，请使用样式表。

样式

用于改变 HTML 元素的样式

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

使用方式

内联样式

设置元素的 style 属性

可以是任何 CSS 属性

各样式属性由名称:值对组成，各属性间用 ; 分隔

例：

背景颜色

背景图

字体、颜色和尺寸

<body> <h1 style="font-family: verdana;">A heading</h1> <p style="font-family: arial; color: red; font-size: 20px;">A paragraph</p> </body>

文本对齐

<body> <h1 style="text-align: center;">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body>

链接文本修饰

<body> <a href="https://www.w3school.com.cn/" style="text-decoration: none;">无下划线的链接</a> </body>

内部样式表

一般在 head 部分通过 <style> 标签定义内部样式表

例：

<html> <head> <style type="text/css"> body { background-color: royalblue; } p { margin-left: 10px; } </style> </head> <body> <p style="background-color: red;">段落</p> </body> </html>

外部样式表

样式表(css文件)

在 head 部分通过 <link> 标签引用外部样式表

可以跨域

例：

<html> <head> <link rel="stylesheet" type="text/css" media="all" href="cssfolder/csstest1.css" />  </head> <body> <h1>外部样式表样式</h1> <p>外部样式表样式</p> </body> </html> csstest1.css 文件内容： @charset "UTF-8"; /* 指定样式表中使用的字符编码。可选。@charset 规则必须是样式表中的第一个元素，并且不能以任何字符开头。 */ h1 { color: green; border: 1pt solid black; } p { color: red; background-color: #efe7d6; border: 1pt solid black; }

颜色

设置方式例：

<body> <div style="background-color: red;"> <div style="background-color: blue;">使用颜色名设置颜色</div> <div style="background-color: #2130b3;">使用 #rrggbb 设置颜色</div> <div style="background-color: #2130b3; opacity: 0.9;">使用 #rrggbb 设置颜色，并使用 opacity 属性设置元素的不透明度</div> <div style="background-color: #2130b3b9;">使用 #rrggbbaa 设置颜色</div> <div style="background-color: rgb(29, 57, 218);">使用 rgba(rr, gg, bb) 设置颜色</div> <div style="background-color: rgba(29, 57, 218, 0.623);">使用 rgba(rr, gg, bb, aa) 设置颜色</div> </div> </body>

链接

HTML 使用超级链接与网络上的另一个文档相连

标签

<a>

例：

基础示例

index.html

<!DOCTYPE html> <html> <head> </head> <body> <a href="https://www.w3school.com.cn/">链接。href 属性设置链接地址</a> <br /> <a href="helloAnchor.html#nameAnchor"><img src="https://www.w3school.com.cn/i/eg_buttonnext.gif" alt="下一页">其他元素也可以作为链接元素的内容</a> <br /> <a href="#interNameAnchor">去内部页面锚点。href 属性中用 # 引用锚点</a> <br /> <a href="helloAnchor.html#nameAnchor">去外部页面链接标签 name 锚点</a> <br /> <a href="helloAnchor.html#idAnchor">去外部页面元素 id 锚点</a> <br /> <a href="#interNameAnchor" target="_blank">去锚点。target 属性值 _blank 在新窗口中打开链接</a> <br /> <a href="#interNameAnchor" target="_parent">去锚点。target 属性值 _parent 在父窗体中打开链接</a> <br /> <a href="#interNameAnchor" target="_self">去锚点。target 属性值 _self 在当前窗体打开链接(默认值)</a> <br /> <a href="#interNameAnchor" target="_top">去锚点。target 属性值 _top 在当前窗体打开链接，并替换当前的整个窗体(框架页)</a> <br /> <a href="#interNameAnchor" target="framename">去锚点。target 属性值为一个框架页的名称，则在对应框架页中打开</a> <br /> <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件</a> <br /> <pre style="font-size: 100px;"> 长1 内1 容1 </pre> <br /> <iframe name="framename" width="800px" height="500px"></iframe> <br /> <pre style="font-size: 100px;"> 长2 内2 容2 </pre> <br /> <a name="interNameAnchor">内部页面锚点</a> </body> </html>

helloAnchor.html

<html> <head> </head> <body> <pre style="font-size: 100px;"> 长内容 </pre> <a name="nameAnchor">链接标签 name 锚点（name 属性设置锚（anchor）的名称。仅 a 标签有效）</a> <p id="idAnchor">元素 id 锚点（可以使用 id 属性替代 name 属性设置锚。除 a 标签以外的标签也有效（推荐））</p> </body> </html>

分页

<!DOCTYPE html> <html> <head> <style> .pagination { display: inline-block; /* 使元素成为行内元素，同时又能设置width、padding等属性 */ } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; border: 1px solid #ddd; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) { background-color: #ddd; } .pagination a:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .pagination a:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } </style> </head> <body> <h1>带圆角边框的分页</h1> <div class="pagination"> <a href="#">«</a> <a href="#">1</a> <a class="active" href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">»</a> </div> </body> </html>

图像

标签

<img>

可以跨域

例：

<body> <img src="https://www.w3school.com.cn/i/eg_sun.gif" alt="太阳" title="src 属性设置图片资源URL；alt 属性设置预备的替代文字" /> <br /> <p><img src="https://www.w3school.com.cn/i/eg_mouse.jpg" alt="可爱" width="150" height="150" />鼠标</p> <p>img 的 ismap 属性：将图像定义为服务器端图像映射：<br /> 当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端；<br /> img 元素需在带有有效 href 属性的 a 元素内。 </p> <a href="https://www.w3school.com.cn/example/html/form_action.asp"><img src="https://www.w3school.com.cn/i/eg_tulip.jpg" alt="花" ismap /> </a> <p>img 的 usemap 属性：将图像定义为客户器端图像映射：<br /> 图像映射指的是带有可点击区域的图像；<br /> usemap 属性与 map 元素的 name 或 id 属性相关联，以建立 img 与 map 之间的关系。 </p> <p>请点击图像上的星球查看详情：</p> <img src="https://www.w3school.com.cn/i/eg_planets.jpg" alt="太阳系" usemap="#planetmap" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href="https://www.w3school.com.cn/example/html/venus.html" target="_blank" alt="金星" /> <area shape="circle" coords="129,161,10" href="https://www.w3school.com.cn/example/html/mercur.html" target="_blank" alt="水星" /> <area shape="rect" coords="0,0,110,260" href="https://www.w3school.com.cn/example/html/sun.html" target="_blank" alt="太阳" /> </map> </body>

表格

标签

<table>

例：

基本表格：

<body> <pre>table 标签：定义表格； tr 标签：定义表格的行； th 标签：定义表格的表头（可省略）； td 标签：定义表格单元(数据) (td 标签内还可以包含 table 或其他元素)；</pre> <table> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body>

带页眉页脚的表格：

<body> <pre> caption 标签：定义表格标题（标签必须紧随 table 标签之后）； thead 标签：定义表格的页眉（内部必须拥有 tr 标签）； tfoot 标签：定义表格的页脚； tbody 标签：定义表格的主体；(3个标签需同时使用，出现顺序依次为：thead、tfoot、tbody)；</pre> <pre> 在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。</pre> <table border="1"> <caption>表格标题</caption> <thead> <tr> <th>Month</th> <th>Saving</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>Jan</td> <td>$100</td> </tr> <tr> <td>Feb</td> <td>$80</td> </tr> </tbody> </table> </body>

元素属性：

<body> <pre>table 标签的属性： border 属性设置表格边框的宽度； cellspacing 属性设置单元格之间的空白宽度； cellpadding 属性设置单元边沿与其内容之间的空白宽度； frame 属性设置外侧边框的哪个部分是可见的； rules 属性设置内侧边框的哪个部分是可见的； </pre> <table border="3" cellspacing="5" cellpadding="10"> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <br /> <table border="3" frame="above" rules="cols"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>比尔</td> <td>123</td> <td>456</td> </tr> </table> <pre>table 标签的样式： border-collapse 样式属性值：separate 边框分开；collapse 边框合并；inherit 从父元素继承；内容设置一个空格，使其显示。或设置样式属性 empty-cells:show（用于border-collapse:separate模式）；</pre> <table border="3" style="border-collapse:collapse;"> <tr style="background-color:#8ec6ff ;"> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <br /> <table border="3" style="border-collapse:separate;"> <tr style="background-color:#8ec6ff;"> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr style="empty-cells:hide;"> <td>100</td> <td></td> <td>300</td> </tr> <tr style="empty-cells:show;"> <td>400</td> <td></td> <td></td> </tr> </table> <pre>单元跨度： th/td 等的 colspan 属性：列跨度； th/td 等的 rowspan 属性：行跨度；</pre> <table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>比尔</td> <td>123</td> <td>456</td> </tr> </table> <br /> <table border="1"> <tr> <th>姓名</th> <td>比尔</td> </tr> <tr> <th rowspan="2">电话</th> <td>123</td> </tr> <tr> <td>456</td> </tr> </table> </body>

响应式表格：

<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; text-align: left; padding: 8px; } th { background-color: #4CAF50; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; } </style> </head> <body> <h1>响应式表格</h1> <p>如果屏幕太小无法显示全部内容，响应表将显示水平滚动条。请调整浏览器窗口的大小以查看效果：</p> <p>如需创建响应式表格，请用设置了 overflow-x:auto 样式的的容器元素（比如 div）包住表格元素：</p> <div style="overflow-x:auto;"> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> </tr> <tr> <td>Bill</td> <td>Gates</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>Steve</td> <td>Jobs</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>Elon</td> <td>Musk</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> </table> </div> </body> </html>

列表

标签

无序列表

始于 <ul> 标签，每个列表项始于 <li> 标签

有序列表

始于 <ol> 标签。每个列表项始于 <li> 标签

定义的列表

始于 <dl> 标签。每个列表项始于 <dt> 标签，列表项的定义始于 <dd> 标签

例：

基础示例

<body> <h4>无序列表：（ul 元素的 type 属性规定列表的项目符号的类型）</h4> <ul type="circle"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> </ul> <h4>有序列表：（ol 元素的 type 属性规定在列表中使用的标记类型）</h4> <ol type="1"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> </ol> <h4>定义的列表：</h4> <dl> <dt>计算机</dt> <dd>用来计算的仪器...</dd> <dt>显示器</dt> <dd>用来显示的装置...</dd> </dl> <h4>嵌套的列表：</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶 <ul> <li>中国茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul> </body>

垂直导航栏

<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li:last-child { border-bottom: none; } li a.active { background-color: #4CAF50; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } </style> </head> <body> <h1>垂直导航栏</h1> <p>在本例中，我们居中导航链接并为导航栏添加边框：</p> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>

水平导航栏

<!DOCTYPE html> <html> <head> <style> body { margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; /* 粘性导航 */ /* position: -webkit-sticky; */ /* Safari */ /* position: sticky; */ /* top: 5px; */ /* 下拉菜单 */ position: static; } li { float: left; /* 关键：浮动列表项，使块元素滑动为彼此相邻 */ border-right: 1px solid #bbb; } li a { display: block; /* 关键：这里主要是使整个链接区域都可单击 */ color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li:last-child { border-right: none; } .active { background-color: #4CAF50; } li a:hover { background-color: #111; } /* 下拉菜单 */ .dropdown-content { display: none; /* 关键：默认不显示 */ position: absolute; /* 关键：下拉内容放置在正下方 */ background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; max-height: 60%; overflow: auto; } .dropdown-content a { display: block; /* 关键：按块级元素换行显示，并使整个链接区域都可单击 */ color: black; padding: 12px 16px; text-decoration: none; text-align: left; } .dropdown-content a:hover { background-color: #d8d8d8; } .dropdown:hover .dropdown-content { display: block; /* 关键：鼠标悬停后显示 */ } </style> </head> <body> <div class="header"> <h1>向下滚动</h1> </div> <ul> <li><a class="active" href="#home">Home</a></li> <li class="dropdown"> <a class="dropbtn" href="#news">News</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <a href="#">Link 8</a> <a href="#">Link 9</a> </div> </li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;"> <h1>固定的顶部导航栏</h1> <h2>请滚动页面以查看效果。</h2> <h2>页面滚动时导航栏将位于页面顶部。</h2> <pre> 长内容 </pre> </div> </body> </html>

块

块级元素（block level element）

块级元素在浏览器显示时，通常会以新行来开始（和结束）

例：<h1>, <p>, <ul>, <table>

关于 <div> 元素

定义文档中的分区或节（division/section），没有特定的含义

内联(行内)元素（inline element）

例：<b>, <td>, <a>, <img>

关于 <span> 元素

定义 span，用来组合文档中的行内元素，没有特定的含义

例：

<html> <head> <style> .block1 { background-color: chocolate; } .block2 { background-color: deepskyblue; } p.tip span { font-weight: bold; color: #ff9955; } </style> </head> <body> <div class="block1" style="color:#990000;"> <h3>标题</h3> <p>段落</p> </div> <div class="block2" style="color:#009900;"> <h3>标题</h3> <p>段落</p> </div> <div class="block1" style="color:#000099;"> <h3>标题</h3> <p>段落</p> </div> <p class="tip"><span>提示：</span> span 例子</p> </body> </html>

类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式

通过元素的 class 属性进行设置

例：

<html> <head> <style> .cities { background-color: black; color: white; margin: 20px; padding: 20px; } span.red { color: red; } </style> </head> <body> <p>分类块级元素：</p> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <p>分类行内元素：</p> <h2>My <span class="red">Red</span> Heading</h2> </body> </html>

元素的 id 属性指定 HTML 元素的唯一 ID

id 名称对大小写敏感

主要用途

id 属性用于指向样式表中的特定样式声明

例：

<html> <head> <style> #myHeader { background-color: cornflowerblue; color: red; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html>

JavaScript 也可使用它来访问和操作拥有特定 ID 的元素

例：

<html> <head> <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> </head> <body> <p>JavaScript 可以使用getElementById() 方法访问指定 Id 元素：</p> <h2 id="myHeader">Hello World!</h2> <button onclick="displayResult()">改变文本</button> </body> </html>

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

标签

框架(集)

不能与 <body> 标签同时使用

例：

<html> <frameset rows="30%,*">  <frame src="htmlfolder/frame_a.html" /> <frameset cols="30%,30%,*"> <frame src="htmlfolder/frame_a.html" /> <frame src="htmlfolder/frame_a.html" /> <frame src="htmlfolder/frame_a.html" noresize="noresize" />  </frameset> </frameset> <noframes> <body>您的浏览器无法处理框架！</body> </noframes> </html> frame_a.html 文件内容： <html> <body bgcolor="#8f8fbd"> <h3>Frame A</h3> </body> </html>

<noframes> 标签

定义了浏览器不支持时的替代内容

标签内再包含 <body> 标签

内联框架

标签

定义内联的框架（子窗口）

例：

<body> <p>iframe 的 src 属性指定要显示的文档的 URL；</p> <iframe src="helloAnchor.html" width="80%" height="500"></iframe> <iframe src="helloAnchor.html" width="80%" height="500" frameborder="0"></iframe> <iframe src="helloAnchor.html" width="80%" height="500" style="border: medium double rgb(255,0,255) ;"></iframe> </body>

客户端脚本

在元素某些属性中直接定义

例：

<body> <h1>我的第一段 JavaScript</h1> <button onclick="document.getElementById('demo').innerHTML = Date()">显示日期和时间</button> <p id="demo"></p> </body>

标签

<script> 标签

一般在 head 部分通过 <script> 标签定义客户端脚本（JavaScript）

body 部分定义也可以，把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

定义脚本内容的方式

既可以在元素内容中包含脚本语句

例：

<html> <head> <script type="text/javascript"> function light(sw) { var color; if (0 == sw) { color = "gray"; } else { color = "yellow"; } document.getElementById('light').style.backgroundColor = color; } </script> <noscript>抱歉，您的浏览器不支持 JavaScript！</noscript> </head> <body> <button id="light">灯光</button> <br /> <button onclick="light(1)">开</button> <button onclick="light(0)">关</button> </body> </html>

也可以通过 src 属性指向外部脚本文件

可以跨域

例：

<html> <head> <script type="text/javascript" src="jsfolder/jstest1.js" charset="UTF-8"></script> </head> <body> <button id="light">灯光</button> <br /> <button onclick="light(1)">开</button> <button onclick="light(0)">关</button> </body> </html> jstest1.js 文件内容： function light(sw) { var color; if (0 == sw) { color = "gray"; } else { color = "yellow"; } document.getElementById('light').style.backgroundColor = color; }

其他属性

async 与 defer

例：

<html> <head> <script type="text/javascript" src="jsfolder/demo_defer.js" defer></script> </head> <body> <h4>async 属性（布尔值）：如果已设置，它规定脚本将在可用时立即异步执行。仅适用于外部脚本（并且仅应在存在 src 属性时使用）</h4> <h4>defer 属性（布尔值）：如果已设置，它规定在页面完成解析时执行脚本。仅适用于外部脚本（并且仅应在存在 src 属性时使用）</h4> <ul> <li>如果 async 或 defer 都未设置：在浏览器继续解析页面之前立即获取并执行脚本</li> <li>如果 async已设置：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）</li> <li>如果 async未设置且 defer已设置：脚本将在页面完成解析时执行</li> </ul> <h2 id="p1">Hello1</h2> <h2 id="p2">Hello2</h2> <script type="text/javascript" src="jsfolder/demo_async.js" async></script> </body> </html> demo_async.js 文件内容： alert(document.getElementById("p1").firstChild.nodeValue + " async"); demo_defer.js 文件内容： alert(document.getElementById("p2").firstChild.nodeValue + " defer");

crossorigin 与 referrerpolicy

（1）crossorigin 属性：将请求模式设置为 HTTP CORS 请求。 CORS 指的是 Cross-Origin Resource Sharing，它是一种允许从自身域之外的另一个域请求网页上的资源的机制。与跨域请求相反的是同源请求。这意味着网页只能与同样位于同一服务器上的其他文档进行交互。此策略强制要求相互交互的文档必须具有相同的来源（域）。服务端也需要允许跨域，如返回响应头： access-control-allow-origin: * integrity属性设置引入js文件的hash值，浏览器在下载js文件时候，会对js文件进行hash计算。如果一致则正常加载，否则拒绝加载运行。语法： <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> anonymous - 执行跨域请求。不发送凭据； use-credentials - 执行跨域请求。发送凭据（例如 cookie、证书、HTTP 基本身份验证）。（2）referrerpolicy 属性：规定在获取脚本时要发送的引荐来源信息。语法： <script referrerpolicy="no-referrer-when-downgrade"></script> no-referrer：不发送引荐来源信息； no-referrer-when-downgrade：默认。如果协议安全级别保持不变或更高（HTTP 到 HTTP、HTTPS 到 HTTPS、HTTP 到 HTTPS 可以），则发送源、路径和查询字符串。不发送任何安全级别较低的内容（HTTPS 到 HTTP 不行）； origin：发送文档的来源（协议、主机和端口）； origin-when-cross-origin：为跨域请求发送文档的来源。为同源请求发送来源、路径和查询字符串； same-origin：为同源请求发送引用者。不为跨域请求发送引用者； strict-origin-when-cross-origin：如果协议安全级别保持不变或更高（HTTP 到 HTTP、HTTPS 到 HTTPS 和 HTTP 到 HTTPS 都可以），则发送来源。不发送任何安全级别较低的内容（HTTPS 到 HTTP）； unsafe-url：发送来源、路径和查询字符串（不考虑安全性）。请小心使用这个值！

<noscript> 标签

定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户

应用

利用该标签的跨域能力实现 JSONP （JSON with Padding）

说明

JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。 JSONP 不使用 XMLHttpRequest 对象，JSONP 使用 <script> 标签取而代之。一般的工作流程是：（1）客户端请求时提供一个回调函数，该回调函数的参数一般是一个 JSON 对象；（2）服务端响应内容为一段 JavaScript 代码，并在代码中调用了这个回调函数。（该段代码在客户端页面会被动态解析执行）；

例：

html

<!DOCTYPE html> <html> <body> <h1>点击按钮</h1> <p>将创建一个带有 src 属性的 script 标签并将其放在文档中。</p> <p>PHP 文件以输入文本作为参数返回对指定函数的调用。</p> <input type="text" id="txt1" placeholder="输入文本" value="Callback Param" /> <button onclick="jsonpTest()">点击</button> <p id="demo"></p> <script> function jsonpTest() { let callback = myFunc.name; //提供给服务端的回调函数名称 let q = `${document.getElementById("txt1").value}`; let s = document.createElement("script"); s.src = `http://localhost/php/demo_jsonp.php?callback=${decodeURIComponent(callback)}&q=${encodeURIComponent(q)}`; s.defer = true; s.onload = s.onreadystatechange = function () { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") { s.onload = s.onreadystatechange = null; s.parentNode.removeChild(s); } } document.getElementsByTagName("head")[0].appendChild(s); //添加 script 元素，开始请求 } function myFunc(param) { document.getElementById("demo").innerHTML = `服务端回调：<br/>参数值：${param}<br/>参数值JSON字符串值：${JSON.stringify(param)}`; } </script> </body> </html>

demo_jsonp.php

<?php header('Content-Type: text/javascript'); $jsonpCallback = $_REQUEST['callback']; $q = $_REQUEST['q']; $jsonSrc = array('q' => $q); echo "try { $jsonpCallback(".json_encode($jsonSrc).'); } catch (err) { throw err; }'; ?>

jQuery AJAX 实现的跨域

html

<!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> </head> <body> <h1>点击按钮</h1> <p>将创建一个带有 src 属性的 script 标签并将其放在文档中。</p> <p>PHP 文件以输入文本作为参数返回对指定函数的调用。</p> <input type="text" id="txt1" placeholder="输入文本" value="Callback Param" /> <button onclick="jsonpTest()">点击</button> <p id="demo"></p> <script> function jsonpTest() { let callback = myFunc.name; //提供给服务端的回调函数名称 let q = `${document.getElementById("txt1").value}`; $(document).ready(function () { $.ajax({ url: `http://localhost/php/demo_jsonp.php?callback=?`, type: "GET", data: { q: q }, dataType: "jsonp", //指定 JSONP 类型 jsonp: "callback", //重写 jsonp 请求中回调函数名称参数的 Key。如 "myurl?callback=?" jQuery 将自动替换 callback 占位符部分 jsonpCallback: callback, //重写 jsonp 请求中回调函数名称参数的 Value。如 "myurl?callback=?" jQuery 将自动替换 ? 占位符部分 complete: function (xhr, statusText) { } }); }); } function myFunc(param) { document.getElementById("demo").innerHTML = `服务端回调：<br/>参数值：${param}<br/>参数值JSON字符串值：${JSON.stringify(param)}`; } </script> </body> </html>

头部

标签

<head>

是所有头部元素的容器

元素

<title>

定义文档的标题

<title>Title of the document</title>

<base>

为页面上的所有链接规定默认地址或默认目标

<meta>

提供关于 HTML 文档的元数据

例：（5秒内重定向） <meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn" /> 属性： charset 值：character_set 用途：规定 HTML 文档的字符编码 content 值：text 用途：定义与 http-equiv 或 name 属性相关的元信息 http-equiv 值：content-security-policy、content-type、default-style、refresh 用途：把 content 属性关联到 HTTP 头部 name 值：application-name、author、description、generator、keywords、viewport 用途：把 content 属性关联到一个名称 scheme 值：some_text 用途：定义用于翻译 content 属性值的格式

<link>

定义文档与外部资源之间的关系

最常用于链接样式表： <link rel="stylesheet" type="text/css" href="mystyle.css" />

<style>

用于为 HTML 文档定义样式信息

用于定义客户端脚本

布局

使用表格的 HTML 布局

<table> 元素不是作为布局工具而设计的。 <table> 元素的作用是显示表格化的数据。使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式。

例：

<html> <head> <style> table.lamp { width: 80%; border: 1px solid rebeccapurple; } table.lamp th, td { padding: 10px; } table.lamp th { width: 50px; } </style> </head> <body> <table class="lamp"> <tr> <th> <img src="https://www.w3school.com.cn/i/eg_bulbon.gif" alt="Note" style="width:32px; height:32px; border: 1px solid red;"> </th> <td> table 元素不是作为布局工具而设计的 </td> </tr> </table> </body> </html>

使用 <div> 元素的 HTML 布局

例：

<html> <head> <style> #header { background-color: black; color: white; text-align: center; padding: 5px; } #nav { line-height: 30px; background-color: #eeeeee; height: 300px; width: 100px; float: left; padding: 10px; } #section { width: 350px; float: left; padding: 10px; } #footer { background-color: black; color: white; clear: both; /* 清除浮动 */ text-align: center; padding: 5px; } </style> </head> <body> <div id="header"> <h1>城市美术馆</h1> </div> <div id="nav">伦敦<br />巴黎<br />东京<br /></div> <div id="section"> <h2>伦敦</h2> <p>伦敦是英国的首都。它是英国人口最多的城市，拥有1300多万居民的都市区。</p> <p>伦敦坐落在泰晤士河上，两千年来一直是一个主要的定居点，它的历史可以追溯到罗马人建立它的时候，罗马人把它命名为Londinium。</p> </div> <div id="footer">Copyright ? W3Schools.com</div> </body> </html>

使用 HTML5 的网站布局

元素

图示

例：

<html> <head> <style> header { background-color: black; color: white; text-align: center; padding: 5px; } nav { line-height: 30px; background-color: #eeeeee; height: 300px; width: 100px; float: left; padding: 10px; } section { width: 350px; float: left; padding: 10px; } footer { background-color: black; color: white; clear: both; /* 清除左右两侧浮动 */ text-align: center; padding: 5px; } </style> </head> <body> <header> <h1>城市美术馆</h1> </header> <nav>伦敦<br />巴黎<br />东京<br /></nav> <section> <h2>伦敦</h2> <p>伦敦是英国的首都。它是英国人口最多的城市，拥有1300多万居民的都市区。</p> <p>伦敦坐落在泰晤士河上，两千年来一直是一个主要的定居点，它的历史可以追溯到罗马人建立它的时候，罗马人把它命名为Londinium。</p> </section> <footer>Copyright ? W3Schools.com</footer> </body> </html>

响应式设计

RWD

指的是响应式 Web 设计（Responsive Web Design）

能够以可变尺寸传递网页

对于平板和移动设备是必需的

方法

a. 利用 float 样式

例：

<html> <head> <style> .city { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black; } </style> </head> <body> <h1>W3School Demo</h1> <h2>Resize this responsive page!</h2> <div class="city"> <h2>伦敦</h2> <p>伦敦是英国的首都。</p> <p>它是英国人口最多的城市，拥有1300多万居民的都市区。</p> </div> <div class="city"> <h2>巴黎</h2> <p>巴黎是法国的首都，也是人口最多的城市。</p> </div> <div class="city"> <h2>东京</h2> <p>东京是日本的首都，大东京地区的中心，也是世界上人口最多的大都市。</p> </div> </body> </html>

b. 利用 Bootstrap CSS 框架

例：

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" />  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>W3School Demo</h1> <h2>Resize this responsive page!</h2> </div> </div> <div class="contatiner"> <div class="row"> <div class="col-md-4"> <h2>伦敦</h2> <p>伦敦是英国的首都。</p> <p>它是英国人口最多的城市，拥有1300多万居民的都市区。</p> </div> <div class="col-md-4"> <h2>巴黎</h2> <p>巴黎是法国的首都，也是人口最多的城市。</p> </div> <div class="col-md-4"> <h2>东京</h2> <p>东京是日本的首都，大东京地区的中心，也是世界上人口最多的大都市。</p> </div> </div> </div> </body> </html>

表情符号

表情符号（Emoji）类似图像或图标，它们是来自 UTF-8 (Unicode) 字符集的字母（字符）

很多 UTF-8 字符无法在键盘上键入，但始终可以使用数字（被称为实体编号）来显示它们

例：

<html> <head> <meta charset="UTF-8"> </head> <body> <p>我将显示 A B C</p> <p>我将显示 A B C</p> <p>我将显示笑脸</p> <p>😄</p> <p style="font-size: 50px;">😄</p> </body> </html>

表单

用途

用于收集不同类型的用户输入

标签

<form>

定义 HTML 表单

主要属性

action

定义在提交表单时执行的动作

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。如果省略 action 属性，则 action 会被设置为当前页面。一般可以跨域。

method

get 或 post

GET（默认方法）使用时机：如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的。 POST 使用时机：如果表单正在更新数据，或者包含敏感信息（例如密码）。 POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

target

规定提交表单后在何处显示响应

例：

<body> <form action="https://www.w3school.com.cn/demo/html/action_page.php" method="post" target="_blank"> <fieldset> <legend>form target 属性值 _blank：响应显示在新窗口或选项卡中</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="firstname" /><br /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lastname" /><br /> <input type="submit" value="提交" /> </fieldset> </form> <form action="https://www.w3school.com.cn/demo/html/action_page.php" method="post" target="_self"> <fieldset> <legend>form target 属性值 _self：响应显示在当前窗口中（默认）</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="firstname" /><br /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lastname" /><br /> <input type="submit" value="提交" /> </fieldset> </form> <a href="#interNameAnchor" target="framename">去内联框架</a> <form action="https://www.w3school.com.cn/demo/html/action_page.php" method="post" target="_parent"> <fieldset> <legend>form target 属性值 _parent：响应显示在父框架中</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="firstname" /><br /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lastname" /><br /> <input type="submit" value="提交" /> </fieldset> </form> <a href="#interNameAnchor" target="framename">去内联框架</a> <form action="https://www.w3school.com.cn/demo/html/action_page.php" method="post" target="_top"> <fieldset> <legend>form target 属性值 _top：响应显示在窗口的整个 body 中</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="firstname" /><br /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lastname" /><br /> <input type="submit" value="提交" /> </fieldset> </form> <form action="https://www.w3school.com.cn/demo/html/action_page.php" method="post" target="framename"> <fieldset> <legend>form target 属性值 framename名称：响应显示在命名的 iframe 中</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="firstname" /><br /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lastname" /><br /> <input type="submit" value="提交" /> </fieldset> </form> <br /> <a name="interNameAnchor">内部锚点</a> <iframe name="framename" width="80%" height="50%"></iframe> </body>

autocomplete

规定表单是否应打开自动完成功能

novalidate

布尔属性，设置后规定提交时不应验证表单数据

enctype

规定在发送到服务器之前应该如何对表单数据进行编码

值： application/x-www-form-urlencoded：在发送前编码所有字符（默认）； multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值； text/plain：空格转换为 "+" 加号，但不对特殊字符编码。

accept-charset

规定表单提交时使用的字符编码列表，多个字符编码时使用空格分隔

例：

<html> <head> <meta charset="UTF-8"> </head> <body> <form action="https://www.w3school.com.cn/demo/html/action_page.php" method="post" autocomplete="on" novalidate enctype="application/x-www-form-urlencoded" accept-charset="GB2312">  <fieldset> <label for="fname">First name:</label> <input type="text" id="fname" name="firstname" /><br /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lastname" /><br /> <label for="email">Enter your email:</label> <input type="email" id="email" name="email" /><br /> <input type="submit" value="提交" /> </fieldset> </form> </body> </html>

元素

<input>

定义输入字段

说明： <label> 标签可以为 input 元素定义标签（label）。 label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。 <label> 标签的 for 属性应该等于相关元素的 id 属性值，以便将它们捆绑起来。例： <label for="fname">First name:</label> <input type="text" id="fname" name="firstname" /><br />

主要属性

type

值

text

定义供文本输入的单行输入字段

password

定义密码字段

radio

定义单选按钮输入

checkbox

定义复选框

submit

定义用于向表单处理程序（form-handler）提交表单的按钮

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在 form 的 action 属性中指定。

button

定义按钮

HTML5 新增输入类型

color date datetime datetime-local email month number range search tel time url week 输入限制： disabled：规定输入字段应该被禁用。 max：规定输入字段的最大值。 maxlength：规定输入字段的最大字符数。 min：规定输入字段的最小值。 pattern：规定通过其检查输入值的正则表达式。 readonly：规定输入字段为只读（无法修改）。 required：规定输入字段是必需的（必需填写）。 size：规定输入字段的宽度（以字符计）。 step：规定输入字段的合法数字间隔。 value：规定输入字段的默认值。

name

定义查询字符字符串参数键值对的 key 名

若不设置该属性，元素的数据不会被提交

value

定义元素输入字段的初始值，及查询字符字符串参数键值对的 value 值

若不设置该属性，元素的数据不会被提交

HTML5 新增属性

autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和 width list min 和 max multiple pattern (regexp) placeholder required step

例：

基本 type

<body> <form action="https://www.w3school.com.cn/demo/demo_form.asp" method="get"> First name:<br /> <input type="text" name="firstname" /> <br />Last name:<br /> <input type="text" name="lastname" /> <br />User password:<br /> <input type="password" name="psw" /> <br /> <input type="radio" name="sex" value="male" checked>男</input> <input type="radio" name="sex" value="female">女</input> <br />Vehicle:<br /> <input type="checkbox" name="bike" checked>我有自行车</input> <input type="checkbox" name="car">我有汽车</input> <br /> <input type="submit" value="提交" /> <br /> <input type="button" onclick="alert('hello world')" value="点击"></input> </form> </body>

HTML5 type

<body> <form action="https://www.w3school.com.cn/demo/demo_form.asp" method="get"> <br />Birthday: <input type="date" name="bday"> <br />Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31" /> <br />Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02" /> <br />Birthday (date and time): <input type="datetime" name="bdaytime" /> <br />Birthday (date and time): <input type="datetime-local" name="bdaytime" /> <br />Select a time: <input type="time" name="usr_time" /> <br />Select a week: <input type="week" name="week_year" /> <br />Birthday (month and year): <input type="month" name="bdaymonth" /> <br />Select your favorite color: <input type="color" name="favcolor" /> <br /> <input type="range" name="points" min="0" max="10" /> <br />E-mail: <input type="email" name="email" /> <br />Search Google: <input type="search" name="googlesearch" /> <br />Telephone: <input type="tel" name="usrtel" /> <br />Add your homepage: <input type="url" name="homepage" /> <br /> <input type="submit" value="提交" /> </form> </body>

HTML5 新增属性

<body> <pre>如 input 元素的 formaction 属性规定当提交表单时处理该输入控件的文件的 URL； formaction 属性覆盖 form 元素的 action 属性； formaction 属性适用于 type="submit" 以及 type="image"。</pre> <form action="https://www.w3school.com.cn/demo/demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="https://www.w3school.com.cn/example/html5/demo_post.asp" formmethod="post" value="Submit as Post"> </form> <br /> <form action="https://www.w3school.com.cn/demo/demo_form.asp"> Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <br /> Select images: <input type="file" name="img" multiple> <input type="submit" value="Submit"> </form> <br /> <form action="https://www.w3school.com.cn/demo/demo_form.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="image" src="https://www.w3school.com.cn/i/eg_submit.jpg" alt="Submit" width="128" height="128" /> </form> <p><b>注释：</b>默认地，image 输入类型会发送点击图像按钮时的 X 和 Y 坐标。</p> </body>

定义下拉列表

<option> 元素定义待选择的选项

例：

<body> <form action="https://www.w3school.com.cn/demo/demo_form.asp" method="get"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br /> <input type="submit" value="提交" /> </form> </body>

定义多行输入字段（文本域）

例：

定义可点击的按钮

例：

HTML5 表单元素

为 <input> 元素规定预定义选项列表

<input> 元素的 list 属性值必须引用 <datalist> 元素的 id 属性值

例：

<body> <form action="https://www.w3school.com.cn/demo/demo_form.asp"> <input list="browsers" /> <datalist id="browsers"> <option value="IE">IE 浏览器</option> <option value="Chrome">Chrome 浏览器</option> <option value="Opera">Opera 浏览器</option> <option value="Safari">Safari 浏览器</option> </datalist> </form> </body>

将表单内容的一部分打包，生成一组相关表单的字段

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<legend> 元素为 <fieldset> 元素定义标题。

例：

<body> <form action="https://www.w3school.com.cn/demo/demo_form.asp" method="get"> <fieldset> <legend>个人信息：</legend> First name:<br /> <input type="text" name="firstname" /> <br />Last name:<br /> <input type="text" name="lastname" /> <br /> <input type="submit" value="提交" /> <br /> </fieldset> <input type="text" name="age" /> </form> </body>

媒体

多媒体

不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件

对象

插件（Plug-in）是扩展浏览器标准功能的计算机程序。

标签

<object> 元素

定义 HTML 文档中的嵌入式对象

参考： https://www.w3school.com.cn/tags/tag_object.asp

<embed> 元素

定义 HTML 文档中的嵌入式对象

Web 浏览器长期以来一直支持 <embed> 元素。但是，它不属于 HTML5 之前的 HTML 规范的一部分。 <embed> 元素没有结束标记。它无法包含替代文本。参考： https://www.w3school.com.cn/tags/tag_embed.asp

例：

音频

播放方法

使用 <embed> 元素

使用 <object> 元素

使用 HTML5 <audio> 元素

为了提高成功率，可以多添加几种格式或再添加 embed 元素。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

例：

视频

播放方法

使用 <embed> 元素

使用 <object> 元素

使用 HTML5 <video> 元素

为了提高成功率，可以多添加几种格式或再添加 object、embed 元素。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

例：

图形

HTML5 Canvas画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像

画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

标签

例：

填充颜色

<html> <head> <script type="text/javascript"> function cnvsGetCoordinates(e) { x = e.clientX; y = e.clientY; document.getElementById("xycoordinates").innerHTML = "坐标：" + x + ", " + y; } function cnvsClearCoordinates() { document.getElementById("xycoordinates").innerHTML = ""; } </script> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border: 1px solid blue;" onmousemove="cnvsGetCoordinates(event)" onmouseout="cnvsClearCoordinates()"></canvas> <div id="xycoordinates"></div> <script type="text/javascript"> /** @type {HTMLCanvasElement} */ //在 canvas 对象上一行加上这段注解，可使 VSCode 有智能提示 var c = document.getElementById("myCanvas"); //(1) 使用 id 来寻找 canvas 元素 var cxt = c.getContext("2d"); //(2) 创建 context 对象 cxt.fillStyle = "#ff0000"; //(3) 绘制 cxt.fillRect(0, 0, 150, 75); </script> </body> </html>

填充渐变

<body> <canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3"></canvas> <script> /** @type {HTMLCanvasElement} */ var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); var grd = cxt.createLinearGradient(20, 20, 130, 50); //创建线性渐变 grd.addColorStop(0, "red"); grd.addColorStop(1.0, "green"); cxt.fillStyle = grd; cxt.fillRect(0, 0, 185, 60); </script> </body>

绘制图像

<body> <p>把一幅图像放置到画布上：</p> <img id="scream" src="https://www.w3school.com.cn/i/eg_flower.png" alt="The Scream" width="224" height="162" style="border: 1px solid black;" /> <br /> <canvas id="myCanvas" width="300" height="200" style="border: 1px solid #c3c3c3"></canvas> <script> window.onload = function () { /** @type {HTMLCanvasElement} */ var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); var img = document.getElementById("scream"); cxt.drawImage(img, 20, 10); }; </script> </body>

绘制图形

<body> <canvas id="myCanvas" width="200" height="100" style="border: 1px solid #c3c3c3"></canvas> <script> /** @type {HTMLCanvasElement} */ var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.moveTo(10, 10); //移动到起点 cxt.lineTo(150, 50); //画线段 cxt.lineTo(10, 50); cxt.stroke(); //画边线 cxt.fillStyle = "blue"; cxt.beginPath(); cxt.arc(180, 20, 15, 0, Math.PI * 2, true); //画圆弧 cxt.closePath(); cxt.fill(); //填充 </script> </body>

HTML5 SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

标签

<svg>

例：

比较

Canvas：依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG：不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用

HTML5 API

关于 HTML 5

HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 HTML5 拥有新的语义、图形以及多媒体元素。 HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。 HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

地理定位

例：

<!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮，获得您的坐标：</p> <button onclick="getLocation()">试一下</button> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { //检测是否支持地理定位 navigator.geolocation.getCurrentPosition(showPosition, showError); //获取用户的位置 } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } </script> </body> </html>

元素拖放

例：

<!DOCTYPE HTML> <html> <head> <style type="text/css"> .box { width: 198px; height: 66px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script type="text/javascript"> function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>请把 W3School 的图片拖放到矩形中：</p> <img id="drag1" src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" /> <br /> <div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div> <br /> <div class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>  </body> </html>

本地存储

说明

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

存储数据的对象

window.localStorage

存储没有截止日期的数据

window.sessionStorage

针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

例：

<!DOCTYPE html> <html> <head> <script> function clickCounter1() { if (typeof (Storage) !== "undefined") { if (localStorage.clickcount) { //名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！ localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result1").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。"; } else { document.getElementById("result1").innerHTML = "抱歉！您的浏览器不支持 Web Storage ..."; } } function clickCounter2() { if (typeof (Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result2").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。"; } else { document.getElementById("result2").innerHTML = "抱歉！您的浏览器不支持 Web Storage ..."; } } function clickcount1Delete() { if (typeof (Storage) != "undefined") { if (localStorage.clickcount) { localStorage.removeItem("clickcount"); document.getElementById("result1").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。"; } } } function clickcount2Delete() { if (typeof (Storage) != "undefined") { if (sessionStorage.clickcount) { sessionStorage.removeItem("clickcount"); document.getElementById("result2").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。"; } } } </script> </head> <body> <p><button onclick="clickCounter1()" type="button">localStorage请点击这里！</button></p> <p><button onclick="clickCounter2()" type="button">sessionStorage请点击这里！</button></p> <p><button onclick="clickcount1Delete()" type="button">localStorage删除请点击这里！</button></p> <p><button onclick="clickcount2Delete()" type="button">sessionStorage删除请点击这里！</button></p> <div id="result1"></div> <div id="result2"></div> <p>请点击按钮使计数器递增。</p> <p>请关闭浏览器或标签页，然后再试一次，观察计数器。</p> </body> </html>

Fetch API

说明

Fetch API 接口允许 Web 浏览器向 Web 服务器发出 HTTP 请求。不再需要 XMLHttpRequest。 Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 XMLHttpRequest 的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集。 Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是 service worker、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。它同时还为有关联性的概念，例如 CORS 和 HTTP 原生头信息，提供一种新的定义，取代它们原来那种分离的定义。参考： https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

语法

Promise<Response> fetch(input[, init]);

简介：位于 WorkerOrGlobalScope 这一个 mixin 中的 fetch() 方法用于发起获取资源的请求。Window 和 WorkerGlobalScope 都实现了 WorkerOrGlobalScope。 ——这意味着基本在任何场景下只要你想获取资源，都可以使用位于 WorkerOrGlobalScope 中的 fetch() 方法。参数： input：必选。USVString URL 字符串或 Request 对象； init：可选。一个配置项对象，包括所有对请求的设置。可选的参数有： method: 请求使用的方法，如 GET、POST； headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量； body: 请求的 body 信息：可能是一个 Blob、BufferSource (en-US)、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息； mode: 请求的模式，如 cors、no-cors 或者 same-origin； credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie，必须提供这个选项，从 Chrome 50 开始，这个属性也可以接受 FederatedCredential (en-US) 实例或是一个 PasswordCredential (en-US) 实例； cache: 请求的 cache 模式：default、 no-store、 reload 、 no-cache、 force-cache 或者 only-if-cached； redirect: 可用的 redirect 模式：follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误），或者 manual (手动处理重定向)。在 Chrome 中默认使用 follow（Chrome 47 之前的默认值是 manual）； referrerPolicy: 指定了 HTTP 头部 referer 字段的值。可能为以下值之一：no-referrer、 no-referrer-when-downgrade、origin、origin-when-cross-origin、 unsafe-url； referrer: 一个 USVString 可以是 no-referrer、client 或一个 URL。默认是 client； integrity: 包括请求的 subresource integrity 值（例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）；返回：它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。当遇到网络错误时，fetch() 返回的 promise 会被 reject，并传回 TypeError，虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve（如 HTTP 404 状态并不被认为是网络错误），还要包括 Response.ok 属性为 true（HTTP 状态码的范围在 200-299）。

例：

html

<!DOCTYPE html> <html> <head> </head> <body> <h2>请在下面的输入字段中键入字母 A-Z：</h2> <p>搜索建议：<span id="txtHint"></span></p> <p>姓名：<input type="text" id="txt1" onkeyup="showHint(this.value)" /></p> <script> async function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } let req = null; let strEn = encodeURIComponent(str); // GET 方法（默认的表单方式） req = new Request(`php/gethint.php?q=${strEn}`, { method: "GET" }); // POST 方法（默认的表单方式） // req = new Request(`php/gethint.php`, { // method: "POST", // headers: { // 'Content-Type': 'application/x-www-form-urlencoded' // }, // body: `q=${strEn}` // }); // POST 方法（JSON body 方式） // req = new Request(`php/gethint.php`, { // method: "POST", // headers: { // // 'Content-Type': 'application/x-www-form-urlencoded', // 'Content-Type': 'application/json' // }, // body: JSON.stringify({ q: `${str}` }) // }); const resp = await fetch(req); //执行请求 if (true === resp.ok && 200 === resp.status) { document.getElementById("txtHint").innerHTML = await resp.text(); } } </script> </body> </html>

Web Workers

说明

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

例：

<!DOCTYPE html> <html> <body> <p>计数: <output id="result"></output></p> <button onclick="startWorker()">开始 Worker</button> <button onclick="stopWorker()">停止 Worker</button> <br /><br /> <script> var w; function startWorker() { if (typeof (Worker) !== "undefined") { if (typeof (w) == "undefined") { w = new Worker("jsfolder/demo_workers.js"); //创建 Worker 对象 } w.onmessage = function (event) { //添加一个 "onmessage" 事件处理器 document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); w = undefined; //清除。以备下次复用 } </script> </body> </html> demo_workers.js 文件内容： var i = 0; function timedCount() { i = i + 1; postMessage(i); //向 HTML 页面传回一段消息 setTimeout("timedCount()", 500); } timedCount();

Server-Sent 事件

说明

Server-Sent 事件 - One Way Messaging Server-Sent 事件指的是网页自动从服务器获得更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达。

例：

<!DOCTYPE html> <html> <body> <h1>获得服务器更新</h1> <div id="result"></div> <script> if (typeof (EventSource) !== "undefined") { var source = new EventSource("php/demo_sse.php"); //创建 EventSource 对象 source.onmessage = function (event) { //添加一个 "onmessage" 事件处理器 document.getElementById("result").innerHTML += event.data + "<br />"; }; } else { document.getElementById("result").innerHTML = "抱歉，您的浏览器不支持 server-sent 事件 ..."; } </script> </body> </html> demo_sse.php 文件内容： <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>

WebSockets

说明

WebSocket 是一种在客户端与服务器之间保持 TCP 长连接的网络协议，这样它们就可以随时进行信息交换。 URL 中的协议： ws: 指 WebSocket 协议； wss: 指安全的 WebSocket 协议；

对象

WebSocket

WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。构造函数： WebSocket(url[, protocols]); 主要属性： onopen：用于指定连接成功后的事件处理器，类型：function(event) {}; onerror：用于指定连接失败后的事件处理器，类型：function(event) {}; onmessage：用于指定当从服务器接受到信息时的事件处理器，类型：function(event) {}; onerror：用于指定连接关闭后的事件处理器，类型：function(event) {}; readyState：当前的链接状态，如下类型之一：WebSocket.CONNECTING : 0；WebSocket.OPEN : 1；WebSocket.CLOSING : 2；WebSocket.CLOSED : 3；方法： send(data)：对要传输的数据进行排队；参数类型：USVString、ArrayBuffer、Blob、ArrayBufferView close([code[, reason]])：关闭当前链接；

例：

html

<!DOCTYPE html> <html> <body> <h1>WebSocket 测试</h1> <div style="border: 1px solid black; padding: 5px;"> <button onclick="startWebSocket()">初始化</button><br /> <input type="text" id="sendTxt" value="客户端消息" /> <button onclick="sendMsg()">发送</button><br /> <label for="msgTxt">消息：</label><br /> <textarea id="msgTxt" cols="60" rows="11"></textarea><br /> <button onclick="closeWebSocket()">关闭</button><br /> </div> <script> let ws; function startWebSocket() { if ('WebSocket' in window) { let wsProtocol = 'https:' == document.location.protocol ? 'wss:' : 'ws:'; ws = new WebSocket(`${wsProtocol}//localhost:8081/`); //创建 WebSocket 连接 //添加事件处理器 ws.onopen = function (event) { showMsg(`open 事件，url: ${event.currentTarget.url}`); }; ws.onerror = function (event) { showMsg(`error 事件，type：${event.type}`); }; ws.onmessage = function (event) { showMsg(`message 事件，data：${event.data}`); }; ws.onclose = function (event) { showMsg(`close 事件：code:${event.code} reason:${event.reason}`); }; showMsg(`创建 WebSocket...`); } else { showMsg('您的浏览器不支持 WebSocket！'); } } function sendMsg() { let msg = `${document.getElementById('sendTxt').value}`; ws.send(msg); showMsg(`发送：${msg}`); } function closeWebSocket() { ws.close(); showMsg(`关闭 WebSocket`); } function showMsg(msg) { let msgElmt = document.getElementById('msgTxt'); let preStr = (msgElmt.value == null || msgElmt.value === '') ? '' : '\r\n\r\n'; msgElmt.value += `${preStr}${Date()}，\r\n${msg}`; msgElmt.scrollTop = msgElmt.scrollHeight; } </script> </body> </html>

server

测试服务端可使用 websocketd，下载：http://websocketd.com/ 终端执行如下命令，启动服务器，并设置连接后的操作： websocketd --port=8081 php greeter.php greeter.php 文件内容： <?php while (true) { $q = fgets(STDIN); // 返回的字符串末尾会带有 \n 字符 if (false === $q || "close\n" === $q || "close\r\n" === $q) { break; } echo "STDIN: $q"; // 为配合 websocketd，字符串末尾要带有 \n 字符 } ?>

CSS

简介

说明

CSS 指的是层叠样式表(/级联样式表) (Cascading Style Sheets)

CSS 是一种描述 HTML 文档样式的语言

CSS 描述应该如何显示 HTML 元素

参考

https://www.w3school.com.cn/css/index.asp

基础语法

规则集（rule-set）

组成

图示

选择器

选择器指向您需要设置样式的 HTML 元素

声明块

声明块用花括号括起来

声明块包含一条或多条用分号分隔的声明

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔

选择器

用于“查找”（或选取）要设置样式的 HTML 元素

分类

简单选择器

根据名称、id、类来选取元素

分类

元素选择器

根据元素名称来选择 HTML 元素

例：

<!DOCTYPE html> <html> <head> <style> p { text-align: center; color: red; } </style> </head> <body> <p>观察页面上的所有 p 元素样式</p> <p id="para1">我也是！</p> <p>还有我！</p> </body> </html>

id 选择器

使用 HTML 元素的 id 属性来选择特定元素

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id

例：

<!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p>观察页面上的元素样式</p> <p id="para1">指定 Id 的元素</p> <p>元素元素</p> </body> </html>

类选择器

选择有特定 class 属性的 HTML 元素

格式： .类名

例：

<!DOCTYPE html> <html> <head> <style> .center { /* .类名 */ text-align: center; color: red; } p.large { /* 元素选择器、类选择器结合 */ font-size: 300%; } .imp.war { /* 多类选择器（无分隔） */ font-weight: bold; font-style: italic; } </style> </head> <body> <p class="center">这个段落不受影响</p> <p class="center">本段落将是红色并居中对齐</p> <p class="center large">本段落将是红色居中，大字体</p> <p class="imp war">多类选择器</p> </body> </html>

通用选择器

* 星号选择页面上的所有的 HTML 元素

例：

<!DOCTYPE html> <html> <head> <style> * { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>更小的标题</h2> <p>这是一个段落</p> <h3 id="rp1">h3标题</h3> <h4 >h4标题</h4> </body> </html>

选择器分组

用逗号来分隔每个选择器

可以最大程度地缩减代码

例：

<!DOCTYPE html> <html> <head> <style> h1, h2, p, #rp1 { text-align: center; color: red; } </style> </head> <body> <h1>Hello World!</h1> <h2>更小的标题</h2> <p>这是一个段落</p> <h3 id="rp1">h3标题</h3> <h4 >h4标题</h4> </body> </html>

组合器选择器

根据它们之间的特定关系来选取元素

分类

后代选择器 (空格)

匹配属于指定元素后代的所有元素

例：

<!DOCTYPE html> <html> <head> <style> div p { background-color: yellow; } </style> </head> <body> <p>测试</p> <div> <p>div 中的段落 1。</p> <p>div 中的段落 2。</p> <section> <p>div 中的段落 3。</p>  </section> <p>div 中的段落 4。</p> </div> <p>段落 5。不在 div 中。</p> <p>段落 6。不在 div 中。</p> </body> </html>

子选择器 (>)

匹配属于指定元素子元素的所有元素

例：

<!DOCTYPE html> <html> <head> <style> div>p { background-color: yellow; } </style> </head> <body> <p>测试</p> <div> <p>div 中的段落 1。</p> <p>div 中的段落 2。</p> <section> <p>div 中的段落 3。</p>  </section> <p>div 中的段落 4。</p> </div> <p>段落 5。不在 div 中。</p> <p>段落 6。不在 div 中。</p> </body> </html>

相邻兄弟选择器 (+)

匹配所有作为指定元素的相邻(紧随其后)同级的元素

例：

<!DOCTYPE html> <html> <head> <style> div+p { background-color: yellow; } </style> </head> <body> <h1>相邻兄弟选择器</h1> <p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p> <div> <p>div 中的段落 1。</p> <p>div 中的段落 2。</p> </div> <p>段落 3。不在 div 中。</p> <p>段落 4。不在 div 中。</p> </body> </html>

通用兄弟选择器 (~)

匹配属于指定元素的同级元素的所有元素

例：

<!DOCTYPE html> <html> <head> <style> p~ul { background: #ff0000; } </style> </head> <body> <div>一个 div 元素。</div> <ul> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ul> <p>第一段。</p> <ul> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ul> <h2>另一个列表</h2> <ul> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ul> </body> </html>

属性选择器

根据属性或属性值来选取元素

分类

伪类选择器

根据特定状态选取元素

语法

参考： https://www.w3school.com.cn/css/css_pseudo_classes.asp

selector:pseudo-class

例：

<!DOCTYPE html> <html> <head> <style> div { background-color: green; color: white; padding: 25px; text-align: center; } div:hover { /* 伪类选择器 */ background-color: blue; } </style> </head> <body> <p>请把鼠标移到下面的 div 元素上来改变其背景色：</p> <div>把鼠标移到我上面</div> </body> </html>

伪元素选择器

选取元素的一部分并设置其样式

语法

参考： https://www.w3school.com.cn/css/css_pseudo_elements.asp

selector::pseudo-element

例：

<!DOCTYPE html> <html> <head> <style> p::first-line { /* 伪元素选择器 */ color: #ff0000; font-variant: small-caps; } </style> </head> <body> <p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p> </body> </html>

JavaScript

简介

实现

JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象

DOM 描述了处理网页内容的方法和接口

BOM 描述了与浏览器进行交互的方法和接口

参考

https://www.w3school.com.cn/js/index.asp

基础语法

变量

声明、定义

var

例：

var x = 7; var y = 8; var z = x + y;

let

ES6 引入

相比 var，可以声明拥有块作用域的变量

例：

{ let x = 10; } // 此处不可以使用 x

const

ES6 引入

定义(对值的)常量(引用)

例：

const PI = 3.14159265359;

作用域

全局作用域

全局（在函数之外）声明的变量拥有全局作用域

例：

var carName = "porsche"; // 此处的代码可以使用 carName function myFunction() { // 此处的代码也可以使用 carName }

函数作用域

局部（函数内）声明的变量拥有函数作用域

例：

// 此处的代码不可以使用 carName function myFunction() { var carName = "porsche"; // 此处的代码可以使用 carName } // 此处的代码不可以使用 carName

块作用域

例：

由于通过 var 声明的变量会提升到顶端，所以通过 var 关键字声明的变量没有块作用域，在块 {} 内声明的变量可以从块之外进行访问： { var x = 10; } // 此处可以使用 x

关于重新声明变量

var

例：

使用 var 关键字在块中重新声明变量也将重新声明块外的变量： var x = 10; // 此处 x 为 10 { var x = 6; // 此处 x 为 6 } // 此处 x 为 6

let

例：

使用 let 关键字在块中重新声明变量不会重新声明块外的变量： var x = 10; // 此处 x 为 10 { let x = 6; // 此处 x 为 6 } // 此处 x 为 10

对象

说明

对象也是变量，是被命名值的容器

对象属性

对象中的属性以名称:值对的方式编写，各属性用 , 号分隔

例：

var person = { firstName: "Bill", lastName: "Gates", id: 678 };

对象方法

方法是作为属性来存储的函数

例：

var person = { firstName: "Bill", lastName: "Gates", id: 678, fullName: function () { //定义对象方法 return `${this.firstName} ${this.lastName}`; } };

函数

函数通过 function 关键字进行定义

其后依次是函数名、(形式参数列表)、{函数体}

例：

<html> <head> </head> <body> <p id="demo1"></p> <p id="demo2"></p> <script> function myFunction(a, b) { //定义函数 return a * b; } var x = myFunction(5, 6); //调用函数（并获取返回值） var f = myFunction; //引用函数(的定义) document.getElementById('demo1').innerHTML = x; document.getElementById('demo2').innerHTML = f(7, 8); </script> </body> </html>

自调用函数

声明完了，马上进行一次调用

格式：

( 函数定义(实参表) ) ;

例：

<html> <head> </head> <body> <p id="demo1"></p> <p id="demo2"></p> <script> ( function (a, b) { console.log(a + b); }(5, 6) ); document.getElementById('demo1').innerHTML = (function (a, b) { return a * b; }(5, 6)); </script> </body> </html>

闭包 (closure)

含义

指的是有权访问父作用域的函数，即使在父函数关闭之后

目的

实现全局变量的局部作用域化(私有)

原理

函数都有权访问它们“上面”的作用域

实现

是自调用函数的应用

（1）函数体先初始化“私有”变量

（2）再返回一个相关功能函数

例：

<html> <head> </head> <body> <p id="demo1"></p> <p id="demo2"></p> <script> var add = (function () { var counter = 0; //自调用时执行一次 return function () { return ++counter; }; //返回一个功能函数 }()); add(); add(); document.getElementById('demo1').innerHTML = add(); </script> </body> </html>

字符串模板

模板字面量使用反引号 (``) 而不是引号 ("" 或 '') 来定义字符串

ES6 中引入

例：

<html> <head> </head> <body> <p id="demo1"></p> <p id="demo2"></p> <script> let text1 = `He's often called "Johnny"`; //模板字面量中，可以在字符串中同时使用单引号和双引号，无需转义 let a = 5, b = 6, c = 7; let text2 = `值1：${a * b}，值2：${b * c}`;//模板字面量中可支持字符串插值：语法 ${表达式} 可以将变量和表达式插入字符串 document.getElementById('demo1').innerHTML = text1; document.getElementById('demo2').innerHTML = text2; </script> </body> </html>

数字

方法

toFixed(~)

使用的是银行家舍入规则：四舍六入五取偶（又称四舍六入五留双）法：即四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。

返回字符串值，它包含了指定位数小数的数字

例：

<html> <head> </head> <body> <p id="demo1"></p> <script> let a = [1.141, 1.16, 1.15, 1.151, 1.25, 1.251]; document.getElementById('demo1').innerHTML = `${a[0].toFixed(1)}<br/> ${a[1].toFixed(1)}<br/> ${a[2].toFixed(1)}<br/> ${a[3].toFixed(1)}<br/> ${a[4].toFixed(1)}<br/> ${a[5].toFixed(1)}`; </script> </body> </html>

循环

For 循环

for (语句 1; 语句 2; 语句 3) { 要执行的代码块 }

For/In 循环

遍历对象的属性： var person = {fname:"Bill", lname:"Gates", age:62}; var text = ""; var x; for (x in person) { text += person[x]; }

For Of 循环

遍历可迭代对象的值： const cars = ["BMW", "Volvo", "Mini"]; let text = ""; for (let x of cars) { text += x; }

Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）： const numbers = [45, 4, 9, 16, 25]; let txt = ""; numbers.forEach(myFunction); function myFunction(value, index, array) { txt += value; }

While 循环

（1）while 循环： while (条件) { 要执行的代码块 } （2）do while 循环： do { 要执行的代码块 } while (条件);

正则表达式

格式

/pattern/modifiers;

modifiers： i: 执行对大小写不敏感的匹配 g: 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） m: 执行多行匹配

例：

<!DOCTYPE html> <html> <body> <p>请单击按钮，对字符串中的“w3school”进行不区分大小写的搜索。</p> <button onclick="myFunction()">试一试</button> <p id="demo"></p> <script> function myFunction() { var str = "Visit W3School"; var patt1 = /w3school/i; var result = str.match(patt1); document.getElementById("demo").innerHTML = result; } </script> </body> </html>

异常

格式

try { // 供测试的代码块 } catch (err) { // 处理错误的代码块 throw err; } finally { // 无论结果如何都执行的代码块 }

this 关键字

this 关键字指的是它所属的对象

它拥有不同的值，具体取决于它的使用位置

单独使用

拥有者是全局对象，this 指向是全局对象 [object Window]

在严格模式中，this 也指向全局对象 [object Window]

在函数中

函数的拥有者默认绑定 this。谁调用这个函数，this 就指向谁(即调用该函数的对象)

this 一般指的是全局对象 [object Window]

在严格模式中，不允许默认绑定。this 是未定义的（undefined）

在 HTML 事件处理器中

this 指向激发此事件的 HTML 元素

谁调用这个函数，this 就指向谁(即调用该函数的对象)

在对象方法中

this 是对象实例（对象实例是该函数的“拥有者/调用者”）

在箭头函数中

没有对 this 的绑定，一般指向所处上下文的对象

定义位置所在的(函数)作用域的 this 是谁(即定义箭头函数的对象)，箭头函数的 this 就指向谁

例：

改变函数中的 this(调用者对象) 指向

call(~)、apply(~) 方法

两个方法的参数：（1）第1个参数传入被调用方法的新的调用对象；（2）后续参数：call() 方法分别接受参数，apply() 方法接受数组形式的参数；

例：

箭头函数

定义

ES6 中引入

例：

hello = () => { return "Hello World!"; } //相当于： hello = function() { return "Hello World!"; }

说明

例：

如果函数只有一个语句，并且该语句返回一个值，则可以去掉花括号和 return 关键字： hello = () => "Hello World!"; 如果有参数，则将它们传递到括号内： hello = (val) => "Hello " + val; 如果只有一个参数，也可以省略括号： hello = val => "Hello " + val;

类

定义

ES6，引入了 JavaScript 类

例：

请使用关键字 class 创建一个类，请始终添加一个名为 constructor 的方法： //定义： class Car { constructor(name, year) { this.name = name; this.year = year; } age() { let date = new Date(); return date.getFullYear() - this.year; } } //实例化： let myCar = new Car("Ford", 2015);

继承

例：

class Car { constructor(brand) { this.carname = brand; } present() { return 'I have a ' + this.carname; } } class Model extends Car { //继承 constructor(brand, mod) { super(brand); // super() 方法引用父类。通过在 constructor 方法中调用 super() 方法，我们调用了父级的 constructor 方法，获得了父级的属性和方法的访问权限 this.model = mod; } show() { return this.present() + ', it is a ' + this.model; } } let myCar = new Model("Ford", "Mustang"); document.getElementById("demo").innerHTML = myCar.show();

Getter 和 Setter

例：

class Car { constructor(brand) { this.carname = brand; } get cnam() { // get 关键字声明 Getter return this.carname; } set cnam(x) { // set 关键字声明 Setter this.carname = x; } } let myCar = new Car("Ford"); document.getElementById("demo").innerHTML = myCar.cnam;

Static 方法

例：

class Car { constructor(name) { this.name = name; } static hello() { //使用 static 关键字定义 Static 方法 return "Hello!!"; } } let myCar = new Car("Ford"); // 您可以在 Car 类上调用 'hello()' ： document.getElementById("demo").innerHTML = Car.hello(); // 但不能在 Car 对象上调用： // document.getElementById("demo").innerHTML = myCar.hello(); // 此举将引发错误。

异步

Promise

ES6 中引入

JavaScript Promise 对象包含生产代码和对消费代码的调用

"Producing code（生产代码）" 是需要一些时间的代码 "Consuming code（消费代码）" 是必须等待结果的代码 Promise 是一个 JavaScript 对象，它链接生成代码和消费代码

语法

例：

<body> <form> <input type="button" value="启动" onclick="start()" /> <input type="button" value="成功状态" onclick="setok()" /> <input type="button" value="失败状态" onclick="seterror()" /> <input type="text" id="txt" /> </form> <script> var myPromise; var x = 1; function start() { myPromise = new Promise(function (myResolve, myReject) { //生产代码 if (x > 0) { myResolve("成功"); } else { myReject("失败"); } }); //消费代码 myPromise.then( function (value) { myDisplayer(value) }, function (value) { myDisplayer(value) } ); } function setok() { x = 1; } function seterror() { x = 0; } function myDisplayer(value) { document.getElementById("txt").value = value; } </script> </body>

async、await

async 使函数返回 Promise await 使函数等待 Promise 例： async function myFunction() { return "Hello"; } 等同于： async function myFunction() { return Promise.resolve("Hello"); }

例：

<body> <form> <input type="button" value="启动" onclick="startAsync()" /> <input type="button" value="成功状态" onclick="setok()" /> <input type="button" value="失败状态" onclick="seterror()" /> <input type="text" id="txt" /> </form> <script> var myPromise; var x = 1; async function startAsync() { myPromise = new Promise(function (myResolve, myReject) { //生产代码 setTimeout(() => { myResolve(x > 0 ? "成功" : "失败"); }, 2000); }); //消费代码 myDisplayer(await myPromise); //异步等待 } function myDisplayer(value) { document.getElementById("txt").value = value; } function setok() { x = 1; } function seterror() { x = 0; } </script> </body>

HTML DOM

事件监听器

添加

element.addEventListener(event, function, useCapture);

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？在冒泡中(默认)，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。在捕获中(添加后无法移除)，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型。

移除

element.removeEventListener(event, myFunction);

例：

<body> <button id="addBtn" onclick="addListener()">添加事件监听器</button> <button id="remvBtn" onclick="remvListener()">移除事件监听器</button> <br /> <button id="testBtn">测试</button> <script> function addListener() { document.getElementById("testBtn").addEventListener("click", displayDate); } function remvListener() { document.getElementById("testBtn").removeEventListener("click", displayDate); } function displayDate() { alert("一个事件"); } </script> </body>

Browser BOM

Timing 事件

例：

<body> <form> <input type="button" value="开始Timeout" onclick="startTimeout()" /> <input type="text" id="timeoutTxt" /> <input type="button" value="停止Timeout" onclick="stopTimeout()" /> </form> <form> <input type="button" value="开始Interval" onclick="startInterval()" /> <input type="text" id="intervalTxt" /> <input type="button" value="停止Interval" onclick="stopInterval()" /> </form> <script> var timeoutId; var intervalId; function startTimeout() { timeoutId = setTimeout(timeoutCallBack, 3000); //设置等待超时 } function timeoutCallBack() { let d = new Date(); document.getElementById("timeoutTxt").value = `${d.getMinutes()}:${d.getSeconds()}`; } function stopTimeout() { clearTimeout(timeoutId); //清除等待超时 } function startInterval() { intervalId = setInterval(intervalCallBack, 3000); //设置等待间隔 } function intervalCallBack() { let d = new Date(); document.getElementById("intervalTxt").value = `${d.getMinutes()}:${d.getSeconds()}`; } function stopInterval() { clearInterval(intervalId); //清除等待间隔 } </script> </body>

例：

<!DOCTYPE html> <html> <head> <script> function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toGMTString(); document.cookie = `${cname}=${cvalue};${expires};path=/`; // 设置 cookie } function getCookie(cname) { var name = cname + "="; var decodedCookie = document.cookie; // 获取 cookie var ca = decodedCookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { //找指定name的cookie return c.substring(name.length, c.length); //取cookie的value } } return ""; } function checkCookie() { var user = getCookie("username"); if (user != "") { alert("再次欢迎您，" + user); } else { user = prompt("请输入姓名：", ""); if (user != "" && user != null) { setCookie("username", user, 30); } } } </script> </head> <body onload="checkCookie()"></body> </html>

AJAX

简介

是什么

AJAX = Asynchronous JavaScript And XML

组合了

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）

JavaScript 和 HTML DOM（显示或使用数据）

工作流程

网页中发生一个事件（页面加载、按钮点击），由 JavaScript 创建 XMLHttpRequest 对象； XMLHttpRequest 对象向 web 服务器发送请求；服务器处理该请求，服务器将响应发送回网页；由 JavaScript 读取响应，由 JavaScript 执行正确的动作（比如更新页面）；

基础语法

XMLHttpRequest 对象

方法

new XMLHttpRequest()

创建新的 XMLHttpRequest 对象

open(method, url, async, user, psw)

规定请求

method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码

setRequestHeader(header, value)

向要发送的报头添加标签/值对

必须在 open() 之后、send() 之前调用 setRequestHeader() 方法如 POST 时请求设置 Content-Type： setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); setRequestHeader("Content-Type", "application/json");

send(body)

将请求发送到服务器

body 可选（用于 POST 请求方法，还要注意设置 Content-Type 请求头）

getAllResponseHeaders()

返回头部信息

getResponseHeader()

返回特定的头部信息

abort()

取消当前请求

属性

onreadystatechange

定义当 readyState 属性发生变化时被调用的函数

readyState

XMLHttpRequest 的状态

0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪

status

返回请求的状态号

200: "OK" 403: "Forbidden" 404: "Not Found"

statusText

返回状态文本

比如 "OK" 或 "Not Found"

responseText

以字符串返回响应数据

responseXML

以 XML 数据返回响应数据

例：

<body> <p id="demo">让 AJAX 改变这段文本</p> <button type="button" onclick="loadDoc()">更改内容</button> <script> function loadDoc() { var xhttp; if (window.XMLHttpRequest) { //（1）创建 XHR 对象 xhttp = new XMLHttpRequest(); //针对现代浏览器 } else { xhttp = new ActiveXObject("Microsoft.XMLHTTP"); //针对 IE6、IE5 的代码 } xhttp.onreadystatechange = function () { //（2）定义 readyState 属性改变时的处理器 if (4 == this.readyState && 200 == this.status) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "res/ajax_info.txt", true); //（3）定义、发送请求 xhttp.send(); } </script> </body> ajax_info.txt 文件内容： <h1>AJAX</h1> <p>AJAX 并不是编程语言。</p> <p>AJAX 是一种从网页访问 Web 服务器的技术。</p> <p>AJAX 代表异步 JavaScript 和 XML。</p>

PHP 交互

例：

php 从数组获取文本

html

<!DOCTYPE html> <html> <head> </head> <body> <h2>请在下面的输入字段中键入字母 A-Z：</h2> <p>搜索建议：<span id="txtHint"></span></p> <p>姓名：<input type="text" id="txt1" onkeyup="showHint(this.value)" /></p> <script> function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; let strEn = encodeURIComponent(str); let body = null; // GET 方法（默认的表单方式） xhttp.open("GET", `php/gethint.php?q=${strEn}`, true); // POST 方法（默认的表单方式） // xhttp.open("POST", `php/gethint.php`, true); // xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); // body = `q=${strEn}`; // POST 方法（JSON body 方式） // xhttp.open("POST", `php/gethint.php`, true); // xhttp.setRequestHeader("Content-Type", "application/json"); // let jsonStr = JSON.stringify({ q: `${str}` }); // body = jsonStr; xhttp.send(body); } </script> </body> </html>

gethint.php 文件

<?php // 建议姓名数组 $a = array("Ava", "Brielle", "Caroline", "Diana", "Elise", "Fiona", "Grace", "Hannah", "Ileana", "Jane", "Kathryn", "Laura", "Millie", "Nancy", "Opal", "Petty", "Queenie", "Rose", "Shirley", "Tiffany", "Ursula", "Victoria", "Wendy", "Xenia", "Yvette", "Zoe", "Angell", "Adele", "Beatty", "Carlton", "Elisabeth", "Violet"); // 从请求获取 q 参数 if ('POST' === $_SERVER['REQUEST_METHOD']) { if (stripos($_SERVER["CONTENT_TYPE"], 'application/json') !== false) { // JSON body （若需要进行 URL 解码，解码参数时，urldecode(~) 比 rawurldecode(~) 通用一些。参数编码反之） $body = file_get_contents('php://input'); $json = json_decode($body, false); $q = $json->q; } else { $q = $_POST['q']; } } elseif ('GET' === $_SERVER['REQUEST_METHOD']) { $q = $_GET['q']; } $hint = ""; // 寻找匹配的建议姓名 if ($q !== "") { $q = strtolower($q); $len = strlen($q); foreach ($a as $name) { if (stristr($q, substr($name, 0, $len))) { if ($hint === "") { $hint = $name; } else { $hint .= ", $name"; } } } } // 输出 echo $hint === "" ? "no suggestion<br/>请求数据：$q" : "$hint"; ?>

php 从数据库获取文本

html

<!DOCTYPE html> <html> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">请选择1个用户：</option> <option value="1">Alibaba</option> <option value="2">APPLE</option> <option value="3">BAIDU</option> </select> </form> <p>客户信息：</p> <div id="userInfo"></div> <script> function showUser(str) { if ("" == str) { document.getElementById("userInfo").innerHTML = ""; return; } var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (4 == this.readyState && 200 == this.status) { document.getElementById("userInfo").innerHTML = this.responseText; } }; let strEn = encodeURIComponent(str); xhr.open("GET", `php/getcustomer.php?q=${strEn}`, true); xhr.send(); } </script> </body> </html>

getcustomer.php

<?php $q = intval($_REQUEST['q']); $servername = ''; $username = ''; $password = ''; try { $conn = mysqli_connect($servername, $username, $password); if (!$conn) { die('连接失败：'.mysqli_error($conn)); } } catch (Exception $ex) { die('连接异常：'.$ex->getMessage()); } $str = '<table>'; //方式1：字符串拼接语句查询 // $sql = "SELECT * FROM test.customerslist WHERE id = '${q}'"; // $result = mysqli_query($conn, $sql); //方式2：利用预处理实现参数化查询 $stmt = mysqli_prepare($conn, "SELECT * FROM test.customerslist WHERE id = ?"); // ? 表示一个参数占位 $stmt->bind_param("i", $q); //绑定变量到参数占位(变量的值可以在execute()之前前修改)。第一个参数为后续各参数类型序列（i:integer d:double s:string b:boolean）。如：bind_param("sss", $firstname, $lastname, $email); $stmt->execute(); $result = $stmt->get_result(); while ($row = mysqli_fetch_array($result)) { $str .= '<tr><th>customer_id</th>'.'<td>'.$row['customer_id'].'</td></tr>'; $str .= '<tr><th>company_name</th>'.'<td>'.$row['company_name'].'</td></tr>'; $str .= '<tr><th>contact_name</th>'.'<td>'.$row['contact_name'].'</td></tr>'; $str .= '<tr><th>address</th>'.'<td>'.$row['address'].'</td></tr>'; $str .= '<tr><th>city</th>'.'<td>'.$row['city'].'</td></tr>'; $str .= '<tr><th>postal_code</th>'.'<td>'.$row['postal_code'].'</td></tr>'; $str .= '<tr><th>country</th>'.'<td>'.$row['country'].'</td></tr>'; } $str .='</table>'; $stmt->close(); mysqli_close($conn); echo $str; ?>

sql

CREATE TABLE customerslist( id INTEGER AUTO_INCREMENT, customer_id CHAR(255), company_name CHAR(255), contact_name CHAR(255), address CHAR(255), city CHAR(255), postal_code CHAR(255), country CHAR(255), PRIMARY KEY(id) ); INSERT INTO customerslist( customer_id, company_name, contact_name, address, city, postal_code, country ) VALUES( 'Alibaba', 'Alibaba Group', 'Ma Yun', 'No. 699, Wangshang Road, Binjiang District', 'Hangzhou', '310002', 'China' ),( 'APPLE', 'Apple Inc.', 'Tim Cook', '1 Infinite Loop Cupertino, CA 95014', 'Cupertino', '95014', 'USA' ),( 'BAIDU', 'BAIDU Inc.', 'Li YanHong', 'Lixiang guoji dasha,No 58, beisihuanxilu', 'Beijing', '100080', 'China' );

jQuery

简介

是什么

jQuery 是一个 JavaScript 库

jQuery 极大地简化了 JavaScript 编程

包含以下特性

HTML 元素选取、操作

CSS 操作

HTML 事件函数

HTML DOM 遍历和修改

JavaScript 特效和动画

AJAX

Utilities

安装、添加

下载：

添加到页面

例：

基础语法

选取

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作

格式

$(selector).action()

$ 符号或 jQuery 定义 jQuery

符号冲突解决

noConflict() 方法让渡变量 $ 的 jQuery 控制权：（1）该方法释放 jQuery 对 $ 变量的控制；（2）该方法也可用于为 jQuery 变量规定新的自定义名称；例： <!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> <script> var jq = jQuery.noConflict(); // 释放 $ 控制并定义新名称 jq。没有 removeAll 时，jQuery 会保留 jq(document).ready(function () { jq("button").click(function () { jq("p").text("jQuery 仍在运行"); //$("p").text("$ 仍在运行"); // $ 已无效 }); }); </script> </head> <body> <p>一个段落</p> <button>jQuery 操作</button> </body> </html>

选择器（selector）“查找” HTML 元素

参考 CSS 选择器

jQuery 的 action() 执行对元素的操作

文档就绪

$(document).ready(function(){ // jQuery functions go here });

要执行的 jQuery 函数建议置于于一个 document ready 函数中，防止文档在完全加载（就绪）之前运行 jQuery 代码

例：

<!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> <script> $(document).ready(function () { $("button").click(function () { //选出指定元素名称元素，通过 click 事件函数，给指定元素的 click 事件添加处理器 $("#test").hide(); //选出指定id元素，隐藏 $("p").css("background-color", "red"); //选出指定元素名称元素，改变 CSS 属性 jQuery(this).hide("slow"); //选出当前元素，慢速隐藏 }); }); </script> </head> <body> <h2>一个标题</h2> <p>一个段落</p> <p id="test">另一个段落</p> <button>jQuery 操作</button> </body> </html>

jQuery AJAX

ajax(~) 方法

该方法是 jQuery 底层 AJAX 实现

语法

$.ajax(settings)

settings: 可选。用于配置 Ajax 请求的对象。可以通过 $.ajaxSetup() 设置任何选项的默认值。参考： https://www.w3school.com.cn/jquery/ajax_ajax.asp

get(~) 和 post(~) 方法

通过 HTTP GET 或 POST 请求从服务器请求数据

get(~) 方法

语法

$.get(url, data, success(responseText, statusText, xhr), dataType)

url：必需。规定将请求发送的哪个 URL； data：可选。规定连同请求发送到服务器的数据； success(responseText, statusText, xhr)：可选。规定当请求成功时运行的函数额外的参数： responseText - 包含来自请求的结果数据； statusText - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）； xhr - 包含 XMLHttpRequest 对象； dataType：可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断：可能的类型："xml"、"html"、"text"、"script"、"json"、"jsonp"

post(~) 方法

语法

$.post(url, data, success(responseText, statusText, xhr), dataType)

url：必需。规定将请求发送的哪个 URL； data：可选。规定连同请求发送到服务器的数据； success(responseText, statusText, xhr)：可选。规定当请求成功时运行的函数额外的参数： responseText - 包含来自请求的结果数据； statusText - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）； xhr - XMLHttpRequest 对象或 jqXHR 对象(jQuery 1.5)； dataType：可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断：可能的类型："xml"、"html"、"text"、"script"、"json"、"jsonp"

例：

html

<!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> </head> <body> <h2>请在下面的输入字段中键入字母 A-Z：</h2> <p>搜索建议：<span id="txtHint"></span></p> <p>姓名：<input type="text" id="txt1" /></p> <script> $(document).ready(function () { $("#txt1").keyup(function () { let str = this.value; //let strEn = encodeURIComponent(str); // GET 方法 $.get(`php/gethint.php`, { q: `${str}` }, function (responseText, statusText, xhr) { //（这里参数无需手动编码） $("#txtHint").html(responseText); }); // POST 方法 // $.post(`php/gethint.php`, { q: `${str}` }, function (responseText, statusText, xhr) { //（这里参数无需手动编码） // $("#txtHint").html(responseText); // }); }); }); </script> </body> </html>

load(~) 方法

从服务器加载数据，并把返回的数据放入被选元素中

语法：

$(selector).load(url, data, function(responseText, statusText, xhr));

url 参数：必需的 URL 参数规定您希望加载的 URL；URL 后面还可以通过空格分隔加一个针对结果的 jQuery选择器，筛选出一个结果的片段； data 参数：可选的 data 参数规定与请求一同发送的数据。如果提供的数据是对象，则使用 POST 方法；若是字符串，则使用 GET 方法； function(responseText, statusText, xhr) 参数：可选的 callback 参数是 load() 方法完成后所执行的函数名称：回调函数参数： responseText - 包含调用成功时的结果内容； statusText - 包含调用的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）； xhr - 包含 XMLHttpRequest 对象；

例：

基础例

html

<!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> </head> <body> <h2>请在下面的输入字段中键入字母 A-Z：</h2> <p>搜索建议：<span id="txtHint"></span></p> <p>姓名：<input type="text" id="txt1" /></p> <script> $(document).ready(function () { $("#txt1").keyup(function () { let str = this.value; let strEn = encodeURIComponent(str); $("#txtHint").load(`php/gethint.php`, `q=${strEn}`, function (responseText, statusText, xhr) { }); // GET 方法（这里注意参数要手动编码） //$("#txtHint").load(`php/gethint.php`, { q: `${str}` }); // POST 方法（这里参数无需手动编码） }); }); </script> </body> </html>

带 jQuery选择器的 URL

<!DOCTYPE html> <html> <head> <script src="js/jquery.js"></script> </head> <body> <p id="demo">让 AJAX 改变这段文本</p> <button type="button">更改内容</button> <script> $(document).ready(function () { $("button").click(function () { $("#demo").load("res/jqajax_test.txt h2"); // URL 空格间隔后的 "h2"，是1个选择器（jQuery 内部处理用到，请求时不会发送） }); }); </script> </body> </html> jqajax_test.txt 文件内容： <h1>AJAX</h1> <p id="p1">AJAX 并不是编程语言。</p> <h2>AJAX 是一种从网页访问 Web 服务器的技术。</h2> <p>AJAX 代表异步 JavaScript 和 XML。</p>

XML

简介

概念

Extensible Markup Language

可扩展标记语言

标记语言的一种

用途

XML

用来传输和存储数据，其焦点是数据的内容

HTML

用来显示数据，其焦点是数据的外观

标签没有被预定义

例：在 HTML 中使用的标签（以及 HTML 的结构）是预定义的。HTML 文档只使用在 HTML 标准中定义过的标签（比如 <p> 、<h1> 等等）。

具有自我描述性

是不作为的，没有任何行为

语法

基本语法

XML 文档形成了一种树结构，它从“根部”开始，然后扩展到“枝叶”

例与说明：

<?xml version="1.0" encoding="utf-8"?>    <root>    <child data='A' name='b"cd"e'> <subchild>a1</subchild> </child> <child data="B"> <subchild>b2</subchild> </child> <child />  </root>

其他说明

实体引用

即 XML 的转义字符

非法的 XML 字符必须被替换为实体引用（entity reference）

实体构成： & + 名称 + ;

数值实体名称：#x十六进制数、#十进数

例：

空格

Unparsed Character Data

不应由 XML 解析器进行解析的文本数据

格式：

由 "<![CDATA[" 开始

由 "]]>" 结束

例：

<![CDATA[文本]]>

文本内容中的空格

XML 中，空格会被保留

HTML 会把多个连续的空格字符裁减（合并）为一个

注释格式

元素

XML 元素指的是从（且包括）开始标签直到（且包括）结束标签的部分

命名

可以含字母、数字以及其他的字符

不能以数字或者标点符号开始

不能以字符 “xml”（或者 XML、Xml）开始

不能包含空格

避免 ":" 字符。冒号会被转换为命名空间来使用

数据本身应当存储为元素,，元数据（有关数据的数据）应当存储为属性

命名空间

用于解决当两个不同的文档使用相同的元素名时，发生的命名冲突

XML Namespace (xmlns) 属性

放置于元素的开始标签中

格式：

xmlns:namespace-prefix="namespaceURI"

注：用于标示命名空间的地址不会被解析器用于查找信息。其惟一的作用是赋予命名空间一个惟一的名称。不过，很多公司常常会作为指针来使用命名空间指向实际存在的网页，这个网页包含关于命名空间的信息。

若省略“:namespace-prefix”，则为默认命名空间

使用默认命名空间的元素标签前不用带命名空间前缀

例：

<?xml version="1.0" encoding="utf-8"?> <root xmlns:f="http://www.w3school.com.cn/furniture"> <f:table> <f:name>African Coffee Table</f:name> <f:width>80</f:width> <f:length>100</f:length> </f:table> </root>

验证

概念

拥有正确语法的 XML 被称为“形式良好”的 XML

通过 DTD 验证的 XML 是“合法”的 XML

DOCTYPE 声明

文档内部

格式

<!DOCTYPE 根元素 [元素声明]>

例：

test.xml

<?xml version="1.0"?>    <!DOCTYPE note [ <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>

文档外部

格式

<!DOCTYPE 根元素 SYSTEM "文件名">

例：

test.xml

<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE note SYSTEM "test.dtd"> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>

test.dtd

<!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)>