LBJ辉

HTML教程

HTML 语言简介

1、概述

HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。

HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999年，HTML 4.01 版发布，成为广泛接受的 HTML 标准。2014年，HTML 5 发布，这是目前正在使用的版本。

浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为。本教程只介绍 HTML 语言。

下面就是一个简单网页的 HTML 源码。


<html lang="en">
<head>
  <meta charset="utf-8">
  <title>网页标题title>
head>
<body>
  <p>Hello Worldp>
body>
html>

2、网页的基本概念

2.1、标签

HTML 代码由许许多多不同的标签（tag）构成。

<title>网页标题title>

标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。

标签放在一对尖括号里面（比如</code>），大多数标签都是成对出现的，分成开始标签和结束标签，结束标签在标签名之前加斜杠（比如<code>）。但是，也有一些标签不是成对使用，而是只有开始标签，没有结束标签，比如标签。

<meta charset="utf-8">

这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。实际引用中，它们主要用来提示浏览器，做一些特别处理。

标签可以嵌套。

<div><p>hello worldp>div>

嵌套时，必须保证正确的闭合顺序，不能跨层嵌套，否则会出现意想不到的渲染结果。

标签名是大小写不敏感，比如</code>和<code><TITLE></code>是同一个标签。不过，一般习惯都是使用小写。 另外，HTML 语言忽略缩进和换行。也就是说，下面的写法与一行的写法效果是一样的。 <pre><code class="prism language-html"><title> 网页标题 </title> </code></pre> 进一步说，整个网页的 HTML 代码完全可以写成一行，浏览器照样解析，结果完全一样。有时，正式发布网页之前，开发者会把源码压缩成一行，以减少传输的字节数。网页内容的缩进和换行，主要靠 CSS 样式来实现。 <h4>2.2、元素</h4> 浏览器渲染网页的时候，会把 HTML 源码解析成一个标签树，每个标签都是一个节点（node），称为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是源码角度来看，元素是从编程角度来看，比如<code></code>标签对应网页的<code>p</code>元素。 嵌套的标签就构成了网页元素的层级关系。 <pre><code class="prism language-html"><div><p>hello world</p></div> </code></pre> 上面代码中，<code>div</code>元素内部包含了一个<code>p</code>元素。上层元素又称为“父元素”，下层元素又称为“子元素”，即<code>div</code>是<code>p</code>的父元素，<code>p</code>是<code>div</code>的子元素。 所有元素可以分成两大类：块级元素（block）和行内元素（inline）。块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。 <h4>2.3、属性</h4> 属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。 <pre><code class="prism language-html"><img src="demo.jpg" width="500"> </code></pre> 上面代码中，<code><img></code>标签有两个属性：src和width。属性值一般放在双引号里面，这不是必需的，但推荐总是使用双引号。 注意，属性名是大小写不敏感的，onclick和onClick是同一个属性。 <h3>3、网页的基本标签</h3> 符合语法标准的网页，应该满足下面的基本结构。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> </code></pre> 不管多么复杂的网页，都是从上面这个基本结构衍生出来的。 注意，HTML 代码的缩进和换行，对于浏览器不产生作用。所以，上面的代码完全可以写成一行，渲染结果不变。上面这样分行写，只是为了提高可读性。 下面介绍，这个基本结构的主要标签，它们构成网页的骨架。 <h4>3.1、<!doctype></h4> 网页的第一个标签通常是<code><!doctype></code>，表示文档类型，告诉浏览器如何解析网页。 一般来说，只要像下面这样，简单声明doctype为html即可。浏览器就会按照 HTML5 的规则处理网页。文档声明在HTML5文档必不可少，且必须放在文档的第一行。 <pre><code class="prism language-html"><!doctype html> </code></pre> 有时，该标签采用完全大写的形式，以便区别于正常的 HTML 标签。因为<code><!doctype></code>本质上不是标签，更像一个处理指令。 <h4>3.2、<code><html></code></h4> <code><html></code>标签是网页的顶层容器，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<code><html></code>标签。 该标签的lang属性，表示网页内容默认的语言。 <pre><code class="prism language-html"><html lang="en"> </code></pre> <h4>3.3、<code><head></code></h4> <code><head></code>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染做准备。 <pre><code class="prism language-html"><!doctype html> <html> <head> <title>网页标题</title> </head> </html> </code></pre> <code><head></code>是<code><html></code>的第一个子元素。如果网页不包含<code><head></code>，浏览器会自动创建一个。 <code><head></code>的子元素一般有： <ul> <li><code><meta></code>：设置网页的元数据。</li> <li><code><link></code>：连接外部样式表。</li> <li><code><title></code>：设置网页标题。</li> <li><code><style></code>：放置内嵌的样式表。</li> <li><code><script></code>：引入脚本。</li> <li><code><noscript></code>：浏览器不支持脚本时，所要显示的内容。</li> <li><code><base></code>：设置网页内部相对 URL 的计算基准。</li> <li><code><basefont></code>：设定基准的文字字体、字号和颜色</li> <li><code><isindex></code>：表明该文档是一个可用于检索的网关脚本，由服务器自动建立</li> </ul> <h4>3.4、<code><meta></code></h4> <code><meta></code>标签用于设置或说明网页的元数据，必须放在<code><head></code>里面。一个<code><meta></code>标签就是一项元数据，网页可以有多个<code><meta></code>。 <h5>（1）name 属性，content 属性</h5> <code><meta></code>的name属性表示元数据的名字，content属性表示元数据的值。 <pre><code class="prism language-html"><head> <meta name="description" content="HTML 语言入门"> <meta name="keywords" content="HTML,教程"> <meta name="author" content="LBJhui"> </head> </code></pre> 上面代码包含了三个元数据：description是网页内容的描述，keywords是网页内容的关键字，author是网页作者。 <h5>（2）charset 属性</h5> <code><meta></code>还有一个charset属性，指定网页内容的编码方式，该属性非常重要。如果设置得不正确，浏览器可能无法正确解码，就会出现乱码。 <pre><code class="prism language-html"><meta charset="utf-8"> </code></pre> 上面代码声明，网页为utf-8编码。虽然可以使用其他的编码方式，但基本上总是应该采用 <code>UTF-8</code>。 注意，声明的编码方式，应该与网页实际的编码方式一致，即声明了<code>utf-8</code>，网页就应该使用 <code>UTF-8</code> 编码保存。 <h4>3.5、<code><title></code></h4> <code><title></code>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。 <pre><code class="prism language-html"><head> <title>网页标题</title> </head> </code></pre> 搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反映网页的主题。 <code><title></code>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。 <h4>3.6、<code><body></code></h4> <code><body></code>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都是放置在它的内部。它是<code><html></code>的第二个子元素，紧跟在<code><head></code>后面。 <pre><code class="prism language-html"><html> <head> <title>网页标题</title> </head> <body> <p>hello world</p> </body> </html> </code></pre> <h3>4、空格和换行</h3> HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格，一律忽略不计。 <pre><code class="prism language-html"><p> hello world </p> </code></pre> 上面代码中，hello前面的空格和world后面的空格，浏览器一律忽略不计。 标签内容里面的多个连续空格（包含制表符<code>\t</code>），会被浏览器合并成一个。浏览器还会将文本里面的换行符（<code>\n</code>）和回车符（<code>\r</code>），替换成空格。 这意味着，HTML 源码里面的换行，不会产生换行效果。 <h3>5、注释</h3> HTML 代码可以包含注释，浏览器会自动忽略注释。注释以<code></code>结尾，下面就是一个注释的例子。 <pre><code class="prism language-html"> </code></pre> 注释可以是多行的，并且内部的 HTML 都不再生效了。 <h2>URL 简介</h2> <h3>1、概述</h3> URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL。 <pre><code>https://www.example.com/path/index.html </code></pre> 所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才可能在互联网上获取它们。 只要资源可以互联网访问，它就必然有对应的 URL。一个 URL 对应一个资源，但是同一个资源可能对应多个 URL。 URL 是互联网的基础。互联网之所以“互联”，就是因为网页可以通过“链接”（link），包含其他 URL。用户只要点击，就可以从一个 URL 跳转到另一个 URL，前往不同的网站。 <h3>2、网址的组成部分</h3> URL 由多个部分组成。为了讲解，下面是一个比较复杂的 URL。 <pre><code>https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor </code></pre> 我们看看，这个 URL 的各个部分。 <h4>2.1、协议</h4> 协议（scheme）是浏览器请求服务器资源的方法，上例是https:// 的部分，表示使用 HTTPS 协议。 互联网支持多种协议，必须指明网址使用哪一种协议，默认是 HTTP 协议。也就是说，如果省略协议，直接在浏览器地址栏输入github.com/LBJhui ，那么浏览器默认会访问http://github.com/LBJhui 。HTTPS 是 HTTP 的加密版本，出于安全考虑，越来越多的网站使用这个协议。 HTTP 和 HTTPS 的协议名称后面，紧跟着一个冒号和两个斜杠（/）。其他协议不一定如此，邮件地址协议mailto:的协议名后面只有一个冒号，比如mailto:690306059@qq.com 。 <h4>2.2、主机</h4> 主机（host）是资源所在的网站名或服务器的名字，又称为域名。上例的主机是 github.com 。 有些主机没有域名，只有 IP 地址，比如192.168.2.15。这种情况常常出现在局域网。 <h4>2.3、端口</h4> 同一个域名下面可能同时包含多个网站，它们之间通过端口（port）区分。“端口”就是一个整数，可以简单理解成，访问者告诉服务器，想要访问哪一个网站。默认端口是80，如果省略了这个参数，服务器就会返回80端口的网站。 端口紧跟在域名后面，两者之间使用冒号分隔，比如www.example.com:80 。 <h4>2.4、路径</h4> 路径（path）是资源在网站的位置。比如，/path/index.html这个路径，指向网站的/path子目录下面的网页文件index.html。 互联网的早期，路径是真实存在的物理位置。现在由于服务器可以模拟这些位置，所以路径只是虚拟位置。 路径可能只包含目录，不包含文件名，比如/foo/，甚至结尾的斜杠都可以省略。这时，服务器通常会默认跳转到该目录里面的index.html文件（即等同于请求/foo/index.html），但也可能有其他的处理（比如列出目录里面的所有文件），这取决于服务器的设置。一般来说，访问www.example.com 这个网址，很可能返回的是网页文件www.example.com/index.html 。 <h4>2.5、查询参数</h4> 查询参数（parameter）是提供给服务器的额外信息。参数的位置是在路径后面，两者之间使用?分隔，上例是?key1=value1&key2=value2。 查询参数可以有一组或多组。每组参数都是键值对（key-value pair）的形式，同时具有键名(key)和键值(value)，它们之间使用等号（=）连接。比如，key1=value就是一个键值对，key1是键名，value1是键值。 多组参数之间使用&连接，比如key1=value1&key2=value2。 <h4>2.6、锚点</h4> 锚点（anchor）是网页内部的定位点，使用#加上锚点名称，放在网址的最后，比如#anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。 锚点名称通过网页元素的id属性命名，详见《元素的属性》一章。 <h4>2.7、URL 字符</h4> URL 的各个组成部分，只能使用以下这些字符。 <pre><code>26个英语字母（包括大写和小写） 10个阿拉伯数字连词号（-）句点（.）下划线（_） </code></pre> 此外，还有18个字符属于 URL 的保留字符，只能在给定的位置出现。比如，查询参数的开头是问号（?），也就是说，问号只能出现查询参数的开头，出现在其他位置就是非法的，会导致网址解析错误。网址的其他部分如果要使用这些保留字符，必须使用它们的转义形式。 URL 字符转义的方法是，在这些字符的十六进制 ASCII 码前面加上百分号（%）。下面是这18个字符及其转义形式。 <pre><code>!：%21 #：%23 $：%24 &：%26 '：%27 (：%28 )：%29 *：%2A +：%2B ,：%2C /：%2F :：%3A ;：%3B =：%3D ?：%3F @：%40 [：%5B ]：%5D </code></pre> 举例来说，有一个网页的 URL 是foo?bar.html，即文件里面包含一个问号，那么需要写成foo%3Fbar.html。 URL 的合法字符，其实也可以采用这种转义方法，但是不建议使用。比如，字母a的十六进制 ASCII 码是61，转义形式后就是%61。因此，www.apple.com 又可以写成www.%61pple.com ，浏览器一样识别。 值得注意的是，空格的转义形式是%20。对于那些包含空格的文件名，这个转义是必须的。 既不属于合法字符、也不属于保留字符的其他字符（比如汉字），理论上不需要手动转义，可以直接写在 URL 里面，比如www.example.com/中国.html ，浏览器会自动将它们转义，发给服务器。转义方法是使用这些字符的十六进制 UTF-8 编码，每两位算作一组，然后每组头部添加百分号（%）。 举例来说，汉字中的 UTF-8 十六进制编码是e4b8ad，每两个字符一组，URL 转义后就为%e4%b8%ad。也就是说，URL 里面凡是有汉字中的地方，都要写成%e4%b8%ad。因此，访问www.example.com/中国.html 这个网址，需要写成下面的样子。 <pre><code>www.example.com/%e4%b8%ad%e5%9b%bd.html </code></pre> 上面代码中，中的转义形式是%e4%b8%ad，国是%e5%9b%bd。 <h3>3、绝对 URL 和相对 URL</h3> URL 分成两种：绝对 URL 和相对 URL。 绝对 URL 指的是，只靠 URL 本身就能确定资源的位置。这意味着，URL 必须带有资源的完整信息，包含协议、主机、路径等部分。前面的例子都是绝对 URL。 相对 URL 指的是，URL 不包含资源位置的全部信息，必须结合当前网页的位置，才能定位资源。比如，当前网页的 URL 是https://www.example.com/path/index.html ，该网页上面有一个资源，URL 指向a.html，这个就是相对 URL。因为只知道a.html，并不能定位资源。浏览器假定，a.html与当前网址在同一个子目录下面，从而得到绝对 URL https://www.example.com/path/a.html 。 相对 URL 如果以斜杠（/）开头，就表示网站的根目录。否则，必须以当前目录为起点，推算资源的位置。比如，相对 URL /foo/bar.html表示网站根目录的子目录foo，foo/bar.html表示在当前目录的foo子目录。 URL 还可以使用两个特殊简写，表示特定位置。 . ：表示当前目录，比如./a.html（当前目录下的a.html文件） … ：表示上级目录，比如…/a.html（上级目录下的a.html文件） 这两种简写可以多个连用，比如…/…/表示上两级目录。 绝对 URL 也可以使用这两个简写，比如www.example.com/./index.html 等同于www.example.com/index.html ，这时.相当于根目录的当前目录，即根目录本身。 <h3>4、<code><base></code></h3> <code><base></code>标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个<code><base></code>标签，而且只能放在<code><head></code>里面。它是单独使用的标签，没有闭合标签，下面是一个例子。 <pre><code class="prism language-html"><head> <base href="https://www.example.com/files/" target="_blank"> </head> </code></pre> <code><base></code>标签的href属性给出计算的基准网址，target属性给出如何打开链接的说明（参见《链接》一章）。 已知计算基准是https://www.example.com/files/ ，那么相对 URL foo.html，就可以转成绝对 URL https://www.example.com/files/foo.html 。 注意，<code><base></code>标签必须至少具有href属性或target属性之一。 <h2>网页元素的属性</h2> <h3>1、简介</h3> 网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。 <pre><code class="prism language-html"><html lang="en"> </code></pre> 上面代码中，<code><html></code>标签内部的键值对<code>lang="en"</code>，就称为html元素的属性。属性名为lang，属性值为en。 属性名与标签名一样，不区分大小写，lang和LANG是同一个属性。 属性名与属性值之间，通过等号<code>=</code>连接。属性值可以放在单引号或双引号之中，建议统一使用双引号。某些属性值可以不使用引号，但是建议不要这样写。 有些属性是布尔属性，即属性值是一个布尔值，只有“打开”和“关闭”两种情况。这时属性值可以省略，只要添加了属性名，就表示打开该属性。 <pre><code class="prism language-html"><input type="text" required> </code></pre> 上面代码中，required就是<code><input></code>标签的布尔属性。如果加上这个属性，就表示打开，没有关闭就是关闭。 <h3>2、全局属性</h3> 全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把下面的属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。 下面是一些常见的全局属性。 <h4>2.1、id</h4> id属性是元素在网页内的唯一标识符。比如，网页可能包含多个<code></code>标签，id属性可以指定每个<code></code>标签的唯一标识符。 <pre><code class="prism language-html"><p id="p1"></p> <p id="p2"></p> <p id="p3"></p> </code></pre> 上面代码中，三个<code></code>标签具有不同的id属性，因此可以区分。 id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。 id属性的值还可以在最前面加上#，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址https://foo.com/index.html#bar 的时候，浏览器会自动将页面滚动到bar的位置，让用户第一眼就看到这部分内容。 <h4>2.2、class</h4> class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。 <pre><code class="prism language-html"><p class="para"></p> <p></p> <p class="para"></p> </code></pre> 上面代码中，第一个<code></code>和第三个<code></code>是一类，因为它们的class属性相同。 元素可以同时具有多个 class，它们之间使用空格分隔。 <pre><code class="prism language-html"><p class="p1 p2 p3"></p> </code></pre> 上面的p元素同时具有p1、p2、p3三个 class。 <h4>2.3、title</h4> title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。 <pre><code class="prism language-html"><div title="版权说明"> <p>本站内容使用创意共享许可证，可以自由使用。</p> </div> </code></pre> 上面代码中，title属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。 <h4>2.4、tabindex</h4> 网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。 这里就有一个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。 tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。 <ul> <li>负整数：该元素可以获得焦点（比如使用 JavaScript 的focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。</li> <li>0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。</li> <li>正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。</li> </ul> <pre><code class="prism language-html"><p tabindex="0">这段文字可以获得焦点。</p> </code></pre> 上面代码中，<code></code>标签的tabindex为0，意味着该元素可以获得焦点，并且也可以被 Tab 键遍历，顺序由其在源码里面的位置决定。 一般来说，tabindex属性最好都设成0，按照自然顺序进行遍历，这样比较符合用户的预期，除非网页有特殊布局。如果网页所有元素都没有设置tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。因此实际上，只有那些无法获得焦点的元素（比如<code></code>、<code><div></code>）需要参与遍历，才有必要设置tabindex属性。 <h4>2.5、accesskey</h4> accesskey属性指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。只要按下快捷键，该元素就会得到焦点。 <pre><code class="prism language-html"><button accesskey="s">提交</button> </code></pre> 上面代码中，<code><button></code>的快捷键是s，按下快捷键，该元素就得到了焦点。 accesskey属性的字符键，必须配合功能键，一起按下才会生效。也就是说，快捷键是“功能键 + 字符键”的组合。不同的浏览器与不同的操作系统，功能键都不一样。比如，Chrome 浏览器在 Windows 系统和 Linux 系统的快捷键是Alt + 字符键，在 Mac 系统的快捷键是Ctrl + Alt + 字符键。 注意，accesskey如果跟操作系统或浏览器级别的快捷键有冲突，这时不会生效。 <h4>2.6、style</h4> style属性用来指定当前元素的 CSS 样式。具体的设置，请看 CSS 教程。 <pre><code class="prism language-html"><p style="color: red;">hello</p> </code></pre> 上面代码指定文字颜色为红色。 <h4>2.7、hidden</h4> hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。 <pre><code class="prism language-html"><p hidden>本句不会显示在页面上。</p> </code></pre> 上面代码中，这个p元素不会出现在网页上。 注意，CSS 的可见性设置，高于hidden属性。如果 CSS 设为该元素可见，hidden属性将无效。 <h4>2.8、lang，dir</h4> lang属性指定网页元素使用的语言。 <pre><code class="prism language-html"><p lang="en">hello</p> <p lang="zh">你好</p> </code></pre> 上面代码中，第一个<code></code>的lang属性，表示使用英语，第二个<code></code>的lang属性，表示使用中文。 lang属性的值，必须符合 BCP47 的标准。下面是一些常见的语言代码。 <ul> <li>zh：中文</li> <li>zh-Hans：简体中文</li> <li>zh-Hant：繁体中文</li> <li>en：英语</li> <li>en-US：美国英语</li> <li>en-GB：英国英语</li> <li>es：西班牙语</li> <li>fr：法语</li> </ul> dir属性表示文字的阅读方向，有三个可能的值。 <ul> <li>ltr：从左到右阅读，比如英语。</li> <li>rtl：从右到左阅读，阿拉伯语、波斯语、希伯来语都属于这一类。</li> <li>auto：浏览器根据内容的解析结果，自行决定。</li> </ul> <h4>2.9、contenteditable</h4> HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。它有两个可能的值。 <ul> <li>true或空字符串：内容可以编辑</li> <li>false：不可以编辑</li> </ul> <pre><code class="prism language-html"><p contenteditable="true"> 鼠标点击，本句内容可修改。 </p> </code></pre> 上面代码中，鼠标单击句子，就可以进入编辑状态，用户可以改变句子的内容。当然，除非提交到服务器，否则刷新页面还是显示原来的内容。 该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。 <h4>2.10、spellcheck</h4> 浏览器一般会自带拼写检查功能，编辑内容时，拼错的单词下面会显示红色的波浪线。spellcheck属性就表示，是否打开拼写检查。 它有两个可能的值。 <ul> <li>true：打开拼写检查</li> <li>false：关闭拼写检查</li> </ul> <pre><code class="prism language-html"><p contenteditable="true" spellcheck="true"> 英语单词 separate 容易写错成 seperate。 </p> </code></pre> 上面代码中，seperate下面会有提示，表示拼错了。 注意，由于该属性只在编辑时生效，所以这个例子必须加上contenteditable属性，表示本段内容可编辑。鼠标单击就可以进入编辑状态，这时才会看到拼写提示。不可编辑的状态下，拼写错误是不提示显示的。对于那些不可编辑的元素，该属性无效。 这个属性看上去像布尔属性，但是其实是枚举属性，所以最好不要省略它的值。如果没有指定这个属性，浏览器将自行决定是否打开拼写检查。 <h3>3、事件处理属性</h3> 除了上面这些属性，全局属性还包括事件处理属性（event handler），用来响应用户的动作。这些属性的值都是 JavaScript 代码，请参考 JavaScript 教程，这里只列出这些属性的名单。 <pre><code class="prism language-javascript">onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting </code></pre> <h2>HTML 字符编码</h2> <h3>1、简介</h3> 网页包含了大量的文字，浏览器必须知道这些文字的编码方法，才能把文字还原出来。 一般情况下，服务器向浏览器发送 HTML 网页文件时，会通过 HTTP 头信息，声明网页的编码方式。 <pre><code>Content-Type: text/html; charset=UTF-8 </code></pre> 上面代码中，HTTP 头信息的Content-Type字段先声明，服务器发送的数据类型是text/html（即 HTML 网页），然后声明网页的文字编码是UTF-8。 网页内部也会再用<code><meta></code>标签，再次声明网页的编码。 <pre><code class="prism language-html"><meta charset="UTF-8"> </code></pre> <h3>2、字符的数字表示法</h3> 网页可以使用不同语言的编码方式，但是最常用的编码是 UTF-8。UTF-8 编码是 Unicode 字符集的一种表达方式。这个字符集的设计目标是包含世界上的所有字符，目前已经收入了十多万个字符。 每个字符有一个 Unicode 号码，称为码点（code point）。如果知道码点，就能查到这是什么字符。举例来说，英文字母a的码点是十进制的97（十六进制的61），汉字“中”的码点是十进制的20013（十六进制的4e2d）。 由于下面的原因，不是每一个 Unicode 字符都能直接在 HTML 语言里面显示。 （1）不是每个 Unicode 字符都可以打印出来，有些没有可打印形式，比如换行符的码点是十进制的10（十六进制的A），就没有对应的字面形式。 （2）小于号（<）和大于号（>）用来定义 HTML 标签，其他需要用到这两个符号的场合，必须防止它们被解释成标签。 （3）由于 Unicode 字符太多，无法找到一种输入法，可以直接输入所有这些字符。换言之，没有一种键盘，有办法输入所有符号。 （4）网页不允许混合使用多种编码，如果使用 UTF-8 编码的同时，又想插入其他编码的字符，就会很困难。 HTML 为了解决上面这些问题，允许使用 Unicode 码点表示字符，浏览器会自动将码点转成对应的字符。 字符的码点表示法是&#N;（十进制，N代表码点）或者&#xN;（十六进制，N代表码点），比如，字符a可以写成a（十进制）或者a（十六进制），字符中可以写成中（十进制）或者中（十六进制），浏览器会自动转换它们。 <pre><code class="prism language-html"><p>hello</p>  <p>hello</p>  <p>hello</p> </code></pre> 上面代码中，字符可以直接表示，也可以使用十进制码点或十六进制码点表示。 注意，HTML 标签本身不能使用码点表示，否则浏览器会认为这是所要显示的文本内容，而不是标签。比如，<code></code>一旦写成<code></code>或者<code></code>，浏览器就不再认为这是标签了，而会当作文本内容将其显示为<code></code>。 <h3>3、字符的实体表示法</h3> 数字表示法的不方便之处，在于必须知道每个字符的码点，很难记忆。为了能够快速输入，HTML 为一些特殊字符，规定了容易记忆的名字，允许通过名字来表示它们，这称为实体表示法（entity）。 实体的写法是&name;，其中的name是字符的名子。下面是其中一些特殊字符，及其对应的实体。 <pre><code><：< >：> "：" '：' &：& ©：© #：# §：§ ¥：¥ $：$ £：£ ¢：¢ %：% *：$ast; @：@ ^：^ ±：± 空格： </code></pre> 注意，上面最后一个特殊字符是空格，它也有对应的实体表示法。 字符的数字表示法和实体表示法，都可以表示正常情况无法输入的字符，逃脱了浏览器的限制，所以英语里面称为“escape”，中文翻译为“字符的转义”。 <h2>文本标签</h2> 历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。 <h3>1、<code><div></code></h3> <code><div></code>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。 它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的<code><div></code>就很常见。 <pre><code class="prism language-html"><div class="main"> <div class="article"> <div class="title"> <h1>文章标题</h1> </div> </div> </div> </code></pre> 上面代码读起来很费力，因为不带有语义(<code><div></code>是无语义的块级元素。)。后来，HTML 5 就提出了语义标签，改进了上面的代码。 <pre><code class="prism language-html"><main> <article> <header> <h1>文章标题</h1> </header> </article> </main> </code></pre> 带有语义的块级标签（比如<code><article></code>、<code><section></code>、<code><aside></code>、<code><nav></code>等）始终应该优先使用，当且仅当没有其他语义元素合适时，才可以使用<code><div></code>。 <h3>2、<code></code></h3> <code></code>标签是一个块级元素，代表文章的一个段落（paragraph）。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进<code></code>元素。 <pre><code class="prism language-html"><p>hello world</p> </code></pre> <h3>3、<code></code></h3> <code></code>是一个通用目的的行内标签（即不会产生换行），不带有任何语义。它通常用作 CSS 样式的钩子，如果需要对某些行内内容指定样式，就可以把它们放置在<code></code>。 <pre><code class="prism language-html"><p>这是一句<span>重要</span>的句子。</p> </code></pre> 上面代码中，句子里面需要强调的部分，就可以放在<code></code>。 <h3>4、<code> </code>，<code></code></h3> <code> </code>让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。 <pre><code class="prism language-html">hello<br>world </code></pre> 浏览器渲染上面代码时，会分成两行，hello和world各占一行。 <code> </code>对于诗歌和地址的换行非常有用。 <pre><code class="prism language-html"><p> 床前明月光，<br> 疑是地上霜。<br> 举头望明月，<br> 低头思故乡。 </p> </code></pre> 上面的代码如果不用<code> </code>，会显示成一行。 注意，块级元素的间隔，不要使用<code> </code>来产生，而要使用 CSS 指定。 <pre><code class="prism language-html"><p>第一段</p> <br> <br> <p>第二段</p> </code></pre> 上面的代码希望段落之间有两个换行，这时不应该使用<code> </code>，而应该使用 CSS。 <code></code>标签跟<code> </code>很相似，表示一个可选的断行。如果一行的宽度足够，则不断行；如果宽度不够，需要断行，就在<code></code>的位置的断行。它是为了防止浏览器在一个很长的单词中间，不正确地断行或者不断行，所以事先标明可以断行的位置，主要用于欧洲一些单词很长的语言或者 URL 的断行。 <pre><code class="prism language-html"><p> Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz </p> </code></pre> 上面代码是一个很长的德语单词，为了防止不正确断行，事先用<code></code>告诉浏览器，可以选择在哪里断行。 <h3>5、<code><hr></code></h3> <code><hr></code>用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。 <pre><code class="prism language-html"><p>第一个主题</p> <hr> <p>第二个主题</p> </code></pre> 上面代码的渲染结果是，两段之间会出现一根水平线。 该标签是历史遗留下来的，建议尽量避免使用。主题之间的分隔可以使用<code><section></code>，如果想要水平线的效果，可以使用 CSS。 <h3>6、<code><pre></code></h3> <code><pre></code>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。 <pre><code class="prism language-html"><pre>hello world</pre> </code></pre> 上面代码中，换行和连续空格都会由于<code><pre></code>标签，而被保留下来，浏览器按照原样输出。 注意，HTML 标签在<code><pre></code>里面还是起作用的。<code><pre></code>只保留空格和换行，不会保留 HTML 标签。 <pre><code class="prism language-html"><pre><strong>hello world</strong></pre> </code></pre> 上面代码中，<code><pre></code>标签的内容会加粗显示。 <h3>7、<code></code>，<code></code></h3> <code></code>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。 <pre><code class="prism language-html"><p>开会时间是<strong>下午两点</strong>。</p> </code></pre> <code></code>与<code></code>很相似，也表示它包含的内容需要引起注意，浏览器会加粗显示。它是 Boldface 的缩写。 <pre><code class="prism language-html"><p>开会时间是<b>下午两点</b>。</p> </code></pre> 它与<code></code>的区别在于，由于历史原因，它没有语义，是一个纯样式的标签，违反了语义与样式分离的原则，因此不建议使用，应该优先使用<code></code>标签。 <h3>8、<code></code>，<code></code></h3> <code></code>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。 <pre><code class="prism language-html"><p>我们<em>已经</em>讨论过这件事情了。</p> </code></pre> 虽然浏览器通常会以斜体显示<code></code>，但无法保证一定如此，所以最好还是用 CSS 指定一下这个标签的样式。 <code></code>标签与<code></code>相似，也表示与其他地方有所区别，浏览器会以斜体显示。它是 Italic 的缩写。 <pre><code class="prism language-html"><p>我心想，这件事是<i>真的</i>吗？</p> </code></pre> <code></code>标签的语义不强，更接近是一个纯样式的标签，建议优先使用<code></code>标签代替它。 <h3>9、<code></code>，<code></code>，<code><var></code></h3> <code></code>标签将内容变为下标，<code></code>标签将内容变为上标。它们都是行内元素，主要用于数学公式、分子式等。 <pre><code class="prism language-html"><p>水分子是 H<sub>2</sub>O。</p> </code></pre> <code><var></code>标签表示代码或数学公式的变量。 <pre><code class="prism language-html"><p>勾股定理是 <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup> 。</p> </code></pre> <h3>10、<code></code>，<code><s></code></h3> <code></code>标签是一个行内元素，表示对内容提供某种注释，提醒用户这里可能有问题，基本上只用来表示拼写错误。浏览器默认以下划线渲染内容。 <pre><code class="prism language-html"><p> 一个容易写错的成语是把<em>安分守己</em>写成<u>安份守己</u>。 </p> </code></pre> 上面代码中，<code></code>提示用户这是一个拼写错误，“安份守己”的下方会有一个下划线。 注意，<code></code>会产生下划线，由于链接也默认带有下划线，所以必须非常小心使用<code></code>标签，避免用户误以为可以点击。万一确有必要使用，最好使用 CSS 改变<code></code>的默认样式。 <code><s></code>标签是一个行内元素，为内容加上删除线。 <pre><code class="prism language-html"><p>今天特价商品：<s>三文鱼</s>（售完）</p> </code></pre> 上面代码中，“三文鱼”会有一根删除线。 <h3>11、<code><blockquote></code>，<code><cite></code>，<code><q></code></h3> <code><blockquote></code>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。 <pre><code class="prism language-html"><blockquote cite="https://quote.example.com"> <p>天才就是 1% 的天赋和99%的汗水。</p> </blockquote> </code></pre> <code><blockquote></code>标签有一个<code>cite</code>属性，它的值是一个网址，表示引言来源，不会显示在网页上。 <code><cite></code>标签表示引言出处或者作者，浏览器默认使用斜体显示这部分内容。 <pre><code class="prism language-html"><blockquote cite="https://quote.example.com"> <p>天才就是 1% 的天赋和99%的汗水。</p> </blockquote> <cite>-- 爱迪生</cite> </code></pre> <code><cite></code>不一定跟<code><blockquote></code>一起使用。如果文章中提到资料来源，也可以单独使用。 <pre><code class="prism language-html"><p>更多资料请看<cite>维基百科</cite>。</p> </code></pre> <code><q></code>是一个行内标签，也表示引用。它与<code><blockquote></code>的区别，就是它不会产生换行。 <pre><code class="prism language-html"><p> 莎士比亚的《哈姆雷特》有一句著名的台词： <q cite="https://quote.example.com">活着还是死亡，这是一个问题。</q> </p> </code></pre> 跟<code><blockquote></code>一样，<code><q></code>也有cite属性，表示引言的来源网址。 注意，浏览器默认会斜体显示<code><q></code>的内容，并且会自动添加半角的双引号。所以，引用中文内容时要小心。 <h3>12、<code><code></code></h3> <code><code></code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。 <pre><code class="prism language-html"><code>alert()</code>的作用是让网页弹出一个提示框。 </code></pre> 如果要表示多行代码，<code><code></code>标签必须放在<code><pre></code>内部。<code><code></code>本身仅表示一行代码。 <pre><code class="prism language-html"><pre> <code> let a = 1; console.log(a); </code> </pre> </code></pre> <h3>13、<code><kbd></code>，<code><samp></code></h3> <code><kbd></code>标签是一个行内元素，原意是用户从键盘输入的内容，现在扩展到各种输入，包括语音输入。浏览器默认以等宽字体显示标签内容。 <pre><code class="prism language-html"><p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重启。</p> </code></pre> <code><kbd></code>可以嵌套，方便指定样式。 <pre><code class="prism language-html"><p>Windows 可以按下 <kbd> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> </kbd> 重启。</p> </code></pre> <code><samp></code>标签是一个行内元素，表示计算机程序输出内容的一个例子。浏览器默认以等宽字体显示。 <pre><code class="prism language-html"><p>如果使用没有定义的变量，浏览器会报错： <samp>Uncaught ReferenceError: foo is not defined</samp>。 </p> </code></pre> <h3>14、<code></code></h3> <code></code>是一个行内标签，表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景，显示该标签的内容。 <pre><code class="prism language-html"><p>我们讨论以后决定，<mark>运行会在下周三举办</mark>。</p> </code></pre> <code></code>很适合在引用的内容（<code><q></code>或<code><blockquote></code>）中，标记出需要关注的句子。 <pre><code class="prism language-html"><blockquote> 床前明月光，疑是地上霜。<mark>举头望明月，低头思故乡。</mark> </blockquote> </code></pre> 除了标记感兴趣的文本，<code></code>还可以用于在搜索结果中，标记出匹配的关键词。 注意，不要只为了高亮的效果，而使用这个标签，因为不能保证浏览器的处理方式。如果要保证高亮，还是要使用 CSS 样式。 <h3>15、<code></code></h3> <code></code>是一个行内标签，浏览器会将它包含的内容，以小一号的字号显示，不需要使用 CSS 样式。它通常用于文章附带的版权信息或法律信息。 <pre><code class="prism language-html"><p>文章正文</p> <p><small>以上内容使用创意共享许可证。</small></p> </code></pre> <h3>16、<code><time></code>，<code><data></code></h3> <code><time></code>是一个行内标签，为跟时间相关的内容提供机器可读的格式。 <pre><code class="prism language-html"><p>运动会预定<time datetime="2015-06-10">下周三</time>举行。</p> </code></pre> 上面代码中，<code><time></code>表示下周三的具体日期。这方便搜索引擎抓取，或者下一步的其他处理。 <code><time></code>的datetime属性，用来指定机器可读的日期，可以有多种格式。 <ul> <li>有效年份：2011</li> <li>有效月份：2011-11</li> <li>有效日期：2011-11-18</li> <li>无年份的日期：11-18</li> <li>年度的第几周：2011-W47</li> <li>有效时间：14:54、14:54:39、14:54:39.929</li> <li>日期和时间：2011-11-18T14:54:39.929</li> </ul> <pre><code class="prism language-html"><p>音乐会在<time datetime="20:00">晚上八点</time>开始。</p> </code></pre> <code><data></code>标签与<code><time></code>类似，也是提供机器可读的内容，但是用于非时间的场合。 <pre><code class="prism language-html"><p>本次马拉松比赛第一名是<data value="39">LBJ辉</data></p>。 </code></pre> 上面代码中，选手的机读数据就放在<code><data></code>标签的value属性。 <h3>17、<code><address></code></h3> <code><address></code>标签是一个块级元素，表示某人或某个组织的联系方式。 <pre><code class="prism language-html"><p>作者的联系方式：</p> <address> <p><a href="mailto:foo@example.com">foo@example.com</a></p> <p><a href="tel:+555-34762301">+555-34762301</a></p> </address> </code></pre> 该标签有几个注意点。 （1）如果是文章里提到的地址（比如提到搬家前的地址），而不是联系信息，不要使用<code><address></code>标签。 （2）<code><address></code>的内容不得有非联系信息，比如发布日期。 （3）<code><address></code>不能嵌套，并且内部不能有标题标签（<code><h1></code>~<code><h6></code>），也不能有<code><article></code>、<code><aside></code>、<code><section></code>、<code><nav></code>、<code><header></code>、<code><footer></code>等标签。 （4）通常，<code><address></code>会放在<code><footer</code>>里面，下面是一个例子。 <pre><code class="prism language-html"><footer> <address> 文章的相关问题请联系<a href='mailto:zhangsan@example.com'>LBJ辉 McClure</a>。 </address> </footer> </code></pre> <h3>18、<code><abbr></code></h3> <code><abbr></code>标签是一个行内元素，表示标签内容是一个缩写。它的title属性给出缩写的完整形式，或者缩写的描述。鼠标悬停在该元素上方时，title属性值作为提示，会完整显示出来。 <pre><code class="prism language-html"><abbr title="HyperText Markup Language">HTML</abbr> 注意，某些浏览器可能对该标签提供圆点下划线。 </code></pre> <h3>19、<code><ins></code>，<code><del></code></h3> <code><ins></code>标签是一个行内元素，表示原始文档添加（insert）的内容。<code><del></code>与之类似，表示删除（delete）的内容。它们通常用于展示文档的删改。 <pre><code class="prism language-html"><del><p>会议定于5月8日举行。</p></del> <ins><p>会议定于5月9日举行。</p></ins> </code></pre> 浏览器默认为<code><del></code>标签的内容加上删除线，为<code><ins></code>标签的内容加上下划线。 这两个标签都有以下属性。 <ul> <li>cite：该属性的值是一个 URL，表示该网址可以解释本次删改。</li> <li>datetime：表示删改发生的时间。</li> </ul> <pre><code class="prism language-html"><ins cite="./why.html" datetime="2018-05"> <p>项目比原定时间提前两周结束。</p> </ins> </code></pre> <h3>20、<code><dfn></code></h3> <code><dfn></code>是一个行内元素，表示标签内容是一个术语（definition），本段或本句包含它的定义。 <pre><code class="prism language-html"><p> 通过 TCP/IP 协议连接的全球性计算机网络，叫做 <dfn>Internet</dfn>。 </p> </code></pre> 为了脚本操作的方便，可以把术语的定义写入<code><dfn></code>标签的title属性。 <pre><code class="prism language-html"><p> 通过 TCP/IP 协议连接的全球性计算机网络，叫做 <dfn title="全球性计算机网络">Internet</dfn>。 </p> </code></pre> 上面代码中，title属性的一个作用是，鼠标悬浮的时候，术语的解释会以提示的形式显示出来。 某些时候，术语本身是一个缩写，这时<code><dfn></code>和<code><abbr></code>可以结合使用。 <pre><code class="prism language-html"><p> <dfn><abbr title="acquired immune deficiency syndrome">AIDS</abbr><dfn> 的全称是获得性免疫缺陷综合征。 </p> </code></pre> <h3>21、<code><ruby></code>，<code><rp></code></h3> <code><ruby></code>用于表示东亚文字的语音，比如汉语拼音。它默认会以小字体，显示在文字的上方。 <pre><code class="prism language-html"><ruby> 汉<rp>(</rp><rt>han</rt><rp>)</rp> 字<rp>(</rp><rt>zi</rt><rp>)</rp> </ruby> </code></pre> 上面代码的渲染结果是，汉字上方有小字体的拼音。 <code><ruby></code>是一个行内元素，也是一个容器标签，内部还有许多配套的标签。 <ul> <li><code><rp></code>：标注语音符号的起始符号（默认为半角括号）和结束符号（默认为半角右括号），默认不显示。</li> <li><code><rt></code>：标注语音符号。</li> <li><code><rb></code>：划分文字单位，与语音一一对应。</li> <li><code><rbc></code>：<code><rb></code>的容器，主要作用是将语音显示在文字的右侧。</li> </ul> 如果想让拼音不是显示在文字上方，而是显示在文字右侧，写法如下。 <pre><code class="prism language-html"><ruby> <rbc> <rb>汉</rb><rp>(</rp><rt>han</rt><rp>)</rp> <rb>字</rb><rp>(</rp><rt>zi</rt><rp>)</rp> </rbc> </ruby> </code></pre> <h3>22、<code><bdo></code>，<code><bdi></code></h3> 大部分文字的阅读方向是从左到右，但是有些文字的方向是从右到左，比如阿拉伯语、希伯来语等。<code><bdo></code>标签是一个行内元素，表示文字方向与网页主体内容的方向不一致。 <pre><code class="prism language-html"><p>床前明月光，<bdo dir="rtl">霜上地是疑</bdo>。</p> </code></pre> 上面代码中，<code><bdo></code>标签里面的文字，会以相反的方向渲染，结果就是“床前明月光，疑是地上霜”。 <code><bdo></code>的dir属性，指定具体的文字方向。它有两个值，ltr表示从左到右，rtl表示从右到左。 <code><bdi></code>标签用于不确定文字方向的情况。比如，网页有一个部分是用户输入的内容，但是不知道输入内容的文字方向。这种情况就可以使用<code><bdi></code>标签，告诉浏览器，不确定文字的方向，由浏览器自己决定。 <pre><code class="prism language-html"><p><bdi>床前明月光，疑是地上霜。</bdi></p> </code></pre> <h2>列表标签</h2> 列表是一系列排列好的项目，主要分成两类：有序列表和无序列表。 有序列表是每个列表项前面有编号，呈现出顺序，就像下面这样。 <pre><code class="prism language-html">1. 列表项 A 2. 列表项 B 3. 列表项 C </code></pre> 无序列表则是列表项前面没有编号，只有一个列表符号，默认是一个圆点。 <ul> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ul> <h3>1、<code><ol></code></h3> <code><ol></code>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。 <pre><code class="prism language-html"><ol> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ol> </code></pre> 上面代码会在列表项 A、B、C 前面，分别产生1、2、3的编号。 <code><ol></code>标签内部可以嵌套<code><ol></code>标签或<code><ul></code>标签，形成多级列表。 <pre><code class="prism language-html"><ol> <li>列表项 A</li> <li>列表项 B <ol> <li>列表项 B1</li> <li>列表项 B2</li> <li>列表项 B3</li> </ol> </li> <li>列表项 C</li> </ol> </code></pre> 上面代码中，一个有序列表内部嵌套了另一个有序列表，渲染结果如下。 <pre><code>1. 列表项 A 2. 列表项 B 1. 列表项 B1 2. 列表项 B2 3. 列表项 B3 3. 列表项 C </code></pre> 该标签有以下属性。 （1）reversed reversed属性产生倒序的数字列表。 <pre><code class="prism language-html"><ol reversed> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ol> </code></pre> 上面代码中，列表项 A、B、C 前面，产生的编号是3、2、1。 （2）start start属性的值是一个整数，表示数字列表的起始编号。 <pre><code class="prism language-html"><ol start="5"> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ol> </code></pre> 上面代码中，列表项 A、B、C 前面，产生的编号是5、6、7。 （3）type type属性指定数字编号的样式。目前，浏览器支持以下样式。 <ul> <li>a：小写字母</li> <li>A：大写字母</li> <li>i：小写罗马数字</li> <li>I：大写罗马数字</li> <li>1：整数（默认值）</li> </ul> <pre><code class="prism language-html"><ol type="a"> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ol> </code></pre> 上面代码中，列表项 A、B、C 前面的编号，分别是英文小写字母a、b、c。 注意，即使编号是字母，start属性也依然使用整数。 <pre><code class="prism language-html"><ol type="a" start="3"> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ol> </code></pre> 上面代码中，type属性指定编号采用小写英文字母，start属性等于3，表示从c开始编号。 <h3>2、<code><ul></code></h3> <code><ul></code>标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。 <pre><code class="prism language-html"><ul> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ul> </code></pre> 上面代码的渲染结果是，列表项 A、B、C 前面，分别产生一个实心小圆点，作为列表符号。 <code><ul></code>标签内部可以嵌套<code><ul></code>或<code><ol></code>，形成多级列表。 <h3>3、<code><li></code></h3> <code><li></code>表示列表项，用在<code><ol></code>或<code><ul></code>容器之中。 有序列表<code><ol></code>之中，<code><li></code>有一个value属性，定义当前列表项的编号，后面列表项会从这个值开始编号。 <pre><code class="prism language-html"><ol> <li>列表项 A</li> <li value="4">列表项 B</li> <li>列表项 C</li> </ol> </code></pre> 上面代码中，value属性指定第二个列表项的编号是4，因此三个列表项的编号，分别为1、4、5。 <h3>4、<code><dl></code>，<code><dt></code>，<code><dd></code></h3> <code><dl></code>标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）由<code><dt></code>标签定义，术语解释（description detail）由<code><dd></code>标签定义。<code><dl></code>常用来定义词汇表。 <pre><code class="prism language-html"><dl> <dt>CPU</dt> <dd>中央处理器</dd> <dt>Memory</dt> <dd>内存</dd> <dt>Hard Disk</dt> <dd>硬盘</dd> </dl> </code></pre> <code><dt></code>和<code><dd></code>都是块级元素，<code><dd></code>默认会在<code><dt></code>下方缩进显示。上面代码的默认渲染结果如下。 <pre><code>CPU 中央处理器 Memory 内存 Hard Disk 硬盘 </code></pre> 多个术语（<code><dt></code>）对应一个解释（<code><dd></code>），或者多个解释（<code><dd></code>）对应一个术语（<code><dt></code>），都是合法的。 <pre><code class="prism language-html"><dl> <dt>A</dt> <dt>B</dt> <dd>C</dd> <dt>D</dt> <dd>E</dd> <dd>F</dd> </dl> </code></pre> 上面代码中，A和B有共同的解释C，而D有两个解释E和F。 <h2>链接标签</h2> 链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。 URL 是链接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。 <h3>1、<code><a></code></h3> 链接通过<code><a></code>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。 <pre><code class="prism language-html"><a href="https://www.jianshu.com/u/01d07de71a9a">LBJ辉简书</a> </code></pre> 上面代码就定义了一个超级链接。浏览器显示“维基百科”，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到href属性指定的网址。 <code><a></code>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。 <pre><code class="prism language-html"><a href="https://www.jianshu.com/u/01d07de71a9a"> <img src="LBJhui.jpg"> </a> </code></pre> 上面代码中，<code><a></code>标签内部就是一个图像。用户点击图像，就会跳转到指定网址。 <code><a></code>标签有如下属性。 （1）href href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。 上文已经给出了完整 URL 的例子，下面是锚点的例子。 <pre><code class="prism language-html"><a href="#LBJhui">LBJhui锚点</a> </code></pre> 上面代码中，href属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面LBJhui锚点所在的位置。 （2）hreflang hreflang属性给出链接指向的网址所使用的语言，纯粹是提示性的，没有实际功能。 <pre><code class="prism language-html"><a href="https://www.jianshu.com/u/01d07de71a9a" hreflang="en" >LBJ辉简书</a> </code></pre> 上面代码表明，href属性指向的网址的语言是英语。 该属性的值跟通用属性lang一样，语言代码可以参考《属性》一章的lang属性的介绍。 （3）title title属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。 <pre><code class="prism language-html"><a href="https://www.jianshu.com/u/01d07de71a9a" title="hello" >LBJ辉简书</a> </code></pre> 上面代码中，用户鼠标停留在链接上面，会出现文字提示hello。 （4）target target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<code><iframe></code>里面打开。 <pre><code class="prism language-html"><p><a href="http://foo.com" target="test">foo</a></p> <p><a href="http://bar.com" target="test">bar</a></p> </code></pre> 上面代码中，两个链接都在名叫test的窗口打开。首先点击链接foo，浏览器发现没有叫做test的窗口，就新建一个窗口，起名为test，在该窗口打开foo.com。然后，用户又点击链接bar，由于已经存在test窗口，浏览器就在该窗口打开bar.com，取代里面已经打开的foo.com。 target属性的值也可以是以下四个关键字之一。 <ul> <li>_self：当前窗口打开，这是默认值。</li> <li>_blank：新窗口打开。</li> <li>_parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<code><iframe></code>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。</li> <li>_top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。</li> </ul> <pre><code class="prism language-html"><a href="https://www.jianshu.com/u/01d07de71a9a" target="_blank" >LBJ辉简书</a> </code></pre> 上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字。 注意，使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。 （5）rel rel属性说明链接与当前页面的关系。 <pre><code class="prism language-html"><a href="help.html" rel="help">帮助</a> </code></pre> 上面代码的rel属性，说明链接是当前页面的帮助文档。 下面是一些常见的rel属性的值。 <ul> <li>alternate：当前文档的另一种形式，比如翻译。</li> <li>author：作者链接。</li> <li>bookmark：用作书签的永久地址。</li> <li>external：当前文档的外部参考文档。</li> <li>help：帮助链接。</li> <li>license：许可证链接。</li> <li>next：系列文档的下一篇。</li> <li>nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。</li> <li>noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源。</li> <li>noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。</li> <li>prev：系列文档的上一篇。</li> <li>search：文档的搜索链接。</li> <li>tag：文档的标签链接。</li> </ul> （6）referrerpolicy referrerpolicy属性用于精确设定点击链接时，浏览器发送 HTTP 头信息的Referer字段的行为。 该属性可以取下面八个值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。 其中，no-referrer表示不发送Referer字段，same-origin表示同源时才发送Referer字段，origin表示只发送源信息（协议+域名+端口）。其他几项的解释，请查阅 HTTP 文档。 （7）ping ping属性指定一个网址，用户点击的时候，会向该网址发出一个 POST 请求，通常用于跟踪用户的行为。 （8）type type属性给出链接 URL 的 MIME 类型，比如到底是网页，还是图像或文件。它也是纯粹提示性的属性，没有实际功能。 <pre><code class="prism language-html"><a href="LBJhui.jpg" type="image/jpeg" >LBJhui图片</a> </code></pre> 上面代码中，type属性提示这是一张图片。 （9）download download属性表明当前链接用于下载，而不是跳转到另一个 URL。 <pre><code class="prism language-html"><a href="LBJhui.txt" download>下载</a> </code></pre> 上面代码点击后，会出现下载对话框。 注意，download属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。 如果download属性设置了值，那么这个值就是下载的文件名。 <pre><code class="prism language-html"><a href="foo.exe" download="bar.exe" >点击下载</a> </code></pre> 上面代码中，下载文件的原始文件名是foo.exe。点击后，下载对话框提示的文件名是bar.exe。 注意，如果链接点击后，服务器的 HTTP 回应的头信息设置了Content-Disposition字段，并且该字段的值与download属性不一致，那么该字段优先，下载时将显示其设置的文件名。 download属性还有一个用途，就是有些地址不是真实网址，而是数据网址，比如data:开头的网址。这时，download属性可以为虚拟网址指定下载的文件名。 <pre><code class="prism language-html"><a href="data:,Hello%2C%20World!">点击</a> </code></pre> 上面链接点击后，会打开一个虚拟网页，上面显示Hello World!。 <pre><code class="prism language-html"><a href="data:,Hello%2C%20World!" download="hello.txt" >点击</a> </code></pre> 上面链接点击后，下载的hello.txt文件内容就是“Hello, World!”。 <h3>2、邮件链接</h3> 链接也可以指向一个邮件地址，使用mailto协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。 <pre><code class="prism language-html"><a href="mailto:lbjhui@qq.com">联系我们</a> </code></pre> 上面代码中，链接就指向邮件地址。点击后，浏览器会打开一个邮件地址，让你可以向lbjhui@qq.com.com发送邮件。 除了邮箱，邮件协议还允许指定其他几个邮件要素。 <ul> <li>subject：主题</li> <li>cc：抄送</li> <li>bcc：密送</li> <li>body：邮件内容</li> </ul> 使用方法是将这些邮件要素，以查询字符串的方式，附加在邮箱地址后面。 <pre><code class="prism language-html"><a href="mailto:foo@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body" >发送邮件</a> </code></pre> 上面代码中，邮件链接里面不仅包含了邮箱地址，还包含了cc、subject、body等邮件要素。这些要素的值需要经过 URL 转义，比如空格转成%20。 不指定邮箱也是允许的，就像下面这样。这时用户自己在邮件程序里面，填写想要发送的邮箱，通常用于邮件分享网页。 <pre><code class="prism language-html"><a href="mailto:">告诉朋友</a> </code></pre> <h3>3、电话链接</h3> 如果是手机浏览的页面，还可以使用tel协议，创建电话链接。用户点击该链接，会唤起电话，可以进行拨号。 <pre><code class="prism language-html"><a href="tel:13312345678">13312345678</a> </code></pre> 上面代码在手机中，点击链接会唤起拨号界面，可以直接拨打指定号码。 <h3>4、<code><link></code></h3> <h4>4.1、基本用法</h4> <code><link></code>标签主要用于将当前网页与相关的外部资源联系起来，通常放在<code><head></code>元素里面。最常见的用途就是加载 CSS 样式表。 <pre><code class="prism language-html"><link rel="stylesheet" type="text/css" href="theme.css"> </code></pre> 上面代码为网页加载样式表theme.css。 除了默认样式表，网页还可以加载替代样式表，即默认不生效、需要用户手动切换的样式表。 <pre><code class="prism language-html"><link href="default.css" rel="stylesheet" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" title="Fancy"> <link href="basic.css" rel="alternate stylesheet" title="Basic"> </code></pre> 上面代码中，default.css是默认样式表，默认就会生效。fancy.css和basic.css是替换样式表（rel=“alternate stylesheet”），默认不生效。title属性在这里是必需的，用来在浏览器菜单里面列出这些样式表的名字，供用户选择，以替代默认样式表。 <code><link></code>还可以加载网站的 favicon 图标文件。 <pre><code class="prism language-html"><link rel="icon" href="/favicon.ico" type="image/x-icon"> </code></pre> 手机访问时，网站通常需要提供不同分辨率的图标文件。 <pre><code class="prism language-html"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> </code></pre> 上面代码指定 iPhone 设备需要的114像素和72像素的图标。 <code><link></code>也用于提供文档的相关链接，比如下面是给出文档的 RSS Feed 地址。 <h4>4.2、rel 属性</h4> rel属性表示外部资源与当前文档之间的关系，是<code><link></code>标签的必需属性。它可以但不限于取以下值。 <ul> <li>alternate：文档的另一种表现形式的链接，比如打印版。</li> <li>author：文档作者的链接。</li> <li>dns-prefetch：要求浏览器提前执行指定网址的 DNS 查询。</li> <li>help：帮助文档的链接。</li> <li>icon：加载文档的图标文件。</li> <li>license：许可证链接。</li> <li>next：系列文档下一篇的链接。</li> <li>pingback：接收当前文档 pingback 请求的网址。</li> <li>preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。</li> <li>prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。</li> <li>preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。</li> <li>prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。</li> <li>prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。</li> <li>search：提供当前网页的搜索链接。</li> <li>stylesheet：加载一张样式表。</li> </ul> 下面是一些示例。 <pre><code class="prism language-html"> <link rel="author" href="humans.txt">  <link rel="license" href="copyright.html">  <link rel="alternate" href="https://es.example.com/" hreflang="es">  <link rel="me" href="https://google.com/profiles/someone" type="text/html"> <link rel="me" href="mailto:lbjhui@qq.com"> <link rel="me" href="sms:+15035550125">  <link rel="archives" href="http://example.com/archives/">  <link rel="index" href="http://example.com/article/">  <link rel="first" href="http://example.com/article/"> <link rel="last" href="http://example.com/article/?page=42"> <link rel="prev" href="http://example.com/article/?page=1"> <link rel="next" href="http://example.com/article/?page=3"> </code></pre> <h4>4.3、资源的预加载</h4> 某些情况下，你需要浏览器预加载某些资源，也就是先把资源缓存下来，等到使用的时候，就不用再从网上下载了，立即就能使用。预处理指令可以做到这一点。 预加载主要有下面五种类型。 <h5>（1）<code><link rel="preload"></code></h5> <code><link rel="preload"></code>告诉浏览器尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。当加载页面几秒钟后需要该资源时，它会很有用。下载后，浏览器不会对资源执行任何操作，脚本未执行，样式表未应用。它只是缓存，当其他东西需要它时，它立即可用。 <pre><code class="prism language-html"><link rel="preload" href="image.png" as="image"> </code></pre> rel="preload"除了优先级较高，还有两个优点：一是允许指定预加载资源的类型，二是允许onload事件的回调函数。下面是rel="preload"配合as属性，告诉浏览器预处理资源的类型，以便正确处理。 <pre><code class="prism language-html"><link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> </code></pre> 上面代码要求浏览器提前下载并缓存style.css和main.js。 as属性指定加载资源的类型，它的值一般有下面几种。 <ul> <li>“script”</li> <li>“style”</li> <li>“image”</li> <li>“media”</li> <li>“document”</li> </ul> 如果不指定as属性，或者它的值是浏览器不认识的，那么浏览器会以较低的优先级下载这个资源。 有时还需要type属性，进一步明确 MIME 类型。 <pre><code class="prism language-html"><link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> </code></pre> 上面代码要求浏览器提前下载视频文件，并且说明这是 MP4 编码。 下面是预下载字体文件的例子。 <pre><code class="prism language-html"><link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> </code></pre> 注意，所有预下载的资源，只是下载到浏览器的缓存，并没有执行。如果希望资源预下载后立刻执行，可以参考下面的写法。 <pre><code class="prism language-html"><link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'"> </code></pre> 上面代码中，onload指定的回调函数会在脚本下载完成后执行，立即插入页面。 <h5>（2）<code><link rel="prefetch"></code></h5> <code><link rel="prefetch"></code>的使用场合是，如果后续的页面需要某个资源，并且希望预加载该资源，以便加速页面渲染。该指令不是强制性的，优先级较低，浏览器不一定会执行。这意味着，浏览器可以不下载该资源，比如连接速度很慢时。 <pre><code class="prism language-html"><link rel="prefetch" href="https://www.jianshu.com/u/01d07de71a9a"> </code></pre> <h5>（3）<code><link rel="preconnect"></code></h5> <code><link rel="preconnect"></code>要求浏览器提前与某个域名建立 TCP 连接。当你知道，很快就会请求该域名时，这会很有帮助。 <pre><code class="prism language-html"><link rel="preconnect" href="https://www.jianshu.com/u/01d07de71a9a"> </code></pre> <h5>（4）<code><link rel="dns-prefetch"></code></h5> <code><link rel="dns-prefetch"></code>要求浏览器提前执行某个域名的 DNS 解析。 <pre><code class="prism language-html"><link rel="dns-prefetch" href="//example.com/"> </code></pre> <h5>（5）<code><link rel="prerender"></code></h5> <code><link rel="prerender"></code>要求浏览器加载某个网页，并且提前渲染它。用户点击指向该网页的链接时，就会立即呈现该页面。如果确定用户下一步会访问该页面，这会很有帮助。 <pre><code class="prism language-html"><link rel="prerender" href="https://www.jianshu.com/u/01d07de71a9a"> </code></pre> <h4>4.4、media 属性</h4> media属性给出外部资源生效的媒介条件。 <pre><code class="prism language-html"><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> </code></pre> 上面代码中，打印时加载print.css，移动设备访问时（设备宽度小于600像素）加载mobile.css。 下面是使用media属性实现条件加载的例子。 <pre><code class="prism language-html"><link rel="preload" as="image" href="map.png" media="(max-width: 600px)"> <link rel="preload" as="script" href="map.js" media="(min-width: 601px)"> </code></pre> 上面代码中，如果屏幕宽度在600像素以下，则只加载第一个资源，否则就加载第二个资源。 <h4>4.5、其他属性</h4> <code><link></code>标签的其他属性如下。 <ul> <li>crossorigin：加载外部资源的跨域设置。</li> <li>href：外部资源的网址。</li> <li>referrerpolicy：加载时Referer头信息字段的处理方法。</li> <li>as：rel="preload"或rel="prefetch"时，设置外部资源的类型。</li> <li>type：外部资源的 MIME 类型，目前仅用于rel="preload"或rel="prefetch"的情况。</li> <li>title：加载样式表时，用来标识样式表的名称。</li> <li>sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。</li> </ul> <h3>5、<code><script></code></h3> <code><script></code>用于加载脚本代码，目前主要是加载 JavaScript 代码。 <pre><code class="prism language-html"><script> console.log('hello world'); </script> </code></pre> 上面代码嵌入网页，会立即执行。 <code><script></code>也可以加载外部脚本，src属性给出外部脚本的地址。 <pre><code class="prism language-html"><script src="javascript.js"></script> </code></pre> 上面代码会加载javascript.js脚本文件，并执行。 type属性给出脚本的类型，默认是 JavaScript 代码，所以可省略。完整的写法其实是下面这样。 <pre><code class="prism language-html"><script type="text/javascript" src="javascript.js"></script> </code></pre> type属性也可以设成module，表示这是一个 ES6 模块，不是传统脚本。 <pre><code class="prism language-html"><script type="module" src="main.js"></script> </code></pre> 对于那些不支持 ES6 模块的浏览器，可以设置nomodule属性。支持 ES6 模块的浏览器，会不加载指定的脚本。这个属性通常与type="module"配合使用，作为老式浏览器的回退方案。 <pre><code class="prism language-html"><script type="module" src="main.js"></script> <script nomodule src="fallback.js"></script> </code></pre> <code><script></code>还有下面一些其他属性，大部分跟 JavaScript 语言有关，可以参考相关的 JavaScript 教程。 <ul> <li>async：该属性指定 JavaScript 代码为异步执行，不是造成阻塞效果，JavaScript 代码默认是同步执行。</li> <li>defer：该属性指定 JavaScript 代码不是立即执行，而是页面解析完成后执行。</li> <li>crossorigin：如果采用这个属性，就会采用跨域的方式加载外部脚本，即 HTTP 请求的头信息会加上origin字段。</li> <li>integrity：给出外部脚本的哈希值，防止脚本被篡改。只有哈希值相符的外部脚本，才会执行。</li> <li>nonce：一个密码随机数，由服务器在 HTTP 头信息里面给出，每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单，只有在白名单内的脚本才能执行。</li> <li>referrerpolicy：HTTP 请求的Referer字段的处理方法。</li> </ul> <h3>6、<code><noscript></code></h3> <code><noscript></code>标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容。 <pre><code class="prism language-html"><noscript> 您的浏览器不能执行 JavaScript 语言，页面无法正常显示。 </noscript> </code></pre> 上面这段代码，只有浏览器不能执行 JavaScript 代码时才会显示，否则就不会显示。 <h2>图像标签</h2> 图片是互联网的重要组成部分，让网页变得丰富多彩。本章介绍如何在网页插入图片。 <h3>1、<code><img></code></h3> <code><img></code>标签用于插入图片。它是单独使用的，没有闭合标签。 <pre><code class="prism language-html"><img src="LBJhui.jpg"> </code></pre> 上面代码在网页插入一张图片LBJhui.jpg。src属性指定图片的网址，上例是相对 URL，表示图片与网页在同一个目录。 <code><img></code>默认是一个行内元素，与前后的文字处在同一行。 <pre><code class="prism language-html"><p>Hello<img src="foo.jpg">World</p> </code></pre> 上面代码的渲染结果是，文字和图片在同一行显示。 图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。 <code><img></code>可以放在<code><a></code>标签内部，使得图片变成一个可以点击的链接。 <pre><code class="prism language-html"><a href="example.html"> <img src="foo.jpg"> </a> </code></pre> 上面代码中，图片可以像链接那样点击，点击后会产生跳转。 <h4>（1）alt 属性</h4> alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。 <pre><code class="prism language-html"><img src="foo.jpg" alt="示例图片"> </code></pre> 上面代码中，alt是图片的说明。图片下载失败时，浏览器会在图片位置，显示文字“示例图片”。 <h4>（2）width 属性，height 属性</h4> 图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。 <pre><code class="prism language-html"><img src="foo.jpg" width="400" height="300"> </code></pre> 上面代码中，width属性指定图片显示的宽度为400像素，height属性指定显示高度为300像素。 注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。 一种特殊情况是，width属性和height属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。举例来说，图片大小是 800像素 x 800像素，width属性设置成200，那么浏览器会自动将height设成200。 <h4>（3）srcset，sizes</h4> 详见下文的《响应式图像》部分。 <h4>（4）referrerpolicy</h4> <code><img></code>导致的图片加载的 HTTP 请求，默认会带有Referer的头信息。referrerpolicy属性对这个行为进行设置。 <h4>（5）crossorigin</h4> 有时，图片和网页属于不同的网站，网页加载图片就会导致跨域请求，对方服务器可能要求跨域认证。crossorigin属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。 简单说，只要打开了这个属性，HTTP 请求的头信息里面，就会加入origin字段，给出请求发出的域名，不打开这个属性就不加。 一旦打开该属性，它可以设为两个值。 <ul> <li>anonymous：跨域请求不带有用户凭证（通常是 Cookie）。</li> <li>use-credentials：跨域请求带有用户凭证。</li> </ul> 下面是一个例子。 <pre><code class="prism language-html"><img src="foo.jpg" crossorigin="anonymous"> </code></pre> crossorigin属性如果省略值的部分，则等同于anonymous。 <pre><code class="prism language-html"><img src="foo.jpg" crossorigin> </code></pre> <h4>（6）loading</h4> 浏览器的默认行为是，只要解析到<code><img></code>标签，就开始加载图片。对于很长的网页，这样做很浪费带宽，因为用户不一定会往下滚动，一直看到网页结束。用户很可能是点开网页，看了一会就关掉了，那些不在视口的图片加载的流量，就都浪费了。 loading属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载，这样就节省了带宽。 loading属性可以取以下三个值。 <ul> <li>auto：浏览器默认行为，等同于不使用loading属性。</li> <li>lazy：启用懒加载。</li> <li>eager：立即加载资源，无论它在页面上的哪个位置。</li> </ul> <pre><code class="prism language-html"><img src="image.png" loading="lazy" alt="…" width="200" height="200"> </code></pre> 由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。 <h3>2、<code><figure></code>，<code><figcaption></code></h3> <code><figure></code>标签可以理解是一个图像区块，将图像和相关信息封装在一起。<code><figcaption></code>是它的可选的子元素，表示图像的标题。 <pre><code class="prism language-html"><figure> <img src="https://example.com/foo.jpg"> <figcaption>示例图片</figcaption> </figure> </code></pre> 除了图像，<code><figure></code>还可以封装引言、代码、诗歌等等。它等于是一个将主体内容与附加信息，封装在一起的语义容器。 <h3>3、响应式图像</h3> 网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”（responsive web design）。响应式设计的网页图像，就是“响应式图像”（responsive image）。 响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。这里只介绍语义性最好的 HTML 方法，浏览器原生支持。 <h4>3.1、问题的由来</h4> 我们知道，<code><img></code>标签用于插入网页图像，所有情况默认插入的都是同一张图像。 <pre><code class="prism language-html"><img src="foo.jpg"> </code></pre> 上面代码在桌面端和手机上，插入的都是图像文件foo.jpg。 这种处理方法固然简单，但是有三大弊端。 （1）体积 一般来说，桌面端显示的是大尺寸的图像，文件体积较大。手机的屏幕较小，只需要小尺寸的图像，可以节省带宽，加速网页渲染。 （2）像素密度 桌面显示器一般是单倍像素密度，而手机的显示屏往往是多倍像素密度，即显示时多个像素合成为一个像素，这种屏幕称为 Retina 屏幕。图像文件很可能在桌面端很清晰，放到手机上会有点模糊，因为图像没有那么高的像素密度，浏览器自动把图像的每个像素复制到周围像素，满足像素密度的要求，导致图像的锐利度有所下降。 （3）视觉风格 桌面显示器的面积较大，图像可以容纳更多细节。手机的屏幕较小，许多细节是看不清的，需要突出重点。 <h4>3.2、srcset属性</h4> 为了解决上面这些问题，HTML 语言提供了一套完整的解决方案。首先，<code><img></code>标签引入了srcset属性。 srcset属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符。请看下面的例子 <pre><code class="prism language-html"><img srcset="foo-320w.jpg, foo-480w.jpg 1.5x, foo-640w.jpg 2x" src="foo-640w.jpg"> </code></pre> 上面代码中，srcset属性给出了三个图像 URL，适应三种不同的像素密度。 图像 URL 后面的像素密度描述符，格式是像素密度倍数 + 字母x。1x表示单倍像素密度，可以省略。浏览器根据当前设备的像素密度，选择需要加载的图像。 如果srcset属性都不满足条件，那么就加载src属性指定的默认图像。 <h4>3.3、sizes属性</h4> 像素密度的适配，只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕，显示不同大小的图像，srcset属性就不够用了，必须搭配sizes属性。 第一步，srcset属性列出所有可用的图像。 <pre><code class="prism language-html"><img srcset="foo-160.jpg 160w, foo-320.jpg 320w, foo-640.jpg 640w, foo-1280.jpg 1280w" src="foo-1280.jpg"> </code></pre> 上面代码中，srcset属性列出四张可用的图像，每张图像的 URL 后面是一个空格，再加上宽度描述符。 宽度描述符就是图像原始的宽度，加上字符w。上例的四种图片的原始宽度分别为160像素、320像素、640像素和1280像素。 第二步，sizes属性列出不同设备的图像显示宽度。 sizes属性的值是一个逗号分隔的字符串，除了最后一部分，前面每个部分都是一个放在括号里面的媒体查询表达式，后面是一个空格，再加上图像的显示宽度。 <pre><code class="prism language-html"><img srcset="foo-160.jpg 160w, foo-320.jpg 320w, foo-640.jpg 640w, foo-1280.jpg 1280w" sizes="(max-width: 440px) 100vw, (max-width: 900px) 33vw, 254px" src="foo-1280.jpg"> </code></pre> 上面代码中，sizes属性给出了三种屏幕条件，以及对应的图像显示宽度。宽度不超过440像素的设备，图像显示宽度为100%；宽度441像素到900像素的设备，图像显示宽度为33%；宽度900像素以上的设备，图像显示宽度为254px。 第三步，浏览器根据当前设备的宽度，从sizes属性获得图像的显示宽度，然后从srcset属性找出最接近该宽度的图像，进行加载。 假定当前设备的屏幕宽度是480px，浏览器从sizes属性查询得到，图片的显示宽度是33vw（即33%），等于160px。srcset属性里面，正好有宽度等于160px的图片，于是加载foo-160.jpg。 如果省略sizes属性，那么浏览器将根据实际的图像显示宽度，从srcset属性选择最接近的图片。一旦使用sizes属性，就必须与srcset属性搭配使用，单独使用sizes属性是无效的。 <h3>4、<code><picture></code></h3> <h4>4.1、响应式用法</h4> <code><img></code>标签的srcset属性和sizes属性分别解决了像素密度和屏幕大小的适配，但如果要同时适配不同像素密度、不同大小的屏幕，就要用到<code><picture></code>标签。 <code><picture></code>是一个容器标签，内部使用<code><source></code>和<code><img></code>，指定不同情况下加载的图像。 <pre><code class="prism language-html"><picture> <source media="(max-width: 500px)" srcset="cat-vertical.jpg"> <source media="(min-width: 501px)" srcset="cat-horizontal.jpg"> <img src="cat.jpg" alt="cat"> </picture> </code></pre> 上面代码中，<code><picture></code>标签内部有两个<code><source></code>标签和一个<code><img></code>标签。 <code><picture></code>内部的<code><source></code>标签，主要使用media属性和srcset属性。media属性给出媒体查询表达式，srcset属性就是<code><img></code>标签的srcset属性，给出加载的图像文件。sizes属性其实这里也可以用，但由于有了media属性，就没有必要了。 浏览器按照<code><source></code>标签出现的顺序，依次判断当前设备是否满足media属性的媒体查询表达式，如果满足就加载srcset属性指定的图片文件，并且不再执行后面的<code><source></code>标签和<code><img></code>标签。 <code><img></code>标签是默认情况下加载的图像，用来满足上面所有<code><source></code>都不匹配的情况，或者不支持<code><picture></code>的老式浏览器。 上面例子中，设备宽度如果不超过500px，就加载竖屏的图像，否则加载横屏的图像。 下面给出一个例子，同时考虑屏幕尺寸和像素密度的适配。 <pre><code class="prism language-html"><picture> <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x" media="(min-width: 990px)"> <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" media="(min-width: 750px)"> <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" alt="Shopify Merchant, Corrine Anestopoulos"> </picture> </code></pre> 上面代码中，<code><source></code>标签的media属性给出屏幕尺寸的适配条件，每个条件都用srcset属性，再给出两种像素密度的图像 URL。 <h4>4.2、图像格式的选择</h4> 除了响应式图像，<code><picture></code>标签还可以用来选择不同格式的图像。比如，如果当前浏览器支持 Webp 格式，就加载这种格式的图像，否则加载 PNG 图像。 <pre><code class="prism language-html"><picture> <source type="image/svg+xml" srcset="logo.xml"> <source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="ACME Corp"> </picture> </code></pre> 上面代码中，<code><source></code>标签的type属性给出图像的 MIME 类型，srcset是对应的图像 URL。 浏览器按照<code><source></code>标签出现的顺序，依次检查是否支持type属性指定的图像格式，如果支持就加载图像，并且不再检查后面的<code><source></code>标签了。上面例子中，图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。 <h2>表格标签</h2> 表格（table）以行（row）和列（column）的形式展示数据。 <h3>1、<code><table></code>，<code><caption></code></h3> <code><table></code>是一个块级容器标签，所有表格内容都要放在这个标签里面。 <pre><code class="prism language-html"><table> ... ... </table> </code></pre> <code><caption></code>总是<code><table></code>里面的第一个子元素，表示表格的标题。该元素是可选的。 <pre><code class="prism language-html"><table> <caption>示例表格</caption> </table> </code></pre> <h3>2、<code><thead></code>、<code><tbody></code>、<code><tfoot></code></h3> <code><thead></code>、<code><tbody></code>、<code><tfoot></code>都是块级容器元素，且都是<code><table></code>的一级子元素，分别表示表头、表体和表尾。 <pre><code class="prism language-html"><table> <thead>... ...</thead> <tbody>... ...</tbody> <tfoot>... ...</tfoot> </table> </code></pre> 这三个元素都是可选的。如果使用了<code><thead></code>，那么<code><tbody></code>和<code><tfoot></code>一定在<code><thead></code>的后面。如果使用了<code><tbody></code>，那么<code><tfoot></code>一定在<code><tbody></code>后面。 大型表格内部可以使用多个<code><tbody></code>，表示连续的多个部分。 <h3>3、<code><colgroup></code>，<code><col></code></h3> <code><colgroup></code>是<code><table></code>的一级子元素，用来包含一组列的定义。<code><col></code>是<code><colgroup></code>的子元素，用来定义表格的一列。 <pre><code class="prism language-html"><table> <colgroup> <col> <col> <col> </colgroup> </table> </code></pre> 上面代码表明表格有3列。 <code><col></code>不仅是一个单独使用的标签，没有结束标志，而且还是一个空元素，没有子元素。它的主要作用，除了申明表格结构，还可以为表格附加样式。 <pre><code class="prism language-html"><table> <colgroup> <col class="c1"> <col class="c2"> <col class="c3"> </colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </code></pre> 上面代码中，<code><colgroup></code>声明表格有三列，每一列有自己的 class，可以使用 CSS 针对每个 class 设定样式，会对整个表格生效。 <code><col></code>有一个span属性，值为正整数，默认为1。如果大于1，就表示该列的宽度包含连续的多列。 <pre><code class="prism language-html"><table> <colgroup> <col> <col span="2"> <col> </colgroup> </table> </code></pre> 上面代码中，表格的表头定义了3列，实际数据有4列。表头的第2列会连续跨2列。 <h3>4、<code><tr></code></h3> <code><tr></code>标签表示表格的一行（table row）。如果表格有<code><thead></code>、<code><tbody></code>、<code><tfoot></code>，那么<code><tr></code>就放在这些容器元素之中，否则直接放在<code><table></code>的下一级。 <pre><code class="prism language-html"><table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table> </code></pre> 上面代码表示表格共有3行。 <h3>5、<code><th></code>，<code><td></code></h3> <code><th></code>和<code><td></code>都用来定义表格的单元格。其中，<code><th></code>是标题单元格，<code><td></code>是数据单元格。 <pre><code class="prism language-html"><table> <tr> <th>学号</th><th>姓名</th> </tr> <tr> <td>001</td><td>张三</td> </tr> <tr> <td>002</td><td>李四</td> </tr> </table> </code></pre> 上面代码中，表格一共有三行。第一行是标题行，所以使用<code><th></code>；第二行和第三行是数据行，所以使用<code><td></code>。 <h4>（1）colspan属性，rowspan属性</h4> 单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。 <pre><code class="prism language-html"><table> <tr> <td colspan="2">A</td><td>B</td> </tr> <tr> <td>A</td><td>B</td><td>C</td> </tr> </table> </code></pre> 上面代码中，第一行的第一个单元格会跨两列。 <h4>（2）headers属性</h4> 如果表格很大，单元格很多，源码里面会看不清，哪个单元格对应哪个表头，这时就可以使用headers属性。 <pre><code class="prism language-html"><table> <tr> <th id="no">学号</th><th id="names">姓名</th> </tr> <tr> <td headers="no">001</td><td headers="names">张三</td> </tr> <tr> <td headers="no">002</td><td headers="names">李四</td> </tr> </table> </code></pre> 上面代码中，标题栏的<code><th></code>设置了id属性，后面的<code><td></code>单元格的headers属性就对应这些id属性的值，因此就能看出来这些单元格对应哪个标题栏。 headers属性的值总是对应<code><th></code>标签的id属性的值。由于一个单元格可以对应多个标题栏（跨行的情况），所以headers属性可以是一个空格分隔的字符串，对应多个id属性的值。 <h4>（3）scope属性</h4> scope属性只有<code><th></code>标签支持，一般不在<code><td></code>标签使用，表示该<code><th></code>单元格到底是栏的标题，还是列的标题。 <pre><code class="prism language-html"><table> <tr> <th scope="col">姓名</th> <th scope="col">学号</th> <th scope="col">性别</th> </tr> <tr> <th scope="row">张三</th> <td>001</td> <td>男</td> </tr> <tr> <th scope="row">李四</th> <td>002</td> <td>男</td> </tr> </table> </code></pre> 上面代码中，第一行的标题栏都是列标题，所以<code><th></code>的scope属性为col，第二行和第三行的第一列是行标题，所以<code><th></code>标签的scope属性为row。 scope属性可以取下面这些值。 row：该行的所有单元格，都与该标题单元格相关。 col：该列的所有单元格，都与该标题单元格相关。 rowgroup：多行组成的一个行组的所有单元格，都与该标题单元格相关。 colgroup：多列组成的一个列组的所有单元格，都与该标题单元格相关。 auto：默认值，表示由浏览器自行决定。 <h2>iframe</h2> 此标签用于在网页里面嵌入其他网页。 <h3>1、基本用法</h3> <code><iframe></code>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<code><iframe></code>，就会显示内部的子元素。 <pre><code><iframe src="https://www.example.com" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <a href="https://www.jianshu.com/u/01d07de71a9a">点击打开嵌入页面</a> </iframe> </code></pre> 上面的代码在当前网页嵌入https://www.jianshu.com/u/01d07de71a9a ，显示区域的宽度是100%，高度是500像素。如果当前浏览器不支持<code><iframe></code>，则会显示一个链接，让用户点击。 浏览器普遍支持<code><iframe></code>，所以内部的子元素可以不写。 <code><iframe></code>的属性如下。 <ul> <li>allowfullscreen：允许嵌入的网页全屏显示，需要全屏 API 的支持，请参考相关的 JavaScript 教程。</li> <li>frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。</li> <li>src：嵌入的网页的 URL。</li> <li>width：显示区域的宽度。</li> <li>height：显示区域的高度。</li> <li>sandbox：设置嵌入的网页的权限，详见下文。</li> <li>importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high表示高优先级，low表示低优先级，auto表示由浏览器自行决定。</li> <li>name：内嵌窗口的名称，可以用于<code><a></code>、<code><form></code>、<code><base></code>的target属性。</li> <li>referrerpolicy：请求嵌入网页时，HTTP 请求的Referer字段的设置。参见<code><a></code>标签的介绍。</li> </ul> <h3>2、sandbox 属性</h3> 嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。为了限制<code><iframe></code>的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。 sandbox可以当作布尔属性使用，表示打开所有限制。 <pre><code class="prism language-html"><iframe src="https://www.jianshu.com/u/01d07de71a9a" sandbox> </iframe> </code></pre> sandbox属性可以设置具体的值，表示逐项打开限制。未设置某一项，就表示不具有该权限。 <ul> <li>allow-forms：允许提交表单。</li> <li>allow-modals：允许提示框，即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。</li> <li>allow-popups：允许嵌入的网页使用window.open()方法弹出窗口。</li> <li>allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。</li> <li>allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。</li> <li>allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。</li> <li>allow-presentation：允许嵌入的网页使用 Presentation API。</li> <li>allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。</li> <li>allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。</li> <li>allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过</li> <li>Storage Access API 访问父窗口的储存。</li> <li>allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。</li> <li>allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。</li> <li>allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。</li> </ul> 注意，不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。 <h3>3、loading 属性</h3> <code><iframe></code>指定的网页会立即加载，有时这不是希望的行为。<code><iframe></code>滚动进入视口以后再加载，这样会比较节省带宽。 loading属性可以触发<code><iframe></code>网页的懒加载。该属性可以取以下三个值。 <ul> <li>auto：浏览器的默认行为，与不使用loading属性效果相同。</li> <li>lazy：<code><iframe></code>的懒加载，即将滚动进入视口时开始加载。</li> <li>eager：立即加载资源，无论在页面上的位置如何。</li> </ul> <pre><code class="prism language-html"><iframe src="https://www.jianshu.com/u/01d07de71a9a" loading="lazy"></iframe> </code></pre> 上面代码会启用<code><iframe></code>的懒加载。 有一点需要注意，如果<code><iframe></code>是隐藏的，则loading属性无效，将会立即加载。只要满足以下任一个条件，Chrome 浏览器就会认为<code><iframe></code>是隐藏的。 <code><iframe></code>的宽度和高度为4像素或更小。 样式设为display: none或visibility: hidden。 使用定位坐标为负X或负Y，将<code><iframe></code>放置在屏幕外。 <h2>表单标签</h2> 表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。 表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。 <h3>1、<code><form></code></h3> <h4>1.1、简介</h4> <code><form></code>标签用来定义一个表单，所有表单内容放到这个容器元素之中。 <pre><code class="prism language-html"><form>  </form> </code></pre> 上面代码就是表单的基本形式。 下面是一个比较常见的例子。 <pre><code class="prism language-html"><form action="https://example.com/api" method="post"> <label for="POST-name">用户名：</label> <input id="POST-name" type="text" name="user"> <input type="submit" value="提交"> </form> </code></pre> 上面代码就是一个表单，一共包含三个控件：一个<code><label></code>标签，一个文本输入框，一个提交按钮。其中，文本输入框的name属性是user，表示将向服务器发送一个键名为user的键值对，键值就是这个控件的value属性，等于用户输入的值。 用户在文本输入框里面，输入用户名，比如foobar，然后点击提交按钮，浏览器就会向服务器https://example.com/api发送一个 POST 请求，发送user=foobar这样一段数据。 <code><form></code>有以下属性。 <ul> <li>accept-charset：服务器接受的字符编码列表，使用空格分隔，默认与网页编码相同。</li> <li>action：服务器接收数据的 URL。</li> <li>autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off（不自动填写）和on（自动填写）。</li> <li>method：提交数据的 HTTP 方法，可能的值有post（表单数据作为 HTTP 数据体发送），get（表单数据作为 URL 的查询字符串发送），dialog（表单位于<code><dialog></code>内部使用）</li> <li>enctype：当method属性等于post时，该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded（默认值），multipart/form-data（文件上传的情况），text/plain。</li> <li>name：表单的名称，应该在网页中是唯一的。注意，如果一个控件没有设置name属性，那么这个控件的值就不会作为键值对，向服务器发送。</li> <li>novalidate：布尔属性，表单提交时是否取消验证。</li> <li>target：在哪个窗口展示服务器返回的数据，可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<code><iframe></code>标签的name属性（即表单返回结果展示在<code><iframe></code>窗口）。</li> </ul> <h4>1.2、encrypt 属性</h4> <code><form></code>表单的encrypt属性，指定了采用 POST 方法提交数据时，浏览器给出的数据的 MIMI 类型。该属性可以取以下值。 <h5>（1）application/x-www-form-urlencoded</h5> application/x-www-form-urlencoded是默认类型，控件名和控件值都要转义（空格转为+号，非数字和非字母转为%HH的形式，换行转为CR LF），控件名和控件值之间用=分隔。控件按照出现顺序排列，控件之间用&分隔。 <h5>（2）multipart/form-data</h5> multipart/form-data主要用于文件上传。这个类型上传大文件时，会将文件分成多块传送，每一块的 HTTP 头信息都有Content-Disposition属性，值为form-data，以及一个name属性，值为控件名。 Content-Disposition: form-data; name=“mycontrol” 下面是上传文件的表单。 <pre><code class="prism language-html"><form action="https://example.com/api" enctype="multipart/form-data" method="post"> 用户名：<input type="text" name="submit-name"><br> 文件：<input type="file" name="files"><br> <input type="submit" value="上传"> <input type="reset" value="清除"> </form> </code></pre> 上面代码中，输入用户名Larry，选中一个file1.txt文件，然后点击“上传”。浏览器发送的实际数据如下。 <pre><code class="prism language-html">Content-Type: multipart/form-data; boundary=--AaB03x --AaB03x Content-Disposition: form-data; name="submit-name" Larry --AaB03x Content-Disposition: form-data; name="files"; filename="file1.txt" Content-Type: text/plain ... contents of file1.txt ... --AaB03x-- </code></pre> 上面代码中，浏览器将这个表单发成多个数据块。最上面使用Content-Type字段告诉服务器，数据格式是multipart/form-data（即多个数据块），每个数据块的分隔标志是–AaB03x。每个数据块的第一行是Content-Disposition，其中的name字段表示这个数据块的控件名，数据体则是该控件的数据值，比如第一个数据块的name属性是submit-name控件，数据体是该控件的值Larry。第二个数据块是控件files，由于该控件是上传文件，所以还要用filename属性给出文件名file1.txt，数据体是file1.txt的内容。 <h3>2、<code><fieldset></code>，<code><legend></code></h3> <code><fieldset></code>标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。 <pre><code class="prism language-html"><form> <fieldset> <p>年龄：<input type="text" name="age"></p> <p>性别：<input type="text" name="gender"></p> </fieldset> </form> </code></pre> 上面代码中，两个输入框是一组，它们的外面会显示一个方框。 <code><fieldset></code>有以下属性。 <ul> <li>disabled：布尔属性，一旦设置会使得<code><fieldset></code>内部包含的控件都不可用，都变成灰色状态。</li> <li>form：指定控件组所属的<code><form></code>，它的值等于<code><form></code>的id属性。</li> <li>name：该控件组的名称。</li> </ul> <code><legend></code>标签用来设置<code><fieldset></code>控件组的标题，通常是<code><fieldset></code>内部的第一个元素，会嵌入显示在控件组的上边框里面。 <pre><code class="prism language-html"><fieldset> <legend>学生情况登记</legend> <p>年龄：<input type="text" name="age"></p> <p>性别：<input type="text" name="gender"></p> </fieldset> </code></pre> 上面代码中，这个控件组的标题会，嵌入显示在<code><fieldset></code>的上边框。 <h3>3、<code><label></code></h3> <code><label></code>标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。 <pre><code class="prism language-html"><label for="user">用户名：</label> <input type="text" name="user" id="user"> </code></pre> 上面代码中，输入框前面会有文字说明“用户名：”。 <code><label></code>的一大优势是增加了控件的可用性。有些控件比较小（比如单选框），不容易点击，那么点击对应的<code><label></code>标签，也能选中该控件。点击<code><label></code>，就相当于控件本身的click事件。 <code><label></code>的for属性关联相对应的控件，它的值是对应控件的id属性。所以，控件最好设置id属性。 控件也可以放在<code><label></code>之中，这时不需要for属性和id属性。 <pre><code class="prism language-html"><label>用户名： <input type="text" name="user"> </label> </code></pre> <code><label></code>的属性如下。 <ul> <li>for：关联控件的id属性。</li> <li>form：关联表单的id属性。设置了该属性后，<code><label></code>可以放置在页面的任何位置，否则只能放在<code><form></code>内部。</li> </ul> 一个控件可以有多个关联的<code><label></code>标签。 <pre><code class="prism language-html"><label for="username">用户名：</label> <input type="text" name="username"> <label for="username"><abbr title="required">*</abbr></label> </code></pre> 上面代码中，有两个关联的<code><label></code>。 <h3>4、<code><input></code></h3> <h4>4.1、简介</h4> <code><input></code>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。 它有多种类型，取决于type属性的值，默认值是text，表示一个输入框。 <pre><code class="prism language-html"><input>  <input type="text"> </code></pre> 上面代码会生成一个单行的输入框，用户可以在里面输入文本。 <code><input></code>的属性非常多，有些属性是某个类型专用的，放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。 <ul> <li>autofocus：布尔属性，是否在页面加载时自动获得焦点。</li> <li>disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。</li> <li>form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<code><form></code>内部。</li> <li>list：关联的<code><datalist></code>的id属性，设置该控件相关的数据列表，详见后文。</li> <li>name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。</li> <li>readonly：布尔属性，是否为只读。</li> <li>required：布尔属性，是否为必填。</li> <li>type：控件类型，详见下文。</li> <li>value：控件的值。</li> </ul> <h4>4.2、类型</h4> type属性决定了<code><input></code>的形式。该属性可以取以下值。 <h5>（1）text</h5> type="text"是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。 <pre><code class="prism language-html"><input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10"> </code></pre> text输入框有以下配套属性。 <ul> <li>maxlength：可以输入的最大字符数，值为一个非负整数。</li> <li>minlength：可以输入的最小字符数，值为一个非负整数，且必须小于maxlength。</li> <li>pattern：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成pattern="[a-z]{4,8}"。</li> <li>placeholder：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失。</li> <li>readonly：布尔属性，表示该输入框是只读的，用户只能看，不能输入。</li> <li>size：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。</li> <li>spellcheck：是否对用户输入启用拼写检查，可能的值为true或false。</li> </ul> <h5>（2）search</h5> type="search"是一个用于搜索的文本输入框，基本等同于type=“text”。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。 下面是一个例子。 <pre><code class="prism language-html"><form> <input type="search" id="mySearch" name="q" placeholder="输入搜索词……" required> <input type="submit" value="搜索"> </form> </code></pre> <h5>（3）button</h5> type="button"是没有默认行为的按钮，通常脚本指定click事件的监听函数来使用。 <pre><code class="prism language-html"><input type="button" value="点击"> </code></pre> 建议尽量不使用这个类型，而使用<code><button></code>标签代替，一则语义更清晰，二则<code><button></code>标签内部可以插入图片或其他 HTML 代码。 <h5>（4）submit</h5> type="submit"是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。 <pre><code class="prism language-html"><input type="submit" value="提交"> </code></pre> 如果不指定value属性，浏览器会在提交按钮上显示默认的文字，通常是Submit。 该类型有以下配套属性，用来覆盖<code><form></code>标签的相应设置。 <ul> <li>formaction：提交表单数据的服务器 URL。</li> <li>formenctype：表单数据的编码类型。</li> <li>formmethod：提交表单使用的 HTTP 方法（get或post）。</li> <li>formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。</li> <li>formtarget：收到服务器返回的数据后，在哪一个窗口显示。</li> </ul> <h5>（5）image</h5> type="image"表示将一个图像文件作为提交按钮，行为和用法与type="submit"完全一致。 <pre><code class="prism language-html"><input type="image" alt="登陆" src="login-button.png"> </code></pre> 上面代码中，图像文件是一个可以点击的按钮，点击后会提交数据到服务器。 该类型有以下配套属性。 <ul> <li>alt：图像无法加载时显示的替代字符串。</li> <li>src：加载的图像 URL。</li> <li>height：图像的显示高度，单位为像素。</li> <li>width：图像的显示宽度，单位为像素。</li> <li>formaction：提交表单数据的服务器 URL。</li> <li>formenctype：表单数据的编码类型。</li> <li>formmethod：提交表单使用的 HTTP 方法（get或post）。</li> <li>formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。</li> <li>formtarget：收到服务器返回的数据后，在哪一个窗口显示。</li> </ul> 用户点击图像按钮提交时，会额外提交两个参数x和y到服务器，表示鼠标的点击位置，比如x=52&y=55。x是横坐标，y是纵坐标，都以图像左上角作为原点(0, 0)。如果图像按钮设置了name属性，比如name=“position”，那么将以该值作为坐标的前缀，比如position.x=52&position.y=55。这个功能通常用来地图类型的操作，让服务器知道用户点击了地图的哪个部分。 <h5>（6）reset</h5> type="reset"是一个重置按钮，用户点击以后，所有表格控件重置为初始值。 <pre><code class="prism language-html"><input type="reset" value="重置"> </code></pre> 如果不设置value属性，浏览器会在按钮上面加上默认文字，通常是Reset。 这个控件用处不大，用户点错了还会使得所有已经输入的值都被重置，建议不要使用。 <h5>（7）checkbox</h5> type="checkbox"是复选框，允许选择或取消选择该选项。 <pre><code class="prism language-html"><input type="checkbox" name="agreement" checked> <label for="agreement">是否同意</label> </code></pre> 上面代码会在文字前面，显示一个可以点击的选择框，点击可以选中，再次点击可以取消。上面代码中，checked属性表示默认选中。 value属性的默认值是on。也就是说，如果没有设置value属性，以上例来说，选中复选框时，会提交agreement=on。如果没有选中，提交时不会有该项。 多个相关的复选框，可以放在<code><fieldset></code>里面。 <pre><code class="prism language-html"><fieldset> <legend>你的兴趣</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding"> <label for="coding">编码</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">音乐</label> </div> </fieldset> </code></pre> 上面代码中，如果用户同时选中两个复选框，提交的时候就会有两个name属性，比如interest=coding&interest=music。 <h5>（8）radio</h5> type="radio"是单选框，表示一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。 <pre><code class="prism language-html"><fieldset> <legend>性别</legend> <div> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> </div> <div> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </div> </fieldset> </code></pre> 上面代码中，性别只能在两个选项之中，选择一项。 注意，多个单选框的name属性的值，应该都是一致的。提交到服务器的就是选中的那个值。 该类型的配套属性如下。 <ul> <li>checked：布尔属性，表示是否默认选中当前项。</li> <li>value：用户选中该项时，提交到服务器的值，默认为on’。</li> </ul> <h5>（9）email</h5> type="email"是一个只能输入电子邮箱的文本输入框。表单提交之前，浏览器会自动验证是否符合电子邮箱的格式，如果不符合就会显示提示，无法提交到服务器。 <pre><code class="prism language-html"><input type="email" pattern=".+@foobar.com" size="30" required> </code></pre> 上面代码会生成一个必填的文本框，只能输入后缀为foobar.com的邮箱地址。 该类型有一个multiple的布尔属性，一旦设置，就表示该输入框可以输入多个逗号分隔的电子邮箱。 <pre><code class="prism language-html"><input id="emailAddress" type="email" multiple required> </code></pre> 注意，如果同时设置了multiple属性和required属性，零个电子邮箱是允许的，也就是该输入框允许为空。 该类型的配套属性如下。 <ul> <li>maxlength：可以输入的最大字符数。</li> <li>minlength：可以输入的最少字符数。</li> <li>multiple：布尔属性，是否允许输入多个以逗号分隔的电子邮箱。</li> <li>pattern：输入必须匹配的正则表达式。</li> <li>placeholder：输入为空时的显示文本。</li> <li>readonly：布尔属性，该输入框是否只读。</li> <li>size：一个非负整数，表示输入框的显示长度为多少个字符。</li> <li>spellcheck：是否对输入内容启用拼写检查，可能的值为true或false。</li> </ul> 该类型还可以搭配<code><datalist></code>标签，提供输入的备选项。 <pre><code class="prism language-html"><input type="email" size="40" list="defaultEmails"> <datalist id="defaultEmails"> <option value="jbond007@mi6.defence.gov.uk"> <option value="jbourne@unknown.net"> <option value="nfury@shield.org"> <option value="tony@starkindustries.com"> <option value="hulk@grrrrrrrr.arg"> </datalist> </code></pre> 上面代码中，输入焦点进入输入框以后，会显示一个下拉列表，里面有五个参考项，供用户参考。 <h5>（10）password</h5> type="password"是一个密码输入框。用户的输入会被遮挡，字符通常显示星号<code>（*）</code>或点<code>（·）</code>。 <pre><code class="prism language-html"><input type="password" id="pass" name="password" minlength="8" required> </code></pre> 浏览器对该类型输入框的显示，会有所差异。一种常见的处理方法是，用户每输入一个字符，先在输入框里面显示一秒钟，然后再遮挡该字符。 如果用户输入内容包含换行符（U+000A）和回车符（U+000D），浏览器会自动将这两个字符过滤掉。 该类型的配套属性如下。 <ul> <li>maxlength：可以输入的最大字符数。</li> <li>minlength：可以输入的最少字符数。</li> <li>pattern：输入必须匹配的正则表达式。</li> <li>placeholder：输入为空时的显示文本。</li> <li>readonly：布尔属性，该输入框是否只读。</li> <li>size：一个非负整数，表示输入框的显示长度为多少个字符。</li> <li>autocomplete：是否允许自动填充，可能的值有on（允许自动填充）、off（不允许自动填充）、current-password（填入当前网站保存的密码）、new-password（自动生成一个随机密码）。</li> <li>inputmode：允许用户输入的数据类型，可能的值有none（不使用系统输入法）、text（标准文本输入）、decimal（数字，包含小数）、numeric（数字0-9）等。</li> </ul> <h5>（11）file</h5> type="file"是一个文件选择框，允许用户选择一个或多个文件，常用于文件上传功能。 <pre><code class="prism language-html"><input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </code></pre> 该类型有以下属性。 <ul> <li>accept：允许选择的文件类型，使用逗号分隔，可以使用 MIME 类型（比如image/jpeg），也可以使用后缀名（比如.doc），还可以使用audio/（任何音频文件）、video/（任何视频文件）、image/*（任何图像文件）等表示法。</li> <li>capture：用于捕获图像或视频数据的源，可能的值有user（面向用户的摄像头或麦克风），environment（外接的摄像头或麦克风）。</li> <li>multiple：布尔属性，是否允许用户选择多个文件。</li> </ul> <h5>（12）hidden</h5> type="hidden"是一个不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交。 <pre><code class="prism language-html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"> </code></pre> 上面这个控件，页面上是看不见的。用户提交表单的时候，浏览器会将prodId=xm234jq发给服务器。 <h5>（13）number</h5> type="number"是一个数字输入框，只能输入数字。浏览器通常会在输入框的最右侧，显示一个可以点击的上下箭头，点击向上箭头，数字会递增，点击向下箭头，数字会递减。 <pre><code class="prism language-html"><input type="number" id="tentacles" name="tentacles" min="10" max="100"> </code></pre> 上面代码指定数字输入框，最小可以输入10，最大可以输入100。 该类型可以接受任何数值，包括小数和整数。可以通过step属性，限定只接受整数。 该类型有以下配套属性。 <ul> <li>max：允许输入的最大数值。</li> <li>min：允许输入的最小数值。</li> <li>placeholder：用户输入为空时，显示的示例值。</li> <li>readonly：布尔属性，表示该控件是否为只读。</li> <li>step：点击向上和向下箭头时，数值每次递减的步长值。如果用户输入的值，不符合步长值的设定，浏览器会自动四舍五入到最近似的值。默认的步长值是1，如果初始的value属性设为1.5，那么点击向上箭头得到2.5，点击向下箭头得到0.5。</li> </ul> <h5>（14）range</h5> type="range"是一个滑块，用户拖动滑块，选择给定范围之中的一个数值。因为拖动产生的值是不精确的，如果需要精确数值，不建议使用这个控件。常见的例子是调节音量。 <pre><code class="prism language-html"><input type="range" id="start" name="volume" min="0" max="11"> </code></pre> 上面代码会产生一个最小值为0、最大值为11的滑块区域。用户拖动滑块，选择想要的音量。 该类型的配套属性如下，用法与type="number"一致。 <ul> <li>max：允许的最大值，默认为100。</li> <li>min：允许的最小值，默认为0。</li> <li>step：步长值，默认为1。</li> <li>value属性的初始值就是滑块的默认位置。如果没有设置value属性，滑块默认就会停在最大值和最小值中间。如果max属性、min属性、value属性都没有设置，那么value属性为50。</li> </ul> 该类型与<code><datalist></code>标签配合使用，可以在滑动区域产生刻度。 <pre><code class="prism language-html"><input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50" label="0%"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100" label="0%"> </datalist> </code></pre> 上面代码会在0～100之间产生11个刻度。其中，0%、50%和100%三个位置会有文字提示，不过浏览器很可能不支持。 注意，浏览器生成的都是水平滑块。如果想要生成垂直滑块，可以使用 CSS 改变滑块区域的方向。 <h5>（15）url</h5> type="url"是一个只能输入网址的文本框。提交表单之前，浏览器会自动检查网址格式是否正确，如果不正确，就会无法提交。 <pre><code class="prism language-html"><input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required> </code></pre> 上面代码的pattern属性指定输入的网址只能使用 HTTPS 协议。 注意，该类型规定，不带有协议的网址是无效的，比如foo.com是无效的，http://foo.com 是有效的。 该类型的配套属性如下。 <ul> <li>maxlength：允许的最大字符数。</li> <li>minlength：允许的最少字符串。</li> <li>pattern：输入内容必须匹配的正则表达式。</li> <li>placeholder：输入为空时显示的示例文本。</li> <li>readonly：布尔属性，表示该控件的内容是否只读。</li> <li>size：一个非负整数，表示该输入框显示宽度为多少个字符。</li> <li>spellcheck：是否启动拼写检查，可能的值为true（启用）和false（不启用）。</li> </ul> 该类型与<code><datalist></code>标签搭配使用，可以形成下拉列表供用户选择。随着用户不断键入，会缩小显示范围，只显示匹配的备选项。 <pre><code class="prism language-html"><input id="myURL" name="myURL" type="url" list="defaultURLs"> <datalist id="defaultURLs"> <option value="https://developer.mozilla.org/" label="MDN Web Docs"> <option value="http://www.google.com/" label="Google"> <option value="http://www.microsoft.com/" label="Microsoft"> <option value="https://www.mozilla.org/" label="Mozilla"> <option value="http://w3.org/" label="W3C"> </datalist> </code></pre> 上面代码中，<code><option></code>的label属性表示文本标签，显示在备选下拉框的右侧，网址显示在左侧。 <h5>（16）tel</h5> type="tel"是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同，因此浏览器没有默认的验证模式，大多数时候需要自定义验证 <pre><code class="prism language-html"><input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> <small>Format: 123-456-7890</small> </code></pre> 上面代码定义了一个只能输入10位电话号码的输入框。 该类型的配套属性如下。 <ul> <li>maxlength：允许的最大字符数。</li> <li>minlength：允许的最少字符串。</li> <li>pattern：输入内容必须匹配的正则表达式。</li> <li>placeholder：输入为空时显示的示例文本。</li> <li>readonly：布尔属性，表示该控件的内容是否只读。</li> <li>size：一个非负整数，表示该输入框显示宽度为多少个字符。</li> </ul> <h5>（17）color</h5> type="color"是一个选择颜色的控件，它的值一律都是#rrggbb格式。 <pre><code class="prism language-html"><input type="color" id="background" name="background" value="#e66465"> </code></pre> 上面代码在 Chrome 浏览器中，会显示一个#e66465的色块。点击色块，就会出现一个拾色器，供用户选择颜色。 如果没有指定value属性的初始值，默认值为#000000（黑色）。 <h5>（18）date</h5> type="date"是一个只能输入日期的输入框，用户可以输入年月日，但是不能输入时分秒。输入格式是YYYY-MM-DD。 <pre><code class="prism language-html"><input type="date" id="start" name="start" value="2018-07-22" min="2018-01-01" max="2018-12-31"> </code></pre> 上面代码会显示一个输入框，默认日期是2018年7月22日。用户点击以后，会日期选择器，供用户选择新的日期。 该类型有以下配套属性。 <ul> <li>max：可以允许的最晚日期，格式为yyyy-MM-dd。</li> <li>min：可以允许的最早日期，格式为yyyy-MM-dd。</li> <li>step：步长值，一个数字，以天为单位。</li> </ul> <h5>（19）time</h5> type="time"是一个只能输入时间的输入框，可以输入时分秒，不能输入年月日。日期格式是24小时制的hh:mm，如果包括秒数，格式则是hh:mm:ss。日期选择器的形式则随浏览器不同而不同。 <pre><code class="prism language-html"><input type="time" id="appt" name="appt" min="9:00" max="18:00" required> <small>营业时间上午9点到下午6点</small> </code></pre> 该类型有以下配套属性。 <ul> <li>max：允许的最晚时间。</li> <li>min：允许的最早时间。</li> <li>readonly：布尔属性，表示用户是否不可以编辑时间。</li> <li>step：步长值，单位为秒。</li> </ul> <pre><code class="prism language-html"><input id="appt" type="time" name="appt" step="2"> </code></pre> 上面代码中，调节控件的话，时间每次改变的幅度是2秒钟。 <h5>（20）month</h5> type="month"是一个只能输入年份和月份的输入框，格式为YYYY-MM。 <pre><code class="prism language-html"><input type="month" id="start" name="start" min="2018-03" value="2018-05"> </code></pre> 该类型有以下配套属性。 <ul> <li>max：允许的最晚时间，格式为yyyy-MM。</li> <li>min：允许的最早时间，格式为yyyy-MM。</li> <li>readonly：布尔属性，表示用户是否不可以编辑时间。</li> <li>step：步长值，单位为月。</li> </ul> <h5>（21）week</h5> type="week"是一个输入一年中第几周的输入框。格式为yyyy-Www，比如2018-W18表示2018年第18周。 <pre><code class="prism language-html"><input type="week" name="week" id="camp-week" min="2018-W18" max="2018-W26" required> </code></pre> 该类型有以下配套属性。 <ul> <li>max：允许的最晚时间，格式为yyyy-Www。</li> <li>min：允许的最早时间，格式为yyyy-Www。</li> <li>readonly：布尔属性，表示用户是否不可以编辑时间。</li> <li>step：步长值，单位为周。</li> </ul> <h5>（22）datetime-local</h5> type="datetime-local"是一个时间输入框，让用户输入年月日和时分，格式为yyyy-MM-ddThh:mm。注意，该控件不支持秒。 <pre><code class="prism language-html"><input type="datetime-local" id="meeting-time" name="meeting-time" value="2018-06-12T19:30" min="2018-06-07T00:00" max="2018-06-14T00:00"> </code></pre> 该类型有以下配套属性。 <ul> <li>max：允许的最晚时间，格式为yyyy-MM-ddThh:mm。</li> <li>min：允许的最早时间，格式为yyyy-MM-ddThh:mm。</li> <li>step：步长值，单位为秒，默认值是60。</li> </ul> <h3>5、<code><button></code></h3> <code><button></code>标签会生成一个可以点击的按钮，没有默认行为，通常需要用type属性或脚本指定按钮的功能。 <pre><code class="prism language-html"><button>点击</button> </code></pre> 上面代码会产生一个按钮，上面的文字就是“点击”。 <code><button></code>内部不仅放置文字，还可以放置图像，这可以形成图像按钮。 <pre><code class="prism language-html"><button name="search" type="submit"> <img src="search.gif">搜索 </button> </code></pre> <code><button></code>具有以下属性。 <ul> <li>autofocus：布尔属性，表示网页加载时，焦点就在这个按钮。网页里面只能有一个元素，具有这个属性。</li> <li>disabled：布尔属性，表示按钮不可用，会导致按钮变灰，不可点击。</li> <li>name：按钮的名称（与value属性配合使用），将以name=value的形式，随表单一起提交到服务器。</li> <li>value：按钮的值（与name属性配合使用），将以name=value的形式，随表单一起提交到服务器。</li> <li>type：按钮的类型，可能的值有三种：submit（点击后将数据提交给服务器），reset（将所有控件的值重置为初始值），button（没有默认行为，由脚本指定按钮的行为）。</li> <li>form：指定按钮关联的<code><form></code>表单，值为<code><form></code>的id属性。如果省略该属性，默认关联按钮所在父表单。</li> <li>formaction：数据提交到服务器的目标 URL，会覆盖<code><form></code>元素的action属性。</li> <li>formenctype：数据提交到服务器的编码方式，会覆盖<code><form></code>元素的enctype属性。可能的值有三种：application/x-www-form-urlencoded（默认值），multipart/form-data（只用于文件上传），text/plain。</li> <li>formmethod：数据提交到服务器使用的 HTTP 方法，会覆盖<code><form></code>元素的method属性，可能的值为post或get。</li> <li>formnovalidate：布尔属性，数据提交到服务器时关闭本地验证，会覆盖<code><form></code>元素的novalidate属性。</li> <li>formtarget：数据提交到服务器后，展示服务器返回数据的窗口，会覆盖<code><form></code>元素的target属性。可能的值有_self（当前窗口），_blank（新的空窗口）、_parent（父窗口）、_top（顶层窗口）。</li> </ul> <h3>6、<code><select></code></h3> <code><select></code>标签用于生成一个下拉菜单。 <pre><code class="prism language-html"><label for="pet-select">宠物：</label> <select id="pet-select" name="pet-select"> <option value="">--请选择一项--</option> <option value="dog">狗</option> <option value="cat">猫</option> <option value="others">其他</option> </select> </code></pre> 上面代码中，<code><select></code>生成一个下拉菜单，菜单标题是“–请选择一项–”，最右侧有一个下拉箭头。点击下拉箭头，会显示三个菜单项，供用户点击选择。 下拉菜单的菜单项由<code><option></code>标签给出，每个<code><option></code>代表可以选择的一个值。选中的<code><option></code>的value属性，就是<code><select></code>控件发送的服务器的值。 <code><option></code>有一个布尔属性selected，一旦设置，就表示该项是默认选中的菜单项。 <pre><code class="prism language-html"><select name="choice"> <option value="first">First Value</option> <option value="second" selected>Second Value</option> <option value="third">Third Value</option> </select> </code></pre> 上面代码中，第二项Second Value是默认选中的。页面加载的时候，会直接显示在下拉菜单上。 <code><select></code>有如下属性。 <ul> <li>autofocus：布尔属性，页面加载时是否自动获得焦点。</li> <li>disabled：布尔属性，是否禁用当前控件。</li> <li>form：关联表单的id属性。</li> <li>multiple：布尔属性，是否可以选择多个菜单项。默认情况下，只能选择一项。一旦设置，多数浏览器会显示一个滚动列表框。用户可能需要按住Shift或其他功能键，选中多项。</li> <li>name：控件名。</li> <li>required：布尔属性，是否为必填控件。</li> <li>size：设置了multiple属性时，页面显示时一次可见的行数，其他行需要滚动查看。</li> </ul> <h3>7、<code><option></code>，<code><optgroup></code></h3> <code><option></code>标签用在<code><select></code>、<code><optgroup></code>、<code><datalist></code>里面，表示一个菜单项，参见<code><select></code>的示例。 它有如下属性。 <ul> <li>disabled：布尔属性，是否禁用该项。</li> <li>label：该项的说明。如果省略，则等于该项的文本内容。</li> <li>selected：布尔属性，是否为默认值。显然，一组菜单中，只能有一个菜单项设置该属性。</li> <li>value：该项提交到服务器的值。如果省略，则等于该项的文本内容。</li> </ul> <code><optgroup></code>表示菜单项的分组，通常用在<code><select></code>内部。 <pre><code class="prism language-html"><label>宠物： <select name="pets" multiple size="4"> <optgroup label="四条腿的宠物"> <option value="dog">狗</option> <option value="cat">猫</option> </optgroup> <optgroup label="鸟类"> <option value="parrot">鹦鹉</option> <option value="thrush">画眉</option> </optgroup> </select> </label> </code></pre> 上面代码中，<code><select></code>是一个下拉菜单，它的内部使用<code><optgroup></code>将菜单项分成两组。每组有自己的标题，会加粗显示，但是用户无法选中。 它的属性如下。 <ul> <li>disabled：布尔设置，是否禁用该组。一旦设置，该组所有的菜单项都不可选。</li> <li>label：菜单项的标题。</li> </ul> <h3>8、<code><datalist></code></h3> <code><datalist></code>标签是一个容器标签，用于为指定控件提供一组相关数据，通常用于生成输入提示。它的内部使用<code><option></code>，生成每个菜单项。` <pre><code class="prism language-html"><label for="ice-cream-choice">冰淇淋：</label> <input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" /> <datalist id="ice-cream-flavors"> <option value="巧克力"> <option value="椰子"> <option value="薄荷"> <option value="草莓"> <option value="香草"> </datalist> </code></pre> 上面代码中，<code><input></code>生成一个文本输入框，用户可以输入文本。<code><input></code>的list属性指定关联的<code><datalist></code>的id属性。<code><datalist></code>的数据列表用于输入建议，用户点击输入框的时候，会显示一个下拉菜单，里面是建议的输入项。并且还会自动匹配用户已经输入的字符，缩小可选的范围，比如用户输入“香”，则只会显示“香草”这一项。 <h3>9、<code><textarea></code></h3> <code><textarea></code>是一个块级元素，用来生成多行的文本框。 <pre><code class="prism language-html"><textarea id="story" name="story" rows="5" cols="33"> 这是一个很长的故事。 </textarea> </code></pre> 上面代码会生成一个长度为5行，宽度为33个字符的文本框。 该标签有如下属性。 <ul> <li>autofocus：布尔属性，是否自动获得焦点。</li> <li>cols：文本框的宽度，单位为字符，默认值为20。</li> <li>disabled：布尔属性，是否禁用该控件。</li> <li>form：关联表单的id属性。</li> <li>maxlength：允许输入的最大字符数。如果未指定此值，用户可以输入无限数量的字符。</li> <li>minlength：允许输入的最小字符数。</li> <li>name：控件的名称。</li> <li>placeholder：输入为空时显示的提示文本。</li> <li>readonly：布尔属性，控件是否为只读。</li> <li>required：布尔属性，控件是否为必填。</li> <li>rows：文本框的高度，单位为行。</li> <li>spellcheck：是否打开浏览器的拼写检查。可能的值有true（打开），default（由父元素或网页设置决定），false（关闭）。</li> <li>wrap：输入的文本是否自动换行。可能的值有hard（浏览器自动插入换行符CR + LF，使得每行不超过控件的宽度），soft（输入内容超过宽度时自动换行，但不会加入新的换行符，并且浏览器保证所有换行符都是CR + LR，这是默认值），off（关闭自动换行，单行长度超过宽度时，会出现水平滚动条）。</li> </ul> <h3>10、<code><output></code></h3> <code><output></code>标签是一个行内元素，用于显示用户操作的结果。 <pre><code class="prism language-html"><input type="number" name="a" value="10" /> + <input type="number" name="b" value="10" /> = <output name="result">20</output> </code></pre> 该标签有如下属性。 <ul> <li>for：关联控件的id属性，表示为该控件的操作结果。</li> <li>form：关联表单的id属性。</li> <li>name：控件的名称。</li> </ul> <h3>11、<code><progress></code></h3> <code><progress></code>标签是一个行内元素，表示任务的完成进度。浏览器通常会将显示为进度条。 <pre><code class="prism language-html"><progress id="file" max="100" value="70"> 70% </progress> </code></pre> 该标签有如下属性。 <ul> <li>max：进度条的最大值，应该是一个大于0的浮点数。默认值为1。</li> <li>value：进度条的当前值。它必须是0和max属性之间的一个有效浮点数。如果省略了max属性，该值则必须在0和1之间。如果省略了value属性，则进度条会出现滚动，表明正在进行中，无法知道完成的进度。</li> </ul> <h3>12、<code><meter></code></h3> <code><meter></code>标签是一个行内元素，表示指示器，用来显示已知范围内的一个值，很适合用于任务的当前进度、磁盘已用空间、充电量等带有比例性质的场合。浏览器通常会将其显示为一个不会滚动的指示条。 <pre><code class="prism language-html"><p>烤箱的当前温度是<meter min="200" max="500" value="350"> 350 度</meter>。</p> </code></pre> 上面代码会显示一个指示条，左侧表示200，右侧表示500，当前位置停留在350。 注意，<code><meter></code>元素的子元素，正常情况下不会显示。只有在浏览器不支持<code><meter></code>时才会显示。 该标签有如下属性。 <ul> <li>min：范围的下限，必须小于max属性。如果省略，则默认为0。</li> <li>max：范围的上限，必须大于min属性。如果省略，则默认为1。</li> <li>value：当前值，必须在min属性和max属性之间。如果省略，则默认为0。</li> <li>low：表示“低端”的上限门槛值，必须大于min属性，小于high属性和max属性。如果省略，则等于min属性。</li> <li>high：表示“高端”的下限门槛值，必须小于max属性，大于low属性和min属性。如果省略，则等于max属性。</li> <li>optimum：指定最佳值，必须在min属性和max属性之间。它应该与low属性和high属性一起使用，表示最佳范围。如果optimum小于low属性，则表示“低端”是最佳范围；如果大于high属性，则表示“高端”是最佳范围；如果在low和high之间，则表示“中间地带”是最佳范围。如果省略，则等于min和max的中间值。</li> <li>form：关联表单的id属性。</li> </ul> Chrome 浏览器使用三种颜色，表示指示条所处的位置。较好情况时，当前位置为绿色；一般情况时，当前位置为黄色；较差情况时，当前位置为红色。 <pre><code class="prism language-html"><meter id="fuel" name="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50"> at 50/100 </meter> </code></pre> 上面代码中，指示条可以分成三段：0 ～ 32，33 ～ 65，66 ～ 100。由于optimum属性是80，因此66 ～ 100是较好情况，33 ～ 65是一般情况，0 ～ 32是较差情况。浏览器因此会根据value属性，将当前位置显示为不同颜色，小于33时显示红色，大于65时显示绿色，两者之间显示黄色。 <h2>多媒体标签</h2> <h3>1、<code><video></code></h3> <code><video></code>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<code><video></code>内部的子元素。 <pre><code class="prism language-html"><video src="example.mp4" controls> <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p> </video> </code></pre> 上面代码中，如果浏览器不支持该种格式的视频，就会显示<code><video></code>内部的文字提示。 <code><video></code>有以下属性。 <ul> <li>src：视频文件的网址。</li> <li>controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。</li> <li>width：视频播放器的宽度，单位像素。</li> <li>height：视频播放器的高度，单位像素。</li> <li>autoplay：视频是否自动播放，该属性为布尔属性。</li> <li>loop：视频是否循环播放，该属性为布尔属性。</li> <li>muted：是否默认静音，该属性为布尔属性。</li> <li>poster：视频播放器的封面图片的 URL。</li> <li>preload：视频播放之前，是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值，分别是none（不缓冲）、metadata（仅仅缓冲视频文件的元数据）、auto（可以缓冲整个文件）。</li> <li>playsinline：iPhone 的 Safari 浏览器播放视频时，会自动全屏，该属性可以禁止这种行为。该属性为布尔属性。</li> <li>crossorigin：是否采用跨域的方式加载视频。它可以取两个值，分别是anonymous（跨域请求时，不发送用户凭证，主要是 Cookie），use-credentials（跨域时发送用户凭证）。</li> </ul> 下面是一个例子。 <pre><code class="prism language-html"><video width="400" height="400" autoplay loop muted poster="poster.png"> </video> </code></pre> 上面代码中，视频播放器的大小是 400 x 400，会自动播放和循环播放，并且静音，还带有封面图。这是网站首页背景视频的常见写法。 HTML 标准没有规定浏览器需要支持哪些视频格式，完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式，可以使用<code><source></code>标签，放置同一个视频的多种格式。 <pre><code class="prism language-html"><video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p> </video> </code></pre> 上面代码中，<code><source></code>标签的type属性的值是视频文件的 MIME 类型，上例指定了两种格式的视频文件：MP4 和 WebM。如果浏览器支持 MP4，就加载 MP4 格式的视频，不再往下执行了。如果不支持 MP4，就检查是否支持 WebM，如果还是不支持，则显示提示。 <h3>2、<code><audio></code></h3> <code><audio></code>标签是一个块级元素，用于放置音频，用法与<code><video></code>标签基本一致。 <pre><code class="prism language-html"><audio controls> <source src="foo.mp3" type="audio/mp3"> <source src="foo.ogg" type="audio/ogg"> <p>你的浏览器不支持 HTML5 音频，请直接下载<a href="foo.mp3">音频文件</a>。</p> </audio> </code></pre> 上面代码中，<code><audio></code>标签内部使用<code><source></code>标签，指定了两种音频格式：优先使用 MP3 格式，如果浏览器不支持则使用 Ogg 格式。如果浏览器不能播放音频，则提供下载链接。 <code><audio></code>标签的属性与<code><video></code>标签类似，参见上一节。 <ul> <li>autoplay：是否自动播放，布尔属性。</li> <li>controls：是否显示播放工具栏，布尔属性。如果不设置，浏览器不显示播放界面，通常用于背景音乐。</li> <li>crossorigin：是否使用跨域方式请求。</li> <li>loop：是否循环播放，布尔属性。</li> <li>muted：是否静音，布尔属性。</li> <li>preload：音频文件的缓冲设置。</li> <li>src：音频文件网址。</li> </ul> <h3>3、<code><track></code></h3> <pre><code class="prism language-html"><track>标签用于指定视频的字幕，格式是 WebVTT （.vtt文件），放置在<video>标签内部。它是一个单独使用的标签，没有结束标签。 <video controls src="sample.mp4"> <track label="英文" kind="subtitles" src="subtitles_en.vtt" srclang="en"> <track label="中文" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default> </video> </code></pre> 上面代码指定视频文件的英文字幕和中文字幕。 <code><track></code>标签有以下属性。 <ul> <li>label：播放器显示的字幕名称，供用户选择。</li> <li>kind：字幕的类型，默认是subtitles，表示将原始声音成翻译外国文字，比如英文视频提供中文字幕。另一个常见的值是captions，表示原始声音的文字描述，通常是视频原始使用的语言，比如英文视频提供英文字幕。</li> <li>src：vtt 字幕文件的网址。</li> <li>srclang：字幕的语言，必须是有效的语言代码。</li> <li>default：是否默认打开，布尔属性。</li> </ul> <h3>4、<code><source></code></h3> <code><source></code>标签用于<code><picture></code>、<code><video></code>、<code><audio></code>的内部，用于指定一项外部资源。单标签是单独使用的，没有结束标签。 它有如下属性，具体示例请参见相应的容器标签。 <ul> <li>type：指定外部资源的 MIME 类型。</li> <li>src：指定源文件，用于<code><video></code>和<code><audio></code>。</li> <li>srcset：指定不同条件下加载的图像文件，用于<code><picture></code>。</li> <li>media：指定媒体查询表达式，用于<code><picture></code>。</li> <li>sizes：指定不同设备的显示大小，用于<code><picture></code>，必须跟srcset搭配使用。</li> </ul> <h3>5、<code><embed></code></h3> <code><embed></code>标签用于嵌入外部内容，这个外部内容通常由浏览器插件负责控制。由于浏览器的默认插件都不一致，很可能不是所有浏览器的用户都能访问这部分内容，建议谨慎使用。 下面是嵌入视频播放器的例子。 <pre><code class="prism language-html"><embed type="video/webm" src="/media/examples/flower.mp4" width="250" height="200"> </code></pre> 上面代码嵌入的视频，将由浏览器插件负责控制。如果浏览器没有安装 MP4 插件，视频就无法播放。 <code><embed></code>标签具有如下的通用属性。 <ul> <li>height：显示高度，单位为像素，不允许百分比。</li> <li>weight：显示宽度，单位为像素，不允许百分比。</li> <li>src：嵌入的资源的 URL。</li> <li>type：嵌入资源的 MIME 类型。</li> </ul> 浏览器通过type属性得到嵌入资源的 MIME 类型，一旦该种类型已经被某个插件注册了，就会启动该插件，负责处理嵌入的资源。 下面是 QuickTime 插件播放 MOV 视频文件的例子。 <pre><code class="prism language-html"><embed type="video/quicktime" src="movie.mov" width="640" height="480"> </code></pre> 下面是启动 Flash 插件的例子。 <pre><code class="prism language-html"><embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </code></pre> 上面代码中，如果浏览器没有安装 Flash 插件，就会提示去pluginspage属性指定的网址下载。 <h3>6、<code><object></code>，<code><param></code></h3> <code><object></code>标签作用跟<code><embed></code>相似，也是插入外部资源，由浏览器插件处理。它可以视为<code><embed></code>的替代品，有标准化行为，只限于插入少数几种通用资源，没有历史遗留问题，因此更推荐使用。 下面是插入 PDF 文件的例子。 <pre><code class="prism language-html"><object type="application/pdf" data="/media/examples/In-CC0.pdf" width="250" height="200"> </object> </code></pre> 上面代码中，如果浏览器安装了 PDF 插件，就会在网页显示 PDF 浏览窗口。 <code><object></code>具有如下的通用属性。 <ul> <li>data：嵌入的资源的 URL。</li> <li>form：当前网页中相关联表单的id属性（如果有的话）。</li> <li>height：资源的显示高度，单位为像素，不能使用百分比。</li> <li>weight：资源的显示宽度，单位为像素，不能使用百分比。</li> <li>type：资源的 MIME 类型。</li> <li>typemustmatch：布尔属性，表示data属性与type属性是否必须匹配。</li> </ul> 下面是插入 Flash 影片的例子。 <pre><code class="prism language-html"><object data="movie.swf" type="application/x-shockwave-flash"></object> <object>标签是一个容器元素，内部可以使用<param>标签，给出插件所需要的运行参数。 <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object> </code></pre> <h2>其他标签</h2> <h3>1、<code><dialog></code></h3> <h4>1.1、基本用法</h4> <code><dialog></code>标签表示一个可以关闭的对话框。 <pre><code class="prism language-html"><dialog> Hello world </dialog> </code></pre> 上面就是一个最简单的对话框。 默认情况下，对话框是隐藏的，不会在网页上显示。如果要让对话框显示，必须加上open属性。 <pre><code class="prism language-html"><dialog open> Hello world </dialog> </code></pre> 上面代码会在网页显示一个方框，内容是Hello world。 <code><dialog></code>元素里面，可以放入其他 HTML 元素。 <pre><code class="prism language-html"><dialog open> <form method="dialog"> <input type="text"> <button type="submit" value="foo">提交</button> </form> </dialog> </code></pre> 上面的对话框里面，有一个输入框和提交按钮。 注意，上例中<code><form></code>的method属性设为dialog，这时点击提交按钮，对话框就会消失。但是，表单不会提交到服务器，浏览器会将表单元素的returnValue属性设为 Submit 按钮的value属性（上例是foo）。 <h4>1.2、JavaScript API</h4> <code><dialog></code>元素的 JavaScript API 提供<code>Dialog.showModal()</code>和<code>Dialog.close()</code>两个方法，用于打开/关闭对话框。 <pre><code class="prism language-javascript">const modal = document.querySelector('dialog'); // 对话框显示，相当于增加 open 属性 modal.showModal(); // 对话框关闭，相当于移除 open 属性 modal.close(); </code></pre> 开发者可以提供关闭按钮，让其调用<code>Dialog.close()</code>方法，关闭对话框。 <code>Dialog.close()</code>方法可以接受一个字符串作为参数，用于传递信息。<code><dialog></code>接口的returnValue属性可以读取这个字符串，否则returnValue属性等于提交按钮的value属性。 <pre><code class="prism language-javascript">modal.close('Accepted'); modal.returnValue // "Accepted" </code></pre> <code>Dialog.showModal()</code>方法唤起对话框时，会有一个透明层，阻止用户与对话框外部的内容互动。CSS 提供了一个 Dialog 元素的::backdrop伪类，用于选中这个透明层，因此可以编写样式让透明层变得可见。 <pre><code class="prism language-css">dialog { padding: 0; border: 0; border-radius: 0.6rem; box-shadow: 0 0 1em black; } dialog::backdrop { /* make the backdrop a semi-transparent black */ background-color: rgba(0, 0, 0, 0.4); } </code></pre> 上面代码不仅为<code><dialog></code>指定了样式，还将对话框的透明层变成了灰色透明。 <code><dialog></code>元素还有一个<code>Dialog.show()</code>方法，也能唤起对话框，但是没有透明层，用户可以与对话框外部的内容互动。 <h4>1.3、事件</h4> <code><dialog></code>元素有两个事件，可以监听。 <ul> <li>close：对话框关闭时触发</li> <li>cancel：用户按下esc键关闭对话框时触发</li> </ul> 如果希望用户点击透明层，就关闭对话框，可以用下面的代码。 <pre><code class="prism language-javascript">modal.addEventListener('click', (event) => { if (event.target === modal) { modal.close('cancelled'); } }); </code></pre> <h3>2、<code><details></code>，<code><summary></code></h3> <h4>2.1、基本用法</h4> <code><details></code>标签用来折叠内容，浏览器会折叠显示该标签的内容。 <pre><code class="prism language-html"><details> 这是一段解释文本。 </details> </code></pre> 上面的代码在浏览器里面，会折叠起来，显示Details，前面有一个三角形，就像下面这样。 <pre><code>▶ Details 用户点击这段文本，折叠的文本就会展开，显示详细内容。 ▼ Details 这是一段解释文本。再点击一下，展开的文本又会重新折叠起来。 </code></pre> <code><details></code>标签的open属性，用于默认打开折叠。 <pre><code class="prism language-html"><details open> 这是一段解释文本。 </details> </code></pre> 上面代码默认打开折叠。 <code><summary></code>标签用来定制折叠内容的标题。 <pre><code class="prism language-html"><details> <summary>这是标题</summary> 这是一段解释文本。 </details> </code></pre> 上面的代码显示结果如下。 <pre><code>▶ 这是标题点击后，展示的效果如下。 ▼ 这是标题这是一段解释文本。 </code></pre> 通过 CSS 设置summary::-webkit-details-marker，可以改变标题前面的三角箭头。 <pre><code class="prism language-css">summary::-webkit-details-marker { background: url(https://example.com/foo.svg); color: transparent; } </code></pre> <h4>2.2、JavaScript API</h4> Details元素的open属性返回<code><details></code>当前是打开还是关闭。 <pre><code class="prism language-javascript">const details = document.querySelector('details'); if (detail.open === true) { // 展开状态 } else { // 折叠状态 } </code></pre> Details元素有一个toggle事件，打开或关闭折叠时，都会触发这个事件。 <pre><code class="prism language-javascript">details.addEventListener('toggle', event => { if (details.open) { /* 展开状况 */ } else { /* 折叠状态 */ } }); </code></pre> <h2>网页的语义结构</h2> HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。 <h3>1、含义</h3> HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。 下面就是一个典型的语义结构的网页。 <pre><code class="prism language-html"><body> <header>页眉</header> <main> <article> <h1>文章标题</h1> <p>文章内容</p> </article> </main> <footer>页尾</footer> </body> </code></pre> 只看上面的代码，就可以知道，页面分成页眉（<code><header></code>）、主体（<code><main></code>）、页尾（<code><footer></code>）三个部分。 编写 HTML 网页，第一步就是写出语义结构的网页骨架。 <h3>2、常用标签</h3> <h4>2.1、<code><header></code></h4> <code><header></code>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。 如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<code><header></code>里面。 <pre><code class="prism language-html"><header> <h1>公司名称</h1> <ul> <li><a href="/home">首页</a></li> <li><a href="/about">关于</a></li> <li><a href="/contact">联系</a></li> </ul> <form target="/search"> <input name="q" type="search" /> <input type="submit" /> </form> </header> </code></pre> 如果<code><header></code>用在文章的头部，则可以把文章标题、作者等信息放进去。 <pre><code class="prism language-html"><article> <header> <h2>文章标题</h2> <p>张三，发表于2010年1月1日</p> </header> </article> </code></pre> 由于<code><header></code>可以用在多种场景，所以一个页面可能包含多个<code><header></code>，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，<code><header></code>里面不能包含另一个<code><header></code>或<code><footer></code>。 <h4>2.2、<code><footer></code></h4> <code><footer></code>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。 <pre><code class="prism language-html"><body> <footer> <p>© 2018 xxx 公司</p> </footer> </body> </code></pre> 上面代码中，版权信息放在<code><footer></code>里面。 <code><footer></code>也可以放在文章里面。 <pre><code class="prism language-html"><article> <header> <h1>文章标题</h1> </header> <footer> <p>© 禁止转贴</p> </footer> </body> </code></pre> <code><footer></code>不能嵌套，即内部不能放置另一个<code><footer></code>，也不能放置<code><header></code>。 <h4>2.3、<code><main></code></h4> <code><main></code>标签表示页面的主体内容，一个页面只能有一个<code><main></code>。 <pre><code class="prism language-html"><body> <header>页眉</header> <main> <article>文章</article> </main> <aside>侧边栏</aside> <footer>页尾</footer> </body> </code></pre> 上面代码就是最典型的页面结构。 注意，<code><main></code>是顶层标签，不能放置在<code><header></code>、<code><footer></code>、<code><article></code>、<code><aside></code>、<code><nav></code>等标签之中。 另外，功能性区块（比如搜索栏）不适合放入<code><main></code>，除非当前页面就是搜索页面。 <h4>2.4、<code><article></code></h4> <code><article></code>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<code><h1></code>到<code><h6></code>）。 <pre><code class="prism language-html"><article> <h2>文章标题</h2> <p>文章内容</p> </article> </code></pre> 一个网页可以包含一个或多个<code><article></code>，比如包含多篇文章。 <h4>2.5、<code><aside></code></h4> <code><aside></code>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<code><aside></code>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<code><aside></code>，可以用来放置评论或注释。 下面是网页级别的<code><aside></code>的例子。 <pre><code class="prism language-html"><body> <main>主体内容</main> <aside>侧边栏</aside> </body> </code></pre> 下面是文章评注的例子。 <pre><code class="prism language-html"><p>第一段</p> <aside> <p>本段是文章的重点。</p> </aside> </code></pre> <h4>2.6、<code><section></code></h4> <code><section></code>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<code><article></code>可以包含多个<code><section></code>。<code><section></code>总是多个一起使用，一个页面不能只有一个<code><section></code>。 <pre><code class="prism language-html"><article> <h1>文章标题</h1> <section> <h2>第一章</h2> <p>...</p> </section> <section> <h2>第二章</h2> <p>...</p> </section> </article> </code></pre> 上面代码中，<code><article></code>包含了两个<code><section></code>，代表两章。 <code><section></code>很适合幻灯片展示的页面，每个<code><section></code>代表一个幻灯片。 一般来说，<code><section></code>都应该有标题，即包含<code><h1>~<h6></code>标签。多个<code><section></code>可以放置在同一个<code><article></code>里面，一个<code><section></code>里面也可能包含多个<code><article></code>，这取决于<code><section></code>和<code><article></code>在当前页面的含义。 <h4>2.7、<code><nav></code></h4> <code><nav></code>标签用于放置页面或文档的导航信息。 <pre><code class="prism language-html"><nav> <ol> <li><a href="item-a">商品 A</a></li> <li><a href="item-b">商品 B</a></li> <li>商品 C</li> </ol> </nav> </code></pre> 一般来说，<code><nav></code>往往放置在<code><header></code>里面，不适合放入<code><footer></code>。另外，一个页面可以有多个<code><nav></code>，比如一个用于站点导航，另一个用于文章导航。 <h4>2.8、<code><h1> ~ <h6></code></h4> HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级。 <pre><code class="prism language-html"><h1>：一级标题 <h2>：二级标题 <h3>：三级标题 <h4>：四级标题 <h5>：五级标题 <h6>：六级标题 </code></pre> <code><h1></code>是最高级别的标题，<code><h6></code>是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个<code><h1></code>后面可以有多个<code><h2></code>，每个<code><h2></code>后面又可以有多个<code><h3></code>。 <pre><code class="prism language-html"><body> <h1>JavaScript 语言介绍</h1> <h2>概述</h2> <h2>基本概念</h2> <h3>网页</h3> <h3>链接</h3> <h2>主要用法</h2> </body> </code></pre> 上面代码，通过章节标题，清晰地表明了文章的主体结构。具体的内容，就可以写在章节标题的下面。 标题不应该越级，比如h1下面直接写h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。 默认情况下，浏览器会粗体显示标题。h1的字号比h2大，h2比h3大，以此类推。 <h4>2.9、<code><hgroup></code></h4> 如果主标题包含多级标题（比如带有副标题），那么可以使用<code><hgroup></code>标签，将多级标题放在其中。 <pre><code class="prism language-html"><hgroup> <h1>Heading 1</h1> <h2>Subheading 1</h2> <h2>Subheading 2</h2> </hgroup> </code></pre> 注意，<code><hgroup></code>只能包含<code><h1>~<h6></code>，不能包含其他标签。 </div> </div>�� </div> </div> </div>  <div id="SOHUCS" sid="1751488901177950208"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> 清风怎不知意 <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> 陈在天box <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> Cavalier_01 <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> html+css+js网页设计 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> zoyation <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> Derek重名了 <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> 周bro <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> 张某布响丸辣 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> ZhangTao_zata <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835349024102772736.htm" title="非关系型数据库" target="_blank">非关系型数据库</a> 天秤-white <a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a> <div>一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%</div> </li> <li><a href="/article/1835342718067372032.htm" title="Python精选200Tips：121-125" target="_blank">Python精选200Tips：121-125</a> AnFany <a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div> </li> <li><a href="/article/1835333268375957504.htm" title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a> Bearjumpingcandy <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文</div> </li> <li><a href="/article/1835316434805288960.htm" title="七.正则化" target="_blank">七.正则化</a> 愿风去了 <div>吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> uthRaman <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835285939723792384.htm" title="利用frp实现内网穿透（需要云主机）" target="_blank">利用frp实现内网穿透（需要云主机）</a> heiyumiao <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%B7%A5%E5%85%B7/1.htm">网络工具</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>详细实现教程：https://www.iplaysoft.com/frp.htmlhttps://blog.csdn.net/u013144287/article/details/78589643/项目官网地址：https://github.com/fatedier/frp/releases按照系统下载相应的程序包什么是frp内网穿透工具有很多，其中Frp(FastReverseProxy)是比较</div> </li> <li><a href="/article/1835270061674295296.htm" title="word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf" target="_blank">word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf</a> 想吃草莓干 <a class="tag" taget="_blank" href="/search/word%E8%BD%AChtml%E5%88%B6%E4%BD%9C%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C/1.htm">word转html制作操作手册</a> <div>Word文档转换为HTML帮助文档操作手册一、使用到的软件DOC2CHMDreamweaverCS3Helpandmanual4二、操作步骤1.先建立一个工作目录。如hhwork。2.将需要转换的文件复制到此工作目录下。如果是中文文件名，最好将其改为英文文件名。例：现在要将《小神探点检定修信息管理系统使用手册0.3.6.doc》转换为Html格式的帮助文档，首先将此文档复制到hhwork目录下并将</div> </li> <li><a href="/article/1835262372638453760.htm" title="WORD批量转换器MultiDoc Converter" target="_blank">WORD批量转换器MultiDoc Converter</a> uolian <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>WORD批量转换器MultiDocConverterhttps://www.52pojie.cn/thread-1318745-1-1.html可批量将doc、docx等文件格式转成doc、docx、pdf、rtf、txt、html、epub等格式。安装包下载地址：https://wws.lanzouj.com/irvVbiz0pkd最终下载文件打包地址（未作成单文件，不确定是否可以直接使用）：h</div> </li> <li><a href="/article/1835258583235784704.htm" title="HTML中"bgcolor"与"background-color"的区别" target="_blank">HTML中"bgcolor"与"background-color"的区别</a> Sardar_ <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou</div> </li> <li><a href="/article/1835257575277424640.htm" title="【Python爬虫】百度百科词条内容" target="_blank">【Python爬虫】百度百科词条内容</a> PokiFighting <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">数据处理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>词条内容我这里随便选取了一个链接，用的是FBI的词条importurllib.requestimporturllib.parsefromlxmlimportetreedefquery(url):headers={'user-agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/80.</div> </li> <li><a href="/article/1835249513875468288.htm" title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a> deniro <div>1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功</div> </li> <li><a href="/article/88.htm" title="ztree设置禁用节点" target="_blank">ztree设置禁用节点</a> 3213213333332132 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/ztree/1.htm">ztree</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/setDisabledNode/1.htm">setDisabledNode</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); }); </div> </li> <li><a href="/article/215.htm" title="JVM patch by Taobao" target="_blank">JVM patch by Taobao</a> bookjovi <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。 7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and</div> </li> <li><a href="/article/342.htm" title="将session存储到数据库中" target="_blank">将session存储到数据库中</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) ); <?php /** * Created by PhpStorm. * User: michaeldu * Date</div> </li> <li><a href="/article/469.htm" title="Vector" target="_blank">Vector</a> 171815164 <a class="tag" taget="_blank" href="/search/vector/1.htm">vector</a> <div>public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i); </div> </li> <li><a href="/article/596.htm" title="各连接池配置参数比较" target="_blank">各连接池配置参数比较</a> g21121 <a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">连接池</a> <div> 排版真心费劲，大家凑合看下吧，见谅~ Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User 数据库密码 Password Password Password 驱动名</div> </li> <li><a href="/article/723.htm" title="[简单]mybatis insert语句添加动态字段" target="_blank">[简单]mybatis insert语句添加动态字段</a> 53873039oycg <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> mysql数据库,id自增,配置如下： <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&</div> </li> <li><a href="/article/850.htm" title="struts2拦截器配置" target="_blank">struts2拦截器配置</a> 云端月影 <a class="tag" taget="_blank" href="/search/struts2%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">struts2拦截器</a> <div>struts2拦截器interceptor的三种配置方法方法1. 普通配置法 <struts> <package name="struts2" extends="struts-default"> &</div> </li> <li><a href="/article/977.htm" title="IE中页面不居中，火狐谷歌等正常" target="_blank">IE中页面不居中，火狐谷歌等正常</a> aijuans <a class="tag" taget="_blank" href="/search/IE%E4%B8%AD%E9%A1%B5%E9%9D%A2%E4%B8%8D%E5%B1%85%E4%B8%AD/1.htm">IE中页面不居中</a> <div>问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3</div> </li> <li><a href="/article/1104.htm" title="String,int,Integer,char 几个类型常见转换" target="_blank">String,int,Integer,char 几个类型常见转换</a> antonyup_2006 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.</div> </li> <li><a href="/article/1231.htm" title="PL/SQL的游标类型" target="_blank">PL/SQL的游标类型</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E6%98%BE%E7%A4%BA%E6%B8%B8%E6%A0%87%28%E9%9D%99%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">显示游标(静态游标)</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E5%BC%8F%E6%B8%B8%E6%A0%87/1.htm">隐式游标</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%A0%87%E7%9A%84%E6%9B%B4%E6%96%B0%E5%92%8C%E5%88%A0%E9%99%A4/1.htm">游标的更新和删除</a><a class="tag" taget="_blank" href="/search/%25rowtype/1.htm">%rowtype</a><a class="tag" taget="_blank" href="/search/ref%E6%B8%B8%E6%A0%87%28%E5%8A%A8%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">ref游标(动态游标)</a> <div>游标是oracle中的一个结果集,用于存放查询的结果; PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标隐式游标:主要是对DML数据的操作隐</div> </li> <li><a href="/article/1358.htm" title="JUnit4中@AfterClass @BeforeClass @after @before的区别对比" target="_blank">JUnit4中@AfterClass @BeforeClass @after @before的区别对比</a> bijian1013 <a class="tag" taget="_blank" href="/search/JUnit4/1.htm">JUnit4</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次</div> </li> <li><a href="/article/1485.htm" title="精通Oracle10编程SQL(12)开发包" target="_blank">精通Oracle10编程SQL(12)开发包</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规</div> </li> <li><a href="/article/1612.htm" title="【EhCache二】ehcache.xml配置详解" target="_blank">【EhCache二】ehcache.xml配置详解</a> bit1129 <a class="tag" taget="_blank" href="/search/ehcache.xml/1.htm">ehcache.xml</a> <div>在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe ehcac</div> </li> <li><a href="/article/1739.htm" title="java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL" target="_blank">java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL</a> 白糖_ <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> 随后启动</div> </li> <li><a href="/article/1866.htm" title="angular.element" target="_blank">angular.element</a> boyitech <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular.element/1.htm">angular.element</a> <div>angular.element 描述: 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e</div> </li> <li><a href="/article/1993.htm" title="java-给定两个已排序序列，找出共同的元素。" target="_blank">java-给定两个已排序序列，找出共同的元素。</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素</div> </li> <li><a href="/article/2120.htm" title="sftp 异常，有遇到的吗？求解" target="_blank">sftp 异常，有遇到的吗？求解</a> Chen.H <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jcraft/1.htm">jcraft</a><a class="tag" taget="_blank" href="/search/auth/1.htm">auth</a><a class="tag" taget="_blank" href="/search/jsch/1.htm">jsch</a><a class="tag" taget="_blank" href="/search/jschexception/1.htm">jschexception</a> <div>com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec</div> </li> <li><a href="/article/2247.htm" title="[生物智能与人工智能]神经元中的电化学结构代表什么?" target="_blank">[生物智能与人工智能]神经元中的电化学结构代表什么?</a> comsci <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色.... 我们可以尝试一下...在某些神经</div> </li> <li><a href="/article/2374.htm" title="通过LAC和CID获取经纬度信息" target="_blank">通过LAC和CID获取经纬度信息</a> dai_lm <a class="tag" taget="_blank" href="/search/lac/1.htm">lac</a><a class="tag" taget="_blank" href="/search/cid/1.htm">cid</a> <div>方法1：用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度方法2：发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&</div> </li> <li><a href="/article/2501.htm" title="JAVA的困难分析" target="_blank">JAVA的困难分析</a> datamachine <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。 -----------------------------------------------------------------------------------------</div> </li> <li><a href="/article/2628.htm" title="小学5年级英语单词背诵第二课" target="_blank">小学5年级英语单词背诵第二课</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>money 钱 paper 纸 speak 讲，说 tell 告诉 remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码 learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射 must 必须 light 灯，光线，轻的 front </div> </li> <li><a href="/article/2755.htm" title="linux下面没有tree命令" target="_blank">linux下面没有tree命令</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>centos p安装 yum -y install tree mac os安装 brew install tree 首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式</div> </li> <li><a href="/article/2882.htm" title="Map迭代方式，Map迭代，Map循环" target="_blank">Map迭代方式，Map迭代，Map循环</a> 蕃薯耀 <a class="tag" taget="_blank" href="/search/Map%E5%BE%AA%E7%8E%AF/1.htm">Map循环</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3/1.htm">Map迭代</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3%E6%96%B9%E5%BC%8F/1.htm">Map迭代方式</a> <div>Map迭代方式，Map迭代，Map循环 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年</div> </li> <li><a href="/article/3009.htm" title="Spring Cache注解+Redis" target="_blank">Spring Cache注解+Redis</a> hanqunfeng <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring3.1 Cache注解依赖jar包：  <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId> </div> </li> <li><a href="/article/3136.htm" title="Guava中针对集合的 filter和过滤功能" target="_blank">Guava中针对集合的 filter和过滤功能</a> jackyrong <a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a> <div>在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子： @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"</div> </li> <li><a href="/article/3263.htm" title="学习编程那点事" target="_blank">学习编程那点事</a> lampcy <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去</div> </li> <li><a href="/article/3390.htm" title="架构师之流处理---------bytebuffer的mark,limit和flip" target="_blank">架构师之流处理---------bytebuffer的mark,limit和flip</a> nannan408 <a class="tag" taget="_blank" href="/search/ByteBuffer/1.htm">ByteBuffer</a> <div>1.前言。如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy</div> </li> <li><a href="/article/3517.htm" title="org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1" target="_blank">org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1</a> Everyday都不同 <a class="tag" taget="_blank" href="/search/%24/1.htm">$</a><a class="tag" taget="_blank" href="/search/%E8%BD%AC%E4%B9%89/1.htm">转义</a><a class="tag" taget="_blank" href="/search/el%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">el表达式</a> <div>最近在做Highcharts的过程中，在写js时，出现了以下异常：严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, </div> </li> <li><a href="/article/3644.htm" title="用Java实现发送邮件到163" target="_blank">用Java实现发送邮件到163</a> tntxia <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div>/* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。此篇仅介绍用</div> </li> <li><a href="/article/3771.htm" title="探索实体类存在的真正意义" target="_blank">探索实体类存在的真正意义</a> java小叶檀 <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>一. 实体类简述实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象它的一般格式就是 public class A{ private String id; public Str</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>