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/1834765750309580800.htm" title="使用HTMLSectionSplitter进行智能HTML文档分割" target="_blank">使用HTMLSectionSplitter进行智能HTML文档分割</a> afTFODguAKBF <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>使用HTMLSectionSplitter进行智能HTML文档分割引言在处理大型HTML文档时，将其分割成更小的、语义相关的部分是一个常见需求。这不仅有助于提高文本处理的效率，还能保持文档的结构和上下文信息。本文将介绍LangChain库中的HTMLSectionSplitter，这是一个强大的工具，可以根据HTML结构智能地分割文档。HTMLSectionSplitter简介HTMLSectio</div> </li> <li><a href="/article/1834763157856415744.htm" title="DOM事件与元素属性操作基本应用" target="_blank">DOM事件与元素属性操作基本应用</a> amanohina <div>事件事件：什么时候，做什么事执行机制：触发——响应绑定事件三要素1.事件源：绑定给谁事件2.事件类型：绑定什么类型的事件比如：click单击3.事件函数：事件发生后执行什么内容，写在函数内部事件监听JavaScript解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发了绑定事件，就会立即执行事件函数常见事件监听方法方法1：绑定HTML元素属性方法2：绑定DOM对象属性绑定H</div> </li> <li><a href="/article/1834750503045656576.htm" title="webpack 配置" target="_blank">webpack 配置</a> weixin_44101835 <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件</div> </li> <li><a href="/article/1834746218534760448.htm" title="概率图模型（PGM）综述" target="_blank">概率图模型（PGM）综述</a> 医学影像处理 <a class="tag" taget="_blank" href="/search/%E6%A6%82%E7%8E%87%E5%9B%BE%E6%A8%A1%E5%9E%8B/1.htm">概率图模型</a><a class="tag" taget="_blank" href="/search/%E6%A6%82%E7%8E%87%E5%9B%BE%E6%A8%A1%E5%9E%8B/1.htm">概率图模型</a><a class="tag" taget="_blank" href="/search/%E7%BB%BC%E8%BF%B0/1.htm">综述</a> <div>RefLink:http://www.sigvc.org/bbs/thread-728-1-1.htmlGraphicalModel的基本类型基本的GraphicalModel可以大致分为两个类别：贝叶斯网络(BayesianNetwork)和马尔可夫随机场(MarkovRandomField)。它们的主要区别在于采用不同类型的图来表达变量之间的关系：贝叶斯网络采用有向无环图(DirectedAc</div> </li> <li><a href="/article/1834732388610043904.htm" title="redis,codis,云redis" target="_blank">redis,codis,云redis</a> shuff1e <div>redis的分布式解决方式--codis（转）https://www.cnblogs.com/softidea/p/5365640.htmlhttps://help.aliyun.com/document_detail/57797.html?spm=5176.173352.925244.2.bF70Gb</div> </li> <li><a href="/article/1834732091183558656.htm" title="甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态" target="_blank">甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态</a> 界面开发小八哥 <a class="tag" taget="_blank" href="/search/%E7%94%98%E7%89%B9%E5%9B%BE/1.htm">甘特图</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/DHTMLX/1.htm">DHTMLX</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>DHTMLXGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。在现代Web应用程序中，在页面重新加载之间保持UI元素的状态对于流畅的用户体验至关重要。在本教程中我们将知道您完成DHTMLXGantt中持久UI的简单实现，重点关注一小部分特性——即任务的展开或折叠分支，以及选定的甘特图缩放级别。您将了解如何将这些设置存储在浏</div> </li> <li><a href="/article/1834728814836543488.htm" title="webpack - 五大核心概念和基本配置（打包一个简单HTML页面）" target="_blank">webpack - 五大核心概念和基本配置（打包一个简单HTML页面）</a> 怕冷的火焰（~杰） <a class="tag" taget="_blank" href="/search/nodejs%E5%92%8Cwebpack/1.htm">nodejs和webpack</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>//五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development</div> </li> <li><a href="/article/1834725031565946880.htm" title="asp.net core的入门教学" target="_blank">asp.net core的入门教学</a> 21软件外包1班-庞兴南 <a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>什么是ASP.NETCoreasp.netcore是一个基于HTML和ASP的动态Web开发框架，主要用于web应用程序的开发。它是一个轻量级框架，使用HTML、ASP、CSS、JavaScript等技术。它易于使用和部署，可以快速构建web应用程序。asp.netcore提供了丰富的功能，包括模板引擎、文件解析、数据处理和用户管理等。本文将介绍asp.netcore的主要功能和特点，并提供使用方</div> </li> <li><a href="/article/1834721624809631744.htm" title="C#中Invoke的用法（）" target="_blank">C#中Invoke的用法（）</a> 世界太过浮夸 <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>转自：http://www.cnblogs.com/lsgsanxiao/p/5523282.htmlinvoke和begininvoke区别一直对invoke和begininvoke的使用和概念比较混乱，这两天看了些资料，对这两个的用法和原理有了些新的认识和理解。首先说下，invoke和begininvoke的使用有两种情况：control中的invoke、begininvoke。delegra</div> </li> <li><a href="/article/1834714933959421952.htm" title="[Unity优化] Unity3D如何减少安装包大小" target="_blank">[Unity优化] Unity3D如何减少安装包大小</a> hcq666 <div>译官方文档：http://docs.unity3d.com/Manual/ReducingFilesize.htmlPDF文档：http://www.rukawa.cn/Uploads/Attachment/ReducingFilesize/ReducingFilesize.pdf原文地址：http://www.rukawa.cn/index.php?s=/home/article/detail/</div> </li> <li><a href="/article/1834678646929977344.htm" title="Jmeter性能测试六--Jmeter录制+服务器监控" target="_blank">Jmeter性能测试六--Jmeter录制+服务器监控</a> 鱼排也爱小白菜 <a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a> <div>一、排除模式填写测试计划右键添加-->非测试原件-->HTTP代理服务器端口设置：不能填本机已存在的端口排除模式填写：(?i).*\.(bmp|css|js|gif|ico|jpe?g|png|swf|woff|woff2|html|htm).*点击启动录制结果二、服务器脚本运行1.上传脚本包后需要先解压unzipServerAgent-2.2.3.zipcdServerAgent-2.2.3.z</div> </li> <li><a href="/article/1834663314815283200.htm" title="【前端】Vue服务器端渲染之Nuxt" target="_blank">【前端】Vue服务器端渲染之Nuxt</a> irenb <div>1.什么是服务器端渲染后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户浏览。总结：数据填充在服务器端进行，就是服务器端渲染什么是客户端渲染数据由浏览器通过ajax动态获得，再通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染。总结：数据填充在客户端进行，就是客户端渲染服务器端渲染vs客户端渲染服务器端渲染需要消</div> </li> <li><a href="/article/1834658223857168384.htm" title="flutter页面布局HTML,flutter笔记7：flutter页面布局基础，看完这篇就可以用flutter写APP了..." target="_blank">flutter页面布局HTML,flutter笔记7：flutter页面布局基础，看完这篇就可以用flutter写APP了...</a> 李致遠 <a class="tag" taget="_blank" href="/search/flutter%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80HTML/1.htm">flutter页面布局HTML</a> <div>不知不觉已经到了第7篇，然而很多萌新玩家可能还是不知道如何堆砌控件，像用CSS一样搭出漂亮的APP界面，我也一样，红红火火恍恍惚惚，直到今天含泪读完Flutter布局基础，仿佛打开了一个全新的世界。基本概念在flutter中，一切皆控件！一切皆控件！一切皆控件！牢牢记住这个概念。Text是控件，Image是控件，Icon是控件，布局脚手架也Scaffold也是控件，甚至整个APP也是控件。用户自定</div> </li> <li><a href="/article/1834652293170032640.htm" title="Python浏览器指纹反爬详解（包含案例）——blog10" target="_blank">Python浏览器指纹反爬详解（包含案例）——blog10</a> 总得跑一个 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a> <div>目录概述案例实操目标分析补充开始由此可以得到方法一：直接从api拿数据方法二：伪装selenium.webdriver测试测试用HTML如下：爬取失败——分析与思考改进最后附上使用selenium破解目标网站浏览器指纹的完整代码：觉得有帮助的小伙伴还请点个关注概述浏览器指纹是由浏览器类型、版本号、操作系统、屏幕分辨率、时区、插件、字体等信息组合而成的唯一标识，可以用于区分不同的用户。通过比对请求中</div> </li> <li><a href="/article/1834651742558580736.htm" title="Python 爬虫基础教程——BeautifulSoup抓取入门（2）" target="_blank">Python 爬虫基础教程——BeautifulSoup抓取入门（2）</a> 那个百分十先生 <div>大家好，上篇推文介绍了BeautifulSoup抓取的一些基础用法，本篇内容主要是介绍BeautifulSoup模块的文档树使用以及实例。一、遍历文档树直接看代码吧frombs4importBeautifulSouphtml='python知识学堂Python知识学堂欢迎您'#上面是随便写的一个页面代码soup=BeautifulSoup(html,'lxml')#print(soup.prett</div> </li> <li><a href="/article/1834645992071327744.htm" title="web前端达到什么水平，才能找到工作？" target="_blank">web前端达到什么水平，才能找到工作？</a> cj瑾瑜 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</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><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义</div> </li> <li><a href="/article/1834593872748048384.htm" title="08注释.html" target="_blank">08注释.html</a> 星chen <div>08注释.html08注释.html//注释/***注释:是解释代码的含义,给其他的程序员看的*注释的方式:*1.单行注释//*2.多行注释/★★/***///单行注释:一般用在一行代码的上面/*多行注释一般是用在函数或者是一段代码的上面*///代码中如果没有注释,不规范,天天会被骂//注释后的代码不执行了/***解释:这个函数的意义是什么****/functionf1(){console.log</div> </li> <li><a href="/article/1834581838614589440.htm" title="selenium 安装报错问题" target="_blank">selenium 安装报错问题</a> weixin_30266829 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>本机装了py2和py3py2安装selenium总是报错找whl文件也没找到后尝试py3安装selenium成功了/(ఠൠఠ)ﾉ很烦/后来因py3的pip下载了selenium-3.11.0-py2.py3-none-any.whl所以py2的pip也找到了该whl文件直接安装成功/§(*￣▽￣*)§转载于:https://www.cnblogs.com/imaye/p/8794388.html</div> </li> <li><a href="/article/1834580895869267968.htm" title="小猿圈python学习-内置函数" target="_blank">小猿圈python学习-内置函数</a> 小猿圈IT教育 <div>Python的len为什么你可以直接用？肯定是解释器启动时就定义好了内置参数详解https://docs.python.org/3/library/functions.html?highlight=built#ascii每个函数的作用我都帮你标好了abs#求绝对值all#ReturnTrueifbool(x)isTrueforallvaluesxintheiterable.Iftheiterabl</div> </li> <li><a href="/article/1834575158040424448.htm" title="macos+vmware-fusion安装vmware-tools并使用" target="_blank">macos+vmware-fusion安装vmware-tools并使用</a> 越甲的bode图 <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%B8%B8/1.htm">日常</a> <div>参考这个链接：https://www.cnblogs.com/dragon-aslan/p/7209857.html亲测完美运行</div> </li> <li><a href="/article/1834541256668180480.htm" title="【React】MobX" target="_blank">【React】MobX</a> 小秀_heo <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/%E5%8F%8A%E5%85%B6%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/1.htm">及其周边生态</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>概述mobx实现像vue一样声明式的修改数据，我们在项目中直接使用mobx+mobx-react。mobxjs/mobx-react:ReactbindingsforMobX(github.com)https://zh.mobx.js.org/the-gist-of-mobx.htmlstate数据action动作derivation派生computedobserver监听变化，包裹的React组</div> </li> <li><a href="/article/1834528271094607872.htm" title="RAG与LLM原理及实践(16)---RAG 前端技术Flask-socketIO" target="_blank">RAG与LLM原理及实践(16)---RAG 前端技术Flask-socketIO</a> PhoenixAI8 <a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a><a class="tag" taget="_blank" href="/search/Milvus/1.htm">Milvus</a><a class="tag" taget="_blank" href="/search/Chroma/1.htm">Chroma</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%8F%8A%E5%AE%9E%E8%B7%B5/1.htm">源码及实践</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/socketio/1.htm">socketio</a><a class="tag" taget="_blank" href="/search/RAG/1.htm">RAG</a> <div>目录背景技术理念RAG结合点实时数据更新与推送实时查询与响应安装使用完整案例说明后端python代码代码解释前端html代码JS代码代码解释总结背景构建RAG系统或别的系统时，如果后端采用的全Python，或者说是以python为主的系统，是很常见的一个选择，因为毕竟python对LLM，图片，乃至其他video等resource的model都有较完善的支撑，为了快速开发出原型，甚至之后的商用，往</div> </li> <li><a href="/article/1834514028500709376.htm" title="2024网络安全学习路线非常详细推荐学习" target="_blank">2024网络安全学习路线非常详细推荐学习</a> 白帽黑客-晨哥 <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</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/php/1.htm">php</a> <div>关键词：网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线首先咱们聊聊，学习网络安全方向通常会有哪些问题1、打基础时间太长学基础花费很长时间，光语言都有几门，有些人会倒在学习linux系统及命令的路上，更多的人会倒在学习语言上；2、知识点掌握程度不清楚对于网络安全基础内容，很多人不清楚需要学到什么程度，囫囵吞枣，导致在基础上花费太多时间；看到很多小伙伴，买了HTML，PHP，数据库，计算机</div> </li> <li><a href="/article/1834507981673295872.htm" title="Android WebView常见问题及解决方案汇总" target="_blank">Android WebView常见问题及解决方案汇总</a> zhengxiuchen86 <a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%86%B3/1.htm">解决</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">解决方案</a><a class="tag" taget="_blank" href="/search/webview/1.htm">webview</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a> <div>AndroidWebView常见问题及解决方案汇总参考文章：（1）AndroidWebView常见问题及解决方案汇总（2）http://www.cnblogs.com/olartan/p/5713013.html备忘一下。</div> </li> <li><a href="/article/1834506092906901504.htm" title="vue如何获取一个元素的基本信息" target="_blank">vue如何获取一个元素的基本信息</a> LJ小番茄 <a class="tag" taget="_blank" href="/search/%E9%9A%8F%E4%BE%BF%E5%86%99%E7%82%B9/1.htm">随便写点</a><a class="tag" taget="_blank" href="/search/Vue%E7%9A%84%E9%82%A3%E4%BA%9B%E4%B8%89%E4%B8%A4%E4%BA%8B%E5%84%BF%7E/1.htm">Vue的那些三两事儿~</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>PS：代码全部使用Vue3和setup语法糖来写的首先准备HTML结构点击该元素的相关信息获取Vue部分import{onMounted,ref}from"vue";constmyElement=ref(null);constonClick=()=>{console.log('myElement.value.clientWidth='+myElement.value.clientWidth);co</div> </li> <li><a href="/article/1834504328082190336.htm" title="HTML5（六）canvas 矩形、路径、画板功能" target="_blank">HTML5（六）canvas 矩形、路径、画板功能</a> 祝名 <div>一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功</div> </li> <li><a href="/article/1834503950427058176.htm" title="【前端】vue+html+js 实现table表格展示，以及分页按钮添加" target="_blank">【前端】vue+html+js 实现table表格展示，以及分页按钮添加</a> Loong_DQX <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/vue.js/1.htm">vue.js</a> <div>一.问题描述数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。二.代码写法思路：按照上述图示思路，需要有两个数据列表，一个存储的是所有的列表数据，一个存储的是展示的数据列表，程序开始后先选择数据头部的几条数据。因此也会需要一个当前第几页的参数。2.1代码展示html部分v-for展示列表，以及两个按钮对当前页面进行选择。{{item.name}}上一页{{currentPage}</div> </li> <li><a href="/article/1834503819506053120.htm" title="SpringBoot中资源可以默认被访问的路径" target="_blank">SpringBoot中资源可以默认被访问的路径</a> 76e <div>场景：SpringBoot项目中新建一个html文件，那么这个文件放在哪些路径下时可以无需配置，默认就能被访问？IDEA中新建SpringBoot项目，找到SpringBoot源码文件ResourceProperties.class源码文件ResourceProperties.class重点关注这行代码：privatestaticfinalString[]CLASSPATH_RESOURCE_LO</div> </li> <li><a href="/article/1834500795844882432.htm" title="遇到的问题及解决方法汇总" target="_blank">遇到的问题及解决方法汇总</a> w36680130 <a class="tag" taget="_blank" href="/search/%5CN/1.htm">\N</a> <div>遇到的问题及解决方法汇总参考文章：（1）遇到的问题及解决方法汇总（2）https://www.cnblogs.com/hd-test/p/12160407.html（3）https://www.codeprj.com/blog/b98d971.html备忘一下。</div> </li> <li><a href="/article/1834490233614331904.htm" title="IE兼容" target="_blank">IE兼容</a> 地主家也没余粮叻 <div>（1）只在IE下起作用的条件注释，例：只在IE下生效这段文字只在IE浏览器显示只在IE6下生效这段文字只在IE6浏览器显示只在IE6以上版本生效这段文字只在IE6以上(包括)版本IE浏览器显示只在IE8上不生效这段文字在非IE8浏览器显示非IE浏览器生效这段文字只在非IE浏览器显示*html*前缀只对IE6生效*+html*+前缀只对IE7生效@mediascreen\9{...}只对IE6/7生</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>